design-packs.comView on Shopify App Store

Using Context Blocks in Shopify: Hide/Show Sections Based on Context

The Liquid/HTML block allows you to add Liquid code directly in the theme editor, without editing theme files. Here’s how to use context snippets to hide/show sections depending on the context.

Step-by-Step Instructions

  1. Open the Theme Editor:

    • Go to your Shopify admin → Online Store → Themes.

    • Click “Customize” on your current theme.

  2. Navigate to the Section:

    • Find the section where you want to conditionally show/hide content.

  3. Add a Custom Liquid Block:

    • Click “Add block” within the section.

    • Choose “Liquid/HTML”. It can sometimes be called Liquid, Custom Liquid, etc

  4. Paste the Snippet:

    • Copy the relevant snippet from this guide.

    • Paste it into the Liquid/HTML block.

  5. Update Variables:

    • Change the variables at the top of the snippet (e.g., country codes, dates, param names) to fit your use case.

  6. Save and Preview:

    • Click “Save”.

    • Use the theme preview to test the behavior.

🌐 Localization Context

You might use the localization context when you want to show a section only to visitors from specific countries. For example, if you’re running a special promotion just for Canadian customers, you can use this context to display a banner or announcement only to people browsing from Canada. This helps you tailor your store’s content to different regions, making your messaging more relevant and personal for each audience.

{% if request.design_mode %}
Country: {{ localization.country.iso_code }}<br>
Language: {{ localization.language.iso_code }}

{% for language in localization.available_languages %}
  <p>{{ language.iso_code }} - {{ language.name }}</p>
{% endfor %}
{% endif %}

{%- assign market_names = 'CA' | split: ',' -%}

{%- assign hide_section = true -%}
  {%- for market_name in market_names -%}
    {%- assign market_name_strip = market_name | strip -%}
    {%- if market_name_strip == localization.country.iso_code -%}
      {%- assign hide_section = false -%}
    {%- endif -%}
  {%- endfor -%}
  {%- if hide_section == true -%}
    <style>
      #shopify-section-{{ section.id }} {
        display: none;
      }
    </style>
  {%- endif -%}

How to Customize:

  • Change 'CA' in market_names to a comma-separated list (e.g., 'US,CA,GB').

  • The section will only show for visitors from those countries.

🌎 Currency Context

The currency context is perfect for stores that support multiple currencies and want to display certain sections only when a shopper is using a specific currency. For instance, you could show a free shipping offer or a special product bundle only to customers shopping in USD or EUR. This ensures that your offers and information are always accurate and applicable to the shopper’s current currency, avoiding confusion and improving the shopping experience.

<!-- Separate country currency with commas. eg. 'USD,AUD,CAD' -->
{%- assign country_codes = 'CAD' | split: ',' -%}

{%- assign hide_section = true -%}
  {%- for country_code in country_codes -%}
    {%- assign country_code_strip = country_code | strip -%}
    {%- if country_code_strip == cart.currency.iso_code -%}
      {%- assign hide_section = false -%}
    {%- endif -%}
  {%- endfor -%}
  {%- if hide_section == true -%}
    <style>
      #shopify-section-{{ section.id }} {
        display: none;
      }
    </style>
  {%- endif -%}

How to Customize:

  • Change 'CAD' in country_codes to a comma-separated list (e.g., 'USD,EUR').

  • The section will only show for carts using those currencies.

⏰ Schedule Context

The schedule context is great for time-sensitive content, like flash sales, holiday promotions, or event countdowns. You can set a section to appear only during a certain date range—say, a Black Friday sale banner that automatically shows up at midnight and disappears when the sale ends. This saves you from having to manually update your store at odd hours and ensures your customers always see the right information at the right time.

{% assign start_time = 'January 4 2025' %}
{% assign end_time = 'June 24 2025' %}
{% assign time_zone = '-05:00' %}

