Collection card
Controls the global appearance of collection cards throughout your store, including layout, content, buttons, animation, and colors.
Where to find it
- In your Shopify admin, go to Online Store → Themes → Customize
- Click the Theme settings (gear icon) in the left panel
- Click Collection card
Settings
Card settings
| Setting | Description | Default | Options / Range |
|---|---|---|---|
| Card layout | Choose the overall layout style for collection cards. | Layout one | "Layout one", "Layout two" |
| Card height | Set the aspect ratio of the collection card image. | Portrait | "Square", "Portrait", "Tall" |
| Content place | Choose whether the text content appears inside the image or outside below it. Only visible when using Layout one. | Inside | "Inside", "Outside" |
| Content position | Set where the content sits within the card when using Layout one with content placed inside. Only visible when layout is Layout one and content place is Inside. | Bottom | "Top", "Bottom" |
| Content position | Set where the content sits within the card when using Layout two. Only visible when layout is Layout two. | Center middle | "Top left", "Top center", "Top right", "Center left", "Center middle", "Center right", "Bottom left", "Bottom center", "Bottom right" |
| Backdrop filter | Adjust the backdrop blur effect behind the content area. Only visible when content place is not set to Outside. | 45 px | 0 - 100 px (step 1) |
| Content style | Choose whether the content area has a border radius, a box shadow, both, or none. Only visible when content place is Inside or layout is Layout two. | Only box shadow | "Only border radius", "Only box shadow", "Both", "None" |
| Reveal on hover | When enabled, the card content is hidden until a customer hovers over the card. Only visible when using Layout one. | Off | On / Off |
| Show description | Display the collection description text on the card. | Off | On / Off |
| Show button | Display a button on the collection card. | Off | On / Off |
| Desktop contents alignment | Set the horizontal alignment of the card content on desktop screens. Only visible when using Layout one. | Center | Left, Center, Right |
| Mobile content alignment | Set the horizontal alignment of the card content on mobile screens. Only visible when using Layout one. | Left | Left, Center, Right |
Image loading settings
| Setting | Description | Default | Options / Range |
|---|---|---|---|
| Loading | Control when the collection card image loads. "Lazy" defers loading until the image is near the viewport, which can improve page speed. "Eager" loads the image immediately. | Lazy | "Lazy", "Eager" |
| Fetch priority | Tell the browser how urgently to fetch the image. "Auto" lets the browser decide, "High" prioritizes the image, and "Low" deprioritizes it. | Auto | "Auto", "High", "Low" |
Animation
| Setting | Description | Default | Options / Range |
|---|---|---|---|
| Enable animation | Turn on or off the entrance animation for collection cards. | On | On / Off |
Card content settings
| Setting | Description | Default | Options / Range |
|---|---|---|---|
| Desktop heading size | Adjust the size of the collection title on desktop screens. | 24% | 12% - 120% (step 2) |
| Mobile heading size | Adjust the size of the collection title on mobile screens. | 24% | 12% - 100% (step 1) |
Button settings
All button settings are only visible when "Show button" is enabled.
| Setting | Description | Default | Options / Range |
|---|---|---|---|
| Button label | The text displayed on the collection card button. | (empty) | Free text |
| Button size | Set the size of the button. | M | "2XS", "Extra small", "S", "M", "L", "Extra large", "2XL" |
| Button style | Choose the visual style of the button. | Primary | "Primary", "Secondary", "Text link" |
| Open this link in a new window | When enabled, clicking the button opens the collection page in a new browser tab. | Off | On / Off |
Card color settings
| Setting | Description | Default | Visibility |
|---|---|---|---|
| Heading color (light mode) | Set the collection title color when the store is in light mode. | (none) | Always visible |
| Heading color (dark mode) | Set the collection title color when the store is in dark mode. | (none) | Always visible |
| Text color (light mode) | Set the description text color in light mode. Only visible when "Show description" is enabled. | (none) | Show description is on |
| Text color (dark mode) | Set the description text color in dark mode. Only visible when "Show description" is enabled. | (none) | Show description is on |
| Overlay color | Set the color of the overlay that sits on top of the card image. | #000000 | Always visible |
| Overlay opacity | Control how visible the overlay is. A value of 0 means fully transparent (no overlay), and 100 means fully opaque. | 0% | 0% - 100% (step 1) |
| Card background color | Set the background color of the card area outside the image in light mode. Only visible when content place is set to Outside. | #000000 | Content place is Outside |
| Card background color (dark mode) | Set the background color of the card area outside the image in dark mode. Only visible when content place is set to Outside. | #000000 | Content place is Outside |