Add Country-Based Visibility Controls To Any Shopify Section

Author - Moz

Why Show Shopify Content By Customer Country?

Not every visitor should see the same content. A Canadian customer may need different shipping information, promotions, pricing messages, or announcements than a customer shopping from the United States. Shopify Markets already supports market-specific theme customizations, allowing merchants to create different content experiences for different countries.

However, those customizations are managed separately inside the Theme Editor. If you want a reusable country visibility setting directly inside a section, this Liquid customization adds a simple "Show This Section For" option that can be controlled from section settings. This gives merchants more flexibility without creating duplicate sections, templates, or additional theme customizations.

⚠️ Before You Start

  • Duplicate your theme before making changes
  • Basic Shopify Liquid knowledge is recommended
  • This works with Shopify Markets and Shopify 2.0 themes
  • No apps, CSS, or JavaScript required

Step 1: Add Market Detection At The Top Of The Section

From Shopify Admin:

  • Go to Online Store → Themes → Edit code
  • Open the section you want to control by market
  • Find the beginning of the section file
  • Paste the following code above the section content
Copy

{% assign market = localization.market.handle %}

{% assign show_section = false %}

{% case section.settings.market_visibility %}
  {% when 'all' %}
    {% assign show_section = true %}

  {% when 'ca' %}
    {% if market contains 'canada' %}
      {% assign show_section = true %}
    {% endif %}

  {% when 'us' %}
    {% if market contains 'us' or market contains 'united' %}
      {% assign show_section = true %}
    {% endif %}
{% endcase %}

{% if show_section %}

This code checks the active Shopify Market and determines whether the section should be displayed.

Step 2: Close The Visibility Condition Before The Schema

Scroll to the bottom of the same section file.

Find:


{% schema %}

Directly above it, add:


{% endif %}

Your ending should look similar to:


</section>

{% endif %}

{% schema %}

This ensures the section only renders when the selected market matches the visibility setting.

Step 3: Add The Theme Editor Setting

Inside the same section file, locate:


"settings": [

Immediately after that line, paste:

Copy

{
  "type": "select",
  "id": "market_visibility",
  "label": "Show This Section For",
  "options": [
    {
      "value": "all",
      "label": "All Markets"
    },
    {
      "value": "ca",
      "label": "Canada Only"
    },
    {
      "value": "us",
      "label": "USA Only"
    }
  ],
  "default": "all"
},

Save the file.

You will now see a new Theme Editor option:

  • All Markets
  • Canada Only
  • USA Only

Step 4: Configure The Section In Theme Editor

After saving:

  • Go to Online Store → Themes → Customize
  • Open the modified section
  • Find Show This Section For
  • Select the market visibility option you want

    Click Save when finished.

    The section never renders for excluded markets, making this approach faster and cleaner than client-side JavaScript solutions.

    How Is This Different From Shopify Markets Customizations?

    Shopify Markets already includes native market-specific theme customizations. Using the market selector in the Theme Editor, merchants can create separate sections and blocks for different markets without writing code.

    This Liquid customization serves a different purpose. Instead of creating separate market-specific content, it adds a reusable visibility control directly inside a section's settings. That can be useful when you want the same section available across multiple templates while controlling who sees it from a single setting.

    If your store already relies heavily on Shopify Markets customizations, you may not need this solution. However, merchants looking for section-level visibility controls often find it easier to manage than maintaining multiple market-specific versions of the same content.

    Real-World Insight

    Many Shopify merchants use Shopify Markets to create country-specific experiences for visitors in Canada, the United States, Europe, and other regions. While Shopify's native market customizations work well, some stores prefer adding visibility controls directly inside section settings so the same section can be reused across multiple markets without creating separate market-specific versions. This approach keeps theme management more flexible while still delivering localized content.

    Final Thoughts

    Shopify Markets already provides powerful localization tools, including market-specific theme customizations. For merchants who want additional flexibility directly within individual sections, this Liquid-based visibility setting offers a simple way to control content by market. It's lightweight, easy to maintain, and works entirely through Shopify Liquid without requiring apps or JavaScript.

    Back to blog