{% capture start_time %}{{ start_time }} {{ time_zone | default: '-04:00' }}{% endcapture %}
{%- capture end_time -%}{{ end_time }} {{ time_zone | default: '-04:00' }}{%- endcapture -%}
{% capture start_time_unix %}{{ start_time | date: '%s' }}{% endcapture %}
{% capture end_time_unix %}{{ end_time | date: '%s' }}{% endcapture %}
{% capture now_unix %}{{ 'now' | date: '%s' }}{% endcapture %}
{% if end_time_unix > now_unix and now_unix >= start_time_unix %}
  {%- assign hide_section = false -%}
{% else %}
  {%- assign hide_section = true -%}
{% endif %}
{%- if hide_section == true -%}
    <style>
      #shopify-section-{{ section.id }} {
        display: none;
      }
    </style>
  {%- endif -%}

How to Customize:

  • Set start_time and end_time to your desired dates.

  • Set time_zone as needed (e.g., '+00:00' for UTC).

🔗 URL Params Context

Using the URL params context is handy when you want to show or hide sections based on special links, such as those used in email campaigns, influencer promotions, or affiliate tracking. For example, you could create a secret sale page that only appears when someone visits your site with a specific URL parameter, like ?ref=summer. This lets you create personalized experiences or exclusive offers for certain audiences without changing your main store layout.

{% assign param_name = 'UTM' %}
{% assign param_value = '411' %}
{% assign param_action = 'show' %}

{%- assign default_display = '' -%}
{%- if param_action == 'show' -%}
  {%- assign default_display = 'none' -%}
{%- endif -%}

<style>
  #shopify-section-{{ section.id }} {
    display: {{ default_display }};
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const params = new URLSearchParams(window.location.search);
    const expectedName = {{ param_name | json }};
    const expectedValue = {{ param_value | json }};
    const action = {{ param_action | json }}; /* 'show' or 'hide' */
    const sectionEl = document.getElementById("shopify-section-{{ section.id }}");

    if (!sectionEl) return;

    const matches = params.get(expectedName) === expectedValue;

    let shouldHide;

    if (action === "show") {
      shouldHide = !matches;
    } else if (action === "hide") {
      shouldHide = matches;
    } else {
      shouldHide = false;
    }

    sectionEl.style.display = shouldHide ? "none" : "block";
  });
</script>

How to Customize:

  • Set param_name to the query parameter you want to check (e.g., 'ref').

  • Set param_value to the value you want to match (e.g., 'summer').

  • Set param_action to 'show' (show only if param matches) or 'hide' (hide if param matches).

👤 Logged-in Context

The logged-in context helps you customize your store for returning customers versus new visitors. For example, you might want to show a “Welcome back!” message, exclusive member discounts, or account management options only to logged-in customers, while showing a sign-up prompt or first-time buyer offer to those who aren’t logged in. This makes your store feel more personal and encourages customer engagement and loyalty.

<!-- 'show_on_logout' OR 'show_on_login' OR 'show_always' -->
{% assign visibility = 'show_on_login' %}
<!----------------------------->

{% if customer %}
  {%- assign logged_in = true -%}
{% else %}
  {%- assign logged_in = false -%}
{% endif %}

{% comment %} Accounts: Determine if section should be visible based on settings {% endcomment %}
{% if visibility == 'show_on_login' and logged_in %}
  {%- assign hide_section = false -%}
{% elsif visibility == 'show_on_logout' and logged_in == false %}
  {%- assign hide_section = false -%}
{% elsif visibility == 'show_always' %}
  {%- assign hide_section = false -%}
{% else %}
  {%- assign hide_section = true -%}
{% endif %}
{%- if hide_section == true -%}
    <style>
      #shopify-section-{{ section.id }} {
        display: none;
      }
    </style>
  {%- endif -%}

How to Customize:

  • Set visibility to:

    • 'show_on_login' to show only to logged-in customers

    • 'show_on_logout' to show only to logged-out visitors

    • 'show_always' to always show

Tips

  • These snippets are for hiding/showing entire sections.

  • Update the logic and variables at the top of each snippet for your specific use case.

  • Test in the theme editor and in preview mode to ensure the section appears/disappears as expected.

Troubleshooting

  • If a section does not appear as expected, double-check your variable values and ensure there are no typos.

  • For date/time logic, ensure your timezone and date formats are correct.

  • For URL parameter logic, remember that parameter names are case-sensitive.

  • Not all sections include the Liquid/HTML block. Please reach out to support if you need this functionality added to a Design Pack section without a Liquid block.

PreviousHow to Embed a Section Inside Your Article ContentNextFor Designers

Last updated