---
updatedAt: 2025-11-13T14:13:12.000Z
agentTools:
  siteIndex: https://docs.affirm.com/llms.txt
  projectIndex: https://docs.affirm.com/platforms/llms.txt
---

# ALA Messaging with Theme App Blocks

Explore the various ways to incorporate Affirm's as-low-as (ALA) promotional messaging into your Shopify store. With several methods to choose from, implementing promotional messaging is now easier than ever.

<HTMLBlock>{`
<style>
  .dropdown-menu {
    font-family: Arial, sans-serif;
    max-width: 250px;
    margin-left: auto; /* Align to the right */
  	margin-right: 0; /* Ensure it's flush to the right */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background: #4A4AF4;
    overflow: hidden; /* Ensure the container grows with content */
  }

  .dropdown-item {
    margin-bottom: 10px;
  }

  .dropdown-toggle {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
  }

  .dropdown-toggle:hover {
    background: #f0f0f0;
  }

  .dropdown-content {
    display: none;
    margin-top: 5px;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  .dropdown-item.open .dropdown-content {
    display: block;
  }

  .flag-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }

  .product-item {
    margin-bottom: 5px;
  }

  .product-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  
  .country-title {
    font-family: Arial, sans-serif;
    font-size:20px;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
  } 

</style>
  <div class="dropdown-menu">
    <p class="country-title" alt="Countries where this product is available">Country Availability</p>

    <div class="dropdown-item">
      <button class="dropdown-toggle" onclick="toggleDropdown(event)" alt="Drop down menu displaying the available countries for this product">
        <b>Country List</b> ⬇️
      </button>
      <div class="dropdown-content">
        <div class="product-item">
          <img src="https://files.readme.io/a4c8b3d6596d943e2b93c82cb1d432a2edaf6998667835c2e97ef4a31d460c7e-us-circle-01.png" alt="USA" class="flag-icon">
          USA
        </div>
        <div class="product-item">
          <img src="https://files.readme.io/3ca294a1b4b8b8506c3ff32876abc6e3e33d0e65a509dab81398915094bdbc5c-61TcZ33ZrJL._AC_UY1000_.jpg" alt="Canada" class="flag-icon">
          Canada
        </div>
      </div>
    </div>

  </div>
`}</HTMLBlock>

## Overview

Integrating Affirm's as-low-as (ALA) messaging into your store is now easier than ever! We provide **three promo blocks** and **one embeddable app** through the Shopify Theme Editor, all designed to improve the shopping experience for your customers.

The ALA methods include the following:

