Countdown timer
Placement and available controls for the Countdown timer block.
Where to find it
Open the parent section and use Add block where this block is offered.
Editor controls
Conditional controls appear after choosing the relevant source, style or option. Saved values may differ from new defaults.
- Color source
- Theme colors use Color DNA, Color scheme uses a shared Shopify preset, and Custom affects only this block.
- Color schemeConditional
- Choose an available Shopify color scheme.
- BackgroundConditional
- Choose a local color when the relevant custom source is enabled.
- TextConditional
- Choose a local color when the relevant custom source is enabled.
- Timer and iconConditional
- Choose a local color when the relevant custom source is enabled.
- Duration (minutes)
- Adjust within the range offered by the theme editor.
- Urgent animation threshold (seconds)
- Adjust within the range offered by the theme editor.
- Text before timer
- Edit the text shown by this component.
- Text after timer
- Edit the text shown by this component.
- Expired text
- Edit the text shown by this component.
- Font size
- Adjust within the range offered by the theme editor.
- Font weight
- Choose the presentation or source that fits this component.
- Show clock icon
- Enable or disable this option and preview the result.
- Icon size
- Adjust within the range offered by the theme editor.
- Background
- Choose a local color when the relevant custom source is enabled.
- Enable background gradient
- Enable or disable this option and preview the result.
- Gradient end colorConditional
- Choose a local color when the relevant custom source is enabled.
- Gradient angleConditional
- Adjust within the range offered by the theme editor.
- Text color
- Choose a local color when the relevant custom source is enabled.
- Timer color
- Choose a local color when the relevant custom source is enabled.
- Vertical padding
- Adjust within the range offered by the theme editor.
- Horizontal padding
- Adjust within the range offered by the theme editor.
- Border radius
- Adjust within the range offered by the theme editor.
- Top margin
- Adjust within the range offered by the theme editor.
- Bottom margin
- Adjust within the range offered by the theme editor.