> ## 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 Use Electro Collection List

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

The Collection list section shows a row of collection cards, each with its image and name. Use it to help customers jump straight to the product categories they care about.

> **Note:** You can add this section to any template, except the header and footer.
![Collection list section with a heading, a View all collections button, and a badge on one card (Electro preset)](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/clist-1_d4l5uz.png)

**What you can do**
- Add the section and choose your collections
- Show the collections in a carousel
- Add a "View all" button
- Change how the collection cards look
- See what customers see
- Change the Collection list settings
- Fix common problems

---

## Add the section and choose your collections
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Collection list**.
3. Under **General**, enter a **Section subheading**, a **Section heading**, and a **Section description**. Leave a field empty to hide it.
4. Click **Collections** and select the collections to show.
5. Click **Save**.

> **Tip:** Each card uses the collection image. If a collection has no image, the card shows the first product's image instead. Add a collection image in **Products** > **Collections** in the Shopify admin for a consistent look.

## Show the collections in a carousel
1. Under **Layout**, set **Items per row on large screen** and **Items per row on mobile**.
2. Check **Enable carousel** to turn the row into a slider that customers can scroll.
3. Optional: check **Show progress indicator** to show a bar under the carousel. It appears only when the carousel is on.
4. Choose a **Content alignment** for the heading: Left or Center.
5. Click **Save**.

## Add a "View all" button
The button links to your collection list page, which shows all of your collections.

1. Under **Button**, check **Show "View all" button**.
2. Enter a **Label**, for example "View all collections". The button is hidden if the label is empty.
3. Choose a **Button position**: Below content, or Next to heading.
4. Choose a **Style**: Primary, Secondary, or Tertiary.
5. Click **Save**.

## Change how the collection cards look
The look of the cards is shared by every collection card in the store, so you change it in the theme settings, not in this section.

1. In the theme editor, click **Theme settings** > **Collection card**.
2. Change the **Style**, **Overlay opacity**, **Card color scheme**, **Image ratio**, or **Show product quantity**.
3. Click **Save**.

> **Note:** Changes in **Theme settings** > **Collection card** also apply to the collection list page and to every other Collection list section. To add badges such as "New in" to a collection card, see "Electro How to Create Prominent Badges for Collections in Electro".

## What customers see
- **Collection cards:** each card shows the collection image and name. Customers click a card to open the collection.
- **Carousel:** on large screens, arrow buttons scroll through the cards. On mobile, customers swipe. The progress indicator shows how far they've scrolled.
- **"View all" button:** opens the collection list page. With **Next to heading**, the button sits beside the heading on large screens and under the heading on mobile.
- **Badges:** a collection with a prominent badge shows it in the top corner of its card.
![Collection list carousel on mobile with the View all button under the heading (Electro preset)](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/clist-2_6uxkpr.png)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. Edit schemes in Theme settings > Colors. |
| Section subheading | Adds a short line above the heading. Leave it empty to hide it. |
| Section heading | Adds the section heading. Leave it empty to hide it. |
| Heading size | Sets the heading size: H2, H3, H4, or H5. |
| Section description | Adds text under the heading. |
| Collections | Selects the collections to show. |

### Layout
| Setting | What it does |
| ---- | ---- |
| Items per row on large screen | Shows 3, 4, 5, or 6 cards per row. |
| Items per row on mobile | Shows 1 or 2 cards per row. |
| Enable carousel | Turns the row into a slider. |
| Show progress indicator | Shows a progress bar under the carousel. Works only when Enable carousel is on. |
| Content alignment | Aligns the heading and text to the Left or Center. |

### Button
| Setting | What it does |
| ---- | ---- |
| Show "View all" button | Shows a button that links to the collection list page. |
| Label | Sets the button text. The button is hidden if this is empty. |
| Button position | Places the button Below content or Next to heading. |
| Style | Sets the button style: Primary, Secondary, or Tertiary. |

## Troubleshooting
**The "View all" button doesn't show.**
Check that **Show "View all" button** is on and that **Label** has text. The button is hidden when the label is empty.

**The progress bar doesn't show.**
**Show progress indicator** works only when **Enable carousel** is on.

**I can't find the image ratio or card style in the section.**
These settings moved to **Theme settings** > **Collection card**. They apply to every collection card in the store.

**A collection card shows a product photo instead of my collection image.**
The collection has no image. Add one in **Products** > **Collections** in the Shopify admin.

## Related articles
- [Electro How to Create Prominent Badges for Collections in Electro](https://help.ecomx.co/en/article/electro-how-to-create-prominent-badges-for-collections-in-electro-1cxeuvf/)
- [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 Create Electro Collection Page](https://help.ecomx.co/en/article/electro-how-to-use-electro-collection-template-yh1jxm/)
- [Electro Theme Settings](https://help.ecomx.co/en/article/electro-theme-settings-2ubwqk/)