All documentation

Start here

Functionality

Topics

Reference

Timesact on your storefront and theme

Timesact shows its button, messages and badges through its app embed, a Shopify theme app extension that loads one storefront script, and renders them in the browser with JavaScript. Timesact works with Shopify themes and with the page builders EComposer, PageFly, Shogun, GemPages and Instant.

What can a Timesact Customer Experience show on the storefront?

  • On the product page, a Timesact Customer Experience can show a button, a message, a badge on the product image and a countdown timer; Pre-order can add the split payment options and Back in Stock the Notify Me form.
  • The collection page has its own button, message and badge settings, separate from the product page, and Back in Stock can show its Notify Me form there too.
  • The cart page settings hold the cart label, a cart alert pop-up shown when a shopper clicks Pre-order or opens the cart, and Mixed cart checkout.
  • While Pre-order, Back in Stock or Coming Soon is active on a variant, Timesact hides the theme's dynamic checkout button (such as Buy it now) and shows it again for regular stock.

How are Timesact's button, message and badge styled?

  • The button either keeps the theme's Shopify button styling (Default) or takes the merchant's own colors, size and border (Custom).
  • The button preview in the app uses a sample theme button; on the store, the button follows the Shopify theme.
  • The message shows above or below the button.
  • The badge sits on the product image as a ribbon, rounded, square, circle or rectangle shape, at the top or bottom and on the left or right, with its own text, font size and colors.
  • The message takes its own font size, weight and style, alignment and text color; the badge its font size, text color and background color; a Custom button its colors, size, border and corner rounding.

How does the Timesact countdown timer work?

  • The countdown timer counts down to a date and time the merchant sets, starting now or at a set later time, or runs for a fixed number of minutes from when the shopper opens the page.
  • A Countdown to a date timer carries a time of day as well, so it counts to the exact hour and minute set.

How does Timesact connect to a Shopify theme?

  • Customer Experiences show on the storefront once the Timesact app embed is turned on in the Shopify theme editor and the theme is saved, and the embed is switched on theme by theme.
  • Turning the Timesact app embed on in a draft theme lets a merchant or agency preview the experience on that theme's preview link while the published theme stays as it is.
  • Timesact turns on Shopify's Continue selling when out of stock while a pre-order is active with When Pre-order shows set to Only when out of stock or Always, and that is a variant setting every theme shares.
  • Timesact keeps each variant's setup in Shopify metafields on the merchant's store, so a product duplicated in Shopify carries the original's Timesact setup.
  • Each Customer Experience template is stored as a Shopify metaobject on the merchant's store, which is how Translate & Adapt lists it, as Timesact Customer Experience.

What are Timesact's Developer settings for?

  • Developer settings, under Billing & Account, hold the CSS selectors Timesact's storefront script uses to find a theme's product form, Add to cart button, badge and message spots, variant inputs, quick-view pop-ups and the Wishlist header icon; most themes need no change.
  • Developer settings have four sections, Product page, Collection page, Quick view and Wishlist, and Reset to defaults puts back Timesact's built-in selectors.
  • Saved selectors apply from the next page load and replace the built-in defaults field by field; every field left as it is keeps its default.
  • When a product page selector finds nothing, Timesact falls back: the badge goes on the product media, and the message and widgets anchor to the Add to cart button.
  • Product page, Collection page and Quick view fields take jQuery selectors, so plain CSS works too; the two Wishlist fields take plain CSS.
  • Featured product sections on the home page and other pages use the Product page selectors, and several product forms on one page each get the button and message.
  • Variant change delay (ms), in Developer settings, sets how long Timesact waits after a shopper switches variant before it updates the button, message and badge.
  • The default Variant change delay is 50 ms.

How is Timesact's storefront text translated?

  • Storefront wording is translated in Shopify's free Translate & Adapt app, under Metaobjects, in the 'Timesact Customer Experience' entry for the template (named 'Ce' plus a number), on every plan.
  • To translate Timesact's storefront text, add and publish the language under Shopify Settings > Languages, then in Translate & Adapt translate only the words a shopper reads, leave field names and the codes in capitals as they are, and Save.
  • The store's primary-language wording is edited in the Timesact template itself (the button text, message, badge text and Notify Me form on the Product page, then the Collection page), and Translate & Adapt handles the other published languages.
  • Timesact's storefront text can also be translated with langify.

Which storefront settings does Timesact have?

Where: Experiences > your template > Storefront > Product page > Button

Setting What it does Plan
Button
  • Default: Use Shopify's default button styling
  • Custom: Set your own button colors, size and border.
 Every plan
Dimensions
  • Width
  • Height
 Every plan
Border settings
  • Border color
  • Border width
  • Corner rounding
 Every plan
Colors
  • Text color
  • Background color
 Every plan
Font settings
  • Font size
  • Font weight
  • Font style
 Every plan

Where: Experiences > your template > Storefront > Product page > Message

Setting What it does Plan
Message text Every plan
Message placement
  • Below button
  • Above button
 Every plan
Font settings
  • Font size
  • Font weight
  • Font style
  • Alignment
  • Text color
 Every plan

Where: Experiences > your template > Storefront > Product page > Badge

Setting What it does Plan
Enable badge Every plan
Badge text Every plan
Badge type
  • Ribbon
  • Rounded
  • Square
  • Circle
  • Rectangle
 Every plan
Badge position
  • Top
  • Bottom
  • Left
  • Right
 Every plan
Font & color settings
  • Font size
  • Text color
  • Background color
 Every plan

