Slide

One slide of the Slideshow banner section. A slide has a background image, an optional overlay and its own content: add blocks inside the slide with Add block.

Blocks you can add to a slide

Each slide holds its own content. Click Add block inside a slide to add any of the blocks below.

Basic blocks

  • Button: a call-to-action button.
  • Heading 1, Subheading 1 and Text 1: text blocks with ready-made styles for a title, a short line above it and body text.
  • Divider: a thin line between blocks.
  • Spacer: an empty gap between blocks.

These blocks work the same way in every section, so their settings are described once in Basic blocks (available in multiple sections).

Blocks described on this page

  • Grid: arranges content in columns. See the Grid section below.
  • Countdown container: a timer with a label and a button. See the Countdown container section below.

Blocks from installed apps can also be added to a slide.


Slide settings

Setting Description
Color scheme Color scheme applied to the slide content. Schemes are managed in Theme settings → Colors; use Edit scheme to jump there. Default: Scheme 1.

Media

Setting Description
Image Background image of the slide on desktop.
Mobile image Optional image for mobile. If not set, the desktop image is used. Available only when an image is selected.
Show overlay Adds a dark layer over the image to make text easier to read. Default: Off.
Overlay opacity Strength of the overlay. Available only when Show overlay is on. Range: 0–80 %, step 5. Default: 30 %.

Layout

Setting Description
Content position Where the slide content sits on desktop: Top left, Top center, Top right, Middle left, Middle center, Middle right, Bottom left, Bottom center or Bottom right. Default: Bottom left.
Content position mobile Where the slide content sits on mobile: Top, Center or Bottom. Default: Bottom.
Content alignment Text alignment of the content on desktop: Left, Center or Right. Default: Left.
Content alignment mobile Text alignment of the content on mobile: Left, Center or Right. Default: Left.

Padding

Setting Description
Top, Bottom, Left, Right Space around the slide content on desktop. Range: 0–100 px, step 1. Default: 0 px.
Top mobile, Bottom mobile, Left mobile, Right mobile Space around the slide content on mobile. Range: 0–100 px, step 1. Default: 0 px.

Divider

A thin horizontal line that separates content inside the slide.

Setting Description
Line opacity Transparency of the line. Range: 0–100 %. Default: 20 %.
Thickness Thickness of the line. Range: 1–10 px. Default: 1 px.
Top Space above the line on desktop. Range: 0–200 px, step 2. Default: 10 px.
Bottom Space below the line on desktop. Range: 0–200 px, step 2. Default: 10 px.
Top mobile Space above the line on mobile. Range: 0–120 px, step 2. Default: 10 px.
Bottom mobile Space below the line on mobile. Range: 0–120 px, step 2. Default: 10 px.

Spacer

An empty vertical gap between blocks inside the slide.

Setting Description
Size Height of the gap on desktop. Range: 0–200 px, step 2. Default: 20 px.
Custom mobile size Lets you set a different gap height on mobile. With this off, mobile uses the desktop size. Default: Off.
Size (Mobile size) Height of the gap on mobile. Available only when Custom mobile size is on. Range: 0–200 px, step 2. Default: 20 px.

Grid

A container that arranges its content in columns. A new Grid starts with two Column blocks; add more columns inside the Grid. The Grid block is also available in Content blocks, Featured products and inside another Grid’s column.

Grid settings

Setting Description
Row width How the width of the grid is set: Percentage of the available width or fixed Pixels. Default: Percentage.
Custom row width (percentage) Width of the grid as a share of the available width. Available only when Row width is Percentage. Range: 50–100 %. Default: 100 %.
Custom row width (pixels) Maximum width of the grid. Available only when Row width is Pixels. Range: 400–1400 px, step 20. Default: 1400 px.
Desktop columns Number of columns per row on desktop. Range: 1–6. Default: 3.
Custom columns width Lets you make the two columns different widths. Available only when Desktop columns is 2. Default: Off.
Columns proportion Width of the first column; the second takes the rest. Available only with 2 columns and Custom columns width on. Range: 30–70 %. Default: 50 %.
Mobile columns Number of columns per row on mobile. Range: 1–3. Default: 1.
Vertical alignment Aligns columns of different height to the Top, Center or Bottom. Default: Top.
Desktop horizontal spacing Space between columns on desktop. Range: 0–60 px. Default: 8 px.
Mobile horizontal spacing Space between columns on mobile. Range: 0–40 px. Default: 8 px.
Desktop vertical spacing Space between rows on desktop. Range: 0–60 px. Default: 16 px.
Mobile vertical spacing Space between rows on mobile. Range: 0–40 px. Default: 16 px.
Top, Bottom, Left, Right Space around the grid on desktop. Range: 0–100 px, step 1. Default: 0 px.
Top mobile, Bottom mobile, Left mobile, Right mobile Space around the grid on mobile. Range: 0–100 px, step 1. Default: 0 px.

