> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/agile-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/agile-theme/sections/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="/files/auIQJfgNbN5U2F8fLoKN" alt=""><figcaption></figcaption></figure>

## General settings

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p></p><p>3 options for container</p><ul><li><em><strong>Stretch width</strong></em>: span the section width regardless of screen size.</li><li><em><strong>Fix width</strong></em>: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li><em><strong>Expand full width</strong></em>: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Select colors from <strong>Theme settings -> Colors</strong></td></tr><tr><td><strong>Product</strong></td><td>Select the product you want to display</td></tr><tr><td><strong>Column gap</strong></td><td><p>3 options for column gap</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td><strong>Desktop image position</strong></td><td><p>2 options for desktop image position</p><ul><li>Left</li><li>Right</li></ul></td></tr><tr><td><strong>Desktop thumbnails position</strong></td><td><p>3 options for desktop thumbnails position</p><ul><li>Left</li><li>Bottom</li><li>Hide</li></ul></td></tr><tr><td><strong>Enable video autoplay</strong></td><td>If enabled and the product has a video, it will automatically play</td></tr><tr><td><strong>Enable video looping</strong></td><td>If enabled and the product has a video, it will loop</td></tr><tr><td><strong>Top padding</strong></td><td>Customize the top padding of the section</td></tr><tr><td><strong>Bottom padding</strong></td><td>Customize the bottom padding of the section</td></tr></tbody></table>

## Featured product blocks

<figure><img src="/files/HNCw5CyR9WvkmYSKs348" alt="" width="334"><figcaption></figcaption></figure>

### Product title

Display product name

### Price

**Show sale badge:** Display product labels like discounts, preorder, out of stock

<figure><img src="/files/SQj17KwilkLnacwcuzvC" alt="" width="563"><figcaption></figcaption></figure>

### 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="/files/0PaLm07C9gNgYNa6d85i" alt=""><figcaption></figcaption></figure>

### Text

Formatted text with common styling options, like bold and italics, not available in plain text.

<figure><img src="/files/tVsaJdTHjeGWjQdXcayb" alt=""><figcaption></figcaption></figure>

### Buy buttons

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

<figure><img src="/files/2HEJ7cgjg89MUxzDwFfg" alt=""><figcaption></figcaption></figure>

### Description

Display the product description that has been added

### Product rating

Display the product rating

### Product meta

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

<figure><img src="/files/9FwBdA2DpstcYfL6k1hU" alt=""><figcaption></figcaption></figure>

### 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="/files/b86kV7uar1X7cVt6HUpt" alt=""><figcaption></figcaption></figure>