How do I create a Fan Pass info page on a Shopify OS1 theme?

You can create a Fan Pass info page template that contains a “Fan Pass Connect” block to allow customers to easily connect their Fan Pass.

Follow these steps to set up this 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-connect”.
6. Paste the code block below into the “fanpass-connect.liquid” snippet just created and save the file.

{% comment %}

Fan Pass Connect

{% endcomment %}

{% comment %} Fan Pass Connect Labels {% endcomment %}

{%- liquid

assign heading = 'Fan Pass'

assign description = 'Connect and view your Fan Pass'

assign connected_heading = 'Fan Pass'

assign valid_message = 'Your Fan Pass is connected'

assign invalid_message = "You don't have a valid pass."

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

assign link_label = 'Get it here'

-%}

<div data-fan-pass-container>

<script id="fan-pass-wallet">

    window.cirkayFanPass = {

    shop: {

        id: {{ shop.id }},

        domain: "{{ shop.domain }}"

    },

    fanPassDetails: {

    {% for fanPassId in shop.metafields.cirkayFanPassApp.fanPasses.value %}

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

        {{ fanPassId }}: {

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

                product: {

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

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

                },

            {% endif %}

            id: {{ fanPassId }}

        }

    {% endfor %}

    },

    fanPasses: {% if shop.metafields.cirkayFanPassApp.fanPasses %}{{ shop.metafields.cirkayFanPassApp.fanPasses.value | json }}{% else %}[]{% endif %}

    }

</script>

<style>

    magic-wallet {

    display: block;

    margin: 2rem 0;

    }

</style>

<div class="fanpass-app">

    <magic-wallet

    heading="{{ heading }}"

    description="{{ description }}"

    headingConnected="{{ connected_heading }}"

    descriptionValid="{{ valid_message }}"

    descriptionInvalid="{{ invalid_message }}"

    linkLabel="{{ link_label }}"

    linkText="{{ link_text }}"

    border

    >

    </magic-wallet>

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

</div>

</div>

{% comment %}

END Fan Pass Connect

{% 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 “fan-pass-connect” and select “Done”.
10. Insert the following code block into a suitable place within your page template. This is usually placed at the top or bottom of the section’s or template’s main content area.

{%- comment -%}

    Fan Pass Connect

{%- endcomment -%}

{% include 'fanpass-connect' %}

11. Save the template.
12. Return to the “Themes” section and open the theme editor for the backup theme by selecting the “Customize” button.
13. Open the theme’s Templates list and go to the “fan-pass-connect” template under Pages to review the operation and display of the “Fan Pass Connect” block on your page.
14. Finally, go to “Pages” within the Online Store sales channel and assign this template to the relevant page.