Skip to main content

: Before and After

  • Updated

How to find these settings...

  1. Online Store
  2. Customize (Theme Editor)
  3. Add section
  4. Before and after

Layer 2 images to be revealed using the slider

 

Recommended reading

In this section...

 

Options

Reveal direction

Choose the direction for the top image to be displayed:

  • Left to right: The image will be placed on the left side, and the slider will reveal more to the right
  • Right to left: The image will be placed on the right side, and the slider will reveal more to the left

 

Icon color

Preferred color of the icon. Defaults to the color assigned to the background

 

Hotspot color

Choose a custom color for the hotspot

 

Full width

The images have the option of being as wide as the screen or only as wide as the content container. Refer to the following table to reference content widths & optimal image sizing:

Setting

Desktop Width

Minimum Image Width

Full width checked

100%

1900px

Full width unchecked

1180px

1180px

 

The height will determine the overall width of the background image.  The following would be used to determine the actual necessary width of an image:

Screen Width x Height x Image Ratio = Desired Width

 

Height

The overall height of the image in relation to the height of the screen.  0-5% is the minimum, and it steps up by 5 to a maximum of 100%. 

  • Desktop:  Used on screens larger than 768px
  • Mobile: Used on screens smaller than 768px

 

Section

Lazy load images *

Disable for "above the fold" images.  Enable for any image that is not visible on the initial page load

 

Background color

Choose a custom color for the background

 

Background gradient

Choose a custom gradient for the background

 

MOBILE

 

Top padding

Add padding to the top of the section on screens less than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px

 

Bottom padding

Add padding to the bottom of the section on screens less than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px

 

Bottom margin

Add a margin to the bottom of the section on screens less than 768px wide. Margins are applied to the outside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px

 

DESKTOP

 

Top padding

Add padding to the top of the section on screens larger than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px

 

Bottom padding

Add padding to the bottom of the section on screens larger than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px

 

Bottom margin

Add a margin to the bottom of the section on screens larger than 768px wide. Margins are applied to the outside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px

 

Add a bottom border

A 1px border will be added between the 'Bottom padding' and the 'Bottom margin'

 

* May not be available in all Sections

 

Image Content Blocks

Desktop/Mobile Image

The background image dimensions depend on 2 options:

  • Whether full width or container width.  Refer to the section 'Full width' setting
  • The height will depend on your section 'Height' setting

 

* NOTE: May not be available on all sections, blocks or templates