Before/after image

To add this section, please follow the below steps:

1. From your Shopify admin, go to Online Store -> Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Click Add section and choose "Before/after image".

Setting	Description
Section width	Select the section width from the dropdown menu: Full width Page width Custom width
Custom width	Determines the width of the section when you choose "Custom width" option at 'Section width' setting . Can be from 1000px to 1800px, increasing arithmetically of 50px (pixel).
Show separator line	Displays a line to visually separate this section from the other sections.
Desktop background image	Set up an image on desktop
Mobile background image	Set up an image on mobile

Content

Setting	Description
Subheading	Add text to display as a subheading (Leave the field blank to hide the subheading)
Subheading size	Font size of text: Default XX-Small X-Small Small Medium Large X-Large XX-Large XXX-Large
Heading	Add text to display as a heading. (Leave the field blank to hide the heading)
Heading size	Font size of text: Default XX-Small X-Small Small Medium Large X-Large XX-Large XXX-Large
Text	Add text to display as a custom content (Leave the field blank to hide the custom content)
Text size	Font size of text: XX-Small X-Small Small Medium Large X-Large XX-Large XXX-Large
Content alignment	Select content alignment from the dropdown menu: Left. Center. Right.
Vertical space between content items	Determines the grid spacing between vertical of blocks. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).
Choose style button	Select the button style for the section: Default Transparent
Button label	Add text to display as a button on the section (Leave the field blank to hide the link)
Button link	Set the link of the button, for example the customer service page.
Button top margin	Determines the height of the top outside space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

Images

Setting	Description
Before image	Set up an before image (2000 x 1200px .jpg recommended)
Before label	Add text to display as a before label (Leave the field blank to hide the before label)
After image	Set up an after image (Dimensions must match before image)
After label	Add text to display as a after label (Leave the field blank to hide the after label)
Content position	Select content position from the dropdown menu: Left Center Right
Drag initial position	Determines the drag initial position of the block. Can be from 0% to 100%, in 1% arithmetic increments.

Colors

Setting	Description
Color scheme	Select a color scheme to set the text and background colors for the section
Drag cursor color	Set the color for the drag cursor icon
Drag cursor background	Set the background color for the drag cursor

Section padding

Setting	Description
Desktop left padding	Applies to the full-width layout when you choose 'full width' from the Section width. Adjust left padding from 0 to 100px.
Desktop right padding	Applies to the full-width layout when you choose 'full width' from the Section width. Adjust right padding from 0 to 100px

Setting	Description
Top padding	Determines the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).
Bottom padding	Determines the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).
Top padding on mobile	Determines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).
Bottom padding on mobile	Determines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).