# Featured Products

The **Featured Products Section** allows you to highlight selected products on your homepage or other pages. This section is ideal for showcasing **best-sellers, new arrivals, or promotional items**, helping customers easily discover key products.

{% hint style="success" %}

1. **Go to** Shopify Admin > Online Store > Themes.
2. **Click** Customize on your active theme.
3. In the theme editor, **click** Add Section > Featured Products.
   {% endhint %}

<figure><img src="https://2586998482-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoR59WHukDFiu96fv0kDY%2Fuploads%2FrIsOvexJiGEn8XaX5Cx3%2Ffeatured--.png?alt=media&#x26;token=3dd3b9f7-992b-445a-93d8-ed57723e4b48" alt=""><figcaption></figcaption></figure>

### **Settings & Customization**

<figure><img src="https://2586998482-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoR59WHukDFiu96fv0kDY%2Fuploads%2FGFbXxmpue1hyxgmjgdiz%2Ffeatured%20product.png?alt=media&#x26;token=37544747-a30d-4bc3-b2ba-1ed16d9326d0" alt=""><figcaption></figcaption></figure>

**Color scheme :** You can customize the section’s appearance by changing the **text color, background color**, and more using preset color options.

**Select Product:** Choose the product to be featured.

#### **Layout Settings**

* **Expand to Full Width:** Enable this option to extend the section across the entire screen width.
* **Enable Sticky on Desktop:** Keep the product section fixed while scrolling.
* **Media Width:** Choose from **Small, Medium, or Large**.
* **Media Position:** Set image placement to **Left or Right**.
* **Thumbnail Layout:** Choose **Horizontal, Stacked or Vertical** arrangement.
* **Zoom Options:**
  * **Inner Zoom :** Enables zoom effect on hover.
  * **Photoswipe Lightbox :** Opens the image in a lightbox.
  * **None :** Disables zoom functionality.
* **Mobile Layout :** Enable to remove thumbnails for a cleaner mobile experience.
* **Navigation Style:** Select **Classic** or **Modern** for the navigation UI.

#### **Section Padding** <a href="#section-padding" id="section-padding"></a>

* **Top Padding:** Adjust spacing above the section.
* **Bottom Padding:** Adjust spacing below the section.

#### Section divider

* **Shapes** : Adds shape effects to the section. Options: **( Curve Top, Curve Bottom, Curve Both, None, Border Top, Border Bottom, and Both Border)**.

### **Block Settings**

* **Vendor :** Displays the vendor. There are no customization block settings available for this..&#x20;
* **Title :** Displays the product’s title. There are no customization block settings available for this.
* **Price :** Displays the price. There are no customization block settings available for this.
* **Text Block : Enter additional text to display.**&#x54;o display dynamic data like product Title or Vendor, select the Insert dynamic source icon shown next to the Text box and select any metafield to add there.
* **Icon with text :** Icon 1-4 **Icon.**&#x20;
  * **Custom icon** Choose any icon from the list.
  * **Heading** Enter the heading text.
  * **Custom image** Add the image of the icon.
* **Varient Selector :** This is to show the product variants, e.g., Size, colors, etc.
  * **Option style :** Choose the **Dropdown** and  **button style**.
  * **Enable Color swatches** : Enable or disable the color swatches.
  * **Swatch Shapes :** Choose the **Rounded** and  **Boxed** style.&#x20;
  * **Show Varient image as Swatches :** Enable or disable the show varient images.
* **Quantity :** This block shows the quantity selector.
* **Buy Button :** This block is to show the **Add to cart** button along with below settings:&#x20;
  * **Show dynamic checkout button** Select the checkbox to show the dynamic checkout button.
  * **Show recipient information form for gift cards** Select the checkbox to show the recipient information form for gift cards only.
* **Sku :** It highlights the product’s SKU.
* **Share :** This block will show the share.
* **Description :** Displays the product description on the page. There are customization block settings available for this.
* **Custom Liquid :** You can add custom liquid codes for advanced customization, like app snippets.
* **Modal text :** This block will show the popup modal.


---

# 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://themessupport.gitbook.io/lollipop/sections/featured-products.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.