Collection List

The Collection List section allows you to display multiple product collections on a single page, aiding customers in navigating through your product offerings efficiently. This section displays a curated list of collections in either a grid or slider layout. It is designed to help users quickly explore key product categories with flexible layout, spacing, and call-to-action options.

You can add up to 12 collection blocks inside this section.

Adding the Collection List Section:

1. Access the Theme Editor:
   • From your Shopify admin, go to Online Store > Themes.

   • Find your active theme and click Customize.

     Add the Collection List Section:

   • In the theme editor sidebar, click Add section.
   • Scroll through the list and select Collection List.
   • Click Add to insert it into your page.

Configuring the Collection List Section:

1. Add Collections:
   • Within the Collection List section, click Add Collection.
   • For each collection, you can:
     • Select Collection: Choose from your existing collections.

     • Custom Image: Upload an image to represent the collection, if different from the default.

       Layout Settings:

   • Number of Columns: Determine how many collections to display per row.
   • Image Aspect Ratio: Set the preferred image dimensions (e.g., square, landscape).
   • Text Alignment: Choose the position of the collection titles (e.g., center, left).

Best Practices:

• Highlight Key Collections: Feature collections that are seasonally relevant or contain best-selling products.
• Consistent Imagery: Use uniform image sizes and styles for a cohesive appearance.

General Settings

Heading

Sets the main title of the section. Use this to introduce the collection group (e.g. Find Your Habit).

Heading Size

Controls the visual size of the heading without affecting SEO.

Subheading Text

Optional rich text displayed below the heading. Use this area for short descriptions or supporting messages.

Text Size

Adjusts the size of the subheading text for better readability.

Button Text

Text displayed inside the call-to-action button.

Button Link

Select or paste the URL the button should link to.

Button Link Target

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

Button Color

Applies a predefined theme button color (e.g. Primary, Secondary).

Button Size

Controls the size of the button:

Small / Medium / Large

Button Style

Choose the button appearance:

• Solid
• Outline
• Text

Show Arrow

Adds an arrow icon to the button for visual emphasis.

Photo Aspect Ratio

Adjusts the aspect ratio of collection images to maintain consistent layout.

Section Width

Defines the width of the section layout:

• Full width
• Full  width padded
• Normal

Layout

Choose how collections are displayed:

• Grid
• Slider

Collections per Row

Sets how many collections appear per row on desktop.

Mobile Layout

Controls how many collections appear per row on mobile devices.

Color Scheme

Applies a predefined color scheme from the theme settings.

Section Padding Top

Controls the spacing above the section.

Section Padding Bottom

Controls the spacing below the section.

Custom CSS

Allows adding custom CSS styles specific to this section only.

Collection (Block)

Each block represents a single collection inside the Collection list section.

Block Settings

• Collection
  • Selects the collection to display.
  • Uses the collection’s image, title, and link by default.

Notes & Behavior

• Up to 12 collection blocks can be added.
• Each block inherits layout and style settings from the parent section.
• Works seamlessly in both Grid and Slider layouts.
• Optimized for responsive behavior across desktop and mobile.
• Ideal for category discovery, navigation hubs, and visual merchandising.