Shopify: The Referee Tag

The Referee experience can be quickly and easily added to your Shopify Checkout using the Checkout Extensibility App. If you haven't already - add the Referee experience to your checkout by following our installation guide.

You can optionally follow this article to add the Referee Tag into your Cart, Basket or Side Cart pages.

We recommend adding the Referee Tag wherever you have a discount code box. 

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

The Referee Tag displays a link, "Been referred by a friend?", on the checkout journey, enabling customers to identify who referred them.

Your Shopify templates may differ from the defaults, and integration may require adjustment for your store’s setup or different device types. Please test changes with our Onboarding or Tech teams before going live.

Getting started

This section involves editing your Shopify theme templates. If unsure, involve a developer on your team.

Cart / Basket Page

The cart or basket page displays items added to the customer’s cart. For this integration:

1. Add a <div> where the "Been referred by a friend?" link should appear.
2. Add a JavaScript snippet after that <div>.

Locate and edit your cart template (e.g., cart.liquid).

Add the Div

Place this where you want the content to appear:

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

Add the Script

Place this JavaScript snippet after the div:

<script>
var partnerCode = "INSERT_PARTNERCODE";
var situation = "cart";

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

var queryComponents = [
  ["situation", situation],
  ["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

PartnerCode

Replace INSERT_PARTNERCODE with your actual Mention Me PartnerCode. If unknown, request it from your Onboarding Project Manager.

Locales

If you have multiple locales/regions, adjust this line as needed:

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

This uses Shopify’s built-in locale (e.g. “en”) and the customer’s country code (e.g. “GB”). Learn more from our article: Shopify: Locales.

Sidecart / Popout Cart

If you use a slide-out cart or pop-up cart via a plugin (e.g., sidecart.liquid), add the Referee Tag as follows.

Example implementation:

Add the following to your sidecart template:

<script>
var partnerCode = "INSERT_PARTNERCODE";
var situation = 'sidecart';
var implementation = 'link';

if (window.MentionMeFiredTags && window.MentionMeFiredTags[implementation + situation]) {
  delete window.MentionMeFiredTags[implementation + situation];
}

var urlComponents = ["https://tag.mention-me.com/api/v2/refereefind/", partnerCode];
var queryComponents = [
  ["situation", situation],
  ["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 tag, be sure to replace the PartnerCode and confirm locale preferences.

Checkout – Shopify Plus only

Planning a move to Shopify Checkout Extensions from checkout.liquid? Review this article first: checkout.liquid and the Checkout Extensibility Upgrade .

Shopify Plus merchants can modify checkout.liquid. Here’s an example from our client, OnlyCurls:

To implement, add this snippet to your checkout.liquid template:

<script>
var partnerCode = "INSERT_PARTNERCODE";
var situation = "checkout";

var urlComponents = ["https://tag.mention-me.com/api/v2/refereefind/", partnerCode];
var queryComponents = [
  ["situation", situation],
  ["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>

You may need to request access to checkout.liquid from Shopify support.

After adding the script, you should:

1. Update the parameters (PartnerCode, Locale, etc.)
2. Notify your Mention Me Onboarding team that you’ve added the tag

Once notified, we’ll position and style the tag appropriately on your checkout page.