> ## 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 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).

![Product list section with collection tabs on the Gizmo preset homepage](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/pl1_bha4um.jpg)

**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

1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Product lists**. The section comes with 1 Product list block.
3. Click the **Product list** block and select a **Collection**.
4. Optional: enter a **Heading** for the tab. If you leave it empty, the collection title is used.
5. To add another tab, click **Add block** > **Product list** and repeat steps 3 and 4. You can add up to 6.
6. Under **Layout**, set **Maximum items to show** and **Items per row on large screen**.
7. 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

1. Under **Layout**, select **Enable carousel**. The products show in one row that customers can scroll.
2. Optional: select **Show progress indicator** to add a scroll bar under the products.
3. 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

1. 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.
2. 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

1. Under **Button**, select **Enable "View all" button**.
2. Enter a **Label**.
3. Choose a **Button position**: Below content (under the products) or Next to heading.
4. Choose a **Style**: Primary, Secondary or Tertiary.
5. 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**.
![Quick buy Variant picker opened from a product card](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/pl2_1s99h9h.jpg)


## 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](https://help.ecomx.co/en/article/electro-how-to-use-electro-featured-product-list-ok2dfw/)
- [How to use Electro Collection template](https://help.ecomx.co/en/article/electro-how-to-use-electro-collection-template-yh1jxm/)
- [How to use Electro Collection list](https://help.ecomx.co/en/article/electro-how-to-use-electro-collection-list-xrdc5h/)
- [Electro Theme settings](https://help.ecomx.co/en/article/electro-theme-settings-2ubwqk/)