> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/sections/theme-sections/featured-product.md).

# Featured product

The **Featured product** section displays an entire product form on your page so customers can buy your products on the spot.

## **Set up section**

***

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [insert dynamic content with metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}

In the editor side panel, click **(+) Add section** and select **Featured product**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit the general **section styles:** [Padding](/stiletto/sections/theme-sections/using-sections.md#section-padding) | [Top divider](/stiletto/sections/theme-sections/using-sections.md#section-top-divider) | [Animation](/stiletto/sections/theme-sections/using-sections.md#section-animations)

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Select a **Template** to edit from the dropdown menu in the top bar.
2. Under **Template**, click **(+) Add section** and select **Featured product**.
3. Change the order of your sections by using the drag and drop handles **`⋮⋮`**
4. Click on the **Featured product** section and click **Select product** to choose which product to feature.
5. Select the **Product image size** of your product media. Either **Small**, **Medium**, **Large**, **Extra Large**.
6. (*Optional*.) If you have added a video to your Product media, choose whether to **Enable video looping** so they play continuously after being started.
7. Select an **Image aspect ratio** to crop the product image to **Square**, **Landscape**, or **Portrait**.

   > The default **Natural** setting displays the original orientation of your product media.

   ![](/files/RFmWGT0O4EPQmXP8F5si)
8. Click **Save**.

</details>

### Product blocks

***

Just like the **Product template**, this section contains the elements or blocks that make up your product form. You can rearrange or edit these blocks to create new styles or layout for your **Featured product** section.

Below you'll find a list of all the **Featured product** blocks, along with associated settings and features. Follow the link for setup instructions.

<table><thead><tr><th width="192">Default blocks</th><th>Description</th></tr></thead><tbody><tr><td><a href="/pages/hVucMts5nBJ1FhET209o#product-header">Product header</a></td><td>Display title, price, vendor, star rating, and badges.</td></tr><tr><td><a href="/pages/hVucMts5nBJ1FhET209o#description">Description</a></td><td>Display product description as a paragraph or accordion.</td></tr><tr><td><a href="/pages/hVucMts5nBJ1FhET209o#variant-selector">Variant selectors</a></td><td>Display variants of product options. Includes options for <a href="/pages/aQ9sXsgyW6pLVvodyafU">Information popup</a>, <a href="/pages/icEbZO563kl4UGPTX0fD">Variant swatches</a>, and <a href="/pages/q9k1M30HenITCM5k7E0u">Variant chips</a>.<br><br>If you have <a href="https://github.com/fluorescent/kb-stiletto/blob/main/product-pages/variant-options/sibling-product-swatches/README.md">Sibling product swatches</a> set up, those swatches will appear in the section and will change the product media and details when selected.</td></tr><tr><td><a href="/pages/hVucMts5nBJ1FhET209o#quantity-selector">Quantity selector</a></td><td>Let customers add more quantities of a product.</td></tr><tr><td><a href="/pages/hVucMts5nBJ1FhET209o#buy-buttons">Buy buttons</a></td><td>Add-to-cart button with optional <a href="/pages/hVucMts5nBJ1FhET209o#sticky-add-to-cart-bar">Sticky Add-to-Cart bar</a> and <a href="/pages/hVucMts5nBJ1FhET209o#dynamic-checkout-button">Dynamic checkout button</a>. Includes <a href="/pages/hVucMts5nBJ1FhET209o#local-pickup-banner">Local pickup banner</a>.</td></tr><tr><td><a href="/pages/hVucMts5nBJ1FhET209o#share-icons">Share icons</a></td><td>Social links for sharing your product page.</td></tr></tbody></table>

<table><thead><tr><th width="217">Features blocks</th><th>Description</th></tr></thead><tbody><tr><td><a href="/pages/3Xrr1Ra2WJZicN8E90eI">Collapsible row block</a></td><td>Add expandable tabs that reveal more text when clicked.</td></tr><tr><td><a href="/pages/ywqWZXJJjvLxkx9y1jXU">Complementary products</a></td><td>Show customers related products that they can add to the cart.</td></tr><tr><td><a href="/pages/q2ny0jzrI1rmbmyEBcoQ">Custom Liquid</a></td><td>Add block with custom HTML or Liquid</td></tr><tr><td><a href="/pages/dShkAElvCnVj5LfNUVya">Custom options</a></td><td>Let customers add personalized text, notes, or options.</td></tr><tr><td><a href="/pages/CXIE7GQPgAt9bzt53b0P">Image block</a></td><td>Add a featured image block.</td></tr><tr><td><a href="/pages/aQ9sXsgyW6pLVvodyafU">Information popup</a></td><td>Add popup product information (ex. Size guide).</td></tr><tr><td><a href="/pages/Rb8qdoUZf8rfMPY0Thyy">Product labels</a></td><td>Show badges with text label and icon.</td></tr><tr><td><a href="/pages/Gv4517Rg6OOcDjzJI4ML">Product reviews</a></td><td>Show star rating from Shopify product reviews.</td></tr><tr><td><a href="/pages/xMZQW5VHRTXodFIzPpSS">Secure payment</a></td><td>Show security message and payment icons.</td></tr><tr><td>Spacer</td><td>Add space between product blocks.</td></tr><tr><td><a href="/pages/nJua09ODwYBLi2aeNpZL">Stock level indicator</a></td><td>Display stock level bar with 'low inventory' alert.</td></tr><tr><td><a href="/pages/Vn8pZpnzIXn9aCiXvp7l">Text block</a></td><td>Add a short block of text.</td></tr><tr><td><a href="/pages/0LUCnCfs7NLVlwtN5wVh">Text list with icons</a></td><td>Add a list with icons.</td></tr></tbody></table>

<br>

***

> **Related links**
>
> [Product page template](/stiletto/product-pages/product-template.md)
