How to Hide the Product Samples Widget on Specific Shopify Pages

Note:
You’ll need some familiarity with CSS and Shopify Liquid for these instructions. If you’re not comfortable editing code, please share this guide with your developer, or reach out to us for help.

Steps

• 1. Go to your Shopify Admin:

  • Navigate to Online Store > Themes.

• 2. Choose Your Theme:

  • Find the theme you want to edit and click Customize or Actions > Edit code.

• 3. Open Your Layout File:

  • Usually, this file is named theme.liquid.

• 4. Add the CSS Snippet:

  • Insert the following code just before the closing </body> tag.

Examples

1. Hide the widget on the homepage:

{%- if template contains 'index' -%}
  <style>
    [data-samples-widget] {
      display: none;
    }
  </style>
{%- endif -%}

2. Hide the widget on all standard pages:

{%- if template contains 'page' -%}
  <style>
    [data-samples-widget] {
      display: none;
    }
  </style>
{%- endif -%}

3. Hide the widget on a specific page by handle:

{%- if template contains 'page' and page.handle == 'handle-of-page-you-want-to-hide-widget' -%}
  <style>
    [data-samples-widget] {
      display: none;
    }
  </style>
{%- endif -%}

Replace handle-of-page-you-want-to-hide-widget with your actual page handle.

4. Hide the widget on other page types (collections, products, blogs, articles):

• For collections:

  • Change the condition to {% if template contains 'collection' %}

• For products:

  • Use {% if template contains 'product' %}

• For blogs or articles:

  • Adjust accordingly, e.g. {% if template contains 'blog' %}

You can combine these conditions and add specific logic as needed for your store structure.

If you need more advanced control, want to target multiple page types, or have any questions, feel free to contact our support team!