Shopify: The Referee Tag – Mention Me | Help Centre

This page is part of our wider Shopify guide - if you haven't already, we recommend visiting our Shopify: Getting Started article. If you've upgrade to Checkout Extensibility on your Checkout pages, follow this guide: Shopify: checkout.liquid and the Checkout Extensibility Upgrade.

Name sharing is one of Mention Me's most powerful features, allowing customers to share with their friends using their name alone.

The Referee Tag will show a link with the words "Been referred by a friend?" at various points of the checkout journey to allow a referred customer to tell us who referred them.

For Shopify, we recommend you place the Referee tag in the following places:

On a cart or basket page
In any "side cart" or "cart popout"
And, for Shopify Plus customers, in the checkout journey itself.

Note: Your Shopify templates might be significantly different from the default - and these integration instructions may need finessing for your specific scenario and/or for different customer devices. We recommend testing any changes with our Onboarding and Tech teams before you go live.

Getting started

Each part of this section will require editing the code for your Shopify templates.

We recommend you involve one of your development team with this if you're not comfortable doing this.

Cart / Basket Page

A cart or basket page is a page where a customer can view what they've added to their Shopify cart before proceeding.

For this, you will need to do two things:

Add a div to the page where you want the "Been referred by a friend?" link to appear
Add a piece of Javascript to the page

To begin, visit your Store Theme, and locate the cart template. We'll assume for this article it is in cart.liquid.

Adding the Div

Add a div where you'd like the content to appear. This div will be a container for our link.

The div should have the id mmWrappercart:

<div id="mmWrappercart"></div>

Adding the Script

Add the following Javascript code onto the page. It can go anywhere on the page as long as it's after the div above.

<script>
    // Enter your Mention Me partner code here:
    var partnerCode = "INSERT_PARTNERCODE";

    var situation = "cart";

    var urlComponents = [
    	"https://tag.mention-me.com/api/v2/refereefind/",
	partnerCode
    ];

    var queryComponents = [
	["situation", situation],
	// Locale
	["locale", Shopify.locale + "_" + Shopify.country],
    ];

    queryComponents = queryComponents.map((qc) => qc[0] + "=" + encodeURIComponent(qc[1]));

    var url = urlComponents.join("") + "?" + queryComponents.join("&");

    var script = document.createElement("script");
    script.src = url;

    document.getElementsByTagName("head")[0].appendChild(script);
</script>

Update the variables

Staying within this page, you will need to make some changes to this code.

PartnerCode

You must update replace INSERT_PARTNERCODE with your own Mention Me PartnerCode. If you don't know it, request your PartnerCode from your Onboarding Project Manager.

Locales

If you have multiple Locales / Regions that you serve, you may also wish to update the code we have provided.

This is the line:

// Locale 
["locale", Shopify.locale + "_" + Shopify.country],

By default we will choose a combination of the Locale in Shopify (e.g. English, French, Spanish) and the country from Shopify.

In most cases, this will be a sensible default - but it may not always match the offers you want to present to customers nor might it match with the Offers you're giving customers inside Mention Me.

You can learn more about setting this via our article on Shopify: Locales.

Sidecart / Popout Cart

If you have a slide-out cart that can appear throughout your site, or any other form of cart plugin, you might wish to add the Mention Me Referee tag to these too.

Here's an example of a Shopify side drawer which features the Mention Me Referee tag:

The process is similar to setting up the cart above, but there's some small differences.

To implement the tag for these, first identify the template which contains the contents of your sidecart.

This should be the template that drives the part of your sidecart which refreshes each time someone makes a change to their basket or loads a page. It will vary based on your plugin, but could be called something like sidecart.liquid.

Add the following code:

<script>
    // Enter your Mention Me partner code here:
    var partnerCode = "INSERT_PARTNERCODE";

    var situation = 'sidecart'; 
    var implementation = 'link';
    // This will ensure the implementation (link) and situation (sidecart) get
    // cleared before loading the Mention Me tag shown on refresh or page change. 
    if (window.MentionMeFiredTags != undefined && window.MentionMeFiredTags != '') { 
       if (window.MentionMeFiredTags[implementation + situation] == true) { 
           delete window.MentionMeFiredTags[implementation + situation] 
       } 
    }

    var urlComponents = [
    	"https://tag.mention-me.com/api/v2/refereefind/",
	partnerCode
    ];

    var queryComponents = [
	["situation", situation],
	// Locale
	["locale", Shopify.locale + "_" + Shopify.country],
    ];

    queryComponents = queryComponents.map((qc) => qc[0] + "=" + encodeURIComponent(qc[1]));

    var url = urlComponents.join("") + "?" + queryComponents.join("&");

    var script = document.createElement("script");
    script.src = url;

    document.getElementsByTagName("head")[0].appendChild(script);
</script>

As with the Cart implementation above, please replace the PartnerCode and consider whether the Locale should change.

Checkout - Shopify Plus Only

Are you planning the switch over to Checkout Extensions from checkout.liquid? Read our guide on the switchover first: checkout.liquid and the Checkout Extensibility Upgrade.

Shopify manage your checkout and provide some limited ability to modify the checkout if you have Shopify Plus.

Here's an example at our client OnlyCurls:

To add it to your Checkout journey, please add the following code to your checkout.liquid template file.

Note: You may need to request access to this template from Shopify.

<script>
    // Enter your Mention Me partner code here:
    var partnerCode = "INSERT_PARTNERCODE";

    var situation = "checkout";

    var urlComponents = [
    	"https://tag.mention-me.com/api/v2/refereefind/",
	partnerCode
    ];

    var queryComponents = [
	["situation", situation],
	// Locale
	["locale", Shopify.locale + "_" + Shopify.country],
    ];

    queryComponents = queryComponents.map((qc) => qc[0] + "=" + encodeURIComponent(qc[1]));

    var url = urlComponents.join("") + "?" + queryComponents.join("&");

    var script = document.createElement("script");
    script.src = url;

    document.getElementsByTagName("head")[0].appendChild(script);
</script>

Once completed, you will need to:

Update the parameters as described in the Cart section above (e.g. PartnerCode, Locale)
Let the Mention Me Onboarding team know you've added the tag.

Once we know you've added it, we will position it on your checkout page and can apply styling for you accordingly.

Articles in this section

Related articles