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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nextsky.gitbook.io/agile-theme/sections/featured-product.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.