Add an Afterpay Banner to Shopify

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

To add an Afterpay 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 afterpay-banner. The afterpay-banner.liquid tab appears.

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

The Liquid file

The next task is to download and open the liquid file:

1. Download the afterpay.banner.liquid file here.

2. Once downloaded, drag the file into the afterpay-banner.liquid tab that you created in step 3 above.

3. 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 'afterpay-banner' %} above it. See line 4 of the code extract below.

<div class = "black-body"></div>
{% section 'popup' %}
{% section 'announcement-bar' %}
{% section 'afterpay-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 Afterpay banner from the sidebar.

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

📘

Brand Assets

For examples and information on all our brand assets, including banners, see the Brand Assets topic in this guide.