Where: Experiences > your template > Storefront > Product page > Timer

Setting What it does Plan
Enable timer Every plan
Timer content
  • Timer title
  • Timer subheading
  • Timer labels
 Every plan
Timer type
  • Countdown to a date
  • Countdown for a fixed time
 Every plan
Timer starts
  • Start immediately
  • Start at a specific time later
 Every plan
Start date & time Every plan
Timer ends
  • End at a specific date and time
 Every plan
End date & time Every plan
Duration (minutes) Every plan
What should happen when the timer ends?
  • Hide the timer completely
  • Restart the countdown
  • Show a custom message
  • Keep timer visible but stopped
 Every plan
Custom title Every plan
Timer placement
  • Above
  • Below
 Every plan
Spacing
  • Background color
  • Border color
  • Corner rounding
  • Border width
  • Top padding
  • Bottom padding
  • Top margin
  • Bottom margin
 Every plan
Font settings
  • Title
  • Subheading
  • Timer values
  • Labels
 Every plan

Where: Experiences > your template > Storefront > Translations

Setting What it does Plan
Translations Manage translations for this Customer Experience in Translate & Adapt or your preferred translation app. Translate the linked metaobjects to localize it for each market. Every plan

Where: Billing & Account > Developer settings

Setting What it does Plan
Reset to defaults Every plan

Where: Billing & Account > Developer settings > Product page

Setting What it does Plan
Form The cart form element Every plan
Add to cart button The add-to-cart button element Every plan
Add to cart button text Inner text element of the add-to-cart button (optional override) Every plan
Badge Element where the badge is injected Every plan
Message Element where the message is injected Every plan
Variant selector Variant option inputs (select, radio, etc.) Every plan
Widgets Element where widgets are injected Every plan
Shopify payment button Dynamic checkout / payment button Every plan
Variant change delay (ms) Debounce delay after a variant change before re-evaluating Every plan

Where: Billing & Account > Developer settings > Collection page

Setting What it does Plan
Product card The top-level product card container Every plan
Badge Element where the badge is injected on product cards Every plan
Form The cart form element on collection cards Every plan
Add to cart button The add-to-cart button on product cards Every plan
Add to cart button text Inner text element of the add-to-cart button (optional override) Every plan

Where: Billing & Account > Developer settings > Quick view

Setting What it does Plan
Quick-view trigger The button that opens the quick-view Every plan
Container The quick-view modal or drawer wrapper Every plan
Form The cart form inside the quick-view Every plan
Add to cart button The add-to-cart button inside the quick-view Every plan
Add to cart button text Inner text element of the add-to-cart button (optional override) Every plan
Variant selector Variant option inputs inside the quick-view Every plan
Message Element where the message is injected inside the quick-view Every plan
Widgets Element where widgets are injected inside the quick-view Every plan
Badge Element where the badge is injected inside the quick-view Every plan
Shopify payment button Dynamic checkout / payment button inside the quick-view Every plan

Where: Billing & Account > Developer settings > Wishlist

Setting What it does Plan
Product anchor Element the wishlist icon or button is inserted after Every plan
Header cart Header element the wishlist icon is inserted before Every plan

Frequently asked questions

Does Timesact work with my theme and page builder?

Yes. Timesact works with Shopify themes and with the page builders EComposer, PageFly, Shogun, GemPages and Instant. The Timesact support team can fine-tune the implementation for a store's theme, such as the button's placement or the countdown timer's width.

Can I preview Timesact on a draft theme before going live?

Yes. Turning the Timesact app embed on in a draft theme lets a merchant or agency preview the experience on that theme's preview link while the published theme stays as it is. Timesact turns on Shopify's Continue selling when out of stock while a pre-order is active with When Pre-order shows set to Only when out of stock or Always, and that is a variant setting every theme shares. Because that setting is shared by every theme, a variant set up for a draft-theme preview can be bought on the live theme too, so a dedicated test product kept off the live navigation and collections keeps the preview to itself.

The Timesact button briefly shows Add to cart when I switch variants. Can I fix that?

Yes. When a theme redraws the product form a moment after a variant switch, raising Variant change delay in Developer settings gives it time to settle before Timesact updates the button.

Why is Buy it now hidden on my Timesact pre-order product?

While Pre-order, Back in Stock or Coming Soon is active on a variant, Timesact hides the theme's dynamic checkout button (such as Buy it now) and shows it again for regular stock.

Why does a product I duplicated show a Timesact Pre-order button?

Timesact keeps each variant's setup in Shopify metafields on the merchant's store, so a product duplicated in Shopify carries the original's Timesact setup. To keep a duplicated product clean, duplicate from a product that isn't set up in Timesact, or set the copy up the way it should work once it exists.

How do I translate the Timesact Pre-order button into another language?

Storefront wording is translated in Shopify's free Translate & Adapt app, under Metaobjects, in the 'Timesact Customer Experience' entry for the template (named 'Ce' plus a number), on every plan. To translate Timesact's storefront text, add and publish the language under Shopify Settings > Languages, then in Translate & Adapt translate only the words a shopper reads, leave field names and the codes in capitals as they are, and Save.

Can Timesact's countdown timer fit a narrow product column?

Yes. The countdown timer needs enough width for its four blocks; in a narrow product column the support team sets the width for the theme.

Can Timesact show the pre-order shipping date on the customer's order history page?

No. Timesact's storefront script shows the shipping date, so Liquid on other theme pages, such as the customer account page, can't read it.

Step-by-step guides

Install the app or book a free setup call.

Last checked against the app on 5 November 2026.