> ## 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 Featured Product List

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

The Featured product list section shows the products you pick as cards in a row that customers can scroll. Each card can show key specifications from product metafields, so customers can compare best sellers, new arrivals or sale items at a glance.

> **Note:** You can add this section to any template, but not to the header or footer.
![Featured product list with 4 product cards, a Sale badge and the progress indicator](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/fpl1_1h0l1v.png)

**What you can do**
- Add the section and choose products
- Show key specifications on each card
- Let customers view or buy from the card
- See what customers see
- Change the section settings
- Fix common problems

## Add the section and choose products

1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Featured product list**.
3. Under **General**, click **Select products** and choose the products. Drag them to change their order.
4. Under **Text**, enter a **Subheading**, **Heading** and **Description**, or leave them empty to hide them.
5. Under **Layout**, choose the **Items per row on large screen**.
6. Click **Save**.

> **Tip:** Pick more products than you show per row, so customers have a reason to scroll. Turn on **Show progress indicator** to show them there's more.

## Show key specifications on each card

The cards can show values from product metafields, such as capacity, weight or battery life.

1. Set the metafield namespace in **Theme settings** > **Product information**. See "How to set up product metafield".
2. In the section, under **Product specifications**, enter the **Metafield keys** separated by commas (for example height, width, depth).
3. Optional: select **Show specification label** to show the name of each value.
4. Click **Save**.

> **Tip:** 3 keys are recommended. More keys make the cards taller and harder to compare.

## Let customers view or buy from the card

1. Under **Product items**, select **Enable quick view** to add a quick view button to each card.
2. Select **Enable quick buy** to add a quick buy button.
3. Choose **Quick buy**: Standard (variant picker) or Bulk order (all variants).
4. Click **Save**.

## What customers see

- **Cards:** each card shows the image, title, price, a **View details** button and the specifications you set. Sale and Sold out badges appear when you turn them on.
- **Large screens:** customers scroll the row with the arrow buttons. When they point at a card, the quick view and quick buy buttons appear on the image.
- **Mobile:** one card shows at a time, and customers swipe to see more.
- **Quick view:** opens a popup with the product's images, price and variants.
- **Quick buy:** a product with one variant is added to the cart straight away. For a product with variants, a popup opens so customers can choose a variant (Standard) or enter quantities for all variants at once (Bulk order). Sold-out products don't show the quick buy button.
![Quick buy open on a product card, with the variant picker and Add to cart](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/fpl2_vwyyxy.jpg)


## Settings reference

### General

| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. |
| Products | Sets the products in the list. |

### Layout

| Setting | What it does |
| ---- | ---- |
| Items per row on large screen | Shows 3, 4, 5 or 6 cards per row. |
| Show progress indicator | Shows a scroll bar under the cards when there are more cards than fit in the row. |
| Content alignment | Aligns the subheading, heading and description Left or Center. |

### Text

| Setting | What it does |
| ---- | ---- |
| Subheading | Sets a short line above the heading. Leave it empty to hide it. |
| Heading | Sets the section heading. Leave it empty to hide it. |
| Heading size | Sets the heading size from H2 to H5. |
| Description | Sets the text under the heading. |

### Product items

| Setting | What it does |
| ---- | ---- |
| Card color scheme | Sets the colors of the cards. It can differ from the section color scheme. |
| Image ratio | Sets the image shape: Square, Portrait or Landscape. |
| Show second image on hover | Shows the product's second image when customers point at the card. |
| Show vendor | Shows the vendor above the title. |
| Show variant swatches | Shows color swatches on the card. |
| Show Sale badge | Shows a badge on products on sale. |
| Show Sold out badge | Shows a badge on sold-out products. |
| Enable quick view | Adds a button that opens the product in a popup. |
| Enable quick buy | Adds a button that adds the product to the cart from the card. |
| Quick buy | Uses Standard (variant picker) or Bulk order (all variants). Appears when Enable quick buy is on. |
| Media background | Sets the color behind product images with a transparent background. |

### Product specifications

| Setting | What it does |
| ---- | ---- |
| Metafield keys | Sets the product metafield keys to show on each card, separated by commas. See "Show key specifications on each card" above. |
| Show specification label | Shows the name of each specification next to its value. |

## Troubleshooting

**The specifications don't show on the cards.**
Check that the keys match your product metafields exactly and that the namespace is set in **Theme settings** > **Product information**. Products without a value for a key don't show that row.

**I can't find Show product rating or Enable quick shop.**
These settings were replaced. Use **Enable quick view** and **Enable quick buy** instead. Badges are now set with **Show Sale badge** and **Show Sold out badge**.

**The quick buy button doesn't appear on some cards.**
The button is hidden on sold-out products, and when **Enable quick buy** is off.

**The progress bar doesn't show.**
It appears only when there are more products than fit in one row.

## Related articles

- [How to use Electro Featured product](https://help.ecomx.co/en/article/electro-how-to-use-electro-featured-product-ljozz3/)
- [How to use Electro Product list](https://help.ecomx.co/en/article/electro-how-to-use-electro-product-list-18087u0/)
- [How to set up product metafield](https://help.ecomx.co/en/article/electro-how-to-set-up-product-metafield-1u6pmhk/)
- [How to use Electro Collection template](https://help.ecomx.co/en/article/electro-how-to-use-electro-collection-template-yh1jxm/)