# Featured product

<div data-full-width="true"><figure><img src="/files/1OZ2q7N6tFYitFzBKwTz" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=minimog%2Bhelp%2Bcenter&#x26;utm_medium=banner&#x26;utm_campaign=foxaffiliatelaunch2024">Explore FoxEcom Affiliate Program now </a><span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

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

![](/files/upmS883Q0Rzq4BzwWzjR)

{% 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.

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

### Media

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

<figure><img src="/files/jbNGbmWHZIBZ2AdLH7tL" 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.

![](/files/ezUqMCogHhApqc3BCtkT)

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

<figure><img src="/files/DvBPfAMMDaiwDyKKw9QJ" 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="/files/x6oVpaGD3KITxzB9qxNs" 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="/files/KVW1HknfvdO00ZdT00kl" 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="/files/mTZ0OJtk161EJZU8mLZB" 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="/files/d5yJmNqHrAbxoTE1s6Q2" alt=""><figcaption></figcaption></figure>

#### Product meta

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

![](/files/gIQ6Vd9Uh38M1hvJuvUs)

#### Collapsible tab

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

<figure><img src="/files/3glVXvbw2031YFYwj6bc" 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://docs.foxecom.com/minimog-theme/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.