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

**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](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/fp1_1qwctuc.jpg)

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

1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Featured product**. The section comes with the Vendor, Title, Variant selector, Price and Purchasing blocks.
3. Under **General**, click **Select product** and choose a product.
4. Optional: enter a **Subheading**, **Heading** and **Description** for the section.
5. 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.

1. In the left sidebar, under **Featured product**, click **Add block** and choose a block.
2. Drag the block to where you want it.
3. Click the block to change its settings.
4. 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.

1. Under **Featured product**, click **Add block** > **Add-ons**.
2. Under **Products**, choose a **Source**: Complementary products, Related products or Manual selection.
3. For Manual selection, pick the **Products**. For the other sources, set the products in the Search & Discovery app.
4. Optional: select **Select all by default** to tick every add-on when the page opens.
5. 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](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/fp2_xpo4iq.png)


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

## 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 Product template](https://help.ecomx.co/en/article/electro-how-to-use-electro-product-template-hwchis/)
- [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/)