Maison lets you display a countdown timer for individual products. The timer can appear on product cards, over the product media gallery, or as a larger countdown inside the product information area.
The countdown uses a product metafield, allowing each product to have its own expiration date and time.
How to Set Up Product Countdown Timers in Maison
Steps:
Create the product countdown metafield
-
From your SHOPLINE admin, open Settings > Customize data.
-
Select Product under the metafield settings.
-
Click Add field.
-
Enter a field name such as Product countdown.
-
Set the namespace to 'theme' and key to 'countdown' and you will have namespace and key is:
theme.countdown -
Select Date and time as the field type.
-
Add an optional description to explain that the field controls the Maison product countdown timer.
- Click Save.
The metafield definition only needs to be created once. After it is created, the countdown field becomes available on all product pages in the SHOPLINE admin.
Set an expiration date for a product
-
From your SHOPLINE admin, open Products.
-
Select the product where you want to display a countdown timer.
-
Scroll to the Customize data or metafield area.
-
Find the Product countdown field.
-
Select the required expiration date.
-
Select the required expiration time.
- Click Save or Update.
The selected date and time must be in the future. Maison will not display the countdown if the field is empty or the expiration time has already passed.
Repeat these steps for each product that requires a countdown. Each product can use a different expiration date and time.
Add the Product badges block to a product card
-
Open the section that contains the product cards.
-
Expand the product card structure.
-
Locate Product info, Product image, or the available product card container.
-
Click the + icon where blocks can be added.
-
Select Product badges.
-
Open the newly added Product badges block.
-
Enable Show countdown timer.
-
Configure the sold-out and discount badge settings if required.
-
Click Save.
The exact position of Product badges may vary depending on the product card layout used by the section.
Display the countdown on product cards
-
From your SHOPLINE admin, open Online Store > Design.
-
Locate your Maison theme and click Design.
-
Open a template or section that displays product cards.
This may include:
- A collection product list
- A Featured collection section
- A Recommended products section
- Search results
- Other sections that display products
-
Open the section containing the product cards.
-
Expand the product card settings.
-
Locate the Product badges block.
-
Enable Show countdown timer.
-
Enable Show countdown when on sale if the timer should only appear on discounted products.
-
Click Save.
The countdown appears inside the product card badge area and uses a compact format:
Days : Hours : Minutes : Seconds
Only products with a valid future value in the theme.countdown metafield will display the countdown.
Display the full countdown on the product template
-
From the Maison Theme Editor, use the page selector to open Products.
-
Select the product template you want to edit.
-
Open the main Product section.
-
Expand Product information.
-
Click the + icon to add a new block.
-
Select Countdown timer.
-
Drag the Countdown timer block to the required position.
-
Click Save.
A recommended block order is:
Product title
Product price
Countdown timer
Variant picker
Buy buttons
The full Countdown timer block displays separate labels for:
- Days
- Hours
- Minutes
- Seconds
This layout is larger and more prominent than the compact countdown displayed in Product badges.
Configure the full Countdown timer block
-
Open the Countdown timer block inside Product information.
-
Enable Show countdown when on sale if the countdown should only appear when the selected variant is discounted.
-
Use Text size to adjust the size of the countdown numbers.
-
Use Desktop text alignment to control the alignment on desktop devices.
-
Use Mobile text alignment to control the alignment on mobile devices.
-
Adjust the block spacing to control the space around the countdown.
-
Adjust the block width and height if required.
-
Click Save.
The full countdown automatically uses the expiration date stored in the product’s theme.countdown metafield.
Display a compact countdown over the product media
-
Open the required product template in the Maison Theme Editor.
-
Open the main Product section.
-
Expand the product media area.
-
Open the media layer or overlay container.
-
Select the Product badges block.
-
Enable Show countdown timer.
-
Enable Show countdown when on sale if required.
-
Click Save.
This option displays the compact countdown over the product media gallery together with the discount or sold-out badges.
Use this option when you want the countdown to appear on the product image instead of inside the product information area.
Show the countdown only for sale products
-
Open the relevant Product badges or Countdown timer block.
-
Enable Show countdown when on sale.
-
Click Save.
When this setting is enabled, the product must have a valid compare-at price that is higher than its selling price.
On product cards, Maison checks whether the product is on sale.
On the product template, Maison checks whether the currently selected variant is on sale.
This means the countdown may disappear when a customer selects a variant that does not have a compare-at price.
Display the countdown on non-sale products
-
Open the relevant Product badges or Countdown timer block.
-
Disable Show countdown when on sale.
-
Click Save.
The countdown can now appear on any product with a valid future value in the theme.countdown metafield, even when the product is not discounted.
This can be useful for:
- Product launches
- Limited-time availability
- Restock events
- Pre-order deadlines
- Seasonal campaigns
Configure countdowns in multiple product sections
-
Open each section that displays product cards.
-
Locate the Product badges block inside that section.
-
Enable Show countdown timer.
-
Configure Show countdown when on sale as required.
-
Click Save.
Product card settings are saved separately for each section or template.
For example, enabling the countdown in a collection product list may not automatically enable it in a homepage Featured collection section.
Repeat the configuration for every section where the countdown should appear.
Configure countdowns on multiple product templates
-
Open the product template selector in the Maison Theme Editor.
-
Select the first product template.
-
Add or configure the Countdown timer and Product badges blocks.
-
Click Save.
-
Select the next product template.
-
Repeat the same configuration.
The theme.countdown metafield does not need to be recreated. However, the countdown blocks must be configured separately for each product template.
Remove the countdown from a product
-
From your SHOPLINE admin, open Products.
-
Select the product.
-
Scroll to the product metafield area.
-
Find the Product countdown field.
-
Clear the date and time value.
-
Click Save or Update.
The countdown will disappear from all product cards and product templates displaying that product.
To hide countdowns without removing product metafield values, disable Show countdown timer in the Theme Editor.
Product countdown display options
Maison provides two product countdown styles.
Compact countdown
The compact countdown:
- Appears inside Product badges.
- Can be displayed on product cards.
- Can be displayed over the product media gallery.
- Uses a compact Days, Hours, Minutes, and Seconds layout.
- Uses the existing Product badges styling.
- Can appear with discount and sold-out badges.
Full countdown
The full countdown:
- Appears inside Product information.
- Displays separate Days, Hours, Minutes, and Seconds labels.
- Includes text size settings.
- Includes desktop and mobile alignment settings.
- Includes spacing and block size settings.
- Is designed to be more visible on the product details page.
You can enable both countdown styles on the same product template. However, using both may display the same countdown twice, so selecting one primary style is recommended.
Product countdown behavior
- The countdown reads its expiration value from the product metafield
theme.countdown. - Each product can have a different expiration date and time.
- Products without a countdown metafield value do not display a timer.
- Products with an expired countdown value do not display a timer.
- The timer updates automatically as the remaining time changes.
- The compact countdown can appear on product cards and over product media.
- The full countdown can appear inside the product information area.
- The countdown can be limited to sale products.
- Product card countdown settings are configured separately for each section.
- Product page countdown settings are configured separately for each product template.
- Variant selection can affect the countdown when Show countdown when on sale is enabled.
Countdown expiration behavior
When the countdown reaches zero:
- The countdown timer is hidden.
- The product remains available unless its inventory is changed separately.
- The product price is not changed automatically.
- The compare-at price is not removed automatically.
- The Add to Cart button remains available unless it is disabled separately.
- The metafield value remains saved until it is cleared or replaced.
The countdown controls the visual timer only. Product pricing, inventory, discounts, and availability must be managed separately.
Troubleshooting
If the countdown does not appear, make sure the product metafield namespace and key are exactly theme.countdown.
If the countdown field is not available on the product page, make sure the product metafield definition has been created in Settings > Customize data.
If the countdown remains hidden, check that the expiration date and time are still in the future.
If the countdown appears on the product page but not on product cards, enable Show countdown timer in the Product badges block of the relevant product card section.
If the countdown appears on product cards but not inside Product information, add the separate Countdown timer block to the product template.
If the countdown does not appear over the product image, make sure Product badges has been added to the product media layer or overlay area.
If the countdown does not appear on a non-sale product, disable Show countdown when on sale.
If the countdown disappears after selecting another variant, check whether the newly selected variant has a compare-at price higher than its selling price.
If the countdown appears in one Featured collection but not another, configure the Product badges block separately in each section.
If the countdown appears on one product template but not another, add or enable the countdown blocks on the missing template.
If the countdown displays the wrong time, verify the product expiration date, expiration time, and the store’s configured time zone.
If an expired timer remains visible in the Theme Editor preview, save the theme settings and refresh the preview.
Need Further Assistance
If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
Enable the size chart on product pages
Maison release notes