Shopify Before & After﹢ Section

Description of the Section

The Before & After﹢ section allows you to showcase a comparison of two images—usually a 'before' and 'after'—with an interactive drag slider. This is particularly useful for demonstrating the results of a product or service, such as home renovations, beauty products, and more. It also supports accompanying text, buttons, icons, and other content elements to provide context and additional information.

Demo of the Section

Installation Instructions

Download the Sections Pro app on the Shopify App Store
Open the app and navigate to Premium Sections
Search for "Before & After﹢"
Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

Beauty and Cosmetic Products: Show before-and-after images of a customer's skin before and after using a skincare product.
Home Improvement: Present a room or piece of furniture before and after renovation or refurbishment.
Fitness Transformation: Display a user's physique before and after following a workout routine or diet plan.
Cleaning Products: Demonstrate the effectiveness of a cleaning solution by showing a surface before and after cleaning.
Fashion and Apparel: Illustrate styling or fit adjustments on clothing.

Overview of the Configuration Settings

Font

Override theme fonts: Checkbox to override the default theme fonts.
Text Font: Select the font for text.
Headline Font: Select the font for headlines.

Text

Text Size: Adjust the size of the text (10px - 50px).
Text Line Height: Choose the line height for the text.
Text Color: Set the color of the text.
Headline Size: Adjust the size of the headlines (10px - 50px).
Headline Line Height: Choose the line height for the headlines.
Headline Color: Set the color of the headlines.

Background

Background Color: Set the background color for the section.

Dimensions

Start %: Set the starting percentage for the slider (default: 50%).
Max Width of Section: Define the maximum width of the section in pixels.
Spacing Between Columns: Set the gap between columns in pixels.
Padding: Define the padding for the top, bottom, left, and right sides of the section.
Spacing Between Elements: Set the spacing between elements in pixels.

Before & After Images

Show Vertical Divider: Checkbox to show or hide the vertical divider.
Show Circle Selector: Checkbox to show or hide the circle selector.
Bar Color: Set the color for the bar.
Bar Opacity: Adjust the opacity of the bar (0% - 100%).
Circle Color: Set the color for the circle.
Circle Opacity: Adjust the opacity of the circle (0% - 100%).
Circle Icon Color: Set the color for the circle icon.
Media Aspect Ratio: Select the aspect ratio for the media (21:9, 16:9, 4:3, 1:1).
Round Borders on Media: Control the roundness of media borders (0px - 50px).
Subtle Shadow on Media: Checkbox to add or remove a subtle shadow on media.
Before Image: Upload the 'Before' image.
Before Caption: Add a caption for the 'Before' image (default: Before).
After Image: Upload the 'After' image.
After Caption: Add a caption for the 'After' image (default: After).
Media Location: Choose where the media will be located (left or right).

Blocks

Headline: Add a headline with customizable alignment and content.
Paragraph: Add a paragraph with customizable alignment and content.
Content: Add various tags like paragraph, headline, etc., with customizable alignment and content.
Rich Text: Add rich text including headlines, paragraphs, lists, etc., with customizable alignment.
Button: Add primary and secondary buttons with customizable styles, text, and links.
5 Star: Add a 5-star rating icon with customizable alignment and color.
Icon with Text: Add an icon with text, customizable alignment, icon type, icon size, icon color, and gap between items.
Image Icon with Text: Add an image icon with text, customizable alignment, image size, spacing, and aspect ratio.
Image: Add an image with an optional link, customizable size, border radius, and shadow.
Custom Liquid: Add custom liquid code for advanced customization.
@App: Render a block provided by an app.