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

# Featured product

**Featured products** on an e-commerce website promote products, engage customers, encourage cross-selling, provide promotion flexibility, boost conversions, allow seasonal promotion, and emphasize brand identity.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FAshSTl0DM3wFqHJwTaUO%2Fimage.png?alt=media&amp;token=13276cc4-40ef-4ed5-88cb-fffe8f174257" alt=""><figcaption></figcaption></figure>

### General settings

| Setting                                                            | Description                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width**                                                  | <p>3 options for container</p><ul><li><strong>Stretch width</strong>: span the section width regardless of screen size.</li><li><strong>Fix width</strong>: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li><strong>Expand full width:</strong> takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul> |
| **Color scheme**                                                   | Select colors from **Theme settings -> Colors**                                                                                                                                                                                                                                                                                                                                                                                         |
| **Product**                                                        | Select your desired featured product                                                                                                                                                                                                                                                                                                                                                                                                    |
| **Desktop media width**                                            | Customize the featured image width on desktop                                                                                                                                                                                                                                                                                                                                                                                           |
| **Desktop media position**                                         | <p>2 options for media position on desktop:</p><ul><li><strong>Left</strong></li><li><strong>Right</strong></li></ul>                                                                                                                                                                                                                                                                                                                   |
| **Desktop layout**                                                 | <p>2 options for desktop layout</p><p><strong>Grid</strong></p><ul><li></li></ul>                                                                                                                                                                                                                                                                                                                                                       |
| <p>1 columns</p><ul><li></li></ul>                                 |                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| <p>2 columns</p><p><strong>Carousel</strong></p><ul><li></li></ul> |                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| <p>Horizontal thumbnails</p><ul><li></li></ul>                     |                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| Vertical thumbnails                                                |                                                                                                                                                                                                                                                                                                                                                                                                                                         |

* 2 columns

\| | \*\*Column gap\*\* |

4 options for column gap

* **No gap**
* **Small**
* **Medium**
* **Large**

\| | \*\*Enable lightbox\*\* | Activates a lightbox effect for images or media in this section. | | \*\*Enable video looping\*\* | This setting allows your video media looping | | \*\*Enable video autoplay\*\* |

Videos are muted automatically to allow autoplay.\
\
*\*\*Note: Won't work for YouTube/Vimeo.*

\| | \*\*Enable video controls custom\*\* |

Enable the control system for your video\
\
*\*\*Note: Won't work for YouTube/Vimeo.*

|

#### Section padding <a href="#section-padding" id="section-padding"></a>

| Setting    | Description                                |
| ---------- | ------------------------------------------ |
| **Top**    | Customize the top margin of the section    |
| **Bottom** | Customize the bottom margin of the section |

#### Section divider

<table><thead><tr><th width="213">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show divider</strong></td><td>Toggles the visibility of a horizontal divider line within the section.</td></tr></tbody></table>

### Featured product blocks

#### **1. Badge**

Displays product tags.

#### **2. Product Title**

Display product title.

#### **3. Product rating**

Display the product's rating.

#### **4. Price**

Display product price.

#### **5. Description**

Detailed product description.

#### **6. Highlights**

Show key product benefits using icons and short labels.

#### **7. Key features**

List the key benefits of the product.

#### **8. Promotion alert**

Displays promotional messages (e.g., 🔥 Limited Time). Fill in the settings:

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2Flb1C4XdErAtu7tzNsARE%2Fimage.png?alt=media&amp;token=8cc19d6e-5382-439a-8b6e-eadabd59ce72" alt=""><figcaption></figcaption></figure>

#### **9. Variant picker**

