> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Featured Collections

> Highlight selected collections with multiple layouts, card styles, and slideshow behaviors.

The Featured Collections section highlights selected collections in a visually engaging way. It supports multiple layouts, card styles, and slideshow behaviors to fit different merchandising needs.

Featured collections help organize products by category or theme, making it easier for customers to discover curated product sets and navigate your catalog effectively.

<img src="https://mintcdn.com/digifist/r6A0iDqinNM217ID/images/theme/release/sections/featured-collections/featured-collections-overview.jpg?fit=max&auto=format&n=r6A0iDqinNM217ID&q=85&s=28e1be2de959dc6b42c0823e3c222e46" alt="Featured Collections section overview" width="3280" height="2162" data-path="images/theme/release/sections/featured-collections/featured-collections-overview.jpg" />

## What this section controls

This section controls collection showcase displays with the following capabilities:

* Multiple collection card layouts and styles
* Carousel behavior with customizable slides per view
* Flexible heading and button positioning
* Collection, product, or text-based card types
* Desktop and mobile-specific slideshow controls

## How the Featured Collections works

The Featured Collections uses a block-based system:

* Displays selected collections as cards
* Supports carousel behavior for better space usage
* Card appearance and content vary based on layout and card type
* Collections are added as individual slides using blocks

## Getting started

<Steps>
  <Step title="Open Theme Customizer">
    From Shopify admin, access the Theme Customizer.
  </Step>

  <Step title="Add Featured Collections section">
    Add the Featured Collections section to your page or template.
  </Step>

  <Step title="Add collection slides">
    Click **Add Collection slide** to add collections to showcase.
  </Step>

  <Step title="Configure settings">
    Adjust layout, card style, and slideshow settings.
  </Step>
</Steps>

<img src="https://mintcdn.com/digifist/88_eeoffSR-rUo_7/images/theme/release/sections/featured-collections/featured-collections-location.png?fit=max&auto=format&n=88_eeoffSR-rUo_7&q=85&s=7ca4231e348b149af0f2ab44a392f326" alt="Featured Collections section in Theme Customizer" width="3280" height="2186" data-path="images/theme/release/sections/featured-collections/featured-collections-location.png" />

## Section settings

Section settings control layout, heading content, spacing, and slideshow behavior.

