The Flash Sale Banner section promotes a limited-time sale. A text column with a short offer line, a heading, a button and a countdown timer sits next to a large image.
Pins on the image point to products. When customers click a pin, a small product card with the product image, title and price appears at the bottom of the image. Only one card shows at a time, and the card of the first pin shows when the page loads.
Click Flash Sale Banner in the left sidebar to see the section settings on the right-hand sidebar.
Choose the image, its height and the order of the image and the text column.
Image: Select the image shown next to the text column. The pins are placed on this image.
Mobile image: Select a different image for mobile. If you leave it empty, the Image is used.
Image height: Choose how tall the image is on screens 768px wide and larger:
Adapt to image: Keep the shape of the image you uploaded.
Fixed: Set an exact height with Fixed height, from 300 to 1200 px (760 px by default).
Fill screen height: Make the image as tall as the screen.
Mobile image height: Choose the same options for screens narrower than 768px. With Fixed, set Mobile fixed height from 200 to 900 px. When you add the section, it is set to Fixed at 350 px.
Media first: Turn on to show the image on the left and the text column on the right.
Place product below media on mobile: Turn on to show the product card under the image on mobile, instead of on top of it.
Overlay color: Select a color to lay over the whole image, for example to make it darker.
Color scheme: Select the color scheme applied to the section. You can choose an available color scheme or customize it through Edit scheme.
Width: Choose Page to keep the section within the page width, or Full to stretch it across the full screen width. In the example shown, Full is selected.
Use these settings to adjust the space above and below the section, from 0 to 200 px.
Margin: Top and Bottom, used on screens 768px wide and larger.
Mobile margin: Top and Bottom, used on screens narrower than 768px.
The Content block holds everything in the text column. When you add the section, it contains a Text block for the offer line, a second Text block, a Heading, a Group button, several Spacer blocks and the Countdown timer at the bottom. Click Content under Flash Sale Banner to see its settings.
Alignment: Choose how the blocks are spread from the top to the bottom of the text column:
Center: Group the blocks in the middle of the column.
Between: Put the first block at the top and the last block at the bottom, with equal space between the blocks. This is the default.
Space around: Add equal space above and below each block.
To add more content, click Add block under Content and choose Group button, Heading, Spacer, Subheading or Text. Click a block in the left sidebar to edit it.
Text: Enter the text. You can use bold, italic, links and lists.
Size: Choose a text size from Text SM to Text 6XL. Choose Custom to set your own Size (11 to 50 px), Mobile size (11 to 20 px), Line height and Letter spacing.
Color: Choose Primary or Secondary. Secondary is lighter than Primary.
Width: Choose Auto, or Custom to limit the text width with Max width (200 to 1200 px).
Hide on mobile: Turn on to hide this text on mobile.
Text: Enter the heading, such as the name of the sale.
Preset: Choose the text style, from Heading 2XL to Heading 2XS. You can edit these presets in the theme settings. Choose Custom to set your own Font, Size and Mobile size (in pixels), Line height, Letter spacing and Case. The example uses Custom with a size of 80 px and a mobile size of 48 px.
HTML tag: Choose the HTML tag of the heading. It affects SEO; when unsure, use a paragraph tag.
Width: Choose Auto, or Custom to limit the heading width with Max width (150 to 650 px).
Space, Space Tablet and Space Mobile: Set the height of the empty space between two blocks on desktop, tablet and mobile, in pixels.
The Group button block holds one or more Button blocks. Click Add block under Group button to add another button.
Stack buttons: Turn on to place the buttons one under another.
Button gap: Set the space between the buttons, from 0 to 30 px.
Click a Button block to edit the button:
Button label: Enter the button text.
Link: Paste a link or search for a page, such as the collection on sale.
Open link in new tab: Turn on to open the link in a new browser tab.
Size: Choose Small, Medium or Large. Choose Custom to set Min height (26 to 60 px) and Min width (50 to 600 px).
Style: Choose Solid, Outline or Link. The example uses Link.
Show icon: Turn on to add an icon to the button, then choose it in Icon.
Uppercase: Turn on to show the button text in capital letters.
The Countdown timer block counts down to the end of the sale. It is a fixed part of the Content block: you can hide it with the eye icon, but you cannot remove it. Click Countdown timer under Content to see its settings.
The timer uses the time zone selected in the theme settings and shows up to 999 days.
Separator: Choose what appears between the numbers: None, Colon or Pipe.
Size: Choose Small or Medium. Medium shows larger numbers with the labels above them.
Year, Month, Day, Hour and Minute: Set the date and time when the sale ends.
Action when the timer end: Choose what customers see when the time is up:
Leave timer at zero: The timer stays on the page and shows 00.
Hide: The timer disappears.
Hide timer and show a message: The timer is replaced by the Timer end message.
Has zero: Turn on to add a leading zero to numbers under 10, for example 09 instead of 9.
Timer end message: Enter the text shown when the timer ends, such as "The countdown has ended!".
Number colors: Select a color for the numbers.
Each Pin block adds a "+" marker on the image and links it to a product. To add another pin, click Add block under Flash Sale Banner and choose Pin.
Product: Select the product shown in the card when customers click this pin.
Position horizon: Set how far the pin is from the left edge of the image, from 0 to 100%.
Position vertical: Set how far the pin is from the top edge of the image, from 0 to 100%.
Mobile: Set a separate Position horizon and Position vertical used on mobile.
Color scheme: Select the colors of the pin and its product card. Pick a scheme that stands out on your image; the example uses a dark scheme, so the pin is black and the card text is white on a dark photo.