Skip to main content

​
What It Does

The Collections List section displays on your /collections page (Collections List template), showing an organized grid of all your store’s collections or a curated selection. Each collection displays as a card with image, title, and product count, allowing customers to browse your catalog by category. Configure page title, choose to show all collections or hand-picked selections, set pagination, and customize collection cards with overrides for specific images or titles.
This is a template section (appears on /collections page only - Collections List template). Not available as a regular section on other pages. Configure in Theme Customizer → Collections List page template.

​
Getting Started

1

Access Collections List Page

Visit yourstore.myshopify.com/collections to see your collections directory. This page auto-generates from Shopify collections.
2

Set Page Title

In Theme Customizer → Collections List template → Set title (default “Collections”). This appears as page heading.
3

Choose Collections to Display

Select “Show all collections” or “Show selected collections”. If selected, add Collection blocks for curated list.
4

Configure Pagination

Set “Collections per page” (default 12). For stores with many collections (50+), pagination improves page load.

​
Settings

Type: Text input
Default: “Collections”
Translatable: Yes (uses locale file default “Collections”)Sets the page heading displayed at top of collections list page.

​
How It Displays

  • Large heading text (H1) at top of page
  • Typically styled as page title (40-60px font size)
  • Appears above collection cards grid

​
Customizing Title

Default “Collections”:
  • Generic, functional, clear
  • Works for most stores
  • Translates automatically in multi-language stores
Custom titles:
  • “Shop by Category” - More descriptive, guides browsing
  • “Explore Collections” - Action-oriented, engaging
  • “Browse Our Catalog” - Formal, traditional
  • “Shop All” - Minimal, direct
  • Brand-specific terms (e.g., “Women’s Categories,” “Product Lines”)

​
Choosing a Title

Use “Collections” when:
  • Standard e-commerce terminology sufficient
  • Customers familiar with “collections” concept
  • Simple, direct language preferred
Use custom title when:
  • Target audience unfamiliar with “collections” (may prefer “Categories”)
  • Brand voice is specific (playful, formal, technical)
  • Want action-oriented language (“Explore,” “Discover”)
  • Multi-brand store (e.g., “Shop Brands” if collections are brands)

​
SEO Considerations

H1 heading:
  • Title becomes H1 heading (most important heading for SEO)
  • Should describe page purpose clearly
  • “Collections” or “Shop by Category” both SEO-friendly
Keywords:
  • Include target keywords if natural (e.g., “Women’s Fashion Collections”)
  • Avoid keyword stuffing (“Cheap Products Collections Sale”)
  • Keep concise (3-5 words ideal)

​
Best Practices

Concise:
  • Keep to 1-4 words (long titles crowd page)
  • “Collections” (1 word) - minimal
  • “Shop by Category” (3 words) - descriptive
  • “Explore Our Fashion Collections” (4 words) - max length
Descriptive:
  • Should communicate page purpose
  • Visitor should know this is collections/category directory
Consistent:
  • Match terminology used elsewhere in site
  • If main nav says “Categories,” use “Categories” here (not “Collections”)
Translatable:
  • If multi-language store, keep default “Collections” (auto-translates via locale files)
  • Or edit translations in theme’s locale files for each language
Recommendation: Use default “Collections” for most stores. Change to “Shop by Category” if customers unfamiliar with collections terminology, or “Explore [Your Brand]” for brand-specific messaging.
Type: Radio select
Options: Show all collections, Show selected collections
Default: Show all collectionsControls whether page displays all store collections automatically or only hand-picked collections via blocks.

​
Show All Collections (Default)

How it works:
  • Automatically displays every collection in your Shopify store
  • Collections pulled from Shopify Admin → Products → Collections
  • Order determined by Shopify settings or theme logic (often alphabetical)
  • No manual collection selection needed
Pros:
  • Zero maintenance—new collections auto-appear
  • Comprehensive—customers see all available categories
  • Fast setup—no need to add collection blocks
Cons:
  • No control over order (automatic sorting)
  • Displays ALL collections (including hidden/test collections if published)
  • Can’t exclude specific collections
Best for:
  • Stores with organized collection structure (all collections customer-facing)
  • 5-30 collections (manageable number for auto-display)
  • Low-maintenance preference (don’t want to manually curate)

​
Show Selected Collections

How it works:
  • Only displays collections added via “Collection” blocks (see Blocks tab)
  • Must manually add Collection block for each collection to show
  • Control exact order by reordering blocks
  • Can display same collection multiple times (if needed for different images/titles)
