Brickspace Lab
Contact usContact ShopifyTry a theme
Space
Space
  • Space documentation
  • Getting started
    • Selecting theme colors
  • Theme typography
  • Guides
    • Using color and option swatches
    • Using device specific visibility
  • Dynamic discount popups
  • Adding product subtitles
  • Adding product badges
  • Replacing "Add to cart" for a product
  • Disable "quick add" for a product
  • Templates
    • Collection template
  • Product template
  • Blog template
  • Article template
  • Sections
    • Sections
      • Announcement
      • Header
      • Cart drawer
      • Menu drawer
      • Search drawer
      • Footer
      • Tooltip
      • Fixed menu
      • Featured product
      • Footer
      • Fixed menu
      • Slideshow
      • Email sign-up
      • Video
      • Alt collection grid
      • Banner
      • Block reveal
      • Blog posts grid
      • Collage
      • Collapsible content
      • Collection list grid
      • Collection list slider
      • Collection slider
      • Comparison table
      • Contact form
      • Countdown
      • Custom liquid
      • Discount
      • Featured collection grid
      • Icon grid
      • Image hotspot
      • Logo list
      • Marquee
      • Navigation slider
      • Product list
      • Recently viewed
      • Rich text
      • Search banner
      • Slider
      • Split banner
      • Static chat
      • Store locater
      • Tabs
      • Testimonial grid
      • Testimonial slider
      • Text highlight
  • General
    • Changelog
      • v2.0.0
      • v1.2.1
      • v1.2.0
      • v1.1.0
      • v1.0.1
      • v1.0.0
    • Known issues and troubleshooting
      • v2.0.0
    • Cloning a demo theme
      • Shimmer
Powered by GitBook
On this page
  • Section overview
  • Section settings
  • Block settings

Was this helpful?

Edit on GitHub
  1. Sections
  2. Sections

Countdown

Section overview

The Countdown section displays a countdown timer for limited-time offers or promotions, with customizable content and an optional image.

Common use cases

  • Showcasing time-limited promotions or sales

  • Announcing upcoming product launches or events

  • Creating urgency for special offers

  • Highlighting seasonal campaigns with end dates

Usage tips

  • Set a realistic and accurate countdown date in the proper format (MM/DD/YYYY)

  • Pair the countdown with clear, compelling content explaining the offer

  • Consider mobile users by adjusting block widths appropriately for different devices

  • Use color schemes that align with your brand while ensuring text remains legible

Section settings

Setting
Description

Countdown date

The target date for the countdown timer (format: MM/DD/YYYY)

Top spacing

Controls the padding space above the section (0-300px)

Bottom spacing

Controls the padding space below the section (0-300px)

Color scheme

Choose from preset color themes or select custom

Custom color

Define a custom background color when "custom" is selected

Text color

Choose default, force light, or force dark text

Border color

Select subtle or strong border colors

Button color

Choose from various button styles (primary, secondary, etc.)

Enable color fade

Enables smooth color transitions when scrolling

Border position

Choose where borders appear (none, top, bottom, or both)

Vertical alignment

Controls how blocks align vertically (top, middle, bottom)

Horizontal alignment

Controls how blocks align horizontally (left, center, right)

Enable margin

Toggles margin around the section content

Visibility

Controls section visibility across device types

Block settings

Countdown

The primary block that displays the countdown timer along with optional heading, content, and call-to-action button.

Block limit: 1

Setting
Description

Heading

Title text displayed above the countdown

Content

Rich text content to describe the offer or promotion

Button label

Text displayed on the call-to-action button

Button url

Link destination when button is clicked

Desktop width

Controls block width on desktop devices (1/12 to 12/12)

Mobile width

Controls block width on mobile devices (1/12 to 12/12)

Horizontal alignment

Controls content alignment within the block (left, center, right)

Image

An optional visual element to accompany the countdown timer.

Block limit: 1

Setting
Description

Image

The image to display alongside the countdown content

Desktop width

Controls image width on desktop devices (1/12 to 12/12)

Mobile width

Controls image width on mobile devices (1/12 to 12/12)

Last updated 25 days ago

Was this helpful?