# 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](https://help.fluorescent.co/stiletto/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields)
{% 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](https://help.fluorescent.co/stiletto/sections/using-sections#section-padding) | [Top divider](https://help.fluorescent.co/stiletto/sections/using-sections#section-top-divider) | [Animation](https://help.fluorescent.co/stiletto/sections/using-sections#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.

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.jpeg?alt=media)
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="../../../product-pages/product-page-blocks/default-blocks#product-header">Product header</a></td><td>Display title, price, vendor, star rating, and badges.</td></tr><tr><td><a href="../../../product-pages/product-page-blocks/default-blocks#description">Description</a></td><td>Display product description as a paragraph or accordion.</td></tr><tr><td><a href="../../../product-pages/product-page-blocks/default-blocks#variant-selector">Variant selectors</a></td><td>Display variants of product options. Includes options for <a href="../../product-pages/product-page-blocks/information-popup">Information popup</a>, <a href="../../product-pages/variant-options/variant-swatches">Variant swatches</a>, and <a href="../../product-pages/variant-options/variant-chips">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="../../../product-pages/product-page-blocks/default-blocks#quantity-selector">Quantity selector</a></td><td>Let customers add more quantities of a product.</td></tr><tr><td><a href="../../../product-pages/product-page-blocks/default-blocks#buy-buttons">Buy buttons</a></td><td>Add-to-cart button with optional <a href="../../../product-pages/product-page-blocks/default-blocks#sticky-add-to-cart-bar">Sticky Add-to-Cart bar</a> and <a href="../../../product-pages/product-page-blocks/default-blocks#dynamic-checkout-button">Dynamic checkout button</a>. Includes <a href="../../../product-pages/product-page-blocks/default-blocks#local-pickup-banner">Local pickup banner</a>.</td></tr><tr><td><a href="../../../product-pages/product-page-blocks/default-blocks#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="../../product-pages/product-page-blocks/collapsible-rows-block">Collapsible row block</a></td><td>Add expandable tabs that reveal more text when clicked.</td></tr><tr><td><a href="../../product-pages/product-page-blocks/complementary-products">Complementary products</a></td><td>Show customers related products that they can add to the cart.</td></tr><tr><td><a href="../../for-developers/custom-liquid">Custom Liquid</a></td><td>Add block with custom HTML or Liquid</td></tr><tr><td><a href="../../product-pages/product-page-blocks/custom-options">Custom options</a></td><td>Let customers add personalized text, notes, or options.</td></tr><tr><td><a href="../../product-pages/product-page-blocks/image-block">Image block</a></td><td>Add a featured image block.</td></tr><tr><td><a href="../../product-pages/product-page-blocks/information-popup">Information popup</a></td><td>Add popup product information (ex. Size guide).</td></tr><tr><td><a href="../../product-pages/product-page-blocks/product-labels">Product labels</a></td><td>Show badges with text label and icon.</td></tr><tr><td><a href="../../product-pages/product-page-sections/product-reviews">Product reviews</a></td><td>Show star rating from Shopify product reviews.</td></tr><tr><td><a href="../../product-pages/product-page-blocks/secure-payment">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="../../product-pages/product-page-blocks/stock-level-indicator">Stock level indicator</a></td><td>Display stock level bar with 'low inventory' alert.</td></tr><tr><td><a href="../../product-pages/product-page-blocks/text-block">Text block</a></td><td>Add a short block of text.</td></tr><tr><td><a href="../../product-pages/product-page-blocks/text-list-with-icons">Text list with icons</a></td><td>Add a list with icons.</td></tr></tbody></table>

&#x20;

<br>

***

> **Related links**
>
> [Product page template](https://help.fluorescent.co/stiletto/product-pages/product-template)
