TemplateCollection List

Collection List

The Collection List section allows you to display all or selected collections from your Shopify store in a clean, structured layout.

It’s ideal for:

  • Store homepages
  • Category navigation
  • Landing pages
  • Large catalogs

This section helps customers quickly explore your product categories while maintaining a premium visual experience.


🎨 Color Scheme

Choose a color scheme to style the entire Collection List section and match your store branding.


🧾 Header Settings

Control the section heading and introduction.

➤ Heading

Main title for your collection list.

➤ Subheading

Optional supporting text below the heading.

➤ Header Alignment

Align header content:

  • Left
  • Center
  • Right

🧩 Layout Settings

➤ Layout Type

Choose how collections are displayed:

  • Grid — classic multi-column layout
  • Slider — horizontal scroll layout

➤ Items per Row

Control the number of columns:

  • Desktop
  • Tablet
  • Mobile

Each device can be configured independently for better responsiveness.


🖼️ Collection Card Settings

Customize how each collection card appears.

➤ Card Color Scheme

Apply a different color scheme to the cards if needed.

➤ Image Shape

Control card and image radius:

  • Sharp (0 radius)
  • Card Radius (inherits theme card radius)
  • Round (circular collections)

➤ Image Ratio

Adjust image height using a ratio scale:

  • From 40% to 150% (0.4 → 2.5)

➤ Text Alignment

Align text inside the card:

  • Left
  • Center
  • Right

➤ Vertical Content Position

Used when text overlays the image:

  • Top
  • Center
  • Bottom

➤ Overlay Display

Choose whether text appears:

  • On image (overlay)
  • Below image

➤ Overlay Opacity

Control overlay darkness:

  • 0% → 90%

🏷️ Card Content Options

Enable or disable elements inside the card:

  • Show Title
  • Show Product Count
  • Show Description

➤ Image Hover Zoom

Adds a subtle zoom effect when hovering over cards.


🔘 View All Button

➤ Show View All Button

Displays a button linking to the collection page.

Useful for:

  • Large catalogs
  • SEO-friendly navigation
  • Better user flow

📐 Section Padding

Adjust spacing around the section:

  • Top padding
  • Bottom padding

➤ Collection Block

Collection

Select the collection you want to display in the Collection List.


Subheading

Add a short subheading above the collection title.

Useful for:

  • Category context
  • Marketing labels (e.g. New, Best Sellers)
  • SEO-friendly supporting text

Image Position

Control which part of the collection image is visible inside the card.

Available positions:

  • Top Left
  • Top Center
  • Top Right
  • Center Left
  • Center
  • Center Right
  • Bottom Left
  • Bottom Center
  • Bottom Right

This is especially useful when working with lifestyle images or cropped visuals.


Button Label

Set the call-to-action text displayed inside the collection card.

the button links to the selected collection.


Button Type

Choose the visual style of the button:

  • Primary
  • Secondary
  • Outline

This allows the collection cards to stay consistent with your overall premium Shopify theme design system.


🚀 Why Use Collection List

✔ Improves internal linking
✔ Helps search engines understand store structure
✔ Enhances category discoverability
✔ Ideal for prebuilt Shopify templates and premium themes

The Collection List section is a powerful way to organize content while keeping your store fast, clean, and conversion-focused.

Last updated on
;