> ## 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.

# Customer Journey Changes

> How to customise the Mention Me experience in Shopify, including checkout overlays, thank you pages, and colour settings.

<Note>The following instructions are for **Brand Referral**, which is **not currently available** on the free Tier of the Shopify App. [Contact us to know more](https://help.mention-me.com/hc/en-gb/requests/new?ticket_form_id=20114637802909).</Note>

The Mention Me Shopify App uses Checkout Extensibility features. Some screens are configured in Shopify, others in the Mention Me platform. This guide walks through editing the experience across both.

Not sure if you're using Checkout Extensibility? See the [Shopify App Installation guide](/knowledge/shopify/app-installation) or [contact our team](https://help.mention-me.com/hc/en-gb/requests/new?ticket_form_id=20114637802909).

## Checkout ("Been referred by a friend?" Link)

When a customer clicks the "Been referred by a friend?" link, they're prompted to enter who referred them.

<Frame caption="Checkout modal: 'Been referred by a friend?'">
  <img src="https://mintcdn.com/mentionme/GjiDi6ZwHP27Pu0w/images/knowledge/shopify/21083100861725.png?fit=max&auto=format&n=GjiDi6ZwHP27Pu0w&q=85&s=c251909b1f125a090c64d0132c0a3540" alt="Checkout modal showing &#x22;Been referred by a friend?&#x22; prompt" width="2325" height="1338" data-path="images/knowledge/shopify/21083100861725.png" />
</Frame>

### To Change the Image

<Steps>
  <Step title="Open Shopify Admin">
    Log into the [Shopify Admin Console](https://admin.shopify.com/store/).
  </Step>

  <Step title="Open the Mention Me app">
    Search for **"Mention Me"** and open the app.
  </Step>

  <Step title="Update the image">
    Update the image in the **Referee experience** section.

    <img src="https://mintcdn.com/mentionme/GjiDi6ZwHP27Pu0w/images/knowledge/shopify/21083085987229.png?fit=max&auto=format&n=GjiDi6ZwHP27Pu0w&q=85&s=3d6ed4d51a83c9bca950bb245f871b2e" alt="Mention Me Shopify app Referee experience image settings" width="1359" height="1110" data-path="images/knowledge/shopify/21083085987229.png" />
  </Step>
</Steps>

* Recommended dimensions: 1200 x 300 px
* Do not reference specific offers, as this is shown to all referees
* All styling for this modal is inherited from Shopify's theme

### To Change the Copy

* Controlled via the [Mention Me platform](https://mention-me.com/login)
* Located in the **Name search** offer preview

<img src="https://mintcdn.com/mentionme/GjiDi6ZwHP27Pu0w/images/knowledge/shopify/21083085989789.png?fit=max&auto=format&n=GjiDi6ZwHP27Pu0w&q=85&s=97f6cd8076a96650415d4690733c6abb" alt="Mention Me platform Name search offer preview" width="2320" height="1385" data-path="images/knowledge/shopify/21083085989789.png" />

* Toggle "Text editing mode" and edit the highlighted content
* Click **Save & Preview** to apply changes

<img src="https://mintcdn.com/mentionme/GjiDi6ZwHP27Pu0w/images/knowledge/shopify/21083161468189.png?fit=max&auto=format&n=GjiDi6ZwHP27Pu0w&q=85&s=b6fe49c98434313c22bed0952eeb14e6" alt="Text editing mode with editable content highlighted" width="2087" height="883" data-path="images/knowledge/shopify/21083161468189.png" />

<img src="https://mintcdn.com/mentionme/GjiDi6ZwHP27Pu0w/images/knowledge/shopify/21083129908765.png?fit=max&auto=format&n=GjiDi6ZwHP27Pu0w&q=85&s=4193f8ec4f42ebed8ea3f90d8498faab" alt="Save and Preview button in Mention Me platform" width="411" height="233" data-path="images/knowledge/shopify/21083129908765.png" />

<img src="https://mintcdn.com/mentionme/GjiDi6ZwHP27Pu0w/images/knowledge/shopify/21083161474205.png?fit=max&auto=format&n=GjiDi6ZwHP27Pu0w&q=85&s=4d1af0154d0eea59a866ac3f98a17067" alt="Updated copy preview in Mention Me platform" width="2319" height="975" data-path="images/knowledge/shopify/21083161474205.png" />

## Thank You and Order Status Pages

The post-purchase Mention Me "Refer a Friend" journey displays on the Thank You and Order Status pages.

Do not place this block within the right-hand Order Summary sidebar — it will be hidden on mobile.

<Frame caption="Refer a Friend journey on the Thank You page">
  <img src="https://mintcdn.com/mentionme/GjiDi6ZwHP27Pu0w/images/knowledge/shopify/21089250077213.png?fit=max&auto=format&n=GjiDi6ZwHP27Pu0w&q=85&s=52711caff3ca1e53bd0fba58e6e5a748" alt="Mention Me Refer a Friend journey on Thank You page" width="2319" height="1154" data-path="images/knowledge/shopify/21089250077213.png" />
</Frame>

### To Change Banner Copy and Imagery

* Copy is controlled in the [Mention Me platform](https://mention-me.com/login)
* Edit copy in the offer preview within **Entrypoint API content**

<img src="https://mintcdn.com/mentionme/GjiDi6ZwHP27Pu0w/images/knowledge/shopify/21089250077853.png?fit=max&auto=format&n=GjiDi6ZwHP27Pu0w&q=85&s=d7ad76f8ca2c3466c21be05eadbb19dd" alt="Mention Me platform EntryPoint API content editor" width="2319" height="1154" data-path="images/knowledge/shopify/21089250077853.png" />

* Use "Text editing mode" to update content
* Edit both the **Personalised** and **Generic** tabs
* To add an image, click **"Add an image for this step"** — the image will auto-scale

Shopify does not allow changing the default grey background color of the banner.

Once a customer engages with the initial CTA, all subsequent pages are handled within the Mention Me platform.

Any modifications in the EntryPoint API preview will also affect mobile app implementations powered by EntryPoint.

## Customise Checkout Colours in Shopify

<img src="https://mintcdn.com/mentionme/V2LNKGCh7ROBia07/images/knowledge/shopify/33831377854621.gif?s=8bb28a3eb27747bbb4d30d7af30e0a7b" alt="Customising checkout colours in Shopify settings" width="800" height="402" data-path="images/knowledge/shopify/33831377854621.gif" />

<Steps>
  <Step title="Open Checkout Customiser">
    In your Shopify admin, go to **Settings > Checkout > Configurations > Customise**.
  </Step>

  <Step title="Open settings">
    In the Checkout Editor, click the settings cog icon on the left-hand side menu.
  </Step>

  <Step title="Update colours">
    Scroll to the **Colour** section. Use the colour picker or enter a HEX code to change:

    * Accent
    * Buttons
    * Error colours
  </Step>
</Steps>

These changes apply to your entire checkout flow, not just Mention Me elements.