Product collage

The Product collage section allows you to create a visually striking layout of product cards by manually adjusting their size and position using pixel-based coordinates. This gives the section a unique, editorial-style look and full control over composition on both desktop and mobile.

This is a preset section — it can be added, removed, and reordered on any page.

---

How to Configure the Product Collage

1. In Shopify admin, go to Online Store → Themes.

2. Click Customize next to the Elemento theme.

3. In the theme editor, navigate to the desired page template (e.g., Home page) using the top preview dropdown.

4. In the left sidebar, click Add section, then select Product Collage, or locate it if it’s already added.

5. Select products to include in the collage and customize the layout, image sizes, and arrangement as needed.

6. You can drag and drop this section to reorder it on the page.

7. Click Save.

Section Settings

Setting	Type	Description
Image ratio	Select (Adapt to image, Square, Portrait)	Controls the aspect ratio of product images in the cards.
Color scheme	Color scheme	Defines the visual style for the section.

Section Padding

Device	Setting	Type	Description
Desktop	Top padding	Range	Space above the section on desktop view.
Desktop	Bottom padding	Range	Space below the section on desktop view.
Mobile	Top padding	Range	Space above the section on mobile view.
Mobile	Bottom padding	Range	Space below the section on mobile view.

---

Blocks

Block: Product

Each block adds a product card to the layout.

Setting	Type	Description
Product	Product select	Choose the product to display in the collage.

---

Layout Coordinates

Desktop (resolutions larger than 992px)

Setting	Type	Description
Width (px)	Text field	Width of the card in pixels.
Left padding (px)	Text field	Distance from the left edge in pixels.
Top padding (px)	Text field	Distance from the top edge in pixels.

Mobile

Setting	Type	Description
Width (px)	Text field	Width of the card in pixels for mobile view.
Left padding (px)	Text field	Left offset for mobile view.
Top padding (px)	Text field	Top offset for mobile view.