Before and after settings

Setting	Description
Color scheme	Apply Color Schemes: After creating your color schemes in theme settings — 'Colors' tab, you can apply them to different sections of your store. In each section or block, you'll see a Color scheme dropdown. Select the appropriate color scheme for each section, ensuring consistency with your brand's identity.
Full width	Enable this option to make the section span the full width of the page.
Image height	Use this slider to adjust the image height on desktop. The height range is from 20% to 120%.
Image height mobile	Use this slider to adjust the image height for mobile. The height range is from 60% to 160%.
Heading	This field is for adding a heading to the section. In the top menu of the field, you can find options to customize the heading. Furthermore, you can click the dynamic source button to insert a dynamic source as the heading of the section.
Heading font family:	Heading Body In Theme Settings, the heading can have a different font family from the body text. You can apply one of these styles to the heading in Before & After section.
Heading size	The heading size setting offers three options to control the size of your section heading: Small Medium Large
Heading color	Heading color can be customized by using: Text, Text secondary, and Heading colors, which are defined in the theme settings according to each color scheme. Pick the right color from the dropdown list.
Description	To add a description to the section, simply enter the text in the provided field. In the top menu of the field, you can find options to customize text, such as making its font bold or light, italic, or adding a hyperlink.
Content align	You have three alignment options: Left: Aligns content (heading and description) to the left side of the section. Center: Aligns content (heading and description) to the center of the section. Right: Aligns content (heading and description) to the right side of the section.

“Before” settings

Setting	Description
Image	Upload an image to be displayed on the left side of the block as the “Before” image. For best results, ensure the image dimensions match those of the external image container.
Image mobile	Upload a mobile-specific image for the left side of the block as the “Before” image, optimized for smaller screens.
Product	Add a product to be displayed in a card overlaid on the left image (“Before” image).
Product title	Add a custom product title to the card overlaid on the left image, replacing the default title.
Show type	You can show or hide the product type (e.g., headphones) added on the product detail page using this button.
Product link	Add a link to a specific product.

“After” settings

Setting	Description
Image	Upload an image to be showcased on the right side of the block as the “After” image. For best results, ensure the image dimensions match the external image container.
Image mobile	Upload a mobile-specific image for the right side of the block as the “After” image, optimized for smaller screens.
Product	Add a product to be displayed in a card overlaid on the right image (“After” image).
Product title	Add a custom product title to the card overlaid on the right image, replacing the default title.
Show type	You can show or hide the product type (e.g., headphones) added on the product detail page using this button.
Product link	Add a link to a specific product.

Product card

Setting

Description

Product color scheme

Apply a color scheme to the product card for the background color and text color. These settings will be applied immediately to customize the appearance.

Image ratio

Choose an image ratio for product images in cards:

Square
Portrait
Landscape

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.