Pros:
  • Full control over which collections appear
  • Custom order (drag-and-drop blocks to reorder)
  • Exclude collections (e.g., hidden categories, staff-only, test collections)
  • Override collection images/titles per-card
Cons:
  • Manual maintenance—must add new collections as blocks
  • More setup time (especially for stores with many collections)
  • Forgetting to add new collections means customers don’t see them
Best for:
  • Curated experience (only show primary collections)
  • Specific collection order important (e.g., Women → Men → Kids, not alphabetical)
  • Need to hide certain collections (Sale, Staff Picks, etc.)
  • Want custom images/titles different from Shopify Admin defaults

​
Examples

Example 1: Auto-display (Show all)
  • Store has 12 collections, all customer-facing
  • All collections have good featured images, clear titles
  • Order doesn’t matter (alphabetical fine)
  • Setting: “Show all collections” (automatic,zero maintenance)
Example 2: Curated display (Show selected)
  • Store has 20 collections, but 5 are internal/test
  • Want specific order: Best Sellers → New Arrivals → Seasonal → Men → Women → Kids
  • Setting: “Show selected collections”, add 15 Collection blocks in desired order
Example 3: Custom imagery (Show selected)
  • Collections have generic featured images in Admin (created by staff)
  • Want professional branded imagery for collections page
  • Setting: “Show selected collections”, add Collection blocks with custom images

​
Switching Between Options

Moving from All to Selected:
  1. Change setting to “Show selected collections”
  2. Add Collection block for each collection you want to display
  3. Reorder blocks to desired sequence
  4. Optionally add custom images/titles
Moving from Selected to All:
  1. Change setting to “Show all collections”
  2. Collection blocks become inactive (not deleted, just not used)
  3. All collections auto-display

​
Best Practices

Use “Show all” when:
  • All collections are customer-ready (published, good images, clear naming)
  • Collection count is reasonable (5-30)
  • You want hands-off management
Use “Show selected” when:
  • Have hidden/internal collections to exclude
  • Specific order is critical (brand hierarchy, seasonal priority)
  • Need different imagery than Shopify Admin featured images
  • Collection count very large (50+) and want to feature top categories
Hybrid approach:
  • Use “Show all” initially (get site launched quickly)
  • Switch to “Show selected” later when ready to curate experience
Recommendation: Use “Show all collections” (default) for straightforward stores with clean collection structure. Use “Show selected collections” for curated experiences or when collection order matters.
Type: Number input
Default: 12
Info: “Collections will be divided to pages by pagination”Sets how many collection cards display per page before pagination kicks in.

​
How Pagination Works

If you have 50 collections and set “Collections per page” to 12:
  • Page 1: Collections 1-12
  • Page 2: Collections 13-24
  • Page 3: Collections 25-36
  • Page 4: Collections 37-48
  • Page 5: Collections 49-50
  • Pagination links below grid: < 1 2 3 4 5 >
If you have 8 collections and set to 12:
  • All 8 collections display on one page
  • No pagination links (unnecessary)

​
Choosing Collections Per Page

Small number (8-12): ← Default: 12
  • Pro: Fast page load (fewer images)
  • Pro: Less scrolling (easier to browse)
  • Con: More pagination clicks to see all collections
  • Best for: Stores with 20+ collections, slower internet users, mobile-first
Medium number (16-24):
  • Pro: Balance browsing vs loading
  • Pro: 2-3 rows of collections visible without scrolling (desktop)
  • Con: Moderate page load (more images)
  • Best for: Stores with 30-60 collections, desktop-heavy traffic
Large number (30+):
  • Pro: Minimal pagination (maybe 2 pages total)
  • Pro: All or most collections visible on single page
  • Con: Slow page load (many images loading at once)
  • Con: Long scrolling (overwhelming on mobile)
  • Best for: Stores with 30-50 collections max, fast hosting, desktop-only
No pagination (100+):
  • Pro: All collections on one page (no pagination)
  • Con: Very slow load for stores with 50+ collections
  • Risk: Page timeout, poor UX
  • Best for: ONLY stores with <20 collections (pagination unnecessary)

​
Performance Considerations

Image loading:
  • Each collection card loads featured image
  • 12 collections = 12 images loading
  • 50 collections = 50 images loading (can be slow)
Recommendation by collection count:
  • 5-15 collections: 12-24 per page (all fit on 1 page or 2 pages max)
  • 15-30 collections: 12-16 per page (2-3 pages)
  • 30-60 collections: 12 per page (5 pages, manageable)
  • 60+ collections: 12 per page (consider if you need this many customer-facing collections)

