Electro How to Use Electro Product List
Theme: Electro · Section type: All-template section
The Product list section shows products from one or more collections. With more than one collection, each collection gets its own tab, so customers can switch between best sellers, new arrivals or categories without leaving the page.
Note: You can add this section to any template, but not to the header or footer. Each section holds up to 6 Product list blocks (tabs).
What you can do
- Add the section and choose collections
- Show the products in a carousel
- Let customers buy from the card
- Add a "View all" button
- See what customers see
- Change the section settings
- Fix common problems
Add the section and choose collections
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Product lists. The section comes with 1 Product list block.
- Click the Product list block and select a Collection.
- Optional: enter a Heading for the tab. If you leave it empty, the collection title is used.
- To add another tab, click Add block > Product list and repeat steps 3 and 4. You can add up to 6.
- Under Layout, set Maximum items to show and Items per row on large screen.
- Click Save.
Tip: Keep tab headings short (one or two words). Long headings make the tab row scroll on mobile.
Show the products in a carousel
- Under Layout, select Enable carousel. The products show in one row that customers can scroll.
- Optional: select Show progress indicator to add a scroll bar under the products.
- Click Save.
Note: The progress indicator only shows with Enable carousel, and only when there are more products than fit in one row.
Let customers buy from the card
- Under Layout, choose Quick buy:
- Don't use hides the quick buy button.
- Standard (variant picker) opens a Variant picker panel where customers choose one variant and add it to the cart.
- Bulk order (all variants) opens a popup where customers enter quantities for several variants at once.
- Click Save.
This section's Quick buy setting replaces Enable quick buy in Theme settings > Product card for this section. The other card options, such as vendor, swatches, badges, quick view and image ratio, come from Theme settings > Product card and apply to all product cards in your store.
Add a "View all" button
- Under Button, select Enable "View all" button.
- Enter a Label.
- Choose a Button position: Below content (under the products) or Next to heading.
- Choose a Style: Primary, Secondary or Tertiary.
- Click Save.
The button links to the collection of the tab that is open.
What customers see
- Tabs: with 2 or more Product list blocks, the collection headings show as tabs above the products. Customers click a tab to see that collection. With 1 block, there are no tabs.
- Product cards: each card shows the product image, title and price, plus the options you turned on in Theme settings > Product card.
- Quick buy: a product with one variant is added to the cart straight away. For a product with variants, a panel opens with the variant picker, stock and subtotal (Standard), or with a quantity list for all variants (Bulk order). Sold-out products don't show the quick buy button.
- Carousel: on large screens, customers scroll with the arrow buttons. On mobile, they swipe.
- Mobile: 1 or 2 products per row, as set in Items per row on mobile.
Settings reference
Text
Setting | What it does |
|---|---|
Color scheme | Sets the colors of the section. |
Section subheading | Sets a short line above the heading. Leave it empty to hide it. |
Section heading | Sets the section heading. Leave it empty to hide it. |
Heading size | Sets the heading size from H2 to H5. |
Section description | Sets the text under the heading. |
Layout
Setting | What it does |
|---|---|
Maximum items to show | Sets how many products each tab shows, from 2 to 12 in steps of 2. |
Items per row on large screen | Shows 3, 4, 5 or 6 products per row. |
Items per row on mobile | Shows 1 or 2 products per row. |
Enable carousel | Shows the products in one scrollable row instead of a grid. |
Show progress indicator | Adds a scroll bar under the carousel. Works only with Enable carousel. |
Content alignment | Aligns the subheading, heading, description, tabs and button Left or Center. |
Quick buy | Sets the quick buy button on the cards: Don't use, Standard (variant picker) or Bulk order (all variants). See "Let customers buy from the card" above. |
Button
Setting | What it does |
|---|---|
Enable "View all" button | Shows a button that links to the collection of the open tab. |
Label | Sets the button text. |
Button position | Places the button Below content or Next to heading. |
Style | Shows the button as Primary, Secondary or Tertiary. |
Product list block
Setting | What it does |
|---|---|
Collection | Sets the collection whose products show in this tab. |
Heading | Sets the tab heading. If it's empty, the collection title is used. |
Troubleshooting
The "View all" button doesn't show.
The button shows only when the collection has at least as many products as Maximum items to show. Check that Enable "View all" button is on and the Label isn't empty.
The tabs don't show.
Tabs appear only when the section has 2 or more Product list blocks.
The quick buy button is missing on some cards.
It's hidden on sold-out products and when Quick buy is set to Don't use. Turning on Enable quick buy in Theme settings doesn't change this section; use the section's Quick buy setting.
The progress bar doesn't appear.
Turn on Enable carousel first. The bar shows only when there are more products than fit in one row.
Related articles
- How to use Electro Featured product list
- How to use Electro Collection template
- How to use Electro Collection list
- Electro Theme settings
Updated on: 30/10/2026
Thank you!