Collection cards

Overview

The Collection cards theme settings provide global control over the look, feel, and layout of collection cards throughout your storefront. These options help maintain consistency across every collection, while still allowing for targeted overrides at more granular levels if needed. Using these settings creates a seamless and professional appearance for your store.

⚠️ Important: Changes in Collection cards will affect all collection cards across the store unless a local override is applied. This supports uniform branding, simpler updates, and a cohesive customer experience.

Key components and functionality

Collection cards overview

These options allow you to control the display, arrangement, and content density of every collection card. Setting defaults for style, imagery, buttons, and text ensures experiences are visually consistent and reinforce your brand identity.

Card image aspect ratio

Select how collection images are cropped on desktop, which affects image shape, grid rhythm, and overall layout consistency.

1. Default

   1. Keeps the native aspect ratio for a natural appearance.

2. Landscape (default)

   1. Crops images to a wide, horizontal orientation.

3. Portrait

   1. Favors a tall, vertical shape for variety.

4. Square

   1. Makes every card image a 1:1 square.

5. Ultrawide

   1. Extra wide crop for panoramic or cinematic effect.

6. Widescreen

   1. Uses a broad ratio common in photography for additional drama.

Card image aspect ratio (mobile)

Set the image aspect ratio specifically for mobile devices. This option optimizes appearance and readability for all screen sizes.

1. Default

   1. Uses the desktop or original image’s aspect ratio.

2. Landscape (default)

   1. Maintains a wide crop suited for scrolling grids.

3. Portrait

   1. Ideal for upright, mobile-friendly layouts.

4. Square

   1. Offers balance for phone grid visuals.

5. Widescreen

   1. Carries over wide crops to mobile screens.

6. Ultrawide

   1. Expansive visuals for immersive mobile experiences.

Card text settings

Fine-tune what text appears, balancing the amount of information your customers see.

1. Title and excerpt (default)

   1. Displays the collection’s name and a short description.

2. Excerpt only

   1. Shows only the brief description.

3. Title only

   1. Presents just the collection’s name.

4. No text

   1. Emphasizes images or buttons by removing all text.

📝 Note: Thoughtful text and image alignment can greatly improve both the look and accessibility of your collection cards, making navigation easier for every customer.

Usage notes

1. Preview collection cards after adjusting any aspect ratio to make sure important visuals are not cut.

2. Try a variety of text and image alignments when changing layout or card style to provide a clean, consistent look across all devices.

⚠️ Important: For the best experience:

1. Always use high-contrast colors for text and backgrounds to maximize readability.

2. Include descriptive alt text for collection images so assistive technologies work properly.

3. Maintain enough padding and whitespace to keep layouts scannable and free of clutter.

Fine-tuning your Collection cards settings lets you deliver a professional, visually appealing, and accessible storefront that puts your brand and customers first.

Resources