Collection List Section

The collection list section displays a grid or carousel of collection cards, allowing you to showcase multiple collections on any page. Each collection card shows the collection image, title, description, and product count.

Overview

This section creates a flexible display of collections that can be configured as either a static grid or an interactive carousel. You can add specific collections using blocks, or display all collections automatically. Each collection is displayed as a card with its image, title, and optional description.

Where to Use

  • Homepage: Showcase your main collections
  • Collection pages: Display related or featured collections
  • Landing pages: Create collection-focused landing pages
  • Any page: When you want to showcase multiple collections

Note: The collection list section cannot be used in header or footer groups.

Layout Structure

The section displays collections in a grid or carousel layout:

┌─────────────────────────────────────────┐
│  Heading                    [View All]  │
│  ┌────────┬────────┬────────┐          │
│  │ Coll 1 │ Coll 2 │ Coll 3 │          │
│  │ Image  │ Image  │ Image  │          │
│  │ Title  │ Title  │ Title  │          │
│  │ Desc   │ Desc   │ Desc   │          │
│  └────────┴────────┴────────┘          │
│         (or carousel with arrows)       │
└─────────────────────────────────────────┘

Blocks

Collection Block

What it does: Displays a specific collection in the list

Settings:

  • Collection: Select a collection to display

How it works:

  • Add multiple collection blocks to show specific collections
  • Collections are displayed in the order you add the blocks
  • You can reorder blocks by dragging them
  • If no blocks are added, the section shows all collections (limited by "Collections to show" setting)

Tips:

  • Add collections in the order you want them displayed
  • Select your most important or best-performing collections
  • Consider your collection images - they should be high quality

Limit: No limit - add as many collection blocks as needed

Settings

Padding

Top Padding

  • Space above the section
  • Range: 0-100px
  • Default: 40px
  • Tip: Creates breathing room from previous section

Bottom Padding

  • Space below the section
  • Range: 0-100px
  • Default: 40px
  • Tip: Creates breathing room before next section

Border

Show Border Top

  • Adds a line above the section
  • Default: Disabled
  • Tip: Use to separate sections visually

Show Border Bottom

  • Adds a line below the section
  • Default: Disabled
  • Tip: Use to separate sections visually

Layout

Full Width Section

  • When enabled, the background extends full width while content stays constrained to page width
  • Default: Disabled
  • Tip: Use for a more immersive look with colored backgrounds

Background

