Shopify: The Dashboard Tag

This page is part of our wider Shopify guide - if you haven't already, we recommend visiting our Shopify: Getting Started article.

The dashboard tag delivers a "dashboard" that lets a customer track how many referrals they've made and to share again.

It's ideal for placing in a "My Account" section of your site, if you have one.

Getting started

We will assume for the purposes of this page that you have a template called account.liquid where you wish to add the dashboard.

You will need to do two steps:

1. Add a div where you want the Dashboard to be placed
2. Add the Mention Me Dashboard script to your page.

Adding the div

Choose a location on your page where you would like to display the dashboard. By default it is 960x825 pixels and best implemented as the focal point of a page.

The div should have the id "mmWrapper":

<div id="mmWrapper"></div>​​

Adding the tag

Add the following code to your page, after the mmWrapper.

Note: This code assumes the customer Shopify object is populated. You may wish to replace the variables for email, firstname, surname according to your implementation.

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

// Populate the customers details
var email = "{{ customer.email }}";
var firstname = "{{ customer.first_name }}";
var surname = "{{ customer.last_name }}";

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

var queryComponents = [
    ["situation", "dashboard"],
    ["implementation", "embed"],
    ["email", email],
    ["firstname", firstname],
    ["surname", surname],

    // Locale
    ["locale", Shopify.locale + "_" + Shopify.checkout.billing_address.country_code],
];

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 Partner code 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],

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

Useful links

If more information about the customer is required then the variables can be found here: https://help.shopify.com/themes/liquid/objects/customer