Shopify Before and After Section

Description of the "Before and After" Section

The Before and After Section is a Shopify section that allows store owners to show a compelling before and after comparison. The section features functionality for two images, before and after captions, text content, and a call-to-action (CTA) button. The images can be dragged to reveal more of the before or after scenario, providing an interactive experience for store visitors. The section is very customizable and includes options to adjust text fonts, sizes, colors, the section background, and more.

Demo

Sample Use Cases for a Shopify E-commerce Store

1. Product Demonstrations: Show the effectiveness of your products, especially those that provide a noticeable result after use such as cosmetics, health and wellness products, etc.
2. Service Illustrations: Illustrate the effectivity of your services like cleaning services, event management, home renovation, and professional organizing.
3. Case Studies: Claiming your product or service can bring about changes is one thing, showing it is another. Document the journey of your customers' progress due to your product or service.

Overview of the Configuration Settings

This section provides tons of flexibility for customization. Here's a brief explanation of the configuration options:

• Font Settings: You can override the site's default fonts and pick one for headlines and another for the content text. You can also set font sizes, colors, and line heights.
• Background Settings: Set the section's background color.
• Dimensions Settings: Decide the maximum width of the section, the spacing between its elements and the padding in all four directions.
• Before and After Image Settings: Upload images, add captions, set the images' aspect ratio and round borders, and whether to show a vertical divider.
• Content Settings: Choose whether to show the text block, insert your desired headline, and the content. You can also add a link and its display text.
• Button Style Settings: Set the look of the call-to-action button - the background and text colors, the button text size, and padding.

Each setting has a default value, however, these can be altered as desired to suit your website's aesthetics.