How to show or hide content based on Loyalty tier in Shopify

This guide includes steps that require editing Shopify’s Liquid templates, which involves some coding. While you're free to adapt the example code to suit your needs, please note that Skio does not provide support for custom implementations.

How it works

Skio automatically tags customers with their current loyalty tier using this format:
SKIO_LOYALTY: {tierName}

You can use this tag to gate content or entire pages in Shopify. For example, show VIP-only pages to top-tier customers and hide them from others. With this functionality, you can offer gated content like:

• VIP-only videos, drops, or announcements.

• Member-only product or promo pages.

• Tier-based rewards pages.

Skio keeps this synced in Shopify automatically.

How do I set up gated content based on Loyalty tiers?

Step 1: Add a new layout

1. In your Shopify Admin, go to Sales Channels > Online Store > Themes.

2. Find the theme you want to edit and click on the three dots (“...”) > Edit code.

3. Under the Layout folder, select Add a new layout.

4. For Duplicate File, select theme.liquid.

5. Name the new file something like theme.gated, then click Create layout.

Step 2: Create a gated layout using customer loyalty tags

1. Copy all the code from theme.liquid and paste it into your new file theme.gated.liquid.

2. Search your theme.gated.liquid file for the {{ content_for_layout }} block. Wrap it with a conditional check for the customer’s loyalty tag.

Example: Show content only to Gold Tier customers

{% if request.design_mode %}
  {{ content_for_layout }}
{% elsif customer and customer.tags contains 'SKIO_LOYALTY: Gold' %}
  {{ content_for_layout }}
{% else %}
  <div style="padding:40px;text-align:center;">
    <h2>This page is exclusive to Gold Tier customers.</h2>
    <p>Log in or check your loyalty status to gain access.</p>
  </div>
{% endif %}

You can add more elsif blocks for different tiers (like Silver or VIP), or customize the fallback message to fit your brand. To allow multiple tiers on a single page, add an or in the conditional check with the corresponding tags.

{% if customer.tags contains 'SKIO_LOYALTY: Gold' or customer.tags contains 'SKIO_LOYALTY: Silver' %}
{{ content_for_layout }}
{% else %}
<div>Sorry, this content is only available to loyalty members.</div>
{% endif %}

Step 3: Create a new gated page template

1. In the Templates folder, click Add a new template.

2. Choose Page, select JSON, and name it gated.

3. Replace the default content with this structure:

{
  "layout": "theme.gated",
  "sections": {
    "main": {
      "type": "main-page",
      "settings": {
        "padding_top": 28,
        "padding_bottom": 28
      }
    }
  },
  "order": ["main"]
}

This tells Shopify to use your new theme.gated.liquid layout whenever this page template is applied.

Step 4: Create a gated page

1. In your Shopify Admin, go to Sales Channels > Online Store > Pages.

2. Click Add page.

3. Under Template, select your new template: gated.

4. Add the content you want customers to see on this gated page.

Additional resources