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

Add this section to any template (except Checkout) and re-order its position. You can use this section multiple times on the same page with different content and settings.

{% 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/spark/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/spark/general/adapting-your-theme/dynamic-content-with-metafields).
{% endhint %}

<details>

<summary><mark style="color:blue;">STEPS</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://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%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.

| Default blocks (guides)                                                                                                   | Description                                                                                                                                                                                                                                                                                                                                                                     |
| ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Title](https://help.fluorescent.co/spark/product-pages/product-page-blocks/default-blocks#title)                         | Display title, price, vendor, star rating, and badges.                                                                                                                                                                                                                                                                                                                          |
| [Price](https://help.fluorescent.co/spark/product-pages/product-page-blocks/default-blocks#price)                         | Display the price of your product, including the sale or compared price.                                                                                                                                                                                                                                                                                                        |
| [Description](https://help.fluorescent.co/spark/product-pages/product-page-blocks/default-blocks#description)             | Display product description as a paragraph or accordion.                                                                                                                                                                                                                                                                                                                        |
| [Variant selectors](https://help.fluorescent.co/spark/product-pages/product-page-blocks/default-blocks#variant-selector)  | Display variants of product options. Includes options for [Information popup](https://help.fluorescent.co/spark/product-pages/product-page-blocks/information-popup), [Variant swatches](https://help.fluorescent.co/spark/product-pages/variant-options/variant-swatches), and [Variant chips](https://help.fluorescent.co/spark/product-pages/variant-options/variant-chips). |
| [Quantity selector](https://help.fluorescent.co/spark/product-pages/product-page-blocks/default-blocks#quantity-selector) | Let customers add more quantities of a product.                                                                                                                                                                                                                                                                                                                                 |
| [Buy buttons](https://help.fluorescent.co/spark/product-pages/product-page-blocks/default-blocks#buy-buttons)             | Add-to-cart button with optional [Dynamic checkout button](https://help.fluorescent.co/spark/product-pages/product-page-blocks/default-blocks#dynamic-checkout-button). Includes [Local pickup banner](https://help.fluorescent.co/spark/product-pages/product-page-blocks/default-blocks#local-pickup-banner).                                                                 |
| [Share icons](https://help.fluorescent.co/spark/product-pages/product-page-blocks/default-blocks#share-icons)             | Social links for sharing your product page.                                                                                                                                                                                                                                                                                                                                     |
| Border                                                                                                                    | Add a horizontal line to visually separate product blocks.                                                                                                                                                                                                                                                                                                                      |
| SKU                                                                                                                       | Show the SKU number used to track your product inventory.                                                                                                                                                                                                                                                                                                                       |
| Vendor                                                                                                                    | Show the product vendor (or seller) as added in your Shopify Admin.                                                                                                                                                                                                                                                                                                             |

| Features blocks (guides)                                                                                             | Description                                                    |
| -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
| [Accordion](https://help.fluorescent.co/spark/product-pages/product-page-blocks/accordion-block)                     | Add expandable tabs that reveal more text when clicked.        |
| [Complementary products](https://help.fluorescent.co/spark/product-pages/product-page-blocks/complementary-products) | Show customers related products that they can add to the cart. |
| [Custom Liquid](https://help.fluorescent.co/spark/for-developers/custom-liquid)                                      | Add block with custom HTML or Liquid                           |
| [Custom text field](https://help.fluorescent.co/spark/product-pages/product-page-blocks/custom-text-field)           | Let customers add personalized text, notes, or options.        |
| [Information popup](https://help.fluorescent.co/spark/product-pages/product-page-blocks/information-popup)           | Add popup product information (ex. Size guide).                |
| [Payment block](https://help.fluorescent.co/spark/product-pages/product-page-blocks/payment-accordion)               | Display icons of payment methods and info.                     |
| [Security block](https://help.fluorescent.co/spark/product-pages/product-page-blocks/security-accordion)             | Display message about information and transaction security.    |
| [Shipping block](https://help.fluorescent.co/spark/product-pages/product-page-blocks/shipping-accordion)             | Display shipping info and a shipping estimator button.         |
| [Stock level indicator](https://help.fluorescent.co/spark/product-pages/product-page-blocks/stock-level-indicator)   | Display stock level bar with 'low inventory' alert.            |
| [Text block](https://help.fluorescent.co/spark/product-pages/product-page-blocks/text-block)                         | Add a short block of text.                                     |
| <p><br></p>                                                                                                          |                                                                |

***

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