Image with products
The Image with products section pairs a featured image with a collection or a curated set of products, perfect for telling a story or highlighting a collection in a visually engaging way.
Settings
| Setting | Description |
|---|---|
| Color scheme | Select a predefined color scheme. |
| Image position | Choose to display the image on the right or left of the products. |
| Image display width | Choose whether the image stays within the theme's normal padding or extends beyond it for a more immersive layout. Extended allows the image to break out of the usual bounds, while within bounds keeps it aligned with the page content. |
| Image | Select your default image. |
| Aspect ratio | Control the aspect ratio of the default image. |
| Mobile image | Upload a different image optimized for smaller screens. If left blank, the default image will be used on all devices. |
| Mobile aspect ratio | Control the aspect ratio of the mobile image. |
| Maxiumum products to show | Choose how many products from your collection you would like to showcase. |
| Collection | Select a collection to feature. Products will be pulled automatically based on the collection’s settings. |
| Product list | Manually choose specific products to feature, instead of pulling them from a collection. |
| Section spacing & border | See shared settings > Section spacing & border. Associated settings below. |
| Section animations | Animate section when scrolled into view. |
Shared settings
These settings are common to several sections and work the same way wherever they appear. Once you learn how they work in one place, you'll recognize them elsewhere.
Spacing and border
The section Spacing & Border settings allow you to control how much vertical space line between your sections. Mix and match to find what works for you. Show a stylistic border between sections to emphasize the break between content.
| Setting | Description |
|---|---|
| Top spacing | How much spacing applies to the top of this section. |
| Bottom spacing | How much spacing applies to the bottom of this section. |
| Show bottom border | Show a stylistic border at the bottom of the section spacing |
Visual example.