​
Mobile Considerations

Mobile scrolling:
  • Mobile displays 1-2 collection cards per row (vs 3-4 on desktop)
  • 12 collections = 6-12 rows of scrolling on mobile
  • 24 collections = 12-24 rows (too much scrolling)
Mobile recommendation:
  • Keep pagination at 12 or less if mobile-heavy audience
  • Customers comfortable with pagination links (“Next” button)

​
SEO Implications

Pagination:
  • Each pagination page has unique URL (e.g., /collections?page=2)
  • Search engines crawl pagination pages
  • Not a negative SEO factor (standard e-commerce pattern)
Load time:
  • Faster page load (fewer collections per page) improves SEO
  • Google favors fast-loading pages
  • Balance UX (fewer clicks) vs speed (fewer images)

​
Best Practices

Test your store:
  1. Count your collections (Shopify Admin → Products → Collections)
  2. Set to 12 (default)
  3. Preview collections page
  4. Check page load speed (Google PageSpeed Insights)
  5. If fast & many collections: Increase to 16 or 24
  6. If slow: Keep at 12 or reduce to 8
Future-proofing:
  • If you have 10 collections now but plan to grow to 50+, set to 12 (room to grow)
  • If you have 8 collections and don’t plan to add many, set to 24 (all on one page now and later)
User experience:
  • Most users comfortable with 2-3 clicks to browse all collections
  • Page 1 should showcase primary/popular collections
  • Avoid forcing users through 10+ pages (set higher pagination if this happens)
Recommendation: Use 12 (default) for most stores. Adjust to 8-10 for mobile-heavy stores or 16-24 for desktop-heavy stores with strong hosting. Never exceed number of total collections (avoid unnecessary pagination).
Type: Select dropdown
Options: Page width (container—default), Narrow (container—md), Full-width (container—fullwidth)
Default: Page width (container—default)Controls the maximum width of the collections grid container.

​
Width Options

Page Width (Default - container—default):
  • Width: ~1200-1400px max (typical theme page width)
  • Best for: Most stores, balanced layout
  • Appearance: Collection grid centered with moderate side margins
  • Cards per row (desktop): 3-4 collection cards
Narrow (container—md):
  • Width: ~900-1000px max (narrower than page width)
  • Best for: Minimal aesthetic, few collections
  • Appearance: Tighter grid, larger margins, more whitespace
  • Cards per row (desktop): 2-3 collection cards
Full-Width (container—fullwidth):
  • Width: Edge-to-edge (100% browser width minus small padding)
  • Best for: Many collections, visual/image-focused brands
  • Appearance: Collections span nearly entire screen width
  • Cards per row (desktop): 4-5+ collection cards (depends on screen size)

​
Choosing Section Width

Page Width when: (Recommended default)
  • Standard e-commerce layout
  • 10-30 collections (3-4 cards per row is comfortable)
  • Balanced, professional appearance
Narrow when:
  • Few collections (5-10) - narrower grid prevents excessive whitespace
  • Minimal brand aesthetic (lots of whitespace, breathing room)
  • Collection images are detailed (larger cards when fewer per row)
  • Mobile-first design (narrow desktop grid closer to mobile experience)
Full-Width when:
  • Many collections (30+) - more cards per row reduces scrolling
  • Image-heavy brand (fashion, photography) - showcase large collection images
  • Modern, gallery-style layout
  • Desktop-heavy traffic (utilize wide screens)

​
Visual Comparison

Narrow (2-3 cards per row):
[  Collection  ] [  Collection  ]
[  Collection  ] [  Collection  ]
Large cards, lots of whitespacePage Width (3-4 cards per row):
[ Collection ] [ Collection ] [ Collection ]
[ Collection ] [ Collection ] [ Collection ]
Balanced, standard gridFull-Width (4-5 cards per row):
[Collection] [Collection] [Collection] [Collection] [Collection]
[Collection] [Collection] [Collection] [Collection] [Collection]
Many cards, edge-to-edge

​
Mobile Behavior

All widths behave similarly on mobile:
  • Mobile typically displays 1-2 collection cards per row
  • Width settings primarily affect desktop/tablet (>768px)
  • Full-width may have slightly less side padding on mobile

​
Best Practices

Consider collection count:
  • Few collections: Narrow (prevents cards stretching too wide)
  • Many collections: Page Width or Full-Width (more cards visible)
