Add a Clearpay Banner to Shopify

Banners show Clearpay information at the top of your Shopify page.

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

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 copy and paste the banner code snippet to the liquid file:

1. Click the link to the banner code snippet.

2. Click the Copy to Clipboard button.

3. Paste the banner code snippet into the clearpay-banner.liquid tab.

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

1
<div class = "black-body"></div>
2
{% section 'popup' %}
3
{% section 'announcement-bar' %}
4
{% section 'clearpay-banner' %}
5
{% section 'header' %}
6
<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:

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:

Change the color of the Clearpay banner

Do the following:

1. Login to your Shopify Admin and navigate to your Theme Settings page: Go to Online Store> Themes.

2. Click Customize to change the theme with the Clearpay Banner.

3. Click Clearpay Banner.

4. Click the icon next to Background color.

• Use the controls to adjust the colour and fine tune brightness/saturation. To set the background colour to a known value, enter the hex value in the text box

• To automatically update the banner to the new colour you have selected, click outside the color controller window

5. When the banner colour is correct, click Save in the top-right corner of the window.