> This page is for Cash App Afterpay.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers-beta.cash.app/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers-beta.cash.app/_mcp/server.

# Add a Cash App Afterpay Banner to Shopify

Banners display Cash App Afterpay information at the top of your Shopify page, as shown in the images below.

To add a Cash App Afterpay banner, you must edit your store's code. Before proceeding, ensure that:

* The [Afterpay US](https://apps.shopify.com/afterpay-us) payment app is already installed and running on your online store

* You have chosen a banner that aligns with the 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.

## Steps to Add the Banner

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 **cash-app-afterpay-banner**. The *cash-app-afterpay-banner.liquid* tab appears.

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

### Add the Liquid file

1. Click the link to the [banner code snippet](https://static.afterpay.com/shopify-cash-app-afterpay-banner-liquid.html).

2. Click the **Copy to Clipboard** button.

3. Paste the banner code snippet into the *cash-app-afterpay-banner.liquid* tab.

4. Click **Save**.

### Editing the Theme Liquid file

1. Open the `theme-liquid` file.

2. Locate the line `{% sections 'header-group' %}` or `{% section 'header' %}`.

3. Add `{% section 'cash-app-afterpay-banner' %}` above this line. In the example below, it is added to line 4:

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

4. Click **Save**.

To verify the changes, click **Preview** and check for the banners appearance at the top of the page.

The images below illustrate a white, black, and green banner:

![white-banner-new.png](/_fern-files/_img/a9b028fe325e372c161d2c2bea6aeb0f656804c7b49f0bbd320d5b08516a9e86.webp)

\


![black-banner-new.png](/_fern-files/_img/4dec75f41d8ba17289a585e7ede60f43186dddfde86fa84e811322c87b55f2d6.webp)

\


![green-banner-new.png](/_fern-files/_img/f04ade64d90d5c802417ce38e1863631b38dc9b7cc9d24ef276706e569bc8607.webp)

### Changing the Banner Color

To change the banner color:

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 Cash App Afterpay Banner.

   ![publish-customize.png](/_fern-files/_img/f3523702adc0f734c929d9a7402740aaa277e14d07d5f044baa9259edefd4662.webp)

3. Click **Cash App Afterpay Banner**.

   ![home-page.png](/_fern-files/_img/8bb5512930d077bd5baec72793866e5ac138e4c4cef032bd1613fee28971e184.webp)

4. Click **Banner color**.

5. Select **Black**, **White**, or **Green**.

   ![shopify-banner-for-caap.png](/_fern-files/_img/0d89d5bc7af71f7e91e894940d6641314244360b48a1ada8d245fc1e9e1760e5.webp)

6. Click **Save**.

## Brand Assets

For more examples and information on brand assets, including banners, see the [Brand Assets](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/brand-assets) section of this guide.