<Tabs>
  <Tab title="Layout & content">
    ### Layout

    Determines the positioning of:

    * Header content
    * Action button
    * Navigation arrows

    **Available options:** Layout 1, Layout 2

    <img src="https://mintcdn.com/digifist/88_eeoffSR-rUo_7/images/theme/release/sections/featured-collections/layout-options.png?fit=max&auto=format&n=88_eeoffSR-rUo_7&q=85&s=0a10177f831f979d16ae84e3b8e7c51f" alt="Layout options comparison" width="3280" height="2186" data-path="images/theme/release/sections/featured-collections/layout-options.png" />

    ### Heading

    Main section heading.

    * Supports bold, italic, underline, and links

    ### Heading size

    Controls the size of the heading text.

    **Available options:** S, M, L, XL

    ### Subheading

    Secondary text displayed below the heading.

    * Supports bold, italic, underline, and links

    ### Content padding

    Adds spacing around the content area of the section.

    **Available options:** No, S, M, L, XL

    ### Button label

    Defines the action button text.

    <Note>
      Leave empty to hide the button.
    </Note>

    ### Button link

    URL used for the section button.

    ### Button style

    Controls the visual appearance of the button.

    **Available options:** Filled, Outlined, Text
  </Tab>

  <Tab title="Collection card settings">
    ### Card layout

    Defines the structure of the collection card.

    **Available options:**

    * **Collection:** Displays collection image and title
    * **Product:** Displays products from the collection
    * **Text:** Displays text-based cards without product visuals

    <img src="https://mintcdn.com/digifist/88_eeoffSR-rUo_7/images/theme/release/sections/featured-collections/card-layout.png?fit=max&auto=format&n=88_eeoffSR-rUo_7&q=85&s=9e8d4ee4b67971bb714217d7c5447e16" alt="Card layout types" width="3280" height="2186" data-path="images/theme/release/sections/featured-collections/card-layout.png" />

    ### Card style

    Controls spacing and density of the card.

    **Available options:** Normal, Compact

    ### Card aspect ratio

    Controls image or card proportions.

    **Available options:** Auto, 1:1, 3:4, 4:5

    <Warning>
      For **Compact** layout, the aspect ratio affects the entire card. For **Normal** layout, it affects only the image. When using **Auto**, ensure all images have similar aspect ratios to maintain visual consistency.
    </Warning>

    ### Content alignment

    Aligns text content inside the card.

    **Available options:** Start, Center

    ### Collection title style

    Controls how the collection title is displayed.

    **Available options:** Single Text, Text with arrow icon

    <Note>
      The **Text with arrow icon** option is only available for **Normal** card style.
    </Note>

    ### Collection product count

    Displays the number of products in the collection.

    **Available options:** Hide, Show, Show with border

    <Note>
      Product count is displayed next to the collection heading.
    </Note>

    <img src="https://mintcdn.com/digifist/j7jhcMbQQeX1DfIN/images/theme/release/sections/featured-collections/card-settings.png?fit=max&auto=format&n=j7jhcMbQQeX1DfIN&q=85&s=acf7860912d5399817c8995d0e57ff6b" alt="Collection card configuration settings" width="3280" height="2186" data-path="images/theme/release/sections/featured-collections/card-settings.png" />
  </Tab>

  <Tab title="Slideshow settings">
    Controls carousel behavior when collections are displayed in a slider.

    ### Slides per view

    Number of visible slides on desktop.

    **Range:** 1 – 12

    Used only for **Normal** card layout.

    ### Slides per view for mobile

    Number of visible slides on mobile devices.

    **Range:** 1 – 4

    Used only for **Normal** card layout.

    ### Show carousel arrows

    Displays navigation arrows.

    **Options:** True / False

    ### Slideshow center alignment

    Centers the active slide within the carousel.

    **Options:** True / False

    ### Enable slideshow overflow

    Allows slides to overflow outside the container.

    **Options:** True / False

    <Tip>
      When enabled, partially visible cards appear outside the carousel area.
    </Tip>

    ### Slideshow border

    Adds decorative borders to the slideshow.

    **Available options:** None, Top, Bottom, Both

    <img src="https://mintcdn.com/digifist/88_eeoffSR-rUo_7/images/theme/release/sections/featured-collections/slideshow-settings.png?fit=max&auto=format&n=88_eeoffSR-rUo_7&q=85&s=2d2586e2fbf4631042f1cd830478f39e" alt="Slideshow configuration options" width="3280" height="2186" data-path="images/theme/release/sections/featured-collections/slideshow-settings.png" />
  </Tab>
</Tabs>

## Block settings

Block settings control individual collection slides. Each block represents a single collection card.

<Tabs>
  <Tab title="Collection">
    ### Collection

    Select a collection using Shopify's collection selector.

    <img src="https://mintcdn.com/digifist/88_eeoffSR-rUo_7/images/theme/release/sections/featured-collections/collection-selection.png?fit=max&auto=format&n=88_eeoffSR-rUo_7&q=85&s=491b6e510f21c01d7db991c49360e1f9" alt="Collection selection in block settings" width="3280" height="2186" data-path="images/theme/release/sections/featured-collections/collection-selection.png" />
  </Tab>

  <Tab title="Image & content">
    ### Image

    Custom image for the collection card.

    <Note>
      This image will overwrite the default collection image.
    </Note>

    ### Heading

    Collection title text.

    * Can be connected to a dynamic source to automatically use the collection title
    * Supports bold, italic, underline, and links

    ### Heading size

    Controls the size of the collection title.

    **Available options:** XS, S, M, L

    ### Subheading

    Additional descriptive text for the collection.

    * Supports bold, italic, underline, and links
  </Tab>
</Tabs>

## Best practices

* Use **Normal card style** for image-heavy collections to showcase visual content
* Use **Compact style** for dense layouts with multiple collections to maximize space
* Keep aspect ratios consistent when using Auto to maintain visual harmony
* Limit slide count to 6-8 for better mobile usability and faster loading
* Enable overflow for a modern, editorial look that hints at more content
* Use consistent collection images across all cards for professional appearance
* Consider card layout based on content type (Collection for images, Product for actual products, Text for category navigation)
* Test slideshow navigation on mobile devices to ensure smooth interaction

## Related guides

<Card title="Common Settings" icon="sliders" href="/themes/release/common-settings">
  Learn about common settings shared across sections
</Card>
