Before / After Slider section

This section was introduced in version 2.0.0

The Before / After Slider section is a great tool that helps your customers visualize and compare two different states of a product. You can use it to show the “Before” and “After” states of a product or service, different colors or options of the same product, etc. The section works best with images that are almost identical in terms of positioning, but different in terms of details.

Section settings

Before image: The image that will appear on the left side of the slider.

After image: The image that will appear on the right side of the slider.

Image ratio: This option allows you to select the ratio of the images that will appear on the slider. “Adapt to first image” means that the ratio will be the inherent ratio of the first image. Portrait, Square, and Landscape (default) will force the images to be displayed as portrait, square, or landscape ratios respectively.

Media placement: This options allows you to swap the placement of the media slider with the rest of the textual blocks. Media first places the slider on the left and blocks on the right, while Text first reverses the order.

Content alignment: Controls the alignment of the textual blocks.

Colors

Color scheme: Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.

Section spacing

The section spacing settings gives you the option to adjust the top & bottom section spacing values. Please note: If you select a color scheme with a background color, these settings will affect the spacing between the top or bottom of the section and the content of the section.

Section blocks

Heading

Heading: Set a title for this section.

Heading size: Select the size of the heading (“Small”, “Normal”, “Large”, “Extra large”, “Extra extra large”).

Text

Content:  Set the description for this section.

Text size: Select the text size (“Small”, “Normal”, “Large”).

Buttons

You can define up to two separate buttons that will appear side by side. This is useful when your images are of the same product with different options. For example, you could set the two buttons as “Shop black” and “Shop red” respectively. For each button you have the following options:

Button label:  Set the button label.

Button link: Set where should your button link to (page, collection, product, external link, etc).

Button color scheme: Select one of the predefined color schemes.

Caption

Text:  Set a small tagline.