1. What is Coupon code block?
The Coupon code block appears on the Product page, showing your active discount codes to customers before they reach the cart. Each code has an Apply button that adds the code to the customer's cart in one click, so they don't have to copy it and paste it in manually at checkout.
The block is also available in Quick view and the Featured product section.
2. How to set up Coupon code block?
Want to display coupon codes on the product page but don’t know how to start? Here’s how:
STEP 1: Add the Coupon code block
In the Theme editor, go to the product page, and in the Product information section, add the Coupon code block to your product page.
STEP 2: Add the Coupon code content
Scroll to Coupon code 1, Coupon code 2 setting group, and enter:
- Text to show along with the coupon code.
- Coupon code (make sure the code works in your admin).
STEP 3: Style the block
- Choose edge styles for the block and the coupon codes.
-
In the Heading setting group:
- Choose an available Icon, use an icon from the icon list, or upload your own icon (image or SVG code)
- Edit Icon size.
- Enter Text for the block heading.
- Choose Colors for block elements.
STEP 4: Click “Save” when done.
3. How to set up the Apply button?
From version 10.3.0, each coupon code has a real button instead of a plain text link. You can change both labels, choose a button style to match the rest of your product page, and set its colours independently of the theme.
STEP 1: Open the settings
Click on the Coupon code block and find the new Apply button settings group.
STEP 2: Edit the two labels
- Apply button label – shown before the code is used.
- Applied button label – shown once the code has been added to the cart.
STEP 3: Choose the button style
At Button style, choose between Primary, Secondary, or Text link.
STEP 4: Set the button colours
Configure the button colour settings.
STEP 5: Click "Save" to apply changes.
4. How to add a Countdown timer to the Coupon code block?
If you want to add a countdown timer to Coupon code block to create urgency among customers and encourage immediate purchases, here’s how:
STEP 1: Open the settings
Click on Coupon code block, and scroll down to Countdown timer settings group.
STEP 2: Enable countdown timer
At Countdown timer, choose between:;
- Standard timer: Count down to a set end time.
- Evergreen timer: Create continuous urgency by automatically restarting, perfect for ongoing promotions that don't have a fixed end date.
STEP 3: Set up the countdown timer
|
For Standard timer |
For Evergreen timer |
|
|
STEP 4: Customize the layout of the countdown timer
At Timer style settings group, choose Text position, Timer style, Line and border for the countdown timer.
STEP 5: Click "Save" to apply changes.
