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.
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
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Collection list.
- Under General, enter a Section subheading, a Section heading, and a Section description. Leave a field empty to hide it.
- Click Collections and select the collections to show.
- 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
- Under Layout, set Items per row on large screen and Items per row on mobile.
- Check Enable carousel to turn the row into a slider that customers can scroll.
- Optional: check Show progress indicator to show a bar under the carousel. It appears only when the carousel is on.
- Choose a Content alignment for the heading: Left or Center.
- Click Save.
Add a "View all" button
The button links to your collection list page, which shows all of your collections.
- Under Button, check Show "View all" button.
- Enter a Label, for example "View all collections". The button is hidden if the label is empty.
- Choose a Button position: Below content, or Next to heading.
- Choose a Style: Primary, Secondary, or Tertiary.
- 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.
- In the theme editor, click Theme settings > Collection card.
- Change the Style, Overlay opacity, Card color scheme, Image ratio, or Show product quantity.
- 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.
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
- Electro How to Create Electro Collection List Page
- Electro How to Create Electro Collection Page
- Electro Theme Settings
Updated on: 30/10/2026
Thank you!