Collection list with image
Overview:
The Collection with Image section allows you to showcase a product collection alongside a customizable image. This layout is ideal for emphasizing a particular collection, whether for seasonal promotions, new arrivals, or featured categories.
Section Configuration:
Image and Text Settings
| Setting | Description |
|---|---|
| Image | Upload an image to accompany the collection list. |
| Heading | Enter a heading for the section. Defaults to "Collection list with image". |
| Heading Size | Choose the size of the heading text: Medium, Large, X-Large, or XX-Large. |
| Description | Add a description for the section. This text appears below the heading. Defaults to a brief description of the collection. |
| Text Size | Select the size of the description text: Small, Medium, Large, or X-Large. |
View More Button Settings
| Setting | Description |
|---|---|
| Button Label | Customize the text for the "View All" button. |
| Button Style | Choose the style of the button: Primary or Secondary. |
| Button Link | Set the URL the "View All" button directs to. |
| Open in New Window | Toggle to open the link in a new browser tab. |
Layout Settings
| Setting | Description |
|---|---|
| Text and Image Order | Define the order of text and image: "Normal" (image on the left) or "Reversed" (image on the right). |
| Content Alignment | Align the content vertically within the section: Top, Middle, or Bottom. |
| Media Size | Choose the size and aspect ratio of the image: Adapt, Square, Portrait, or Landscape. |
| Text Alignment (Desktop) | Align the heading and description text on desktop devices: Left, Center, or Right. |
| Text Alignment (Mobile) | Align the heading and description text on mobile devices: Left, Center, or Right. |
| Color Scheme | Select a color scheme to match the section's design with the store's branding. |
Spacing Settings
| Setting | Description |
|---|---|
| Top Padding | Adjust the padding at the top of the section (0 to 100 pixels). |
| Bottom Padding | Adjust the padding at the bottom of the section (0 to 100 pixels). |
Blocks Configuration:
Collection Block
Each Collection block allows you to showcase individual collections within the section. Multiple blocks can be added to display a variety of collections.
| Setting | Description |
|---|---|
| Collection | Select the collection to display. |
| Image | Upload a specific image for this collection block. If not provided, the collection's featured image will be used. |