> ## 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 Create Electro Collection Page

**Theme:** Electro · **Section type:** Collection template

The Collection template controls every collection page in your store. It shows a banner with the collection title, followed by the products in the collection with filters, sorting, product comparison, and quick buy.

> **Note:** The Collection template has 2 fixed sections: **Collection header** and **Collection products**. You can hide them, but you can't remove them. You can add, remove, and reorder any other section on this template.
![Collection page with the collection image in the header and filters in a top bar (Electro Surveillance preset)](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/coll-1_16v54au.png)

**What you can do**
- Open the Collection template
- Show the collection image and description in the header
- Set up the product grid
- Let customers filter and sort products
- Let customers compare products and buy from the card
- See what customers see
- Change the Collection header and Collection products settings
- Fix common problems

---

## Open the Collection template
1. In the theme editor, open the page selector at the top of the screen.
2. Click **Collections** and choose a collection to preview.
3. To preview a different collection, click **Change** in the left sidebar and select the collection.

> **Tip:** Changes to the template apply to every collection that uses it. To give one collection a different layout, create a new collection template and assign it to that collection in the Shopify admin.

## Show the collection image and description in the header
The **Collection header** uses the collection title as the page heading. The image and description come from the collection itself, in **Products** > **Collections** in the Shopify admin.

1. In the left sidebar, click **Collection header**.
2. Under **General**, check **Show collection image** to use the collection image as a background banner.
3. Check **Show collection description** to show the description under the title.
4. Choose a **Heading size** for the collection title.
5. Under **Collection image layout**, choose the **Image height on large screen** and **Content position on large screen**. Set the mobile options too.
6. Click **Save**.

> **Tip:** Light text on a busy photo can be hard to read. Raise **Overlay opacity**, or set a **Custom mask overlay** color, until the title stands out.

## Set up the product grid
1. In the left sidebar, click **Collection products**.
2. Under **General**, set **Items per page**. Pagination appears when a collection has more products than this.
3. Under **Product layout**, choose a **Default layout**: Grid or List.
4. Set **Items per row on large screen** and **Items per row on mobile**. These apply to the Grid layout only.
5. Optional: check **Enable grid/list layout switcher** so customers can change the layout themselves.
6. Click **Save**.

> **Tip:** The List layout gives each product a full-width row with more room for attributes. It suits products with detailed specifications. The Grid layout suits products that sell on their looks.

## Let customers filter and sort products
1. In the **Collection products** section, under **Filter and sort**, check **Enable product filter** and **Enable sort**.
2. Choose a **Filter and sort layout on large screen**: Sidebar, Topbar, or Drawer.
3. Optional: check **Expand all filters by default** to open every filter group when customers see the filters.
4. Click **Save**.

The filters themselves (for example Availability, Price, Color, or Brand) come from the **Search & Discovery** app in the Shopify admin. Add, remove, or reorder them there.

## Let customers compare products and buy from the card
1. In the **Collection products** section, under **Product comparison**, check **Enable comparison**. Each product card gets an **Add to compare** button.
2. Choose how **Quick buy** works on the product cards: Don't use, Standard (variant picker), or Bulk order (all variants).
3. Click **Save**.

> **Note:** Customers can compare up to 3 products from a collection at a time. To set up which details appear in the comparison, see "How to use Electro Product Comparison".

## What customers see
- **Collection banner:** the collection title, with the description and the collection image as a background when they're turned on.
- **Filters:** a Filter button that opens a drawer, filter dropdowns above the products, or a sidebar beside them, depending on the layout you choose. The product count and the sort menu sit above the products.
- **Layout switcher:** customers click the grid or list icon to change how products are shown.
- **Compare:** customers click **Add to compare** on up to 3 products. A **Compare** button shows how many are selected (for example 2/3). It opens a **Product comparison** panel where customers can remove products, click **Clear all**, or click **Compare** to see the products side by side. If they try to add a 4th product, a message tells them the limit is 3.
- **Quick buy:** with Standard, the **Quick Buy** button opens a popup where customers pick a variant and add it to the cart. With Bulk order, the popup lists all variants so customers can order several at once.
- **Mobile:** products show 1 or 2 per row, based on **Items per row on mobile**.
![Product comparison panel with 2 of 3 products selected on a collection page (Electro Surveillance preset)](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/coll-2_1tbxuy3.png)

