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
    • Combined listings app
    • 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 Featured countdown timer section to your Shopify store
  • How to edit a Featured countdown timer section
  • Section settings
  • Block settings
  • Best practices
  1. Theme sections

Featured countdown timer 🔥

Create urgency and drive sales by combining a countdown banner with product or collection highlights

PreviousFeatured collectionNextFeatured product

Last updated 17 days ago

The Featured Countdown Timer section allows you to add:

  • 1 Countdown timer block (Evergreen or Fixed time)

  • Up to 12 Image cards (categories, products, or collections)

📢 Perfect for sale events, seasonal promotions, or limited-time offers.

How to add a Featured countdown timer section to your Shopify store

Steps:

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

  2. Locate Featured countdown timer.

  3. Make necessary changes.

  4. Save.

How to edit a Featured countdown timer section

Section settings

General

  • Color scheme: Apply one of your theme's preset styles to the section.

Grid settings

  • Number of columns on desktop: Set how many image cards appear per row (2–4 columns).

  • Column gap / Row gap: Adjust the spacing between cards.

Mobile layout

  • Number of columns on mobile: Choose 1-2–3 columns for smaller screens.

On mobile, the image cards display under the Countdown timer.

  • Enable swipe on mobile: Allow horizontal swipe if you have many items.

Block settings

General

  • Color scheme: Apply a custom style for the timer block.

  • Background image: Upload a banner image.

  • Image overlay opacity: Dim the background image for better text visibility.

  • Content spacing: Adjust padding around content.

  • Content position: Choose where to place the content. You can also choose the split the content.

  • Content alignment: Align the content (Left, Center, Right).

Timer settings

  • Countdown type:

    • Evergreen: Auto-reset timer that repeats every defined cycle.

    • Fixed time: Set a specific end date and time.

  • Style:

    • Only number: Shows only numbers.

    • Number with text: Shows numbers with 'days, hours, minutes, seconds' labels.

  • Number size: Adjust the size of the countdown numbers.

Fixed or Evergreen Settings

  • Fixed time: Select the exact end date/time (Format: YYYY/MM/DD HH:MM or YYYY/MM/DD HH:MM AA).

For example:

YYYY/MM/DD HH:MM
YYYY/MM/DD HH:MM AA

2024/06/30 23:59

2024/06/30 11:59 PM

  • Evergreen duration: Define cycle duration (e.g.: Every 2 hours, every day, every month, etc.).

Countdown Text Content

  • Card link: Paste a link or select a page from your Shopify store to link the card image and button to.

  • Subheading & Heading: Add promotional text above the timer.

  • Highlight styles: Animate or emphasize important words.

Learn more: Add Highlighted text to your Headings

  • Heading size: Adjust size of the main heading.

  • Text (optional): Add a supporting paragraph or short promotional description.

Button settings

  • Button label: Add call-to-action text like "Shop Now" or "View Deals".

  • Button style: Choose Primary, Secondary, Underline or Plain.

  • Button icon: Add optional icons to the button.

Advanced

  • Enable preload image: Optimize Largest Contentful Paint (LCP) by preloading background image for faster speed (for sections that are above the fold).

Each image card promotes a category, product, or collection:

  • Image: Upload the promotional image.

  • Link: Direct customers to a collection or product page.

  • Content alignment: Align the text overlay (Left, Center, Right).

  • Heading: Add the title (e.g., "Moisturizers").

  • Highlight styles: Optional highlight or animate key words.

Learn more: Add Highlighted text to your Headings

  • Heading size: Control heading font size.

  • Text (optional): Add a short supporting line.

✅ Tip: Keep headings short for clean, scannable tiles.

Best practices

✅ Use a contrasting overlay for better text readability.

✅ Keep image cards consistent in style and size.

Learn more: Colors

✍️