Overview

This guide will walk you through adding and customizing the "Affirm Cart Promo" block within the Shopify Theme Editor.

Shopify Theme Editor- Cart Promo Block

Follow the steps below to add the "Affirm Cart Promo" to your Shopify store.

Go to admin.shopify.com

1. Click "Online Store"

From "Home," navigate to "Online Store" and click.

2. Click "Themes"

Select "Themes" from the menu.

3. Click "Customize"

Click on "Customize" for the desired theme.

4. Click "Cart"

Navigate to "Cart".

5. Click on "Add block"

Select "Add block" to add the Affirm Promo block.

6. Click "Affirm Cart Promo"

Select the "Affirm Cart Promo" option.

7. Move the "Affirm Cart Promo"

Click the block and move the "Affirm Cart Promo" between "Subtotal Price" and "Checkout button".

🚧
Adding a Product to Your Cart
To ensure the Affirm Cart Promo is correctly displayed in your cart, you must first add a product. Here’s one way to do it:

When using the Shopify Theme Editor, find your way to the "Product" page by selecting "Products" from the drop-down menu located at the top-center of your interface.

Then, choose the "Default Product" option, which will direct you to one of your product listings. It does not matter which product you pick for this purpose; any will do.

On the "Product" page, simply hit the "Add to Cart" button.

With the product now in your cart, the Affirm Cart Promo should activate as intended.

8. Customizations

There are multiple customization options for the Affirm product promo. These options include the following: text alignment, font size, logo color, and logo type.

9. Click "Save"

Once your selections are made, click "Save".

Using the Advanced Settings

If the Affirm "As Low As" (ALA) messaging fails to display on the Cart page after adding the block, you may need to configure Advanced Settings. Be aware that navigating these settings may require additional technical skills.

Setting	Description
Custom Cart Selector	The value for this selector could be found as a class or an id of a `<form>` element that contains cart items on a cart page. Locate an item added to a cart on a cart page, right-click on it, and select “Inspect.” Scroll upwards through the source code until you locate the `<form>` element id or class that contains this item's element.
Custom Cart Total Selector	The value for this selector could be found as a class or an id of an element that contains the total value for a cart on a cart page. Locate a cart total amount on a cart page, right-click on it, and select “Inspect.” We are looking for the class or id of the element, typically a `<p>` or `<span>` element, that contains this number.