Electro How to use Electro Featured Product

Theme: Electro · Section type: All-template section

The Featured product section shows one product with its images, price, variants and Add to cart button on any page. Use it to promote a best seller or a new launch, so customers can buy without opening the product page.

Note: You can add this section to any template, but not to the header or footer. Each section shows one product.

Featured product section with thumbnails, color swatches, size buttons and a Sale badge

What you can do

Add the section and choose a product
Choose which product details appear
Offer add-ons with the product
See what customers see
Change the section and block settings
Fix common problems

Add the section and choose a product

In the theme editor, open the template where you want the section.
In the left sidebar, click Add section > Featured product. The section comes with the Vendor, Title, Variant selector, Price and Purchasing blocks.
Under General, click Select product and choose a product.
Optional: enter a Subheading, Heading and Description for the section.
Click Save.

Tip: To feature more than one product, add a second Featured product section, or use Featured product list.

Choose which product details appear

Each piece of product information is a block. Most blocks can be added only once. Custom text, Custom liquid and Space can be added as many times as you like.

In the left sidebar, under Featured product, click Add block and choose a block.
Drag the block to where you want it.
Click the block to change its settings.
Click Save.

Block	What it shows
Title	The product title, with an optional share button.
Vendor	The product vendor.
SKU	The SKU of the selected variant.
Price	The price, an optional Sale badge, and the tax and shipping note.
Variant selector	Buttons, swatches or dropdowns to choose a variant, and the stock status.
Add-ons	Extra products customers can tick to add to the cart with this product.
Purchasing	The quantity selector, Add to cart button and dynamic checkout buttons.
View details button	A button that opens the product page.
Custom text	Your own text.
Space	Extra space between two blocks.
Custom liquid	Your own Liquid code.
Description	The product description.
Highlights	Up to 4 key points with icons.
Product attributes	Product metafield values shown as small badges.
Product specifications	A table of product metafields.

Tip: Use Space between blocks under Layout to set the spacing for all blocks, and add a Space block only where one gap needs to be bigger or smaller.

Offer add-ons with the product

Available in Electro 3.5.0 and later.

Under Featured product, click Add block > Add-ons.
Under Products, choose a Source: Complementary products, Related products or Manual selection.
For Manual selection, pick the Products. For the other sources, set the products in the Search & Discovery app.
Optional: select Select all by default to tick every add-on when the page opens.
Click Save.

What customers see

Images: customers browse the product images with the thumbnails. On mobile, they swipe the images. Thumbnails show on mobile only if you select Show thumbnails on mobile.
Variants: when customers choose a variant, the price, image and stock status update.
Add-ons: customers tick the add-ons they want. The Add to cart button shows the total price, and the ticked products are added to the cart together with the main product.
After Add to cart: the product is added to the cart without leaving the page, and the cart drawer or cart notification opens, depending on your cart settings.
View details button: opens the product page.

Green variant selected: the image, color name and stock status update

Settings reference

General

Setting	What it does
Color scheme	Sets the colors of the section.
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	Sets the product to feature.

Media

Setting	What it does
Media ratio	Sets the shape of the main image: Square, Portrait (2:3), Landscape (3:2), or Adapt to image to keep the image's own shape.
Thumbnails ratio	Sets the thumbnail shape: Square, Portrait (2:3) or Landscape (3:2). Each shape is listed twice: the first three fill the shape and may crop the image, the last three fit the whole image inside it.
Show thumbnails on mobile	Shows thumbnails under the images on mobile.
Media background	Sets the color behind product images with a transparent background.

Layout

Setting	What it does
Content alignment	Aligns the subheading, heading and description Left or Center.
Space between blocks	Sets the space between the blocks, from 0 to 60 px.

Title, Price and Variant selector blocks

Setting	What it does
Product title size	Sets the title size from H2 to H5.
Enable share	Shows a share button next to the title.
Show Sale badge	Shows a Sale badge next to the price when the product is on sale.
Show tax and shipping policy	Shows the tax and shipping note under the price.
Text size	Sets the price size, from 14 to 48 px.
Custom text color	Sets the price color. Leave it empty to use the color scheme.
Show stock status	Shows the In stock, Low stock or Out of stock line.
Show stock number	Shows how many items are left. Appears when Show stock status is on.
Selector type	Shows variant options as Button or Dropdown. To show colors as swatches, set it up in Theme settings > Product information.
Swatch size	Sets the size of color swatches, from 24 to 64 px.
Button size	Sets the size of variant buttons, from 28 to 72 px.
Space between options	Sets the gap between swatches or buttons, from 4 to 24 px.

Add-ons block

Setting	What it does
Heading	Sets the heading above the add-ons.
Heading size	Sets the heading size from H3 to H6.
Icon source	Shows an icon next to the heading: None, Theme library, Custom image or Custom SVG.
Icon size	Sets the icon size, from 12 to 48 px. Appears when you choose an icon.
Source	Uses Complementary products or Related products from the Search & Discovery app, or a Manual selection. The block is hidden when the product has no complementary or related products.
Maximum items to show	Sets how many add-ons appear, from 1 to 6. Appears when Source isn't Manual selection.
Products	Sets the add-ons for Manual selection.
Show variant picker	Lets customers choose a variant for each add-on. When off, each add-on uses its first available variant.
Select all by default	Ticks every add-on when the page opens.
Color scheme	Sets the colors of the add-on list.
Image ratio	Sets the add-on image shape: Square, Portrait, Landscape or Original.
Show product border	Draws a border around each add-on.

Other blocks

Setting	What it does
Purchasing: Show quantity selector	Shows the quantity selector next to Add to cart.
Purchasing: Show dynamic checkout buttons	Shows buttons such as Buy it now, PayPal or Apple Pay.
View details button: Button style	Shows the button as Primary, Outline or Link.
Custom text: Text, Text style	Sets your text and shows it as Body or Body light.
Space: Desktop height, Mobile height	Adds space, from 0 to 100 px, separately for desktop and mobile.
Custom liquid: Liquid code	Adds your own Liquid code.
Description: Enable "More" button	Shortens a long description and adds a More button to expand it.
Highlights: Display style	Shows the items as Icon blocks or as collapsible rows (Collapsibles content).
Highlights: Custom color icon	Sets the icon color.
Highlights: Item 1–4	Sets an icon, Heading and Content for each item. Leave the heading empty to hide an item.
Product specifications	Sets the Heading, Show as Collapsible content, and the Metafield keys to show, separated by commas.

Troubleshooting

The section shows placeholder content.
No product is selected. Under General, click Select product.

The Add-ons block doesn't appear.
With Complementary products or Related products as the source, the block is hidden when the product has none. Set them up in the Search & Discovery app, or choose Manual selection.

I can't find the Rating block.
Electro no longer has a Rating block in this section. To show reviews, add your review app's block or use a Custom liquid block.

The thumbnails crop my product images.
In Thumbnails ratio, choose one of the last three options. They fit the whole image inside the thumbnail.

Updated on: 30/10/2026

Was this article helpful?

Thank you!