Contents
The Shopify Promo App Blocks feature is something that has been added on top of the Shopify Promo App experience, aimed at making Affirm's promotional messaging configuration simple for merchants, especially for those who lack developer resources. In short, this method of adding promotional messaging leverages Shopify's Theme Editor, allowing merchants to copy and paste the required code for it to work.
While we recommend this method for implementing Affirm's Promotional Messaging on Shopify, we do have our legacy documentation available as well.
Why use this method?
Traditionally, adding promotional messaging on Shopify requires that you look at your Shopify theme's HTML/CSS editor section, where some technical expertise is needed. Without knowledge of inspecting elements and editing code, the chance of incorrectly implementing Affirm's promotional messaging increases. Additionally, this method doesn't allow you to preview updates in real-time, nor does it allow Affirm to push out updates at scale without manual intervention on your part to keep things up-to-date.
Leveraging Promo App Blocks eliminates these pain-points.
Installation
Requirements
In the latter half 2021, Shopify released Online Store 2.0 along with Dawn, which became the default theme for Shopify merchants. Shopify has since deprecated the older, Legacy themes. Merchants on legacy themes will still use the existing promo app workflow. Stores with Online Store 2.0 themes like Dawn will be able to use these new Promo App Blocks.
The installation process is exactly the same as the current Shopify Promo App (aka Affirm Pay-Over-Time). We utilize a different framework called theme app extensions, using our current Promo App as a base. You will choose the region you have an Affirm account in, log-in with your credentials, and be redirected to the Promo App page. Once installed, you would go to their store’s theme editor to add the block.
Setup
You can view the video with this link, or follow the step-by-step process below:
- If you already have the Promo App installed, you will be able to go straight to the theme editor. From the Shopify dashboard, under sales channels click online Store > themes.
)
- The published theme should be at the top (in this example, it's the default theme, Dawn).
)
- Click customize to enter the theme editor.
)
-
From the top home page drop-down, select the products section.
)
-
Choose the default product option.
)
-
Under the template section, click on add block.
)
-
Select the affirm product promo block.
)
-
Click on the Affirm product promo block and drag to its correct placement under the price block.
)
-
There are multiple customization options for the Affirm product promo. These options include the following: text alignment, font size, logo color, and logo type.
)
-
Once you have made your selections, click save to finalize your page.
)
After saving, you're now ready to add Affirm Promo Blocks!
Adding Affirm content app blocks
Affirm currently supports promotional messaging on the product, collection, and cart pages. In the future, Affirm will also support homepage and featured product, which the old Promo App does not support.
To add a block:
-
Navigate the desired page (in this example, a product page). In the left panel, click add block. You'll see Affirm product promo under the app blocks section.
- By default, the block will be added to the bottom of the list.
- Use the :: next to the block to drag and drop the promotional messaging below the item price.
- If no messaging is displayed, add your API Key in the block settings/customization section.
That's it! With the ease of implementation and increased flexibility of where you can deploy the code blocks and how you can customize it on the Shopify platform, you should be empowered to make promotional messaging updates with confidence.