Articles on: Blockify - Checkout Rules

Add Discount Banner to your Checkout Flow

Overview

Discount Banner is a checkout UI component designed to help merchants promote discount codes directly inside the customer journey — where purchase decisions actually happen.

Instead of relying on external channels like email or popups, Discount Banner brings the offer into the checkout flow, increasing the likelihood that customers will see, copy, and apply the discount.

This feature is part of Checkout/ Post-purchased Customization (Conversion Layer) — focused on improving conversion rate and customer experience at critical touchpoints


Availability by plan

Plus
  • Available on: Checkout page, Thank You page, Order Status page
Premium
  • Available on: Thank You page, Order Status page


What this feature does

Display discount at the right moment

Show discount codes directly on Checkout, Thank You, or Order Status pages to maximize visibility when customers are most engaged.

One-click copy experience

Customers can copy the discount code instantly using the Copy button.

After clicking, the button changes to “Copied!” for 2 seconds, then resets.

Fallback for unsupported browsers

If clipboard is not supported (e.g. Safari mobile), the code remains selectable so customers can copy it manually.

Sync with Shopify discounts

Discount codes are pulled directly from Shopify Admin.

This ensures accuracy and prevents invalid or expired codes.

Simple and controlled setup

Content includes:

Title — short headline above the code

Description — supporting message below the title

No styling configuration is required, ensuring consistency and faster setup.

Independent per page configuration

You can add or remove the Discount Banner on each page separately.

Changes on one page do not affect others.


How to add Discount Banner to your Checkout Flow

Step 1: Add component in Blockify

Go to Checkout Customization/ Post purchase components → Add components → Select a page → Discount Banner


Step 2: Select discount code and conditions

  1. Setup your conditions of displaying the banner
  2. Choose a discount from the Shopify-powered dropdown list

Step 3: Save and copy Block ID

Click Save → Copy the generated Block ID → Go to Checkout Editor

Step 4: Add block in Shopify Checkout Editor

Go to Shopify Checkout Editor → Add Discount Banner block → Paste Block ID


Step 5: Configure content

Title

Example: Your exclusive offer

Description

Example: Use this code at checkout



Step 6: Preview and publish

Use preview to verify the banner → Publish when ready



Updated on: 13/04/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!