> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mention-me.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Add a Referral Landing Page in Shopify

> Create a Mention Me referral landing page in Shopify, test it with the Demo tag, then switch to Live and launch in Mention Me.

A landing page lets customers engage with your referral programme without requiring a purchase.

<Note>
  Using the Classic dashboard? Follow the [Classic landing page guide](/knowledge/shopify/additional-tags/landing-page) instead.
</Note>

<Frame caption="Referral landing page example">
  <img src="https://mintcdn.com/mentionme/GjiDi6ZwHP27Pu0w/images/knowledge/shopify/11432246692893.jpg?fit=max&auto=format&n=GjiDi6ZwHP27Pu0w&q=85&s=2d9fc9df8b265b9bc2a6158a1aa83801" alt="Mention Me referral landing page example" width="985" height="707" data-path="images/knowledge/shopify/11432246692893.jpg" />
</Frame>

## Creating a Landing Page

Use a Liquid page template rather than pasting code into the Shopify Pages HTML editor. This keeps the script intact and gives you full control over the markup.

Build and check the page with the **Demo** tag while it is hidden, then switch to the **Live** tag and launch your programme before you make the page visible.

<Steps>
  <Step title="Create a hidden page">
    In Shopify Admin, go to **Online Store > Pages > Add page** and title it (e.g., **Referral Landing Page**). Set **Visibility** to **Hidden** so customers can't find the page while you set it up. Leave the content area blank. The template supplies it.
  </Step>

  <Step title="Create a page template">
    Go to **Online Store > Themes > Edit code**. Under Templates, create **page.referral-landing.liquid**.
  </Step>

  <Step title="Add the template code with the Demo tag">
    Start with the **Demo** tag. Use the tabs to compare the Demo and Live versions. The only difference is the tag host: `tag-demo.mention-me.com` for Demo and `tag.mention-me.com` for Live.

    <CodeGroup>
      ```liquid Demo theme={null}
      <div id="mmWrapper"></div>
      <script type="text/javascript">
      var partnerCode = "INSERT_PARTNERCODE";

      // Use Shopify's localization object for best language/country detection
      var locale = "{{ localization.language.iso_code | upcase }}";

      // Prefer customer's saved country, fallback to localization.country
      var country = {% if customer and customer.default_address %}"{{ customer.default_address.country_code }}"{% else %}"{{ localization.country.iso_code }}"{% endif %};

      var params = [
        ["situation", "landingpage"],
        ["implementation", "embed"],
        ["locale", locale + "_" + country]
      ];

      var query = params.map(p => p[0] + "=" + encodeURIComponent(p[1])).join("&");

      var script = document.createElement("script");
      script.src = "https://tag-demo.mention-me.com/api/v2/referreroffer/" + partnerCode + "?" + query;

      document.head.appendChild(script);
      </script>
      ```

      ```liquid Live theme={null}
      <div id="mmWrapper"></div>
      <script type="text/javascript">
      var partnerCode = "INSERT_PARTNERCODE";

      // Use Shopify's localization object for best language/country detection
      var locale = "{{ localization.language.iso_code | upcase }}";

      // Prefer customer's saved country, fallback to localization.country
      var country = {% if customer and customer.default_address %}"{{ customer.default_address.country_code }}"{% else %}"{{ localization.country.iso_code }}"{% endif %};

      var params = [
        ["situation", "landingpage"],
        ["implementation", "embed"],
        ["locale", locale + "_" + country]
      ];

      var query = params.map(p => p[0] + "=" + encodeURIComponent(p[1])).join("&");

      var script = document.createElement("script");
      script.src = "https://tag.mention-me.com/api/v2/referreroffer/" + partnerCode + "?" + query;

      document.head.appendChild(script);
      </script>
      ```
    </CodeGroup>

    Replace `INSERT_PARTNERCODE` with your actual partner code. To customise how locale is determined, see [Shopify: Locales](/knowledge/shopify/locales).
  </Step>

  <Step title="Assign the template">
    Go back to the page, under **Theme Template** select **referral-landing**, then click **Save**. Keep the page **Hidden**.
  </Step>

  <Step title="Preview the page with the Demo tag">
    Preview the hidden page from Shopify Admin. Check the referral offer is embedded on the page and looks visually correct.
  </Step>

  <Step title="Switch to the Live tag">
    In **page.referral-landing.liquid**, change only `tag-demo.mention-me.com` to `tag.mention-me.com` in the saved code, keeping your partner code and any custom locale changes, then save. See [How to Enable Live Tracking](/knowledge-app/onboarding/enable-live-tracking) for the rest of your integration.
  </Step>

  <Step title="Launch your programme">
    In Mention Me, open your campaign and click **Launch** on the version you want to go live. Follow [How to Launch a Campaign and Version](/knowledge-app/referral/campaigns/manage/launch-a-version) for the full launch wizard. The Live tag only shows an offer once your programme is live.
  </Step>

  <Step title="Preview the page again">
    Preview the hidden page again and check the live referral offer is embedded and looks visually correct.
  </Step>

  <Step title="Make the page visible">
    Set the page's **Visibility** to **Visible** and click **Save**. Link to it from your navigation, emails or social posts so customers can find it.
  </Step>
</Steps>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.