Collection List Section

Showcase multiple collections with images and links.

Adding the Section

1. Open the theme editor
2. Click Add section
3. Select Collection List

Adding Collections

Creating Collection Blocks

1. Click Add block
2. Select Collection
3. Choose a collection from the dropdown

Repeat to add multiple collections.

Collection Information Displayed

Each collection shows:

• Collection image
• Collection title
• Optional product count

Layout Options

Desktop Columns

Choose 2-5 columns:

| Columns | Best For | |---------|----------| | 2 | Large, impactful images | | 3 | Balanced layout (default) | | 4 | More collections visible | | 5 | Compact display |

Mobile Columns

• 1 column - Full-width collection images
• 2 columns - Side-by-side on mobile

Image Options

Image Ratio

Control collection image proportions:

| Ratio | Best For | |-------|----------| | Adapt | Uses original image ratio | | 1:1 | Square, consistent grid | | 3:4 | Portrait (default for fashion) | | 4:5 | Tall portrait | | 3:2 | Landscape |

Collection Image Source

Collections use their featured image. Set this in: Products > Collections > [Collection] > Collection image

If no image is set, a placeholder or first product image may display.

Header Content

Subheading

Introductory text, e.g., "Browse by Category"

Heading

Section title, e.g., "Shop Collections"

Header Alignment

Left or Center aligned.

Show Product Count

Toggle to display how many products are in each collection.

Example: "Summer Dresses (24)"

Color Scheme

Apply styling for:

• Background color
• Title text color
• Card styling

Best Practices

Image Quality

• Use high-resolution images (1200px+ width)
• Consistent style across all collections
• Lifestyle images work better than product grids

Collection Selection

• Feature main category collections
• Highlight seasonal collections
• Include popular collections

Image Composition

• Ensure collection title is readable over image
• Consider where text overlay appears
• Test with different background colors

Use Cases

Homepage Navigation

Help customers find product categories quickly.

Footer Alternative

Visual way to showcase main collections.

Category Landing

On category pages, show subcollections.

Creating Collection Images

For best results:

1. Go to Products > Collections
2. Select a collection
3. Add a Collection image in the right sidebar
4. Use 1200x1600px images for portrait ratio
5. Ensure important content isn't cropped at edges

Ordering Collections

Collections appear in the order you add them as blocks. Drag blocks to reorder in the editor.

Mobile Experience

• Columns stack appropriately
• Touch-friendly card sizing
• Images scale properly
• Titles remain readable