Before & After

Before and After Theme Editor Documentation

The "Before and After" section allows you to showcase the difference between two images by using a slider. This feature is perfect for highlighting product transformations, such as skincare results, interior design makeovers, or any before-and-after comparisons.

Section-Level Settings

Once you have added the section, you can configure the overall appearance and functionality:

• Full Width

  • Toggle Full Width: Enable or disable full-width display for the section.

    Image Size

  • Select Image Size: Choose between Small, Medium, Large, Adapt to image, Fill screen to set the display size of your images.

    Before/After Image Position

  • Position Options: Select either Left or Right to place the slider's initial position.

    Appearance

  • Padding Top: Adjust the top padding (in pixels) to create space above the section.

  • Padding Bottom: Adjust the bottom padding (in pixels) to create space below the section.

    Color Scheme

  • Edit Color Scheme: Customize the color scheme to match your theme. This includes:
  • Background Color: Set the background color for the section.
• Arrow Color: Choose the color for the slider arrows.

Block Settings

Slider Image Block

• Image Selection

  • Before Image: Upload the "Before" image. Recommended size: 2880 x 1280px (Large), 740 x 1100px (Mobile).

  • After Image: Upload the "After" image. Recommended size: 2880 x 1280px (Large), 740 x 1100px (Mobile).

    Before/After Text Position

  • Text Position: Choose to display the before and after texts at the Top or Bottom of the images.

    Initial Drag Position

  • Drag Position Slider: Set the initial position of the slider (0 to 100%).

    Text Customization

  • Before Text: Enter the text to display for the "Before" image.

  • After Text: Enter the text to display for the "After" image.

    Product Linking

  • Select Product: Link a product to the before image.

  • Select Product: Link a product to the after image.

    Link Behavior

    • Open Link In: Choose whether the link opens in a New tab or the Same tab.

Content Block

• Background Image

  • Select Background Image: Upload an image to use as the background. Recommended size: 1200 x 1200px.
• Overlay Color: Set the overlay color for the background image.
• Overlay Opacity: Adjust the opacity of the overlay (0-100%).
• Text Customization
  • Subheading: Enter the subheading text.
  • Heading: Enter the heading text.
  • Content: Enter the main content text with options to style it (bold, italic, links, lists).