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

# Shopify Afterpay On-Site Messaging App

> **Important**
>
> You cannot use the Afterpay On-site Messaging App to add Cash App Afterpay at checkout. Instead, follow the instructions on the [Add Afterpay at Checkout](/cash-app-afterpay/guides/platforms/shopify/add-cash-app-afterpay-at-checkout) page.

> **Important**
>
> Before you install and configure the Afterpay On-Site Messaging App, make sure you already added [Cash App Afterpay at checkout](/cash-app-afterpay/guides/platforms/shopify/add-cash-app-afterpay-at-checkout) on your Shopify store. Ensure Cash App Afterpay is visible at checkout and functioning before you attempt anything with the Afterpay On-Site Messaging App. You cannot use the Afterpay On-Site Messaging App without first adding Cash App Afterpay at checkout successfully.

This page shows you how to do the following:

* [Install the Afterpay On-site Messaging App](#install-the-cash-app-afterpay-on-site-messaging-app) - A procedure to install the app

* [Add the Messaging to the Product Pages](#add-the-messaging-to-the-product-pages) - Instructions on how to add the messaging to the Product Pages

* [Add the Messaging to the Cart Page](#add-the-messaging-to-the-cart-page) - Instructions on how to add the messaging to the shopping Cart Page

* [Adjust the Style of Messaging](#adjust-the-style-of-messaging) - This covers things like text alignment, margins, text color, logo types, display for mobile devices, and more

* [Make Mobile View Adjustments](#mobile-view-adjustments) - Adjust the style of messaging for mobile devices

* [Hide Messaging from Some Products](#hide-messaging-from-some-products) - Select products that you don't want to associate with Afterpay Messaging

> **Note**
>
> This information is for Shopify 2.0 themes only.

## Install the Afterpay On-site Messaging App

Do the following:

1. Click the [link](https://apps.shopify.com/afterpay-messaging) to download and install the Afterpay On-Site Messaging app from the Shopify App Store.

2. Click **Install**. An installation screen on Shopify's admin portal appears.

   ![shop-app-install-A.png](/_fern-files/_img/8294d50d8a9be1a92e67df2c709c67a4c4797906d113d82f68d948e46cec2b6e.webp)

3. Click **Install**.

   ![shop-app-install-B.png](/_fern-files/_img/8bdb60b3e370c578d319b448df15f53410ee26afc09b95455ba3a4bdde201964.webp)

   > **Note**
   >
   > If you clicked **Install** and your screen doesn’t show the **Connect** button, your Cash App Afterpay account is already fully registered. You can skip steps 4 to 7 (inclusive) below and go straight to the [Add the Messaging to the Product Pages](#add-the-messaging-to-the-product-pages) section.

4. Click **Connect** next to *Connect the Cash App Afterpay account*. You are taken to a get.afterpay.com URL, where the email is prefilled with the email on your Shopify store.

   ![shop-app-install-C.png](/_fern-files/_img/4f057f32c5369ed6a2d75f187ca7bd3256589756b63ed413327fff6135715103.webp)

5. Send the email and Cash App Afterpay will email you a login link to the Cash App Afterpay dashboard.

   ![shop-app-install-D.png](/_fern-files/_img/6fe0f37b104482ec9720a474b12231a2966e4ed88fefd492093d0d355e071974.webp)

6. Login to your Cash App Afterpay dashboard and ensure you have completed all the registration steps.

7. When Cash App Afterpay registration is complete, click the **Show me how** button under *Add Afterpay messaging*, at the bottom of the [get.afterpay.com](http://get.cashappafterpay.com) status page.

   ![step-7-small.png](/_fern-files/_img/50b3ae0a5bf3789050a5f2f6feccd18ab632d48dc94c71842369d08a6e249d44.webp)

## Add the Messaging to the Product Pages

1. Once it is installed, you need to open the *Afterpay On-Site Messaging app*. To do this, go to [Shopify Admin](https://admin.shopify.com/). Then go to *Apps* and select *Afterpay On-Site Messaging*.

   ![shop-message-app-1.png](/_fern-files/_img/9d42caed438c4a3c59d8f147d2678c46c90cc44a416768e85b7b50dea640b0c6.webp)

2. From the app's *Add Messaging* section, click [Open Theme Editor](https://accounts.shopify.com/lookup?rid=cb901599-a4cd-4d01-9e88-e70243d0636c).

   ![shop-message-app-2.png](/_fern-files/_img/8b433705b3c1da58d72f0e5218f2036b2e6b4a08dd7f2284086b766a2eed68c0.webp)

3. From the Theme editor, click the dropdown at the top of the editor, then click *Products*.

   ![shop-message-app-3.png](/_fern-files/_img/80470d36c61ecda445e860617de58eab2d5cb2ee3e28357fdf3c35657d6cb1b5.webp)

4. Select the *Default* product template, or the Product template that needs messaging.

   ![shop-message-app-4.png](/_fern-files/_img/5ee882d74e03449450c8cf66d881269bca425339b6d19371ce2ba7adfa264d56.webp)

   > **How Messaging Works**
   >
   > Messaging works on Product Page templates. So if you have a single Product Page template, you add messaging to that template. If you have several different Product Page templates, then you'll need to add messaging to each one separately.

5. Move your mouse over the Product price, a + symbol appears.

   !\[Shopify OSM App - Product Pages - Step 5.png]\(../../../assets/images/Shopify OSM App - Product Pages - Step 5.png)

6. Click **Add block** and then select *Payments Messaging - Afterpay On-Site Messaging*.

   Your product page should now look like this:

   !\[Shopify OSM App - Product Page Example.png]\(../../../assets/images/Shopify OSM App - Product Page Example.png)

7. Click **Save** in the top right corner.

   ![shop-message-app-9.png](/_fern-files/_img/326df5814910c62eb79c2c38acaafabb0f686c3e44682ab051bfb5955dcf64d5.webp)

## Add the Messaging to the Cart Page

> **Warning**
>
> Never try to use the app to add Cash App Afterpay to the checkout page.

You are now ready to add some messaging to the Cart page. Do the following:

1. For an accurate Cart page preview, click **Add to cart**.

   !\[Shopify OSM App - Product Pages - Step 7 screenshot 2 (alt).png]\(../../../assets/images/Shopify OSM App - Product Pages - Step 7 screenshot 2 (alt)-2.png)

2. Next, to open the Cart page, click the dropdown at the top of the editor and click **Cart**.

   ![shop-message-app-b.png](/_fern-files/_img/2b76e516ae4d9c03c6d42f00e3367fcdadc15b76521be02ec17ece10dc29b57a.webp)

3. Move the mouse over the Subtotal above the Checkout button. A *+* symbol appears.

   !\[Shopify OSM App - Cart Page - Step 3 to 5.png]\(../../../assets/images/Shopify OSM App - Cart Page - Step 3 to 5.png)

4. Click **Add Block** and select *Afterpay On-Site Messaging*.

5. If the text alignment is wrong, adjust the text alignment. To do this, click the *Text Alignment* dropdown and select a new alignment option.

   !\[Shopify OSM App - Cart Page - Step 6.png]\(../../../assets/images/Shopify OSM App - Cart Page - Step 6.png)

**Mobile View**

You can set a separate alignment for display on mobile devices.

Do the following:

1. To check the appearance on a mobile device, click the monitor icon and then click *Mobile* at the top right of the editor.

   ![shop-message-app-mobile.png](/_fern-files/_img/14d5ff10802f814f49ff59a1588a0f1d0b2c6f6fb6e5abf1455b39052f15179e.webp)

2. Scroll down to *Mobile View* settings, make any changes you need.

3. Click **Save** in the top right corner.

4. Verify your messaging and alignment on your live store.

You can adjust various aspects of the page for mobile devices. See the [Mobile View Adjustments](#mobile-view-adjustments) section below for more details.

## Adjust the Style of Messaging

You can adjust many aspects of the styling. To do this:

1. Select the *Payments Messaging - Afterpay On-Site Messaging* block on the Product page.

   !\[Shopify OSM App - Style Messaging - Step 1.png]\(../../../assets/images/Shopify OSM App - Style Messaging - Step 1.png)

   Alternatively you can select *Payments Messaging - Afterpay On-Site Messaging* from the side bar under *Product information*. See picture below:

   ![shop-message-app-adjust-2.png](/_fern-files/_img/1e83969932ff36f2693213946fca273f3700df086001f69ef7273071bd70693e.webp)

### Text Alignment

To adjust the text alignment:

1. Click the *Text Alignment* dropdown and select a new alignment option.

   !\[Shopify OSM App - Text Alignment - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Text Alignment - Screenshot 1.png)

### Margins

To adjust the margins above and below the messaging:

1. Enter a new value into the *Margin Top* field.

2. Enter a new value into the *Margin Bottom* field.

   \
   \
   Negative values are allowed.

   !\[Shopify OSM App - Margins - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Margins - Screenshot 1-2.png)

### Text Color

To adjust the text color:

1. Click the *Text Color* color-picker and select the new text color.

   !\[Shopify OSM App - Text Color - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Text Color - Screenshot 1-2.png)

### Text Size

To adjust the text size:

1. Click the *Text Size* dropdown and select a new text size option, extra small, small, medium and large.

   !\[Shopify OSM App - Text Size - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Text Size - Screenshot 1.png)

### Text

To adjust the intro text:

1. Click the \*Intro Text dropdown and select a new intro text option.

   !\[Shopify OSM App - Intro Text - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Intro Text - Screenshot 1.png)

### Show/Hide "Interest Free"

To show or hide the interest-free phrase:

1. Enable or disable the *Show "interest-free"* checkbox.

   !\[Shopify OSM App - Show Interest Free - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Show Interest Free - Screenshot 1.png)

The default value is enabled - the phrase *interest-free* appears to your customers. In the picture above, the checkbox is blank, so no *interest-free* message appears to your customers.

### Payment Amount

To show or hide the payment amount in bold:

1. Enable or disable the *Bold Payment Amount* checkbox.

   !\[Shopify OSM App - Bold Amount - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Bold Amount - Screenshot 1.png)

The default value is enabled - the payment amount is in bold. In the picture above, the checkbox is blank, so the payment amount does not appear in bold to your customers.

### Show/hide "with"

The word "with" appears between the price and the Cash App Afterpay logo or badge. See the [Logo Type](#logo-type) below. To show or hide the word "with" do the following:

1. Enable or disable the Show "with" checkbox.

   !\[Shopify OSM App - Show With - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Show With - Screenshot 1.png)

The default value is enabled - the word "with" appears between the price and the Cash App Afterpay logo or badge. In the picture above, the checkbox is blank, so the word with does not appear to your customers.

### Logo Type

To set the logo type:

1. Click the *Logo Theme* dropdown and select a new logo type.

   !\[Shopify OSM App - Logo Type - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Logo Type - Screenshot 1.png)

### Logo Theme

To set the theme of the logo:

1. Click the *Logo Theme* dropdown and select the new logo theme you want.

   !\[Shopify OSM App - Logo Theme - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Logo Theme - Screenshot 1.png)

### Modal Link Style

When a customer clicks on the modal link, a pop-up window appears with more information about Cash App Afterpay. The default symbol for the modal link is a circled info icon ⓘ.

To change or hide the modal link:

1. Click the *Modal Link Style* dropdown and select the new modal link option.

   !\[Shopify OSM App - Modal Link - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Modal Link - Screenshot 1.png)

## Outside Order Limits Messaging

The outside order limits messaging is a message displayed when the product price is outside the limits for Cash App Afterpay.

The default for these limits is $1.00 - $4,000.00 at present.

To adjust the outside order limits messaging:

1. Disable the *Show Lower Limit* checkbox to hide the lower limit.

2. Disable the *Show Upper Limit* checkbox to hide the upper limit.

3. Disable the *Show If Outside Limits* checkbox to hide outside order limits messaging completely.

   !\[Shopify OSM App - Order Limits - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Order Limits - Screenshot 1.png)

> **Note**
>
> Remember that the above settings only affect the messaging the customer sees. The settings do not affect whether customers can buy products at the checkout.

## Mobile View Adjustments

You can set the styling separately for customers on mobile devices. To set the styling for mobile devices, do the following:

1. Click the monitor icon near the **Save** button.

2. Click the **Mobile** button that appears.

   ![mobile-set-mobile.png](/_fern-files/_img/3a9e27b648f2c8ff98f9c18df077a03012b9223e00c30919dd0feb4a8b484d8a.webp)

### Breakpoint

To adjust the screen width that defines the mobile view:

1. In the *Breakpoint* field, enter a new number in pixels.

   !\[Shopify OSM App - Mobile Breakpoints - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Mobile Breakpoints - Screenshot 1.png)

### Text Alignment

To adjust the text alignment for a mobile view:

1. Click the *Text Alignment* dropdown and select a new alignment option.

   !\[Shopify OSM App - Mobile Text Alignment - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Mobile Text Alignment - Screenshot 1.png)

### Margins

To adjust the margins above and below the messaging on a mobile view:

1. Enter a new number, this can be a negative number, into the *Margin Top* or *Margin Bottom* fields.

   !\[Shopify OSM App - Mobile Margins - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Mobile Margins - Screenshot 1.png)

## Footer Payment Icon

To place a payment icon on the footer (bottom) of the payment page, see the Footer Payment Icon section in the [Shopify FAQ](/cash-app-afterpay/guides/platforms/shopify/faq)

## Hide Messaging from Some Products

When you have enabled the On-Site Messaging App, you can also hide Afterpay Messaging from certain products. To do this, use the Theme Editor to create a new template. Next you go to the Product section and choose the products that you don't want associated with messaging. Then you assign these selected product(s) to the new template and make sure no messaging is applied to that template.

To create the template:

1. Go to the On-Site Messaging App.

2. Open the Theme Editor.

3. Click the Home Page dropdown, and then select *Products*. See the picture below:

   ![hide-message-new-1.png](/_fern-files/_img/d5951d4c9c9ac286aec6593e9315dacc39375809dd86e674c3641f0307543baf.webp)

4. Select *Create Template*.

5. Enter a name for this new template. See the picture below:

   ![hide-message-3-new.png](/_fern-files/_img/dbe96597fecc12e68b28bc70b6ef3b73c3a3272234dbce32afafe8236e7f3538.webp)

You have now created your template and named it. Your next task is to fill this template with the product, or products, that you don't want to have Afterpay messaging.

Do the following:

1. Go to [Shopify admin](https://accounts.shopify.com/lookup?rid=d3c85713-691d-405c-a958-bde97cbf383e) and select *Products*.

2. Use the Search filter to find the product that you don't want to associate with Afterpay messaging. You can also find this product from the list of existing products. See the picture below:

   ![hide-message-4-new.png](/_fern-files/_img/97bef48198e77da567000872c1b5a1c9e7542d0d7d14f496ea9f3ca3dfcb29cd.webp)

3. In the Online store section, open the drop-down menu and select the new theme template you created. Then apply this new template to the product. See picture below:

   ![hide-message-5-new.png](/_fern-files/_img/cb7e57f93b919f287cbcdbe6a767b73692e6ac14c11c53709fffee246bcd751b.webp)

4. Repeat step 3 for all the products that you don't want to associate with Afterpay messaging. Click **Save** when you have finished

5. Go back to On-Site Messaging App and open the *Theme Editor*.

6. Select the new template, then click *Afterpay Messaging* and delete it.

The Afterpay messaging for all the products assigned to the template is deleted.