Match site aesthetic:
  • Check other pages’ section widths
  • Consistent width across pages feels cohesive
  • If homepage uses page width, collections page should too
Test on large screens:
  • Full-width can look sparse on 27”+ monitors (cards very small)
  • Page Width maintains comfortable card size on large screens
  • Narrow may look awkwardly tight on wide screens (excess whitespace on sides)
Image quality:
  • Full-width requires high-res collection images (cards display larger)
  • Narrow can get away with lower-res images (cards smaller)
Recommendation: Use Page Width (default) for most stores. Switch to Narrow for minimal aesthetic or <10 collections. Use Full-Width for image-focused brands with many collections (30+).

​
Best practices

Show All for Simplicity

Use “Show all collections” (default) for low-maintenance, comprehensive display. Switch to “Show selected” only when curation or custom order required.

12 Collections Per Page

Keep pagination at 12 collections (default) for fast page load and mobile-friendly scrolling. Increase to 16-24 only for desktop-heavy stores.

Strategic Collection Order

If using “Show selected,” order blocks strategically: Best Sellers → New Arrivals → Seasonal → Core categories. First 12 most important (page 1).

Consistent Collection Images

Ensure all collection featured images have same aspect ratio (square recommended). Inconsistent aspect ratios create uneven grid.

Clear Collection Titles

Use concise, customer-friendly titles (under 30 characters). “Women’s Shoes” better than “WOMENS-SHOES-SPRING-2024-CLEARANCE”.

Test on Mobile

Preview collections page on mobile—grid becomes 1-2 cards per row. Ensure images clear, titles readable, pagination easily tappable.

Hide Test Collections

Use “Show selected collections” to exclude internal/test collections. Customers shouldn’t see “Staff Picks” or “DO NOT DELETE” collections.

Page Width for Balance

Use “Page width” section width (default) for balanced layout. Narrow for minimal aesthetic, Full-width for many collections (30+).

​
Common Use Cases

​
Auto-Display All Collections

Settings: Title “Collections”, Show all collections, 12 per page, Page width Setup: Zero-maintenance collections directory. All collections auto-appear, alphabetical order, pagination for stores with 20+ collections. Best for: Standard stores with organized collection structure, 10-40 collections

​
Curated Collections Showcase

Settings: Title “Shop by Category”, Show selected collections, 16 per page, Page width Setup: Hand-picked 15 primary collections in strategic order (exclude internal collections). Custom order: Women → Men → Kids → Accessories. Best for: Stores with many collections but want to highlight primary categories

​
Minimal Collection Grid

Settings: Title “Collections”, Show all collections, 12 per page, Narrow width Setup: Small store with 8 collections, narrow grid creates elegant spacing, all collections fit on one page. Best for: Boutique stores, few collections (<10), minimal aesthetic Settings: Title “Explore”, Show selected collections, 24 per page, Full-width Setup: 30 fashion collections with professional imagery, full-width grid showcases images, 24 per page for comprehensive view. Best for: Fashion brands, image-focused, many collections (30+)

​
Custom Branded Directory

Settings: Title “Shop Our Brands”, Show selected collections, 12 per page, Page width, Image overrides on all blocks Setup: Collections represent brands, upload custom brand logo images (override featured images), display as branded directory. Best for: Multi-brand retailers, collections organized by brand

​
Layout Behavior

​
Desktop Layout

Collection cards grid:
  • Page Width: 3-4 cards per row (1200-1400px container)
  • Narrow: 2-3 cards per row (900-1000px container)
  • Full-Width: 4-5+ cards per row (edge-to-edge)
Card contents:
  • Collection featured image (square or 3:2 ratio typical)
  • Collection title below image
  • Product count (e.g., “24 products”) below title
Pagination:
  • Displays below grid if total collections exceeds “Collections per page” setting
  • Links: < 1 2 3 4 ... 10 >

​
Mobile Layout

Responsive behavior:
  • Mobile (< 768px): 1-2 cards per row (usually 1 on narrow screens, 2 on wide phones)
  • Section width setting minimally affects mobile (cards span nearly full width)
  • Vertical scrolling (pagination links below grid)
Card sizing:
  • Cards larger on mobile (fewer per row = more screen space per card)
  • Images remain clear (not too small)

​
Empty State

If no collections:
  • Page displays title but no cards
  • (Shopify requires at least 1 collection, so empty state rare)
If all collections hidden:
  • “Show selected collections” with no blocks added
  • Page shows title, no cards (add Collection blocks to fix)

​
Technical Notes

​
Collections Source

