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.
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
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Featured product list.
- Under General, click Select products and choose the products. Drag them to change their order.
- Under Text, enter a Subheading, Heading and Description, or leave them empty to hide them.
- Under Layout, choose the Items per row on large screen.
- 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.
- Set the metafield namespace in Theme settings > Product information. See "How to set up product metafield".
- In the section, under Product specifications, enter the Metafield keys separated by commas (for example height, width, depth).
- Optional: select Show specification label to show the name of each value.
- 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
- Under Product items, select Enable quick view to add a quick view button to each card.
- Select Enable quick buy to add a quick buy button.
- Choose Quick buy: Standard (variant picker) or Bulk order (all variants).
- 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.
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
- How to use Electro Product list
- How to set up product metafield
- How to use Electro Collection template
Updated on: 30/10/2026
Thank you!