Image comparison slide
The Image comparison slide section allows users to display two images side by side for a visual comparison. Users can slide between the images to see differences or changes, making it ideal for before-and-after scenarios or showcasing variations. This interactive feature enhances engagement by providing a clear and dynamic way to present changes or options, and it can be customized to fit the specific design and layout of your Shopify store.
Section settings
General settings
| Setting | Description |
|---|---|
| Section width | 3 options for container
|
| Color scheme | Select colors from Theme settings -> Colors |
| Heading | The title of the section |
| Description | The description of the section |
| Content alignment | The position of the heading and description.
|
Image options
| Setting | Description |
|---|---|
| Image before | Displays the initial state for comparison |
| Image after | Shows the state after changes are applied |
| Text left | Provides context or details on the left side |
| Text right | Offers additional information on the right side |
| Image ratio | "Image ratio" refers to the proportional relationship between the width and height of the image. 5 options for image ratio
|
| Custom ratio | Where you can add your own image ratio |
Section padding
- Top padding: Customize the top margin of the section
- Bottom padding: Customize the bottom margin of the section
Theme block
Content
Heading, Subheading, Description
| Setting | Description |
|---|---|
| Heading, Subheading, Description | Custom content block |
| Size | The size of content block |
| Spacing bottom | Spacing between the content and the next component |
Product
| Setting | Description |
|---|---|
| Select product | You can select specific products to display |
| Show border top | Toggle to add a border above the product set for better visual emphasis |
| Spacing bottom | Spacing between the content and the next component |
No comments yet