HYPER theme
Try Hyper freeResourcesOther solutions
  • What is Hyper theme
  • Changelog
  • Refund policy
  • Support policy
  • Getting started
    • Install Hyper theme
    • Set up my store as Hyper demo
    • Update Hyper theme
    • Theme license & Transfer
  • Page's global sections
    • Announcement bar
    • Top bar
    • Header
      • Mega menu
      • Use Country/ Region selector
      • Use Language selector
    • Footer
    • Cart drawer
    • Popup
    • Product compare
    • Quick view
    • Spotlight picks
  • Theme sections
    • Banner with hotspots
    • Before/after image slider
    • Brand logos 🔥
    • Button group
    • Collapsible tabs
    • Collection list
    • Collection list slider
    • Collection tabs
    • Contact form
    • Countdown timer
    • Custom content
    • Custom liquid
    • Email signup
    • Favorite products 🔥
    • Featured blogs
    • Featured collection
    • Featured countdown timer 🔥
    • Featured product
    • Horizontal products list 🔥
    • Image with text
    • Image with text overlay
    • Image with text slider 🔥
    • Lookbook slider
    • Multicolumn
    • Multicolumn with icon
    • Press 🔥
    • Products bundle 🔥
    • Promotion banner
    • Recently viewed products
    • Rich text
    • Shop the feed 🔥
    • Scrolling banner
    • Scrolling gallery images
    • Scrolling promotion
    • Slideshow
    • Tabs content
    • Testimonials
    • Testimonials masonry 🔥
    • Video
    • Video hero
  • Theme settings
    • General
    • Animations
    • Blog cards
    • Buttons
    • Cart
    • Color swatches
    • Colors
    • Currency format
    • Custom CSS
    • Layout
    • Logo
    • Product badges
    • Product cards
    • Product compare
    • Quick view
    • Search behavior
    • Social media
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Breadcrumbs
      • Product information
      • Quick comparision table
      • Quick order list
      • Related products
    • Collection page
      • Collection template
      • Collection banner
      • Product grid
    • Collections list page
  • Other pages
    • Blogs
    • Blog posts
    • Cart
    • Password
    • Search page
  • FAQs
    • Add Highlighted text to your Headings
    • Add gift wrap option to my cart
    • Change the default sorting of a collection
    • Combined listings app
    • Customize the checkout
    • Remove 'Powered by Shopify' in Copyright
    • Remove text Tax included and Shipping calculated at checkout below the product price
    • Set up Local Pickup option
    • Set up quantity rules and volume pricing in B2B
    • Show Payment icons
Powered by GitBook
On this page
  • How to add a Countdown timer section to your Shopify store
  • How to edit a Countdown timer section
  • Section settings
  • Block settings
  1. Theme sections

Countdown timer

PreviousContact formNextCustom content

Last updated 4 months ago

A countdown clock for promotion/new collection release can bring excitement to customers that have been waiting for the event.

How to add a Countdown timer section to your Shopify store

Steps

  1. In the theme editor (Customize), click Add section.

  2. Locate Countdown timer.

  3. Make necessary changes.

  4. Save.

How to edit a Countdown timer section

Section settings

General settings

Pick a Background image for the timer and set the opacity for it in the Image overlay opacity range.

Content settings

Change the Content alignment (Left/Center/Right) and then align the text inside - Text alignment (Left/Center/Right).

Block settings

You can choose to add more elements to the Countdown timer section:

Heading

Give the section a Heading and adjust the Heading size.

Subheading

Give the section a Subheading.

Description

Give the section a Description and adjust its size.

Countdown timer

Choose between two countdown types: Evergreen or Fixed time.

  • Evergreen: This timer repeats after a set duration.

    • Ideal for:

      • Ongoing promotions (e.g., flash sales every month).

      • Seasonal offers that repeat periodically.

  • Fixed time: Counts down to a specific date and time.

    • Ideal for:

      • Product launches.

      • Limited-time promotions (e.g., holiday sales).

    • Settings:

      • Ends time: Set the exact date and time in the format YYYY/MM/DD HH:MM or YYYY/MM/DD HH:MM AM/PM.

Button

Add a Button to link customers to your desired page.

Image

You can add multiple Image blocks in the Countdown timer section on both desktop and mobile screens to attract customers' attention.

Adjust the Desktop Image width between 150px and 350px.

Especially, you are able to change the Desktop vertical position and Desktop horizontal position for the Image blocks.

Add the following predefined custom classes for the image's floating effects:

  • media-mover

  • media-mover-slower

  • media-mover-reverse

On mobile view, images will be vertically stacked by default.

⚠️