# Featured product

Customers delve into the product's details and add them to their cart without leaving the page. ![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FEzea1jesHOX8BSw4C3x3%2FScreen%20Shot%202021-11-17%20at%2021.36.28.png?alt=media\&token=d5875ce3-95b0-4a60-87fc-f75f2035c6f4) {% hint style="success" %} Steps 1. In the theme editor **(Customize)**, click **Add section** 2. Locate **Featured product** 3. **Save** {% endhint %} ## Section settings ### General Select the container type and background color of this section. Add the product you want to display and adjust the item gap.

### Media You can decide which side the image will display (left/right).

## 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. ![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FFsWWKi3nYqxOo1R8nKmt%2FScreen%20Shot%202021-11-17%20at%2021.21.13.png?alt=media\&token=f1ca2381-ca0d-4f37-ac9e-3ac6fb5cf341) #### Price You can enable showing the saving amount along with the price. See how to add a compare-at-price for your product [here](https://help.shopify.com/en/manual/discounts/sales#set-a-compare-at-price-for-a-product).

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

#### 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/).

#### Short description Need to add a metafield with namespace "descriptor.short\_description" to display. 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.

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

#### Product meta Enable/disable collection list, SKU, and product vendor. ![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FpJenrXwo8EV0ID3gNdbx%2FScreen%20Shot%202021-11-17%20at%2021.45.56.png?alt=media\&token=24ee18c8-deac-4e9e-83ee-be830b205749) #### Collapsible tab Add a heading and the extra information on the tab. You can also add content using custom liquid.