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

# How to Customise the Shopify Customer Journey

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

    <Frame caption="The Referee experience image settings in the Mention Me Shopify app.">
      <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" />
    </Frame>
  </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

<Steps>
  <Step title="Open the Name Search Offer Preview">
    Copy is controlled via the [Mention Me platform](https://mention-me.com/login), in the **Name search** offer preview.

    <Frame caption="The Name search offer preview in the Mention Me platform.">
      <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" />
    </Frame>
  </Step>

  <Step title="Edit the Highlighted Content">
    Toggle "Text editing mode" and edit the highlighted content.

    <Frame caption="Text editing mode with the editable content highlighted.">
      <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" />
    </Frame>
  </Step>

  <Step title="Save Your Changes">
    Click **Save & Preview** to apply your changes.

    <Frame caption="The Save and Preview button in the Mention Me platform.">
      <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" />
    </Frame>

    Once saved, the updated copy appears in the preview.

    <Frame caption="The updated copy shown in the Mention Me platform preview.">
      <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" />
    </Frame>
  </Step>
</Steps>

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

<Steps>
  <Step title="Open the EntryPoint API Content">
    Copy is controlled in the [Mention Me platform](https://mention-me.com/login). Edit it in the offer preview within **Entrypoint API content**.

    <Frame caption="The EntryPoint API content editor in the Mention Me platform.">
      <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" />
    </Frame>
  </Step>

  <Step title="Update the Content">
    Use "Text editing mode" to update the content. Edit both the **Personalised** and **Generic** tabs.
  </Step>

  <Step title="Add an Image">
    Click **"Add an image for this step"** to add an image -- it will auto-scale.
  </Step>
</Steps>

Shopify does not allow changing the default grey background colour 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

<Frame caption="Customising checkout colours in Shopify settings.">
  <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" />
</Frame>

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