Add a Clearpay Banner to Shopify

Banners show Clearpay information at the top of your Shopify page, as in the picture below.

To add an Clearpay banner, you must edit your store's code. Before you start, make sure that:

• Shopify is already installed and running on your online store

• You have decided what banner you want and it conforms to guidelines

📘

Recommendation

You are changing your online store's code, so be careful. We recommend you create a duplicate page and only publish it once you have verified the changes.

Follow the instructions below:

1. Click Actions and select Edit Code from the drop-down menu.

2. Scroll down to Sections and click Add a new section.

3. In the Create a new section called field enter clearpay-banner. The clearpay-banner.liquid tab appears.

4. Delete the code that populates the clearpay-banner.liquid tab.

The Liquid file

The next task is to download the liquid file and add it to the banner:

1. Click the link Liquid file to download the zipped text file.
2. Unzip the file.
3. If its not already named correctly, name the .txt file clearpay.banner.liquid.txt and save it.
4. Drag the clearpay.banner.liquid.txt file into the clearpay-banner.liquid tab.
5. Click Save.

Theme Liquid

Now you must edit the theme.liquid file. Follow the instructions below:

1. Open the theme-liquid.

2. Find the line with `{% section 'header' %}. Add the line {% section 'clearpay-banner' %} above it. See line 4 of the code extract below.

<div class = "black-body"></div>
{% section 'popup' %}
{% section 'announcement-bar' %}
{% section 'clearpay-banner' %}
{% section 'header' %}
<div id="PageContainer" class="is-moved-by-drawer">

3. Click Save.

Preview and Check

To check your work:

1. Click Preview and verify the changes. The picture below shows a banner in place:

Optional

To make minor adjustments use the Theme Editor. Do the following:

1. Click Customize theme to open the Theme Editor.

2. Click Clearpay banner from the sidebar.

3. You can show or hide the Clearpay banner, select the background and text colors, and also select the Clearpay logo color. See picture below:

📘

Brand Assets

For examples and information on all our brand assets, including banners, see the INTEGRATION BEST PRACTICE section in the left side menu of this guide.