Featured Collection

Showcase a specific collection to highlight best-sellers or seasonal products. The Featured Collections section is used to highlight selected collections using flexible content blocks.

The section supports two different block types:

  • Category – Displays a collection with background media, text content, and call-to-action buttons

  • Image with text – Displays custom image or video content paired with descriptive text and buttons

This structure allows you to mix collection-driven content with editorial-style layouts in a single section.




How to Activate

  1. Go to Theme Editor
    • Navigate to Online Store > Themes > Customize.
    • Click Add section and select Featured Collection.
  2. Select a Collection
    • Choose a product collection to feature.
    • Set the number of products displayed.
  3. Customize Layout
    • Adjust grid settings, spacing, and background colors.
  4. Save Your Changes
    • Click Save to apply changes.

Shopify featured collection section
Shopify featured collection section

Best Practices

  • Feature trending or seasonal products.
  • Ensure product images are high quality.
  • Maintain a visually balanced layout.

General settings

Spacing

Top padding

Adds spacing above the Featured Collections section.

Bottom padding

Adds spacing below the Featured Collections section.



Appearance

Color scheme

Applies a color scheme to the entire section.

All text, backgrounds, and buttons inherit from the selected scheme unless overridden at block level.



Header

Header

Main heading displayed above the collection blocks.

Collection header position

Controls the alignment of the section header:

  • Left
  • Center
  • Right


Layout

Show as a slider

Displays collection blocks inside a horizontal slider.

When disabled, blocks are displayed in a grid layout.


Available in both sections:

  • Image with text
  • Category




Image with Text (Block)


General

  • Image First
    • Controls the order of content.
    • First: Media appears before the text.
    • Second: Text appears before the media.


    • Image Border Radius
    • Adjusts the corner roundness of the media container.
    • Set to 0     for sharp edges or increase for softer visuals.

Media Box

  • Choose Media Type
    • Select whether the block uses an Image or a Video.

    • Upload Image
    • Upload a custom image when Image is selected.

    • Used as the main visual for the block.

      Image Aspect Ratio

    • Controls the shape of the image container.
    • Options: 16:9    , 4:3    , 3:2    , 1:1    .


    • Video URL
    • Paste a YouTube or Vimeo link when Video is selected.
    • Automatically embeds the video.


    • Show Media
    • Toggle to show or hide the media entirely.
    • Useful for text-only layouts.


Text Box

  • Collection Subheader
    • Small supporting text displayed above the main heading.

    • Optional.

      Show Subheader

    • Toggles visibility of the subheader.

      Collection Header

    • Main headline for the block.

    • Typically used as the primary message.

      Show Header

    • Toggles visibility of the header.

      Collection Description

    • Rich text field for longer descriptive content.

    • Supports basic formatting (bold, italic, lists, links).

      Show Description

    • Toggles visibility of the description text.


Button

  • Button Link

    • URL the button should link to.

      Button Link Target

    • Choose whether the link opens in the same tab or a new tab.

      Button Text

    • Text displayed inside the button (e.g. “Buy Now”, “Shop Collection”).

      Show Button

    • Toggles the button visibility.

      Choose Button Color

    • Allows overriding the default theme button color for this block.

Background Image

Upload an image to be used as the background of the block. This image will appear behind the text content and scale responsively across devices.


Text Color

Controls the color of the text displayed on top of the background image.

Use this setting to ensure proper contrast and visual consistency with your design.


Choose Text Protection Color

Select the color of the overlay that sits between the background image and the text.

This helps improve text visibility on busy or bright images.


Text Protection

Adjusts the intensity of the text protection overlay.

Higher values apply a stronger overlay, making text more readable on images.

Make your text readable on images.


Usage Notes

  • Designed to work seamlessly inside the Featured Collections section.
  • Media and text are clearly separated for flexible layouts.
  • All text elements can be shown or hidden independently.
  • Color styling follows the section’s color scheme unless explicitly overridden.
  • Suitable for both promotional and editorial-style content.


Category (Block)

This block highlights a specific collection with optional visual overrides and multiple call-to-action buttons. It is ideal for showcasing key categories within the Featured Collections section.



Collection

  • Collection
    • Selects the Shopify collection to be displayed.
    • The collection’s products, title, and URL are used as the base source.

Overrides

These settings allow you to visually customize the selected collection independently from its default data.

  • Background Image
    • Upload a custom image to represent the collection.
    • Overrides the collection’s default image if set.

    • Image Aspect Ratio
    • Controls the aspect ratio of the collection image.
    • Options: 16:9    , 4:3    , 3:2    , 1:1    .

    • Heading
    • Custom title displayed on the collection card.
    • If left empty, the collection’s default title may be used.


Buttons & Actions


  • Button Background Color
    • Sets the background color for collection buttons.

    • Overrides the theme default for this block.

      Button Color

    • Controls the text color of the buttons.

Collection Buttons

This block supports multiple call-to-action buttons, useful for gender-based or segmented navigation.

  • Collection Button Text (First)

    • Label for the first button (e.g. “Shop for Woman”).

      Collection Button Link (First)

    • URL for the first button.

      Button Link Target (First)

    • Choose whether the link opens in the same tab or a new tab.

      Collection Button Text (Second)

    • Label for the second button (e.g. “Shop for Man”).

      Collection Button Link (Second)

    • URL for the second button.

      Button Link Target (Second)

    • Choose whether the link opens in the same tab or a new tab.

      Show Collection Buttons

    • Toggles visibility of all collection buttons.
    • When disabled, the block acts as a visual category card only.

Usage Notes

  • Designed specifically for the Featured Collections section.
  • Supports visual overrides without affecting the original collection data.
  • Multiple buttons allow advanced navigation patterns from a single category.
  • Button colors can be customized per block or inherited from the section color scheme.
  • Works well alongside Image with text blocks for mixed layouts.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.