Shopify: The Dashboard Tag

This page is part of our wider Shopify guide. If you haven’t already, please visit the Shopify: Getting Started article.

Referral Dashboard Overview

This dashboard allows your customers to view their referral activity, track rewards, and share offers with friends directly from their account.

Getting Started

The Mention Me referral dashboard tag must be used on a page accessible only to logged-in customers. Once set up, users can manage their referral journey.

You will need to complete the following steps:

• Create a “Referral Dashboard” page in Shopify
• Create a Page Template (Liquid)
• Assign the Template to the Page
• Add the Dashboard to the Customer Account Page

1. Create a New Page in Shopify

• Navigate to Online Store → Pages → Add Page
• Title the page: Referral Dashboard
• Save the page

2. Create a Custom Page Template

• Navigate to Online Store → Themes → Actions (ellipses) → Edit code
• Under Templates, right click: “New file”
• Name the file: page.refer.liquid

This creates a new file in your theme:

templates/page.refer.liquid

3. Replace the Template Code with the Following

{% if customer %}
<div style="width: 100vw; margin-left: calc(-50vw + 50%);">
<h2 style="text-align: center;">Hi {{ customer.first_name }}, refer your friends and earn!</h2>
<div id="mmWrapper"></div>
</div>

<script type="text/javascript">
var partnerCode = "PARTNERCODE";

var email = {% if customer %}"{{ customer.email }}"{% else %}null{% endif %};
var firstname = {% if customer %}"{{ customer.first_name }}"{% else %}null{% endif %};
var surname = {% if customer %}"{{ customer.last_name }}"{% else %}null{% endif %};

// 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", "dashboard"],
["implementation", "embed"],
["email", email],
["firstname", firstname],
["surname", surname],
["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/dashboard/" + partnerCode + "?" + query;

script.onload = function () {
const style = document.createElement("style");
style.innerHTML = `
#mmWrapper,
.mm-frame-dashboard,
.mm-frame,
.mm-dashboard {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 1rem;
float: none !important;
display: block;
}

.row-fluid {
display: flex !important;
flex-wrap: wrap;
margin-bottom: 2rem;
}

.row-fluid > [class^="span"] {
float: none !important;
display: block !important;
width: 100% !important;
margin-left: 0 !important;
}

.mm-dashboard {
font-family: inherit !important;
font-size: 1rem !important;
}

.mm-dashboard h2,
.mm-dashboard h3 {
text-align: center;
}

.mm-dashboard .accordion-toggle-text {
font-weight: bold;
}
`;
document.head.appendChild(style);
};

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

{% else %}
<div>
  <p>You need to log in or create an account to access the referral dashboard.</p>
  <p>
    <a href="/account/login">Log in</a>
  </p>
</div>
{% endif %}

Notes

Partner Code: Replace PARTNERCODE with your actual Mention Me partner code. If you're unsure, contact your onboarding manager.

Locale Handling: Mention Me supports locale-based rendering using:

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

This automatically picks up Shopify’s language and region for localization.

4. Assign the Template to the Page

Go back to the newly created “Referral Dashboard” page:
Admin → Online Store → Pages → Referral Dashboard
On the right side, under “Theme Template”, select: refer
Click Save

5. Test the Integration

• Visit /account/login and log in as a test customer
• Go to /pages/referral-dashboard
• You should see:
  • A personalised welcome message
  • The embedded Mention Me referral dashboard

If you're not logged in, you will be prompted to log in first, then redirected to the dashboard.

Optional: Promote the Page

• Add the page to your website navigation menu
• Include a “Refer a friend and earn” CTA in transactional emails (e.g., order or shipping confirmations) — link directly to this page for logged-in users.

Useful Links

For additional customer attributes and integration variables, visit: https://help.shopify.com/themes/liquid/objects/customer