> For the complete documentation index, see [llms.txt](https://themessupport.gitbook.io/lollipop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themessupport.gitbook.io/lollipop/sections/featured-collection.md).

# 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/JvembUBrcM0Uhb3oFcTr" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/3YWo0yWQw3TgZRKjnDWr" 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&#x20;

* **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&#x20;
  * **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)**.