Displaying offers on the checkout page can boost conversions. Here’s a quick guide with key considerations and steps for setting up offers in Shopify.

Part 1: Considerations for Displaying Offers on the Checkout Page

While Shopify’s Checkout Extensibility feature allows you to customize offers on the checkout page, there are a few things to keep in mind:

Shopify UI Components and Styling Limitations

Shopify enforces specific UI guidelines for the checkout page. The interface and style of offers must follow Shopify's predefined UI Components. This means that the offers you display on the checkout page may look different from those on other parts of your store, such as the product or cart pages.

Unavailable Components

Some components that are common on product and cart pages are not yet available on the checkout page. These include:
Countdown timers: You won’t be able to add urgency-driven countdown timers directly to the checkout page.
Discount badges: Visual indicators like badges to highlight discounts or limited-time promotions are also unavailable.
Pre-select option: pre-selected checkboxes or automatic selection of specific items are not available.

Content with HTML: Shopify Checkout Extensibility does not support content with HTML & CSS
items
Keep these limitations in mind while designing your checkout page offers to avoid confusion or inconsistency with your branding.

Part 2: Quick Setup Guide

In Shopify admin, go to Settings > Checkout.
In the Configurations section, click Customize.
Add app blocks by dragging and dropping them to the desired position on the checkout page.
Click Save to apply your changes.

Updated on: 20/02/2025