Before and after settings

Setting Description
Left image Upload an image that will be showcased on the left side of the block (the “Before” image).
Left label Add a product title related to the left image.
Right image Upload an image that will be showcased on the right side of the block (the “After” image).
Right label Add a product title related to the right image.
Image height  You can use this slider to adjust the image height. 
Desktop image width

Choose the width of the image for desktop view:

  • Small
  • Medium
  • Large
  • Extra large
Desktop image placement

Adjust the placement of the image on the desktop view:

  • Image First: This option displays the image on the left side.
  • Image Second: This option displays the image on the right side.
Desktop content position

Select the vertical alignment of image

  • Top: Image aligned with the top of the content container (heading, description, button, product list).
  • Middle: Centered within the height of the content container.
  • Bottom: Aligned with the bottom of the content container.
Desktop content alignment

Choose the horizontal alignment of the content:

  • Left
  • Center
  • Right
Color scheme Add a color scheme to the entire section from the dropdown list. These schemes are created in the Theme Settings and are available across all sections, making customization faster and ensuring a cohesive color system throughout your store. Learn more about color schemes.
Media color scheme Add a color scheme to the media. A color scheme consists of a predefined set of colors you can apply to media text and vertical scroll line.
Make section full width Enable this option to extend the section to the full width of the page, making its background stretch across the entire screen, while the content remains confined within the container.

Mobile layout


Setting Description
Mobile image placement

Adjust the placement of the image on the desktop view:

  • Image First: This option displays the image at the top of the section.
  • Image Second: This option displays the image at the bottom of the section.
Mobile content alignment 

Choose the horizontal alignment of the content on mobile:

  • Left
  • Center
  • Right

Section padding


Setting Description
Top padding The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider. 
Bottom padding The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section. 
Top padding mobile The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.

Before and after section view example

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us