## Settings reference
### Collection header: General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the header. Edit schemes in Theme settings > Colors. |
| Overlay opacity | Darkens the collection image so the text is easier to read, from 0 % to 90 %. |
| Custom mask overlay | Sets a custom color for the overlay on the collection image. Applies when the collection image is shown. |
| Custom text overlay | Sets a custom color for the title and description on the collection image. Applies when the collection image is shown. |
| Heading size | Sets the size of the collection title: Headline, H1, H2, or H3. |
| Show collection image | Shows the collection image as the header background. |
| Show collection description | Shows the collection description under the title. |

### Collection header: Collection image layout
| Setting | What it does |
| ---- | ---- |
| Image height on large screen | Sets the header height on large screens: Adapt to content, 50% screen height, 70% screen height, Fill screen height, or Adapt to image. The section grows if the content doesn't fit. |
| Content position on large screen | Places the title and description at Top left, Top center, Middle left, Middle center, Bottom left, or Bottom center. |
| Image height on mobile | Sets the header height on mobile, with the same options as large screens. |
| Content position on mobile | Places the title and description on mobile, with the same options as large screens. |

### Collection products: General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the product area. |
| Show collection title | Shows the collection title above the products. |
| Items per page | Sets how many products show on each page, from 8 to 24 in steps of 4. |

### Collection products: Product layout
| Setting | What it does |
| ---- | ---- |
| Default layout | Shows products as a Grid or a List when the page opens. |
| Enable grid/list layout switcher | Adds buttons that let customers switch between Grid and List. |
| Items per row on large screen | Shows 3, 4, 5, or 6 products per row. Applies to the Grid layout only. |
| Items per row on mobile | Shows 1 or 2 products per row. Applies to the Grid layout only. |

### Collection products: Filter and sort
| Setting | What it does |
| ---- | ---- |
| Enable product filter | Shows the filters. Set up the filters in the Search & Discovery app. |
| Enable sort | Shows the sort menu. |
| Filter and sort layout on large screen | Shows the filters in a Sidebar, a Topbar above the products, or a Drawer that opens from a Filter button. |
| Expand all filters by default | Opens every filter group instead of showing them collapsed. |

### Collection products: Product comparison
| Setting | What it does |
| ---- | ---- |
| Enable comparison | Adds an Add to compare button to each product card so customers can compare products in this collection. |
| Quick buy | Sets how customers add products straight from the card: Don't use, Standard (variant picker), or Bulk order (all variants). |

## Troubleshooting
**The collection image doesn't show in the header.**
Check that **Show collection image** is on, and that the collection has an image in **Products** > **Collections** in the Shopify admin.

**The filters don't appear, or a filter is missing.**
Check that **Enable product filter** is on. The list of filters comes from the Search & Discovery app, so add the missing filter there.

**Changing Items per row has no effect.**
**Items per row** applies to the Grid layout only. If the page opens in List, change **Default layout** to Grid or switch the layout on the storefront.

**Customers can't add a 4th product to compare.**
The collection comparison holds up to 3 products. Customers can remove a product in the **Product comparison** panel to add another.

## Related articles
- [Electro Theme Settings](https://help.ecomx.co/en/article/electro-theme-settings-2ubwqk/)
- [How to use Electro Product Comparison](https://help.ecomx.co/en/article/how-to-use-electro-product-comparison-14dk4he/)
- [Electro How to Create Electro Collection List Page](https://help.ecomx.co/en/article/electro-how-to-use-electro-collection-list-template-j92uoh/)
- [Electro How to Use Electro Collection List](https://help.ecomx.co/en/article/electro-how-to-use-electro-collection-list-xrdc5h/)
- [Electro Template](https://help.ecomx.co/en/article/electro-template-ho6wue/)