# Featured collection

The **Featured Collections** section highlights specific product collections on your store’s homepage or other pages, making it easier for customers to explore key categories.

{% hint style="success" %}

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

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

### **Customize the Featured Collections Section**

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

* **Collection :** Choose a collection to display in the featured section ( [Creating Collection](https://help.shopify.com/en/manual/products/collections/manual-shopify-collection) ).
* **Tab Style :** You can choose the tab style for displaying collections:
  * **Tabs** : Displays collections in a tabbed format.
  * **Dropdown** : Displays collections in a dropdown menu.

{% hint style="success" %}
**Note:** If there is more than one collection, either the tab or dropdown style will be enabled automatically
{% endhint %}

#### Layout

* **Expand to full width** : Enable this option to extend the collection across the entire screen width.
* **Color scheme:** You can customize the section’s appearance by changing the **text color, background color**, and more using **preset color** options.
* **Background Opacity** : Adjust transparency (Range: 0–100 %, Default: 100%). This applies to the background image, customizable in theme settings.

#### Content

* **Heading:** Set a custom title (e.g., "Hot & Top Trends").
* **Heading Size:** Choose from **Small, Medium, or Large**.
* **Text :** Add additional text if needed.
* **Text Position :** Select the Position
  * **Above Main Heading** – Position the subheading above the main heading.
  * **Below Main Heading** – Position the subheading below the main heading.
* **Desktop Content Alignment** – Choose the text alignment for desktop. **( Left, Right & Center ).** The content alignment is automatically centered on mobile screens.

#### **Product Card Settings**

* **Show Vendor** : Display the product vendor/brand.
* **Show Description** : Enable to show product descriptions.
* **Show Card Swatch** : Display product swatches (e.g., colors or patterns).
* **Show Secondary Image on Hover** : Show an alternate image when hovering over a product.
* **Show Quick Add Option** : Enable a quick add-to-cart button.
* **Content Alignment** : Choose the text alignment for desktop. **( Left, Right & Center ).**
* **Aspect ratio :**&#x54;here are 3 option image ratio as **( Adapt to image, square, and portrait)** Can choose the required style as theme requirement.

#### **Column Settings**

* **Maximum Products to Show** : Set the total number of products displayed.
* **Desktop Columns** : Choose the number of columns for desktop view. (Options: 3, 4, 5)
* **Mobile Columns** : Choose the number of columns for mobile view. (Options: 1, 2)

#### **Carousel Settings**

* **Enable Carousel** : Activate a sliding format for product display.
* **Change Slides Every :** Set transition delay (in seconds). If set to 0, auto-play is disabled
* **Gap** : Define spacing between items (Default: 30px, auto-adjusts for mobile).
* **Pagination :** Choose the pagination type: **Dots** (dot indicators), **Arrow** (manual navigation), or **None** (no indicators).
* **Pagination Style** : Choose the style: **Classic** (traditional) or **Modern** (updated look).

#### Section padding

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


---

# 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-theme/sections/featured-collection.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.