Column settings

Setting Description
Column style Standard shows the content directly on the page; Card puts it on a card with its own color scheme. Default: Standard.
Color scheme Color scheme of the card. Available only when Column style is Card. Schemes are managed in Theme settings → Colors. Default: Scheme 7.
Card border radius Corner rounding of the card. Available only when Column style is Card and the theme shape style is not Angular. Range: 0–100 px. Default: 20 px.
Vertical alignment Aligns the content inside this column: Same as grid, Top, Center or Bottom. Default: Same as grid.
Stick this column while scrolling Keeps the column in view while the rest of the row scrolls. Applies on desktop only; the column stops sticking once its own content ends or the row scrolls past. Default: Off.
Sticky offset from top Distance between the sticky column and the top of the screen. Available only when sticking is on. Range: 0–200 px, step 4. Default: 32 px.
Top, Bottom, Left, Right Space around the column content on desktop. Range: 0–100 px, step 1. Default: 0 px.
Top mobile, Bottom mobile, Left mobile, Right mobile Space around the column content on mobile. Range: 0–100 px, step 1. Default: 0 px.

Countdown container

A countdown timer with a label and a button. The block is also available in the Image banner section.

Container

Setting Description
Show container Puts the countdown on a filled container. With this off, the timer is shown without a background. The two settings below appear only when this is on. Default: On.
Color scheme Color scheme of the container. Schemes are managed in Theme settings → Colors. Default: Scheme 1.
Background color Background of the container: Primary or Secondary. Default: Primary.

Label

Setting Description
Label Text shown above the timer, for example “Sale ends in”. Supports inline formatting. Leave empty to hide the label. The four settings below appear only when a label is entered.
Label preset Typography preset used for the label: H1–H6, Subheading, Caption, Large text, Paragraph or Small text. Presets are edited in Theme settings → Typography. Default: H3.
Label font family Font used for the label: Heading large, Heading small, Body or Accent. Default: Heading large.
Color Label color: Heading, Text or Accent. Default: Heading.
Text style Letter case of the label: Normal, Uppercase or Lowercase. Default: Normal.

Timer

Setting Description
End date Date and time the countdown counts down to. Example: Dec 31, 2030 or Dec 31, 2030 20:00. Default: Dec 31, 2026.
Timer behavior What happens when the timer ends: Stop and show zeros, Restart when finished (cycle) or Hide when finished. Default: Restart when finished (cycle).
Cycle hours Length of each repeated cycle. Available only when the timer restarts. Range: 1–48 h, step 0.5. Default: 2.5 h.

Numbers

Setting Description
Numbers size Size of the timer numbers on desktop. Range: 14–56 px. Default: 32 px.
Numbers size mobile Size of the timer numbers on mobile. Range: 14–56 px. Default: 24 px.
Numbers font family Font of the numbers: Heading large, Heading small, Body or Accent. Default: Body.
Numbers color Color of the numbers: Heading, Text or Accent. Default: Text.

Unit texts

Setting Description
Days text Word shown under the days number. Default: Days.
Hours text Word shown under the hours number. Default: Hours.
Minutes text Word shown under the minutes number. Default: Minutes.
Seconds text Word shown under the seconds number. Default: Seconds.
Text size Size of the unit texts on desktop. Range: 10–32 px. Default: 14 px.
Text size mobile Size of the unit texts on mobile. Range: 10–32 px. Default: 12 px.
Text font family Font of the unit texts: Heading large, Heading small, Body or Accent. Default: Accent.
Text color Color of the unit texts: Heading, Text or Accent. Default: Text.

Button

Setting Description
Button label Text on the button. Default: Button label.
Button action Link opens a page; Copy code copies a discount code to the customer’s clipboard. Default: Link.
Button link Page the button leads to. Available only when Button action is Link.
Button copy code Code copied when the button is clicked. Available only when Button action is Copy code. Default: DISCOUNT10%.
Button style Primary, Secondary, Outline or Inline. Button styles are edited in Theme settings → Buttons. Default: Primary.
Button icon Icon next to the label: None, Dot, Square, Triangle, Arrow, Caret or Carets. Default: None.
Button icon position Places the icon to the left or right of the label. Available only when an icon is selected. Default: Right.

Padding

Setting Description
Top, Bottom, Left, Right Space inside the container on desktop. Range: 0–100 px, step 1. Default: 24 px.
Top mobile, Bottom mobile, Left mobile, Right mobile Space inside the container on mobile. Range: 0–100 px, step 1. Default: 20 px.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us