Shopify Admin collections:
  • Products → Collections → All collections listed here
  • Collections List page pulls from this source
  • Published collections only: Unpublished collections don’t appear (even in “Show all” mode)
Collection visibility:
  • Check collection settings in Admin → Collection → Sales channels
  • Must be published to “Online Store” channel to appear

​
Collection Cards Data

Each card displays:
  • Image: Collection featured image (Admin → Collection → Featured image), or block override
  • Title: Collection title (Admin → Collection → Title), or block override
  • Product count: Auto-calculated (e.g., “15 products”)
  • Link: Clicks go to collection page (/collections/collection-handle)

​
Pagination Logic

URL structure:
  • Page 1: /collections (no query param)
  • Page 2: /collections?page=2
  • Page 3: /collections?page=3
SEO:
  • Pagination query params are SEO-friendly (Google crawls paginated pages)
  • Each page has unique URL, indexed separately

​
Dynamic Collection Count

“Show all collections” mode:
  • If you add new collection in Shopify Admin, it auto-appears on page
  • If you delete collection, it auto-disappears
  • Zero maintenance (dynamic)
“Show selected collections” mode:
  • Must manually add Collection block for new collections
  • Deleted collections show error in block (remove block)
  • Requires maintenance

​
Performance

Image loading:
  • Collection featured images lazy load (below fold cards load as scrolling)
  • First 12 cards load immediately, rest on-demand
  • Shopify CDN auto-optimizes images (WebP format for supported browsers)
Pagination improves performance:
  • 12 collections per page = 12 images loading
  • vs 60 collections on one page = 60 images (much slower)

​
Accessibility

Keyboard navigation:
  • Tab through collection cards (each card focusable link)
  • Enter on card navigates to collection page
  • Pagination links keyboard-accessible
Screen reader:
  • Each card announces: “Collection name, Link, X products”
  • Images have alt text (collection title as alt)
Color contrast:
  • Text overlays on images should have sufficient contrast
  • Theme typically adds semi-transparent overlay to images for readability

​
Troubleshooting

Collections not showing:
  • Check “Collections to show” setting—if “Show selected,” must add Collection blocks
  • Verify collections published: Admin → Collection → Sales channels → Online Store enabled
  • Check collection visibility (some themes have hidden collection feature)
Wrong collections displaying:
  • If “Show all collections” enabled, shows ALL published collections (check Admin for unwanted collections)
  • Switch to “Show selected collections” to exclude specific collections
Collection images missing:
  • Add featured images in Admin: Products → Collections → [Collection] → Featured image
  • If using “Show selected” with image overrides, verify images uploaded in blocks
  • Check browser console for image load errors
Pagination not working:
  • Check “Collections per page” setting—if set higher than total collections, no pagination
  • Example: 8 collections with 12 per page = no pagination (fits on 1 page)
  • Reduce “Collections per page” to see pagination (e.g., set to 4 for 8 collections = 2 pages)
Collection order wrong:
  • “Show all collections” orders alphabetically or by Shopify sort (no custom order)
  • Use “Show selected collections” for custom order (drag-and-drop blocks)
Custom images not applying:
  • Verify “Show selected collections” enabled (image overrides only work in blocks)
  • Check image uploaded in Collection block (not just in Admin)
  • Hard refresh browser (Cmd/Ctrl+Shift+R) to clear cache
Custom titles not applying:
  • Same as images—only works in “Show selected collections” mode with blocks
  • Verify title entered in block’s “Title” field
  • Check for trailing spaces (extra spaces may cause issues)
Page load slow:
  • Too many collections per page (reduce “Collections per page” to 12)
  • Collection images too large (compress images to under 300KB before upload in Admin)
  • Check Shopify status (hosting issues rare but possible)
Mobile grid looks broken:
  • Test on actual mobile device (not just browser resize—may render differently)
  • Check collection image aspect ratios (all should be consistent)
  • Clear mobile browser cache
Collections page blank:
  • Verify in Theme Customizer → Templates → Collections List that section is enabled
  • Check if section accidentally deleted (re-add from section library)
  • Preview specific collection URL (not /collections) to verify collections exist
Product count incorrect:
  • Product count auto-calculated by Shopify (# of published products in collection)
  • If wrong, check collection products in Admin (may have unpublished products)
  • Count only includes products published to Online Store channel
Blocks not reordering:
  • Drag-and-drop by clicking block name/handle (not settings area)
  • Ensure “Show selected collections” enabled (blocks inactive otherwise)
  • Save changes, hard refresh browser to see new order