What is a Before & After Section widget?
The Before & After Section widget allows you to showcase the effectiveness of your products or services through engaging visual transformations. By highlighting before and after images, you can captivate visitors, tell compelling stories, build trust, and ultimately boost conversion rates on your online store.
What are the benefits of using Before & After Section widget?
The Before & After Sections widget makes a big impact by showing how your products or services can change things. By putting before and after pictures side by side, you can clearly demonstrate the real differences your offerings can make. This is especially useful for things like skincare products, home improvements, and fitness items.
This widget can also help tell a story, not just displaying the end result but also sharing the journey of change. This storytelling connects with customers on a deeper level, helping them imagine themselves going through similar positive transformations.
Moreover, this is important for building trust with potential buyers. Showing real before and after images gives solid proof of the results your products deliver, boosting confidence and easing any uncertainties customers may have. The interactive features of this widget also engage visitors, grabbing their attention and encouraging them to learn more about what you offer.
In the end, the mix of visual impact, storytelling, trust-building, and engagement leads to more sales. When customers see the potential transformations your products can bring, they are more likely to buy, turning these captivating visuals into real business success.
Disclaimer for Using Debutify Theme Widgets
When using widgets in the Debutify Theme, you are fully responsible for their configuration, content, and compliance with applicable laws and regulations. Debutify is not liable for any outcomes or consequences resulting from their use.
For the full disclaimer and additional details, please read the complete article here: Disclaimer for Using Debutify Theme Widgets.
Your commitment to transparency and ethical practices is crucial for building trust and maintaining a compliant online presence.
How to Enable/Disable Before & After Section Widget?
The enablement or disablement of widgets depends on the version of your Debutify Theme. Please follow the correct guide based on your theme version:
How to Enable or Disable the Debutify Theme Widgets on versions 7.1 and above?
STEP 1
Access your Shopify Admin's Theme Library to open the theme customizer.
STEP 2
Click on the Theme settings icon.
STEP 3
Scroll down and locate the Debutify Widgets tabs. You’ll find the following categories:
Debutify Free Widgets
Debutify Paid Widgets
Expand the relevant widget category by clicking on the arrow next to the tab name.
STEP 4
To enable a widget, check the box next to the widget name. To disable it, simply uncheck the box.
How to Enable or Disable the Debutify Theme Widgets between versions 6.0 and 7.0.2?
STEP 1
Sign in to your Debutify Theme Login Portal at platform.debutify.com, and navigate to the Widgets section.
STEP 2
Choose your widget from the Widgets menu, either by searching or filtering by category.
STEP 3
To enable or disable your chosen widget, click on the toggle switch.
STEP 4
To enable the widget, confirm by clicking Enable in the confirmation message that appears.
To disable the widget, confirm by clicking Disable in the confirmation message that appears.
Note: Enabling or disabling widgets on Debutify Login Portal is available only in Debutify Theme versions 6.0 to 7.0.2. Please make sure your theme is within this version range to access this feature.
How to Manage Before & After Section Settings?
STEP 1
Access your Shopify Admin's Theme Library to open the theme customizer.
STEP 2
Go to Sections, scroll down, and then locate Template.
STEP 3
Click Add section, then choose Before & After.
How to Customize Section Header Settings for Before & After Section?
STEP 1
Go to Heading and add your desired heading text. Use the Slider to adjust the heading size to fit your design.
💡 Pro Tip: Use concise and attention-grabbing text for your heading to instantly communicate the purpose of the section.
STEP 2
Go to the Subheading and add a subheading to complement the main heading. Use the Slider to adjust the subheading size for better readability and balance.
💡 Pro Tip: Subheadings are great for adding more context to your heading while maintaining a clean design.
STEP 3
Go to Content and input your body text. This is where you can provide additional details about the Before & After section. Ensure the text is informative and aligns with the purpose of the section.
💡 Pro Tip: Use bullet points or short sentences for easy readability if adding detailed information.
STEP 4
Go to Heading position and select your preferred heading position from the following options:
Left: Aligns the heading to the left.
Center: Centers the heading for a balanced appearance.
Right: Aligns the heading to the right.
💡 Pro Tip: Use the Center position for a clean and symmetrical design or Left for a more traditional layout.
STEP 5
Go to Text Alignment and choose your preferred text alignment for the heading, subheading, and body content:
Left: Aligns text to the left.
Center: Centers the text for uniformity.
Right: Aligns text to the right.
Justify: Aligns text evenly along both edges for a clean block format.
💡 Pro Tip: Use Justify alignment for large blocks of text or Center alignment for smaller, minimalistic text designs.
How to Customize Cursor Settings for Before & After Section?
STEP 1
Go to Direction and select the cursor direction:
Horizontal: Enables a left-to-right comparison.
Vertical: Enables a top-to-bottom comparison.
💡 Pro Tip: Use Horizontal for landscape images and Vertical for portrait-oriented transformations.
STEP 2
Go to Initial position setting and use the slider to set the starting position of the cursor.
Adjusting this allows you to control how much of each image is visible when the section loads.
💡 Pro Tip: Set the initial position to the middle for a balanced view, or adjust based on which side you want to emphasize.
STEP 3
Go to Image height setting and use the slider to adjust the height of the Before & After images.
A larger height creates a more prominent display, while a smaller height keeps the section compact.
💡 Pro Tip: Choose a height that fits seamlessly within your website’s layout while maintaining readability.
STEP 4
Check the box labeled Full page width to extend the Before & After section across the entire width of the page.
This is ideal for creating an immersive, visually impactful design.
💡 Pro Tip: Use the full page width option if the section includes high-quality images and is meant to be a centerpiece on the page.
How to Customize Bullet Settings for Before & After Section?
STEP 1
Check the box labeled Enable autoplay to automatically cycle through the Before & After bullets.
STEP 2
Go to Autoplay Speed and use the slider to adjust how quickly the slides transition during autoplay.
A lower value results in faster transitions, while a higher value slows the transitions.
💡 Pro Tip: Choose a speed that allows users enough time to view each transformation before the next slide appears.
STEP 3
Select your preferred bullet style from the available options. Click View all available icons to select from the icon library.
Choose a style that complements your theme and enhances the overall look of the section.
💡 Pro Tip: Use a simple and clean bullet style for a professional appearance, or a bold design to draw more attention to navigation.
STEP 4
Go to the Colour and choose a colour for the bullets that matches your store’s branding.
Use the colour picker or input a HEX code for precise colour selection.
💡 Pro Tip: Ensure the bullet colour contrasts with the background for better visibility and usability.
STEP 5
Go to Bullets position and select where you want the bullets to appear:
Top: Places the bullets above the Before & After section.
Middle: Positions the bullets in the center of the section.
Bottom: Displays the bullets below the Before & After section.
💡 Pro Tip: Use the Bottom position for a classic layout or the Middle position for a more modern design.
How to Customize Arrow Settings for Before & After Section?
STEP 1
Go to Arrows type and choose your preferred arrow style from the following options:
Chevron Floating: A sleek, floating chevron style.
Chevron Flat: A flat and modern chevron design.
Chevron Large: A bold chevron style for greater visibility.
Arrow: A classic arrow design.
💡 Pro Tip: Select an arrow style that matches your store’s overall aesthetic for a cohesive design.
STEP 2
Check the box labeled Hide on mobile to disable arrow navigation on mobile devices.
This is useful if you want to prioritize a cleaner design for smaller screens.
💡 Pro Tip: If hiding arrows, ensure mobile users can still navigate using other options, such as bullets or touch gestures.
STEP 3
Check the box labeled Show bullets & arrows only on hover to make arrows and bullets appear only when the user hovers over the section.
This creates a cleaner and less cluttered design.
STEP 4
Go to the Color and select a color for the arrows that complements your store’s branding.
Use the color picker or input a HEX code for precise color selection.
💡 Pro Tip: Choose a color that contrasts with the background for better visibility.
STEP 5
Go to Arrow position and select the preferred position for the arrows:
Top: Displays arrows near the top of the section.
Middle: Positions arrows at the center for a classic design.
Bottom: Aligns arrows near the bottom of the section.
💡 Pro Tip: The Middle position works best for intuitive navigation, while Top or Bottom positions can be used for unique layouts.
STEP 6
Check the box labeled Enable scroll animation to activate smooth scrolling when navigating between slides.
This feature enhances the user experience by making transitions more fluid and visually appealing.
💡 Pro Tip: Scroll animation is especially effective for desktop users and sections with multiple transformation images.
How to Add Before & After Image and Content?
STEP 1
Click Add Before & After to insert a new block into that section.
STEP 2
Input your desired text to explain or highlight what’s being shown in the Before image.
💡 Pro Tip: Keep the text concise and clear to help users understand what they’re looking at.
STEP 3
Choose an image that best represents the Before state of the product, process, or scenario you’re illustrating. Upload an image, or click Explore free images to browse Shopify’s library for professional, high-quality images.
STEP 4
Go to the Button text field and enter the label for your button. For example, "Learn More," "Shop Now," or "Read Story."
STEP 5
Go to the Button link field and paste the desired URL or use the search function to find a specific product page, blog post, or other internal link.
STEP 6
Go to Button style and select your preferred style.
Default: A simple and versatile style.
Primary: A bold, attention-grabbing button.
Outline: A minimalistic style that complements cleaner layouts.
STEP 7
Go to Content position and choose where you want the content to appear.
STEP 8
Input your desired text to explain or highlight what’s being shown in the After image.
STEP 9
Choose an image that best represents the After state of the product, process, or scenario you’re illustrating. Upload an image, or click Explore free images to browse Shopify’s library for professional, high-quality images.
STEP 10
Repeat Steps 4 to 7 for the After Image section to add button text, button link, button style, and content position.
How to Select a Color Scheme for the Before & After Section Widget?
STEP 1
Click Change under Color scheme to choose your preferred colors from the dropdown options provided.
Note: If your store does not have any color schemes set, please refer to the article How to Add and Customize Your Theme's Colors?
Final Step: Save Your Changes
After completing your customizations, click Save to apply the changes.