Section Background Color

  • Sets the background color of the section
  • Default: White (#ffffff)
  • Tip: Use to create visual separation between sections

Section Text Color

  • Sets the text color for the section
  • Default: Black (#000000)
  • Tip: Ensure good contrast with background color

Section Header

Heading

  • Main heading for the collection list
  • Default: "Shop by Collection"
  • Tip: Use a clear, descriptive heading

Heading Size

  • Controls the size of the heading
  • Options: Extra Small, Small, Medium, Large, Extra Large
  • Default: Extra Large
  • Tip:
    • Extra Small/Small: Subtle headings
    • Medium/Large: Standard headings (recommended)
    • Extra Large: Bold, attention-grabbing headings

Show 'View All' Button

  • Displays a button to view all collections
  • Default: Disabled
  • Tip: Enable to give customers easy access to all collections

View All Button Text

  • Text displayed on the "View All" button
  • Default: "View all"
  • Info: Button always links to the all collections page (/collections)
  • Tip: Use action-oriented text like "Browse All Collections" or "See More"

Collection Grid

Columns on Desktop

  • Number of collection columns on screens 1024px and wider
  • Range: 1-6 columns
  • Default: 3 columns
  • Tip:
    • 3-4 columns: Standard layout (recommended)
    • 5-6 columns: Compact layout for many collections
    • 1-2 columns: Large, prominent display

Columns on Tablet

  • Number of collection columns on screens 768px to 1023px
  • Range: 1-4 columns
  • Default: 2 columns
  • Tip: 2 columns usually works best for tablets

Columns on Mobile

  • Number of collection columns on screens less than 768px
  • Options: 1 column, 2 columns
  • Default: 1 column
  • Tip:
    • 1 column: Larger cards, easier to tap
    • 2 columns: More collections visible, compact display

Gap Between Items

  • Space between collection cards
  • Range: 0-60px
  • Default: 20px
  • Tip:
    • 0-12px: Tight spacing, more collections visible
    • 16-24px: Balanced spacing (recommended)
    • 28px+: More spacious, modern look

Collections to Show (When No Blocks)

  • Number of collections to display when no collection blocks are added
  • Range: 3-24 collections
  • Step: 3 (3, 6, 9, 12, etc.)
  • Default: 12 collections
  • Info: Only applies when no collection blocks are added
  • Tip: Shows all available collections up to this limit

Carousel Settings

Enable Carousel Mode

  • Display collections in a carousel slider instead of a static grid
  • Default: Disabled (shows as grid)
  • Tip: Enable for interactive browsing or when space is limited
  • Best for: Featured collections, promotional displays

Show Pagination Dots

  • Displays dots at the bottom indicating current slide
  • Default: Enabled
  • Tip: Helps users see how many slides there are
  • When to disable: For cleaner look, use arrows only

Show Navigation Arrows

  • Displays left/right arrows to navigate the carousel
  • Default: Enabled
  • Tip: Essential for carousel navigation
  • Best practice: Keep enabled with pagination dots

Enable Autoplay

  • Automatically advances to the next slide
  • Default: Disabled
  • Tip: Use for eye-catching displays, but allow users to pause
  • Best for: Featured collections, promotional content

Autoplay Speed

  • Time between slide transitions when autoplay is enabled
  • Range: 2-10 seconds
  • Default: 5 seconds
  • Tip:
    • 3-5 seconds: Good for collections with minimal text
    • 5-7 seconds: Better for collections with descriptions
    • Too fast (< 3s): Hard to read
    • Too slow (> 8s): Customers might lose interest

Enable Loop

  • Continuous loop mode - returns to first slide after last
  • Default: Enabled
  • Tip: Creates seamless browsing experience
  • Best practice: Keep enabled for better UX

Collection Cards

Show Collection Description

  • Displays the collection description on each card
  • Default: Enabled
  • Tip:
    • Enable: Provides context about the collection
    • Disable: Cleaner, more minimalist look
  • Note: Description is truncated for display

Animations

Enable Scroll Animations

  • Enables fade-in animations when scrolling into view
  • Default: Enabled
  • Info: Override global animation settings. Leave unchecked to use global settings.
  • Tip: Creates engaging, modern feel

How It Works

With Collection Blocks

  1. Add Collection Blocks: Click "Add block" and select "Collection"
  2. Select Collections: Choose specific collections to display
  3. Display: Collections appear in the order you added blocks
  4. Grid or Carousel: Choose display mode in settings

Best for: Curated collections, featured collections, specific showcase

Without Collection Blocks

  1. Automatic Display: Shows all available collections
  2. Limit: Limited by "Collections to show" setting (default: 12)
  3. Order: Collections appear in default Shopify order
  4. Grid or Carousel: Choose display mode in settings

Best for: Showing all collections, complete store catalog

Grid Mode

  • Collections displayed in a responsive grid
  • Columns adjust based on screen size
  • Static layout - all collections visible (or scrollable)
  • Best for: Browsing all collections, comparison shopping

Carousel Mode

  • Collections displayed in a sliding carousel
  • Navigate with arrows or pagination dots
  • Optional autoplay
  • Best for: Featured collections, promotional displays, space-saving layouts

Collection Cards Display

Each collection card shows:

  • Collection Image: Featured image or first product image
  • Collection Title: Collection name
  • Product Count: Number of products in collection (badge)
  • Description: Collection description (if enabled)
  • Clickable: Entire card links to collection page

Note: Collection card styling is controlled by global theme settings, not section settings.

Common Use Cases

Homepage Featured Collections

  • Blocks: Add 4-6 collection blocks
  • Layout: 3 columns desktop, 2 tablet, 1 mobile
  • Mode: Grid
  • View All: Enabled
  • Use when: Showcasing main collections on homepage

Collections Carousel

  • Blocks: Add 6-8 collection blocks
  • Layout: 3 columns desktop (carousel mode)
  • Mode: Carousel with autoplay
  • Use when: Creating an engaging, interactive display

All Collections Page

  • Blocks: None (show all collections)
  • Collections to Show: 12-24
  • Layout: 3-4 columns desktop
  • Mode: Grid
  • Use when: Creating a complete collections catalog

Mobile-Optimized Collection List

  • Layout: 2 columns mobile, 2 tablet, 3 desktop
  • Gap: 16px
  • Mode: Grid
  • Use when: Optimizing for mobile shopping experience

Tips & Best Practices

✅ Do's

  • Choose great images: Collection images should be high quality and representative
  • Add descriptions: Help customers understand what's in each collection
  • Test responsiveness: Preview on mobile, tablet, and desktop
  • Use blocks for curation: Select specific collections for featured displays
  • Enable view all: Give customers easy access to all collections
  • Consider carousel mode: Use for featured collections or space-saving layouts
  • Match column count to content: 3-4 columns work well for most stores
  • Use appropriate gaps: Balance spacing between collections

❌ Don'ts

  • Don't add too many blocks: 6-12 collections is usually enough for homepage
  • Don't use low-quality images: Collection images are the first impression
  • Don't forget mobile: Always test how it looks on phones
  • Don't overcrowd: Too many columns can make cards too small
  • Don't use carousel unnecessarily: Grid mode is often better for browsing
  • Don't skip descriptions: They help customers understand collections

Grid Layout Tips

Desktop Columns

  • 1-2 columns: Large, prominent display (best for featured collections)
  • 3-4 columns: Standard layout (recommended for most stores)
  • 5-6 columns: Compact layout (only if you have many small collections)

Tablet Columns

  • 1 column: Large, easy to browse
  • 2 columns: Standard tablet layout (recommended)
  • 3-4 columns: Compact, more collections visible

Mobile Columns

  • 1 column: Larger cards, easier to tap (recommended)
  • 2 columns: More collections visible, compact display

Gap Recommendations

  • 0-12px: Tight spacing, maximum content visible
  • 16-24px: Balanced spacing (recommended)
  • 28-40px: Spacious, modern look
  • 40px+: Very spacious, premium feel

Carousel vs Grid

Use Grid When:

  • ✅ You want all collections visible at once
  • ✅ Customers need to compare collections
  • ✅ You have fewer than 9 collections to show
  • ✅ You want a traditional, browsing experience
  • ✅ Space is not a constraint

Use Carousel When:

  • ✅ You want an interactive, engaging display
  • ✅ Space is limited
  • ✅ You're featuring specific collections
  • ✅ You want to create visual interest
  • ✅ You have many collections and want to save space

Collection Selection Strategy

Curated Collections (Using Blocks)

Best for:

  • Homepage featured collections
  • Seasonal collections
  • New arrivals
  • Best sellers

How to do it:

  1. Add collection blocks
  2. Select your best collections
  3. Order them by importance
  4. Update regularly

All Collections (No Blocks)

Best for:

  • Complete catalog display
  • Collections page
  • Store-wide showcases

How to do it:

  1. Don't add any blocks
  2. Set "Collections to show" to desired number
  3. Let section display all available collections

Examples

Example 1: Homepage Featured Collections

  • Heading: "Shop by Category"
  • Blocks: 6 collection blocks (selected collections)
  • Layout: 3 columns desktop, 2 tablet, 1 mobile
  • Gap: 24px
  • Mode: Grid
  • View All: Enabled
  • Show Description: Enabled
  • Result: Clean, organized display of main collections

Example 2: Collections Carousel

  • Heading: "Featured Collections"
  • Blocks: 8 collection blocks
  • Layout: 3 columns desktop
  • Mode: Carousel
  • Autoplay: Enabled (5 seconds)
  • Pagination: Enabled
  • Arrows: Enabled
  • Loop: Enabled
  • Result: Interactive, engaging carousel display

Example 3: All Collections Grid

  • Heading: "All Collections"
  • Blocks: None
  • Collections to Show: 12
  • Layout: 4 columns desktop, 3 tablet, 2 mobile
  • Gap: 20px
  • Mode: Grid
  • View All: Disabled (showing all)
  • Result: Complete collection catalog

Example 4: Mobile-Optimized

  • Heading: "Shop by Collection"
  • Blocks: 4 collection blocks
  • Layout: 2 columns mobile, 2 tablet, 3 desktop
  • Gap: 16px
  • Mode: Grid
  • Show Description: Disabled (cleaner mobile look)
  • Result: Mobile-friendly collection display

Troubleshooting

Collections Not Showing

  • Check: Make sure collections are published and available
  • Check: If using blocks, ensure collection blocks are added and collections selected
  • Check: If not using blocks, ensure you have collections in your store
  • Check: Verify "Collections to show" setting is appropriate

Carousel Not Working

  • Check: Enable "Enable carousel mode" in settings
  • Check: Ensure Swiper library is loaded (should be automatic)
  • Check: Verify JavaScript is enabled in browser
  • Check: Check browser console for errors

Collections Not in Order

  • Check: When using blocks, order is determined by block order
  • Check: Drag and drop blocks to reorder collections
  • Check: Without blocks, collections use Shopify default order

Images Not Displaying

  • Check: Ensure collections have featured images
  • Check: Collections without images will show placeholder
  • Check: Verify images are uploaded correctly in Shopify admin

Grid Layout Issues

  • Check: Verify column settings for desktop/tablet/mobile
  • Check: Test on different screen sizes
  • Check: Adjust gap if collections appear too close or far apart

Description Not Showing

  • Check: Enable "Show collection description" setting
  • Check: Ensure collections have descriptions in Shopify admin
  • Check: Descriptions may be truncated for display

View All Button Not Working

  • Check: Enable "Show 'View All' button" setting
  • Check: Button links to /collections (all collections page)
  • Check: Ensure button text is set

Related Sections

  • Collections Grid - Advanced collections grid with custom row layouts
  • Collections Tab - Tabbed collections display with product carousels
  • Featured Collection - Showcase a single featured collection
  • Collection - Full collection page section

Next Steps: