Skip to main content

How to Use the Before & After Section in the Debutify Theme Version 8?

A guide on how to use the before & after section in the Debutify theme version 8.

Taynara Barboza avatar
Written by Taynara Barboza
Updated over a week ago

What Is the Before & After Section?

The Before & After Section lets you showcase the effectiveness of your products or services through compelling visual transformations. By displaying before and after images, this widget helps captivate visitors, tell a persuasive story, build trust, and increase conversions in your online store.

What Are the Benefits of Using the Before & After Section?

The Before & After Section makes a significant impact by clearly demonstrating the positive effects of your products or services. By showing side-by-side before and after photos, you can highlight the real transformations your offerings provide. This is especially effective for categories like skincare, home improvements, and fitness products.


How to Enable the Before & After Section?

STEP 1
Access your Shopify Admin's Theme Library to open the theme customizer.

STEP 2
Click on the Theme settings icon.

STEP 3
Open the⚡Paid widgets tab and toggle the Before After Image option.

  • In versions 8.0 to 8.5, this widget appears under Paid widgets.

  • From 8.6 onwards, the widget has moved to the Professional widgets


How to Add and Set Up the Before & After Section ?

STEP 1
In your Theme Editor, navigate to the page where you want the Featured Blog section to appear — for example, the Homepage, a Product page, or any custom template.

STEP 2
In the left sidebar, expand the Template group, click Add section, and search for Before & After.

STEP 3
Select Before & After to add it to the template.

STEP 4
Click on the Before & After section to open its settings panel.

STEP 5

After completing your customizations, click Save to apply the changes.

STEP 6

After completing your customizations, click Save to apply the changes.


How to Set Up the Before & After Images

STEP 1
In the Before & After section, expand the Blocks area inside the left sidebar.

STEP 2
Click the Before After Image block to open its settings.

STEP 3
Inside the block settings, configure both:

  • Before Image (upload + optional title, description, button)

  • After Image (upload + optional title, description, button)

STEP 4
If you want to create a carousel, add additional slides by clicking Add block → Before & After Image. Each block represents one Before/After pair.

STEP 5
Customize each block individually and click Save.


How to Customize the Carousel & Main Section Settings

STEP 1
Click on the main Before & After section (not the blocks) to access global settings.

STEP 2
Adjust the carousel/slider settings, such as:

  • Slide navigation

  • Autoplay

  • Looping

STEP 3
Configure additional main section settings:

  • Cursor direction

  • Height and image position

  • Color scheme

  • Padding (top and bottom spacing)

STEP 4
Click Save to apply changes.


Disclaimer for Using Debutify Theme Widgets and Sections

When using widgets and sections 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 and Sections.

Your commitment to transparency and ethical practices is crucial for building trust and maintaining a compliant online presence.

Did this answer your question?