---
articleType: Tutorial
breadcrumbPath: Getting started > Design my storefront
categories:
- Store Design
- Products
contextString: Available on all Fourthwall plans. Accessed via the site designer in
  the creator dashboard.
labels:
- storefront-design
- collections
- site-management
last_updated: '2025-08-26'
path: getting-started/design-my-storefront/customize-collection-lists
primaryTopic: customize-collection-list
relatedModules:
- name: collections-list
  route: /admin/dashboard/products/collections/
- name: theme-editor-layout-home
  route: /admin/dashboard/store-design/layout/index
- name: theme-editor-layout-checkout
  route: /admin/dashboard/store-design/layout/checkout
- name: theme-editor-layout-coming-soon
  route: /admin/dashboard/store-design/layout/password
- name: theme-editor-layout-memberships-feed
  route: /admin/dashboard/store-design/layout/memberships_feed
shortDescription: Reorder collections in a Collection list section by dragging them,
  and replace the default cover image (first product image) with a custom image for
  each.
tags:
- storefront design
- collections
- site management
tasks:
- reorder product collections
- set custom collection cover image
- customize collection list appearance
- access site layout editor
terms:
- collection list
- customize collections
- reorder collections
- change collection image
- storefront design
- homepage layout
- shop page
- product groups
- collection order
- site editor
- collection thumbnail
title: Customize collection lists
zendeskArticleId: '40110225572763'
---

# How to Customize Collection Lists

A Collection list section on your Fourthwall site displays multiple product collections in a grid, each with a cover image and title. You can control the order collections appear in, replace the default cover image with a custom one, and adjust the grid appearance settings. If you have NOT yet added a Collection list section to your site, see [How to add a Feature collection or Collection list section to your site](/getting-started/design-my-storefront/add-collection-section) first.

## Accessing the Collection list settings

1. In your Fourthwall dashboard, go to **Site Design** > **Layout**.
2. Use the dropdown at the top to select the page where your Collection list appears — for example, your Homepage or Shop page.
3. Scroll down to the Collection list section in the layout panel and click it to open its settings.
## Changing collection order

The order you see in the Collection list settings panel matches the order displayed to visitors. To reorder:

- Grab the drag handle on any collection entry in the settings panel.
- Drag it up or down to the position you want.
- Release. The preview panel on the right updates immediately.

Click **Save** to apply the new order.
## Changing the collection cover image

By default, the cover image for each collection is the first product image in that collection. You can replace this with any image that better represents the collection's theme, season, or branding.

In the Collection list settings panel:

1. Locate the collection entry you want to update.
2. Drop an image file into the upload area for that entry, or click to browse and select a file.
3. Repeat for any other collections you want to update.
4. Click **Save**.

For consistent visual appearance across the grid, use images with the same aspect ratio for all collection entries. For example, if your first collection uses a 3:4 portrait image, use 3:4 images for all collections. Mixing aspect ratios causes uneven grid cells, which can look unpolished.
## Appearance settings

Within the Collection list settings, you can also configure:

- **Alignment** — Controls horizontal alignment of the grid within the section.
- **Collections per row** — Sets how many collection tiles appear side by side.
- **Image aspect ratio** — Sets the display ratio for all collection cover images in the section.
- **Show collection titles** — Toggle whether the collection name appears below each image.

Click **Save** after any changes.

## Troubleshooting & Common Issues

**Problem:** Collection list is showing an old product image instead of the custom image
**Solution:** Confirm the custom image was uploaded to the correct collection entry and that you clicked Save. If the old image persists, try a hard refresh (Ctrl+Shift+R / Cmd+Shift+R) to bypass the browser cache.

**Problem:** Collection images look different sizes in the grid
**Solution:** Different collection entries have images with different aspect ratios. Upload images with identical aspect ratios across all collections for a uniform grid. The **Image aspect ratio** setting in Appearance controls how images are cropped for display, but mismatched source images can still look inconsistent.

**Problem:** A collection is not appearing in the Collection list section
**Solution:** Collections must be added to the Collection list section manually via the Collections setting in the section editor. Open the section settings and add the collection from the list.