Products with variants provide customers with more choices. To learn more about variants and how to add them to your store, visit the following [link](https://help.shopify.com/en/manual/products/variants).

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2Fnfqp5DTtscbwlM9kywrR%2Fimage.png?alt=media&amp;token=b6dddb2a-d711-4784-975e-bc01bdb1cb69" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FqiRdIIEWgQcfAcWkETwL%2Fimage.png?alt=media&amp;token=03bd1515-ac54-4015-be21-9536344a48fd" alt=""><figcaption></figcaption></figure>

* **Type :** Pills and Dropdown
* **Show size chart:** Display size chart
* **Size trigger:** Define the label(s) used for size options. Separate multiple names with commas.
* **Size chart label:** Title of size chart.
* **Size chart page:** Select the page to display the size chart you've created.
* **Footer content:** Add custom text or links to provide additional information, such as support options or important notices, in the footer section.
* **Custom size chart:** Using specific size charts for each collection or product.To use a custom size charts for product or collection, create metafield with namespace and key: "custom.size\_chart". [Learn more.](/purity-theme/theme-installation/create-required-metafields.md)

#### **10. Inventory status**

**Inventory status** signifies the availability of a product. It's vital for ensuring products are in stock, managing inventory efficiently, and informing customers about availability on your website.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FO0hcedM2SxqBNBSY8GS3%2Fimage.png?alt=media&amp;token=f87f4abe-ef42-49f9-8bd2-35a581591937" alt=""><figcaption></figcaption></figure>

* **Low inventory threshold:** Set the number of items left to trigger a “Low stock” alert.
* **Inventory base quantity:** Set the starting stock quantity to display the progress bar correctly.

#### **11. Buy buttons**

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FcFUAbalubRvINWkl2NLU%2Fimage.png?alt=media&amp;token=a9efc4e3-acf5-4985-b420-2efe5bf7868d" alt=""><figcaption></figcaption></figure>

* **Show dynamic checkout buttons:** Toggle the ''Show dynamic checkout buttons" option to include a direct checkout button
* **Show recipient information form for gift card:** Enables users to schedule gift card deliveries with personal messages. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)

#### **12. Icon with text**

Use this block to show a small icon with a short message — like free shipping, secure checkout, or money-back guarantee.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FzEax4WPhi6KBxdJl4lB7%2Fimage.png?alt=media&amp;token=4edd945b-68b0-4ed9-b9d7-be0ab942460a" alt=""><figcaption></figcaption></figure>

* **SVG Icon**: Choose an appropriate icon
* **Text**: Write a short text .

#### **13. Media lightbox**

Display images or videos in a carousel.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FzQ0ugGeknX17lw6aKsbV%2Fimage.png?alt=media&amp;token=de2d12b7-4568-4559-890d-888205e7fbff" alt=""><figcaption></figcaption></figure>

* **Items per row on desktop**: Set the number of items to display per row.
* **Show navigation**: Enable arrows to move between items.
* **Show pagination**: Show dots to indicate item locations.

#### **14. Pickup availability**

Show customers if a product is available for local pickup at a nearby store or location.

#### **15. Collapsible row**

Add a heading and extra information on the tabs.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FAESTxjqs5FwjjkyY4FaU%2Fimage.png?alt=media&amp;token=65c08384-f589-4b3f-99e6-8e9c0513376c" alt=""><figcaption></figcaption></figure>

* **Heading:** Include a heading that explains the content.
* **Row content:** The content, as you've written
* **Row content from page:** The content is get from the selected page

#### **16. Ask a question**

Display a form for users to submit questions to the seller about the product.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FVeNELpdow1OWKoMLZ6lf%2Fimage.png?alt=media&amp;token=ffa3efea-d640-423e-85a2-167cf19f674b" alt=""><figcaption></figcaption></figure>

#### **17. Share**

Display social networks for sharing or copying links to share.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FZMK6nMVOu966Tr9gbU1Y%2Fimage.png?alt=media&amp;token=0a9e2480-1c66-4801-97fc-7afc936994ae" alt=""><figcaption></figcaption></figure>

#### **18. Complementary products**

To select complementary products, add the Search & Discovery app. [Learn more](https://help.shopify.com/manual/online-store/search-and-discovery/product-recommendations)

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FYNenD6curawqpCVHhNmq%2Fimage.png?alt=media&amp;token=7fa8868c-4bb0-4ccd-ba1c-69235a5a8783" alt=""><figcaption></figcaption></figure>

#### **19. Product meta**

Show/hide collections, SKU, product type, and product tags.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FHlDDa8CBceJ6vMyZ8VY3%2Fimage.png?alt=media&amp;token=2568a7dd-950f-49d6-baca-91cf4941cd1a" alt=""><figcaption></figcaption></figure>

#### **20. Promotion countdown**

Display the promotion countdown.

You need to create a metafield before displaying this block. Please see how to create a metafield [here](/purity-theme/theme-installation/create-required-metafields.md).

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2F23Om1bjVT6YELD74EvIq%2Fimage.png?alt=media&amp;token=e88b393c-a007-42d9-93de-8dbe9f7dd499" alt=""><figcaption></figcaption></figure>

#### **21. Text**

Add the custom content you want.