Image with features
Theme section
Use the Image with text section to highlight up to six key features of your products with custom text and icon-like images next to a full-height image.
Set up section
Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.
Editing a template changes all pages that use that template. To edit specific pages, you can create new templates or insert dynamic content with metafields.
Add feature image
You can showcase a large image to the left or right of the features and adjust its width and crop it to be a different shape.
Add feature blocks
You can add up to 6 Feature blocks with headings, subheadings, and a square or circle icon-like image to accompany or illustrate the individual feature.
Section layout
You can adjust the layout of the section by changing the Position and Alignment of the features.
Section style
Customize the section Style with options for section Spacing, Animation, and Alternate section color.
Settings reference
Click the Feature blocks to find the following settings.
Block content
Setting | Description |
---|---|
Image | Select or upload an image to accompany or illustrate the individual feature. We recommend a square image, ideally 160px by 160px. |
Image shape | Choose to display the Feature block image as Round or Square. |
Heading | Add text for the feature block heading. We recommend using a short title. |
Subheading | Add text to show a subheading below the main heading. |
Max width of text | Use the slider to control the maximum width and line breaks of the headings. |
Click the Image with features section to find the following settings.
Section content
Setting | Description |
---|---|
Image | Use the Select image button to add a section image. There are no required image dimensions but we recommend an image that is square or landscape (wider than it is tall). We recommend uploading an image with a minimum width of 2500px for optimal quality. |
Image width | Choose an image width of either 1/2 or 2/3 to set the image size to half or over half of the section. |
Image aspect ratio | |
Text position | Change the Text position to display the features to the Left or Right of the section image. |
Text alignment | Choose to align the section content to either the Left, Center, or Right. |
Section style
Setting | Description |
---|---|
Enable animation | |
Use alternate section color | |
Spacing | Add padding around the section content: either the Top and bottom, Top only, Bottom only, or set it to None. |
Spacing amount | Increase or decrease the amount of space around the section: either Full, Half, or Minimum. |
Related links
Last updated