Collection List Page Setup Guide

The Collection List Page is the page visitors see when they navigate to yourstore.com/collections — it displays all active collections in your store (e.g., product categories, seasonal lines) in a card-based list. It’s a key navigational page that helps users browse your store’s product groups quickly.

Core Page Settings

These settings control the page’s header, banner, and basic layout:

Heading

Sets the main title of the Collection List Page (displayed at the top of the page).

• Default: Collections (clear, direct label for the page’s purpose).
• Customize if needed (e.g., Shop Our Categories or Product Lines).
• Keep it short (2-3 words) for scannable clarity.

Font Size

Slider (default: 100%) that adjusts the size of the page’s Heading text.

• Adjust between 80% (subtle) and 120% (prominent) to match your store’s page hierarchy.
• Avoid sizes over 120% — oversized headings can crowd the top banner.

Collection Banner Image

Uploads a background image for the page’s top banner (displays behind the Heading).

• Click the image preview to upload a high-quality PNG/JPG (recommended ratio: 16:9 for wide, responsive banners).
• Use a visual that aligns with your brand (e.g., a lifestyle shot of your products) — this makes the page feel cohesive.

Banner Padding (Top/Bottom)

Adjusts the internal spacing (in rem) above and below the banner’s Heading text.

• Default: 1 rem (balanced spacing for most banner designs).
• Increase to 1.5-2 rem for larger banners; decrease to 0.5 rem for compact layouts.

Use Text Protection Layer

Adds a semi-transparent overlay to the banner image to ensure the Heading text is readable (critical if your banner image has busy visuals).

• Disabled (default): No overlay — text may blend into bright/busy images.
• Enabled: Activates the Text protection layer slider (below) to adjust brightness.

Text Protection Layer

Adjusts the banner overlay’s brightness (only active if Use text protection layer is enabled):

• 0 (default): Darkens the image (best for light-colored text on bright backgrounds).
• Slide right to lighten the image (best for dark-colored text on dark backgrounds).

Sort collections by

Controls the order in which your store’s collections are displayed on the page.

• Default: Alphabetically, A-Z (simple, consistent sorting).
• Other common options (if available): Date created (newest first), Best selling, or Manual (drag-and-drop to reorder).
• Use Manual sorting to prioritize high-conversion collections (e.g., New Arrivals, Sale) at the top.

Theme Settings (Collection List Page)

These settings control the styling of the collection cards and banner:

Border Style

Adds a border to all media elements (banner, collection cards) on the page.

• No border (default): Clean, minimal look (blends with the page background).
• Border: Adds a subtle outline to separate elements (use if the page feels visually dense).

Collection Banner Height

Sets the fixed height (in pixels) of the page’s top banner.

• Default: 300 px (balanced height for most desktop/mobile screens).
• Increase to 400 px for more prominent banners; decrease to 200 px for compact layouts.

Collections per row

Controls how many collection cards are displayed in a single row (desktop only — mobile auto-stacks to 1 card per row).

• Default: 4 (compact, fits more collections per view).
• Adjust to 2-3 for larger collection cards (ideal if your collection images have detailed visuals).

Image ratio

Sets the aspect ratio for all collection cards’ images (ensures consistent sizing across the list).

• Default: Square (uniform, clean look for most collection images).
• Other options: 16:9 (landscape) for lifestyle shots, 3:4 (vertical) for product-focused images.
• Match the ratio to your collection images’ native dimensions to avoid awkward cropping.

Global border radius

Changes the corner shape of collection cards, buttons, and images on the page.

• Default: Square (sharp corners).
• Options: Rounded (soft corners) or Pill (rounded edges) — align with your brand’s visual style.

Best Practices

• Keep collections active: Only display active collections (hide empty/inactive ones in Products → Collections) — empty cards confuse visitors.
• Prioritize key collections: Use Manual sorting to put high-traffic collections (e.g., Sale, New Arrivals) at the top of the list.
• Use consistent card images: Upload collection images with the same ratio/style (e.g., all product shots or all lifestyle imagery) for a cohesive look.
• Test mobile layout: Ensure collection cards stack neatly on mobile (no tiny images or unreadable text).
• Limit collection count: If you have 10+ collections, consider grouping them (e.g., "Apparel" → sub-collections for Tops/Bottoms) to avoid overwhelming visitors.