* **[Product Promo Block](https://docs.affirm.com/platforms/docs/shopify-theme-editor-product-promo-block)**
* **[Collection Promo Block](https://docs.affirm.com/platforms/docs/shopify-theme-editor-collection-promo-block)**
* **[Cart Promo Block](https://docs.affirm.com/platforms/docs/shopify-theme-editor-cart-promo-block)**
* **[Cart Drawer Promo](https://docs.affirm.com/platforms/docs/shopify-cart-drawer-promo)**

> 🚧 Shopify Theme Compatibility
>
> Please note, if your Shopify store utilizes a third-party theme, there might be compatibility issues with Affirm's theme app blocks and embedded applications. If your theme is incompatible, advanced customizations may be required.

***

## Affirm ALA Promos

For more information on Affirm's ALA (as-low-as) messaging promos with Shopify and their integration details, please visit the pages below.

<HTMLBlock>{`
<div>
  


  
    <div class="grid">
      <a class="card card--horizontal" href="https://docs.affirm.com/platforms/docs/shopify-theme-editor-product-promo-block" style="padding-top:10px; padding-bottom:10px">
        <img src="https://files.readme.io/9865633-Apparel-184x184-black.svg" alt="adobe" class="card__image">
        <div class="card__content">
          <strong class="card__heading">Product Promo Block</strong>
          <p class="card__description">Learn how to add the "Affirm Product Promo" block in Shopify.</p>
        </div>
      </a>
       
      <a class="card card--horizontal" href="https://docs.affirm.com/platforms/docs/shopify-theme-editor-collection-promo-block" style="padding-top:10px; padding-bottom:10px">
        <img src="https://files.readme.io/2fa0791-Learning_and_development-60x60-black.svg" alt="bigcommerce" class="card__image">
        <div class="card__content">
          <strong class="card__heading">Collection Promo Block</strong>
          <p class="card__description">Learn how to add the "Affirm Collection Promo" block in Shopify.</p>
        </div>
      </a>

      <a class="card card--horizontal" href="https://docs.affirm.com/platforms/docs/shopify-theme-editor-cart-promo-block" style="padding-top:20px; padding-bottom:20px">
        <img src="https://files.readme.io/31aed47-Choose_us_at_checkout-60x60-black.svg" alt="sfcc" class="card__image">
        <div class="card__content">
          <strong class="card__heading">Cart Promo Block</strong>
          <p class="card__description">Learn how to add the "Affirm Cart Promo" block in Shopify.</p>
        </div>
      </a>

      <a class="card card--horizontal" href="https://docs.affirm.com/platforms/docs/shopify-cart-drawer-promo" style="padding-top:20px; padding-bottom:20px">
        <img src="https://files.readme.io/8e86e4c-Payments-60x60-black.svg" alt="SAP" class="card__image">
        <div class="card__content">
          <strong class="card__heading">Cart Drawer Promo</strong>
          <p class="card__description">Learn how to implement the "Affirm Cart Drawer" app within your Shopify "Cart Drawer."</p>
        </div>
      </a>
      
    </div>
   </div>

  

<style>
.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.card {
    display: flex;
    align-items: center;
    width: 360px; /* Adjust width based on the attached image */
    background-color: #ffffff;
    padding: 5px 10px;
    border-radius: 20px; /* Rounded corners */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow */
    text-decoration: none;
    color: #333; /* Text color */
    transition: transform 0.3s;
    margin: 10px; /* Added margin to avoid cards sticking to each other */
}

.card:hover {
    transform: translateY(-5px); /* Slight upwards lift on hover */
}

.card__image {
    margin-right: 20px;
    width: 50px; /* Adjust based on the attached image */
    height: auto;
}

.card__content {
    display: flex;
    flex-direction: column;
}

.card__heading {
    margin: 0 0 5px 00;
    font-size: 18px; /* Adjust font size if needed */
    font-weight: normal; /* Made normal as per your image */
}

.card__description {
    margin-top: 4px;
    font-size: 14px; /* Adjust font size if needed */
}
  @media only screen and (min-width: 640px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }

  .grid--full {
    grid-template-columns: 1fr;
  }
}

</style>
`}</HTMLBlock>

***

## Installation Checkpoint

To utilize any of the ALA (as-low-as) messaging features with Shopify, the Affirm Pay-Over-Time messaging app must be installed on your store. You can access the download page for the Affirm Pay-Over-Time messaging app [here](https://apps.shopify.com/affirm).

For a quick overview of the Affirm app installation process, please review the "Install the Affirm App" section.

### Install the Affirm App

To successfully install and set up the Affirm Messaging App, please follow the steps outlined below:

1. Navigate to the [Affirm page](https://apps.shopify.com/affirm) in Shopify's app store.
2. Click the **Add app** button to install the Affirm pay‑over‑time messaging app.
3. On the app overview page, click **Install app**. You can also view additional details about how the app impacts settings for your site.
4. Log in to your Affirm Dashboard, which will then redirect you to the Affirm App within Shopify.
5. If your theme supports Shopify's [Online Store 2.0 Themes](https://help.shopify.com/en/manual/online-store/themes/managing-themes/versions#features), a banner will appear, which will then guide you to your store's theme editor. If you were previously using the Affirm Messaging App, make sure to disable your current messaging *before* enabling messaging from the Theme Editor.

<Image align="center" src="https://files.readme.io/5756811-Screenshot_2024-02-13_at_10.54.06_AM.png" />

# Sub pages

* [Shopify Theme Editor- Product Promo Block](https://docs.affirm.com/platforms/docs/shopify-theme-editor-product-promo-block.md)
* [Shopify Theme Editor- Collection Promo Block](https://docs.affirm.com/platforms/docs/shopify-theme-editor-collection-promo-block.md)
* [Shopify Theme Editor- Cart Promo Block](https://docs.affirm.com/platforms/docs/shopify-theme-editor-cart-promo-block.md)
* [Shopify Cart Drawer Promo](https://docs.affirm.com/platforms/docs/shopify-cart-drawer-promo.md)

# Sibling pages

* [Connecting the Affirm Payments App](https://docs.affirm.com/platforms/docs/connecting-the-affirm-payments-app.md)
* [Using the Promotional Messaging App for Shopify](https://docs.affirm.com/platforms/docs/using-the-promotional-messaging-app.md)
* [Processing transactions in Shopify](https://docs.affirm.com/platforms/docs/processing-transactions-in-shopify.md)
* [Set a Price Floor for Checkout (Shopify Plus only)](https://docs.affirm.com/platforms/docs/set-a-price-floor-for-checkout-shopify-plus-only.md)
* [Manage Affirm payment customizations for Shopify stores](https://docs.affirm.com/platforms/docs/manage-affirm-payment-customizations-for-shopify-stores.md)
* [Shopify FAQs](https://docs.affirm.com/platforms/docs/shopify-faq.md)
* [Uninstall the Affirm Payment Method](https://docs.affirm.com/platforms/docs/uninstall-the-existing-affirm-payment-method.md)