Image with text
The Image with text section seamlessly combines images and content, effectively reaching users and enhancing the overall user experience.
.png)
Section settings
General settings
| Setting | Description |
|---|---|
| Section width | Controls the width behavior of the section container: • Stretch width: spans the section width regardless of screen size. • Fix width: follows the page content width configured in Theme settings → Layout. • Expand full width: takes up the full available page width and automatically adapts to the screen size. |
| Color scheme | Choose colors from the predefined palette in Colors to maintain consistency with the store’s over |
Image
| Setting | Description |
|---|---|
| Image | Upload the desired image. Recommended size: 696px × 500px |
| Image width | Customize the width of the image. |
| Desktop image position | Controls the image position on desktop layouts: • Left • Right |
Content settings
| Setting | Description |
|---|---|
| Background color | Sets the background color of the content block. |
| Desktop vertical alignment | Controls the vertical position of content on desktop layouts: • Top • Middle • Bottom |
| Content alignment | Controls the alignment of content inside the block: • Left • Center • Right |
| Column gap | Controls the spacing between columns: • No gap • Small • Medium • Large |
| Padding inline | Controls the horizontal spacing (left and right padding) inside the section. The value is automatically optimized for mobile devices to maintain consistent layouts across screen sizes. |
| Padding block | Controls the vertical spacing (top and bottom padding) inside the section. The value is automatically optimized for mobile devices to maintain proper spacing and readability on smaller screens. |
Mobile layout
| Setting | Description |
|---|---|
| Content alignment | Controls the alignment of content inside the block: • Left • Center • Right |
Section padding
| Setting | Description |
|---|---|
| Top | Customize the top margin of the section. |
| Bottom | Customize the bottom margin of the section. |
Section divider
| Setting | Description |
|---|---|
| Show divider | Toggles the visibility of a horizontal divider line within the section. |
Block settings
Heading, Subheading, Description
| Setting | Description |
|---|---|
| Heading, Subheading, Description | Customize the title block content. |
| Width | Controls the width behavior of the content: • Fit • Fill |
| Typography - Preset | Inherits the typography preset defined in the theme settings to maintain consistent fonts and styles across the storefront. |
| Background | Enables additional background customization settings for this section. |
| Background color | Defines the background color of the section. |
| Corner radius | Adjusts the corner rounding to create either sharp or rounded edges. |
| Padding top/bottom | Controls the spacing between the section content and its outer edges. |
Button
| Setting | Description |
|---|---|
| Button label | Customize the button text. If left empty, the button will be hidden. |
| Button link | Defines the URL assigned to the button. |
| Button type | Controls the visual style of the button: • Primary • Outline • Link |
| Spacing bottom | Controls the spacing between the button and the next component. |
Highlight text
| Setting | Description |
|---|---|
| Subheading | Customize the highlighted content text. |
| Size | Controls the size of the highlighted content. |
| Select icon | Choose an icon to display alongside the highlighted content. |
| Background color | Sets the background color of the highlighted content. |
| Text color | Sets the text color of the highlighted content. |
| Uppercase | Displays the highlighted content in uppercase letters. |
| Spacing bottom | Controls the spacing between the highlighted content and the next component. |
No comments yet