How do I set up Gated Pages within a Shopify OS1 theme?

Follow these steps to create your gated page template:

1. Access your store’s admin and navigate to “Themes” under the “Online Store” Sales channels.
2. Launch the options menu of the backup theme previously created and select “Edit code”.
3. In the code view sidebar, locate and expand the “Snippets” directory.
4. At the top of the list of Liquid files, choose “Add a new snippet”.
5. Create a new snippet titled “fanpass-gated-page”.
6. Paste the code block below into the fanpass-gated-page.liquid snippet just created and save the file.

{% comment %}

  Fan Pass Gated Page

{% endcomment %}

{% comment %} Fan Pass Gated Page Labels {% endcomment %}

{%- liquid

  assign heading = 'Fan Pass holder exclusive content.'

  assign description = 'To unlock this page, connect your Fan Pass.'

  assign success_message = 'Your Fan Pass got you access to this content'

  assign link_text = "Don't have a Fan Pass?"

  assign link_label = 'Get it here'

-%}

{%- liquid

  assign gates = page.metafields.cirkayFanPassApp.fanPassUnlock.value

-%}

{% if gates %}

  <script id="fan-pass-gated-page">

    window.cirkayFanPassGated = {

       shop: {

          id: {{ shop.id }},

          domain: "{{ shop.domain }}",

          permanentDomain: "{{ shop.permanent_domain }}"

       },

       page: {

          id: {{ page.id }},

          title: "{{ page.title }}",

          handle: "{{ page.handle }}"

       },

       gates: [

          {% for gate in gates %}

             {% assign fanPassProductKey = "fanPass-" | append: gate %}

          {

             {% if shop.metafields.cirkayFanPassApp[fanPassProductKey] %}

                product: {

                   title: "{{ shop.metafields.cirkayFanPassApp[fanPassProductKey].value.title }}",

                   url: "{{ shop.metafields.cirkayFanPassApp[fanPassProductKey].value.url }}"

                },

             {% endif %}

             fanPassId: {{ gate }}

          }

          {% endfor %}

       ]

    }

  </script>

  <style>

    fanpass-unlockpage {

      margin: 4rem auto 0;

    }

  </style>

  <div class="fanpass-page">

    <div data-page-content>

      <div>

        <h1 id="fanpassTitle" class="main-page-title page-title h0 title">

          {{ page.title }}

        </h1>

      </div>

      <div id="fanpassLocked"></div>

    </div>

    <div class="fanpass-app">

      <fanpass-unlockpage

        heading="{{ heading }}"

        description="{{ description }}"

        linkLabel="{{ link_label }}"

        linkText="{{ link_text }}"

        successMessage="{{ success_message }}"

        border

      >

      </fanpass-unlockpage>

<script src="https://dihg6nd5w39nh.cloudfront.net/production/assets/fanPassPageGated.js"></script>

    </div>

  </div>

{% endif %}

{% comment %}

  END Fan Pass Gated Page

{% endcomment %}

7. From the theme code editor, navigate to the “Templates” directory.
8. At the top of the list of Liquid files, choose “Add a new template”.
9. Choose ‘page’ and ‘liquid’ for “Template type”, title the file “gated-page” and select “Done”.
10. Remove the block of code from the template that displays the page title and the main page content.
    For example, the code blocks to remove could look like this:

<div class="section-header text-center">

  <h1>{{ page.title }}</h1>

</div>

<div class="rte">

   {{ page.content }}

</div>

11. In place of the removed blocks, insert the following code block:

{%- comment -%}

    Fan Pass Gated Page

{%- endcomment -%}

{% include 'fanpass-gated-page' %}

12. Save the template.
13. Return to the “Themes” section and open the theme editor for the backup theme by selecting the “Customize” button.
14. Open the theme’s Templates list and go to the “gated-page” template under Pages to review the operation and display of the “Fan Pass Connect” block on your page.
15. Finally, you will need to assign this template to the pages you intend to gate within the Pages editor and then configure your Fan Pass within the app to apply the gate to the page.