# Featured product

Customers delve into the product's details and add them to their cart without leaving the page.

![](https://content.gitbook.com/content/SnkJrgCgnPuM88XGWwwm/blobs/G6yNRKHBY8V22oUpEsxm/Screen%20Shot%202021-11-17%20at%2021.36.28.png)

{% hint style="success" %}
Steps

1. In the theme editor **(Customize)**, click **Add section**
2. Locate **Featured product**
3. **Save**
   {% endhint %}

## Section settings

### Product settings

Add the product you want to display and adjust the item gap.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2F2aFgVN0aUKVddbFQnAz5%2Fimage.png?alt=media&#x26;token=97951881-d4e3-4efc-80fc-597b4ea84964" alt=""><figcaption></figcaption></figure>

### Media

You can decide which side the image and layout of media will display.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FOceBFjmV8cK8gBWcZeqI%2Fimage.png?alt=media&#x26;token=aff2e2d0-51e3-4232-ae0e-95eec76f2ff1" alt=""><figcaption></figcaption></figure>

## Block settings

The product information blocks: title, price, and variants selector will be pulled from the product page to display in this section with a buy button. You can also add other blocks presenting different information for your featured product. Drag and drop to reorder the blocks.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FNf1fr2PfytVL9ICVp2ul%2Fimage.png?alt=media&#x26;token=72f84fca-d806-4daa-9d5c-bd17d7646e6d" alt=""><figcaption></figcaption></figure>

#### Price

You can enable showing the saving amount along with the price.

<figure><img src="https://content.gitbook.com/content/SnkJrgCgnPuM88XGWwwm/blobs/tQVhdqZ8zkXjCfeuNcaM/image.png" alt=""><figcaption></figcaption></figure>

#### Buy button

Enable/disable the "**Show dynamic checkout button"** to include a direct-to-checkout button. Other buttons such as Add-to-cart or quantity selector can be displayed if needed.

<figure><img src="https://content.gitbook.com/content/SnkJrgCgnPuM88XGWwwm/blobs/hpdRkincwYnPqGW34JZu/image.png" alt=""><figcaption></figcaption></figure>

#### Shipping information

Enable/disable showing delivery estimation and shipping text. Add info regarding the delivery, shipping text, and the number of days that the package will arrive.

You can adjust the date format of the shipping information. To know more about the date format, see [here](http://strftime.net/).

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2Fe2pmkr6GO61HGZu4nR9O%2Fimage.png?alt=media&#x26;token=f9e56676-0ff3-4e47-90c8-603f04f15bf9" alt=""><figcaption></figcaption></figure>

#### Short description

Need to add a metafield with namespace "descriptor.short\_description" to display.&#x20;

Learn more about [Shopify's Metafields](https://help.shopify.com/manual/custom-data/metafields).

#### Rich text

Text that is formatted with common formatting options, such as bold and italics, that are unavailable with plain text.

<figure><img src="https://content.gitbook.com/content/SnkJrgCgnPuM88XGWwwm/blobs/BYYNXkcl0esFNZ7G9W5K/image.png" alt=""><figcaption></figcaption></figure>

#### Trust badge

A badge or seal to instill trust in your potential customers.

Add a heading and image for the badge. You can control the image width and the heading position.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FCkIhOPPaMpzZ9yaukbL0%2Fimage.png?alt=media&#x26;token=ef94ed15-0162-451d-ae78-d8f4b0e73b3c" alt=""><figcaption></figcaption></figure>

#### Product meta

Enable/disable collection list, SKU, and product vendor.

![](https://content.gitbook.com/content/SnkJrgCgnPuM88XGWwwm/blobs/LO4T8r64lutIrlR6BlRl/Screen%20Shot%202021-11-17%20at%2021.45.56.png)

#### Collapsible tab

Add a heading and the extra information on the tab. You can also add content using custom liquid.&#x20;

<figure><img src="https://content.gitbook.com/content/SnkJrgCgnPuM88XGWwwm/blobs/5qeuAQNxkPlnWZ0NRHJI/image.png" alt=""><figcaption></figcaption></figure>