# 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.

<figure><img src="https://content.gitbook.com/content/9icwdCUv3B94Yb9tmqHW/blobs/N62PGOWmH6wEp7quSGBx/image.png" alt=""><figcaption></figcaption></figure>

***

#### 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.                  |
