Before / after block
A comparison of two images that customers compare with a slider, with labels and optional product cards for each side.
Block
| Setting | Description |
|---|---|
| Color scheme | Color scheme of the block. Schemes are managed in Theme settings → Colors. Default: Scheme 1. |
| Background color | Background of the block: Background, Background secondary or Transparent. Default: Background secondary. |
Size
Sizing applies to the comparison images only. Labels and product cards keep the full width of the block.
| Setting | Description |
|---|---|
| Image width | How the image width is set: Percentage of the block width or fixed Pixels. Default: Percentage. |
| Image width (percentage) | Width of the comparison images. Available only when Image width is Percentage. Range: 20–100 %. Default: 100 %. |
| Image width (pixels) | Width of the comparison images. Available only when Image width is Pixels. Range: 200–1200 px, step 10. Default: 600 px. |
| Image width mobile | Width of the comparison images on mobile. Range: 60–100 %. Default: 100 %. |
| Image ratio | Shape of the images on desktop: Portrait, Square, Landscape, Wide, Ultra wide or Custom. Default: Landscape. |
| Custom image ratio | Image height as a percentage of its width. Available only when Image ratio is Custom. Range: 40–160 %, step 2. Default: 100 %. |
| Image ratio mobile | Shape of the images on mobile: Portrait, Square, Landscape, Wide, Ultra wide or Custom. Default: Landscape. |
| Custom ratio mobile | Image height as a percentage of its width on mobile. Available only when Image ratio mobile is Custom. Range: 40–160 %, step 2. Default: 100 %. |
Images and labels
| Setting | Description |
|---|---|
| Before image | Image for the “before” side. |
| Before image mobile | Optional image for mobile. If not set, the desktop image is used. |
| Before label | Label shown on the “before” side. Default: Before. |
| After image | Image for the “after” side. |
| After image mobile | Optional image for mobile. If not set, the desktop image is used. |
| After label | Label shown on the “after” side. Default: After. |
| Preset | Typography preset of the labels: Hero, H1–H6, Subheading, Caption, Large text, Paragraph or Small text. Presets are edited in Theme settings → Typography. Available when a label is entered. Default: Subheading. |
| Icon | Decorative icon before the label: None, Dot, Square or Triangle. Available only with the Subheading preset. Default: None. |
| Icon color | Color of the icon: Heading, Text, Accent or Custom. Available only with the Subheading preset and an icon selected. Default: Custom. |
| Icon custom | Custom icon color. Available only when Icon color is Custom. Default: #2B62C8. |
| Icon custom dark mode | Custom icon color used in dark mode. Available only when Icon color is Custom and dark mode is enabled in Theme settings. Default: #2B62C8. |
| Font | Font family of the labels: Heading large, Heading small, Body or Accent. Default: Accent. |
| Color | Text color of the labels: Heading, Text or Accent. Default: Accent. |
| Text style | Letter case of the labels: Normal, Uppercase or Lowercase. Default: Uppercase. |
Products
| Setting | Description |
|---|---|
| Before product | Optional product shown as a card on the “before” side. |
| After product | Optional product shown as a card on the “after” side. |
| Show price | Shows the product price on the cards. Available only when a product is selected. Default: On. |
| Custom button label | Text of the button on the product cards. Available only when a product is selected. Default: View product. |
| Button style | Primary, Secondary, Outline or Inline. Button styles are edited in Theme settings → Buttons. Default: Inline. |
| Button icon | Icon next to the label: None, Dot, Square, Triangle, Arrow, Caret or Carets. Default: Arrow. |
| 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 around the block on desktop. Range: 0–200 px, step 2. Default: 0 px. |
| Top mobile, Bottom mobile, Left mobile, Right mobile | Space around the block on mobile. Range: 0–100 px, step 1. Default: 0 px. |