Overview

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

Shopify Theme Editor- Collection Promo Block

Follow the steps below to add the "Affirm Collection 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.

5. Click "Collections"

Navigate to "Collections".

6. Click "Default collection"

Select the "Default collection" option or any collection you would like to have Affirm's ALA messaging.

7. Click "Add block"

Click on the "Add block" link.

8. Click "Affirm Collection Promo"

Choose the "Affirm Collection Promo" from the options provided.

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

10. 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 Collection Selector	This is a selector that references a collection element on a collection page. Right-click and select "Inspect" on any product within a collection on a collection page. Scroll upwards through the source code until you find the class of the element, typically a `<div>` element, that encloses this product element as a list item. This class often includes ".collection" in its name.
Custom Card Selector	This is a selector for an html element that references a product card information element within a collection. On a collection page, select any product from the collection, then right-click on the information beneath the product's image and choose “Inspect.” Scroll upwards through the source code to find the closest element, typically a `<div>`, that encompasses all the product's informational elements such as name, price, etc. The class of this element is the value we're seeking.
Custom Price Selector	This is a selector for an html-element that contains a price of a product in a collection. Find the price of any product within a collection on a collection page, right-click on the element displaying the price, often `<span>`, and select "Inspect." The class of this element represents the value for this selector.