# 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://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FX0lDZfIl7xhtlaBW0iqR%2Fimage.png?alt=media&#x26;token=cf719539-e333-4890-b7ba-d2f481ee9074" 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="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FD6DyzkuZinFJsaroBi6D%2FGroup%202%20(1).jpg?alt=media&#x26;token=c5abdb78-a62d-43b7-8f1f-bcfa4abf9252" 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="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FqAUCRkyJiNI2N3gQ5xr4%2Fimage.png?alt=media&#x26;token=b4a5b9c4-f7e9-4e40-852c-87ad3969a30d" 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="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FI6DVFzGdy5t8rpkG7K2U%2Fimage.png?alt=media&#x26;token=3086031c-0764-44e5-be7b-d1c6b0388b06" alt=""><figcaption></figcaption></figure>

### Text

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

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FTEoXijNS0QPHQoKzgwXB%2Fimage.png?alt=media&#x26;token=eefa2c90-799f-45b1-8960-a0424895fbb9" 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="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2Fxb5xysnjlJIGp84G7oNv%2Fimage.png?alt=media&#x26;token=90f6805f-8d40-41cf-a0dd-bbad5694b06a" 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="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FWAZb4LooDxFkc4hvwMzR%2Fimage.png?alt=media&#x26;token=c5a45e79-2b39-4304-bb52-6e48b70c0cb2" 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="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FSRYLGzKfoajNKfiObR4X%2Fimage.png?alt=media&#x26;token=dab06f31-9489-4315-a89c-ef543b44778c" alt=""><figcaption></figcaption></figure>