Stencil promotional messaging integration

Add promotional messaging to your BigCommerce Stencil theming engine.

Overview

Use the following steps to configure promotional messaging on Stencil. If you are unsure of what theme you are currently using, you can check here.

📘

Using Blueprint?

Check out our integrating Affirm with BigCommerce Blueprint documentation.


Step 1: Install the Affirm Marketing app

Once logged in to your BigCommerce dashboard, visit the Affirm Marketing app listing. Click "Get App" and follow the app installation steps.

Step 2: Add Affirm scripts

  1. Go to Apps > Affirm Marketing > Installation.
  2. Enable Script Manager Injected File: JQuery by clicking on Click to Install .
  3. Enable  Script Manager Injected File: Affirm Marketing by clicking on Click to Install.

Step 3: Configure the Affirm app settings

  1. Go to Apps > My Apps > Affirm Marketing > Settings.
  2. Enter the Live Public API Key from your Affirm dashboard (available here). For testing and development only, enter the public key from your Affirm Sandbox dashboard (available here).
  3. For testing and development only, leave Sandbox Mode enabled for testing and development (optional).
  4. Click Save.

Step 4: Enable Affirm's enhanced analytics (optional)

Affirm's Enhanced Analytics can help you gain new insights into your customers' shopping journeys and preferences. Enhanced Analytics also allows you to easily A/B test new promotional messaging and financing programs to ensure that their sites are fully optimized for both cost and conversion rates.

To enable enhanced analytics:

1. Go to Apps > My Apps > Affirm Marketing > Settings.
2. Enable Enhanced Analytics in the settings.
3. Click Save.

Step 5: Configure Promotional Messaging

Note: For Multi-Storefront, complete the below steps for all channels, toggling the channel using the top-right dropdown

1. Go to Apps > My Apps > Affirm Marketing > Promotional Messaging.
2. Toggle Promotional Messaging on Products to enable Affirm messaging on the product pages.
3. Toggle Promotional Messaging on Cart Page to enable Affirm messaging on the product page.
4. Toggle Promotional Messaging on Quick Cart Page to enable Affirm messaging on the quick cart page.
5. Toggle Promotional Messaging on Category Page to enable Affirm messaging on the category page.
6. Complete the applicable fields for both the different page settings.
6. Click Save.

Promotional messaging fields

FieldDescription
Selector IDSee details below
Site ThemeSelect the Custom option.
HeightThe height of the promotional messaging.
WidthThe width of the promotional messaging.
Minimum Product PriceThe minimum price to display Affirm promotional messaging on product page.
Product Page Price (Product Page settings only)Only enter a value in this field if instructed by Affirm. Use if there are issues where Affirm promotional messaging price is not changing when the product price changes.
Product Page Options (Product Page settings only)Only enter a value in this field if instructed by Affirm. Use if there are issues where Affirm promotional messaging price is not changing when the product price changes.
Logo TypeSelect the Affirm to show as plain text, a logo, or a symbol.
Logo Colorselect the Affirm logo/symbol to show as blue, black, or white.
Inline Pricing (Product Page and Category Pages settings only)Only toggle on if instructed by Affirm. Use if the product price is dictated by options, rather than a set base price.
Minimum Cart Total (Cart and Quick Cart settings only)The minimum cart total to display Affirm promotional messaging.
Product Container Selector (Category settings only)Only enter a value in this field if instructed by Affirm.

Other helpful resources

Congrats! You've successfully set up your promotional messaging. Ready to get up and running? Head over to our Go-live checklist.