> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Electro How to Edit Electro Content Collage

**Theme:** Electro · **Section type:** All-template section

A Content collage section shows up to 3 large image cards side by side. Each card can feature a collection, a product, or your own image with a heading and a button, so customers can jump straight to what you want to promote.

> **Note:** You can add this section to any template, but not to the header or footer. Each section holds up to 3 blocks.
![Electro Content collage with 3 image cards, the last one bigger (Main item last)](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/cc1_g77i4l.png)

**What you can do**
- Add the section and your items
- Feature a collection, a product, or an image
- Make one item bigger
- Show or hide the item buttons
- See what customers see
- Look up every setting
- Fix common problems

## Add the section and your items
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Content collage**. The section comes with a Collection, a Product, and an Image block.
3. Under **General**, enter a **Subheading**, a **Heading**, and a **Description**, and choose a **Heading size**. Leave a field empty to hide it.
4. Click each block and set it up (see the next part).
5. To change the order of the items, drag the blocks in the sidebar.
6. Click **Save**.

## Feature a collection, a product, or an image
To add an item, click **Add block** and choose **Collection**, **Product**, or **Image**.

- **Collection:** click **Collection** and select a collection. The card shows the collection image and title. Turn on **Show number of products** to show the product count on the button.
- **Product:** click **Product** and select a product. The card shows the product's featured image, title, and price.
- **Image:** select an **Image** (1620 x 1800 px .png recommended), enter a **Heading**, and add a button **Label** and **Link**.

In each block, drag **Overlay opacity** and pick a **Custom mask overlay** and **Custom text overlay** color so the text is easy to read over the image. Then click **Save**.

> **Tip:** Collection images come from **Products** > **Collections** in your Shopify admin. If a collection card looks empty, add a collection image there.

## Make one item bigger
1. Click the **Content collage** section.
2. Under **Layout**, choose an **Items ordering**: Equal, Main item first, or Main item last.
3. With 3 items and Main item first or Main item last, turn **Enable stacked layout** on or off.
4. Under **Items**, choose an **Image ratio**.
5. Click **Save**.

| Setting | What it does |
| ---- | ---- |
| Items ordering | Equal gives every item the same size. Main item first makes the first item bigger. Main item last makes the last item bigger. |
| Enable stacked layout | Stacks the 2 smaller items on top of each other beside the main item. Turn it off to show all 3 items in one row with a wider main item. Not used with Equal. |
| Image ratio | Sets the image shape to Square or Portrait. With the stacked layout, it applies only to the main item. |

## Show or hide the item buttons
1. Click the **Content collage** section.
2. Under **Items**, turn **Show item button** on or off.
3. With the buttons on, click a block and choose its button **Style**: Primary, Secondary, or Tertiary.
4. Click **Save**.

Each card stays clickable even when the button is hidden.

## What customers see
- **Cards:** each item shows its image with the heading (and price for products) on top of it. Customers click anywhere on a card to open the collection, product, or link.
- **Buttons:** collection cards show "View product", or the number of products if you turned on **Show number of products**. Product cards show "View product". Image cards show your own label.
- **Large screens:** the items follow your **Items ordering** and stacked layout.
- **Phones:** the cards resize to fit the screen.
- **No link:** an Image card without a **Link** can't be clicked, and its button looks faded.
![Electro Content collage cards with item buttons, the first item bigger (Main item first)](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/cc2_7gkjcd.png)


## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the section background and heading colors. |
| Subheading | A short tagline above the heading. |
| Heading | The section heading. |
| Heading size | Sets the heading size: H2, H3, H4, or H5. |
| Description | A short text below the heading. |

### Layout
| Setting | What it does |
| ---- | ---- |
| Content alignment | Aligns the section heading and the card text Left or Center. |
| Items ordering | See "Make one item bigger" above. |
| Enable stacked layout | See "Make one item bigger" above. |

### Items
| Setting | What it does |
| ---- | ---- |
| Item heading size | Sets the card heading size: H2, H3, H4, H5, or H6. |
| Image ratio | Sets the card image shape: Square or Portrait. With the stacked layout, it applies only to the main item. |
| Show item button | Shows a button on each card. Cards stay clickable without it. |

### Collection block settings
| Setting | What it does |
| ---- | ---- |
| Collection | The collection to feature. |
| Show number of products | Shows the number of products in the collection on the button. |
| Overlay opacity | Darkens the image, from 0 % to 90 %. |
| Custom mask overlay | Sets the color of the overlay. |
| Custom text overlay | Sets the text color on the card. |
| Style | Sets the button style: Primary, Secondary, or Tertiary. Appears when Show item button is on. |

### Product block settings
| Setting | What it does |
| ---- | ---- |
| Product | The product to feature. |
| Overlay opacity | Darkens the image, from 0 % to 90 %. |
| Custom mask overlay | Sets the color of the overlay. |
| Custom text overlay | Sets the text color on the card. |
| Style | Sets the button style: Primary, Secondary, or Tertiary. Appears when Show item button is on. |

### Image block settings
| Setting | What it does |
| ---- | ---- |
| Image | The card image. 1620 x 1800 px .png is recommended. |
| Overlay opacity | Darkens the image, from 0 % to 90 %. |
| Custom mask overlay | Sets the color of the overlay. |
| Custom text overlay | Sets the text color on the card. |
| Heading | The card heading. |
| Label | The button text. Leave it empty to hide the button. |
| Style | Sets the button style: Primary, Secondary, or Tertiary. Appears when Show item button is on. |
| Link | The page the card and button open. |

## Troubleshooting
**I can't add a fourth item.**
A Content collage section holds up to 3 blocks. Add a second Content collage section for more items.

**Enable stacked layout doesn't change anything.**
The stacked layout works only with 3 items and **Items ordering** set to **Main item first** or **Main item last**.

**I can't find the button Style setting in a block.**
**Style** appears only when **Show item button** is on under **Items**.

**An Image card can't be clicked.**
The block has no **Link**. Add one in the Image block.

**The collection button says "View product".**
That's the default label for collection cards. Turn on **Show number of products** to show the product count instead.

## Related articles
- [Electro Collection list](https://help.ecomx.co/en/article/electro-how-to-use-electro-collection-list-xrdc5h/)
- [Electro Featured product](https://help.ecomx.co/en/article/electro-how-to-use-electro-featured-product-ljozz3/)
- [Electro Image with text columns](https://help.ecomx.co/en/article/electro-how-to-use-electro-image-with-text-columns-section-s1z5a/)
- [Electro Image with text](https://help.ecomx.co/en/article/electro-how-to-use-electro-image-with-text-section-1i58xtt/)
- [Electro Typography](https://help.ecomx.co/en/article/electro-typography-17a6dzk/)