Collage settings
This guide describes the Collage section.
The Collage section allows you to create a visually dynamic layout by combining image, product, collection, or video into a unique design. This section is perfect for showcasing content in a creative and engaging way.
Key features:
Layout Customization
- Desktop Layout
- Choose Left Large Block or Right Large Block.
- Mobile Layout
- Select Collage or Column.
Card style:
Individual card style
- The Bag shape is available only for the Product block. This gives the product card a unique, rounded design, resembling the shape of a bag.
Style all as product cards:
When you choose to style all blocks as product cards, the Image, Product, and Collection blocks will all adopt the Bag shape, creating a cohesive design across your page.
How to access the Collage section
Access this section through the theme customizer:
- Navigate to Online Store > Themes
- Select “Customize” on your active theme
- From any page, click “Add section”
- Search and select “Collage”
Note: Section cannot be added to the Password page.
To insert a new section between existing ones, follow the steps in the article "Add a section"
How to configure the Collage section
Basic Components
The “Image banner” section consists of two primary components:
- General settings
- Block. Available block types include:
By default, the section includes the following three blocks (maximum allowed):
- Image (Learn about all available block settings, article "Image").
- Product (Learn about all available block settings, article "Product").
- Collection (Learn about all available block settings, article "Collection").
If you remove any of these blocks, you can optionally add a Video block instead. (Learn about all available block settings, article "Video").
General settings
Select a setting described in the following table:
| Heading | This field is for adding a heading to the section. In the top menu of the field, you can find options to customize the heading. Furthermore, you can click the dynamic source button to insert a dynamic source as the title of the section. |
| Heading size | The heading size setting offers three options to control the size of your section heading:
|
| Description | This field is for adding a description to the section. In the top menu of the field, you can find options to customize the text. Additionally, you can use the style of headings from H1 to H6 to the body text. Furthermore, you can click the dynamic source button to insert a dynamic source for the description. |
| Description size | There are three options to control the size of your description:
|
| Heading alignment | Align the heading, or heading with description according to your design preferences:
|
| Desktop layout | You can add up to three blocks to this section. When three blocks are added, one of them will be larger in both height and width. When two blocks are added, one will be wider. You can choose which block should be larger by selecting one of these options:
|
| Mobile layout | Column: All blocks are positioned one after another, but the first one is taller. Collage: If there are three blocks, the first block is taller, and the other two blocks are positioned after this block in a single line. |
| Card style |
|
| Color scheme | Apply Color Scheme:
|
Section padding
| Setting | Description |
| Top padding | The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider. |
| Bottom padding | The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section. |