Product cards

Overview

Product cards theme settings define the overall look and functionality of product cards displayed throughout your storefront. These options allow you to establish a consistent visual baseline, streamline the shopping experience, and ensure brand alignment. While section or block-level overrides are supported, these settings provide the foundation that shapes every product card for your customers.

⚠️ Important: Adjusting Product cards settings establishes a cohesive visual language for product displays, making it easy to deliver a unified and memorable experience from one place.

Key components and functionality

Layout and card style

This group sets the fundamental appearance for each product card, from structure and image usage to card spacing and text positioning. Your choices here directly affect the way shoppers browse and interact with all product cards across your store.

1. Image aspect ratio (desktop)
   Set the visual ratio of product images for shoppers on desktop screens.

   1. Default

   2. Landscape

   3. Portrait

   4. Square (default)

   5. Ultrawide

   6. Widescreen

2. Image aspect ratio (mobile)
   Tailor product image proportions for mobile screens to ensure a seamless mobile shopping experience.

   1. Default

   2. Landscape

   3. Portrait

   4. Square (default)

   5. Widescreen

   6. Ultrawide

3. Image gallery style
   Decide how images are presented—choose between showing a single image or enabling an interactive slideshow gallery.

   1. Single image (default)

   2. Slideshow

Call-to-action and auxiliary information

These settings manage how interactive buttons and extra details are presented, making each product card not just informative but also actionable and engaging.

1. Show price
   Opt to show product pricing directly on each card.
   Default: enabled

2. Show quick view button
   Enable a quick view button for effortless purchasing.
   Default: enabled

3. Show variant selector
   Allow variant selection from the card, making it easier to view available options at a glance.
   Default: disabled

4. Collection badges
   Add custom badges such as "sale" or "featured" to your product cards for better navigation and discovery.

Hover settings

Hover settings enhance interactivity by letting you present alternate product images or content when users mouse over product cards. This is a powerful way to encourage exploration and increase engagement.

Configure card reactions so customers can preview alternate images or important details, making browsing more dynamic and informative.

1. Hover media
   Set which image appears when hovering over a card for a richer browsing experience.

   1. None (default)

   2. Last item

   3. Second item

   4. Second to last item

   5. Use metafield

2. Hover media metafield
   If you select "use metafield," specify the metafield handle to pull images for hover effects. This enables advanced control for unique product media needs.

Slideshow (gallery) settings

When your image gallery style is set to slideshow, these options control the operation and behavior of your gallery for optimal user engagement, animation, and navigation.

Use these settings to give your gallery a polished and interactive feel, while adjusting speed and presentation for accessibility and performance.

1. Animation style
   Decide how images transition within the slideshow for a smooth browsing experience.

   1. Default (default)

   2. Fade

2. Autoplay delay
   Set how many seconds each slide is displayed when autoplay is enabled (range: 0–10s).
   Default: 4

3. Animation speed
   Adjust the pace of slide animations (range: 0.1–5s).
   Default: 0.8

4. Autoplay
   Enable or disable automatic cycling through images.
   Default: disabled

5. Show navigation
   Display arrows for manual slide navigation within the gallery.
   Default: enabled

Usage notes

Preview all settings on desktop and mobile to achieve optimal results and consistency. Use device-specific controls for image ratios and swatch columns to fine-tune displays for every shopper.

Enable high-contrast swatch borders to support accessibility and clear selection states. Adjust slideshow and hover settings for a fast, uncluttered experience.

When using metafields for hover images, make sure products are configured consistently to prevent missing or broken visuals.

Regularly review settings to keep your storefront clean, cohesive, and audience friendly.

💡 Tip: Test the complete flow of card layouts, and interactive features in your storefront preview before publishing—especially to confirm accessibility and responsive behavior.

🚧 Caution: Overusing animations, large galleries, or dozens of swatches per card can impact loading speed and performance, especially on mobile. Focus on essential features for the most effective and user-friendly design.

Resources