Image cards 🔥
The Image cards section is a flexible, visual-first layout that helps you feature products, collections, or promotions using stylish, clickable cards.
How to add an Image cards section to your Shopify store
Steps:
In the theme editor (Customize) > click Add section
Select Image cards.
Make necessary changes.
Save.
How to edit an Image cards section
Section settings
Number of columns on desktop: Choose between 2-6 columns on desktop.
Control the Column gap and Row gap.
Enable carousel on desktop: Turn this on to display cards in a horizontal slider format with arrows for navigation.
Enable content overflow: Allows part of the next card to peek into view, giving a swipe-preview effect.
Navigation position: Choose where to show navigation arrows:
Middle(appear on hovering) orBottom.Middle:
Bottom:
Number of columns on mobile: Choose between
1 columnor2 columnsstacked vertically.Enable swipe on mobile: Turn on for a smooth horizontal scroll experience on touch devices.
Show progress bar: Display a progress indicator for carousels to show users how many slides remain.
Number of columns on mobile: Choose 1 or 2 product cards per row.
Enable swipe on mobile: Toggle ON to allow horizontal swiping for a smoother user experience.
Block settings
Each Image card block contains customizable visual and content elements.
Image: Upload or choose an image that best represent the card's message.
Image ratio: Control how the image fills the card.
Options include:
Adapt to image: Maintains the original image ratio.Square,Portrait,Landscape: Crop the image to a fixed ratio for uniformity.
Image overlay opacity: Add a semi-transparent layer over the image to improve text readability.
0%= No overlay100%= Fully opaque (black cover)
Content position: Determine where the text/button appears inside the card.
Standard:
Top left,Middle center,Bottom right, etc.Split layout options:
Top subheading,Bottom button,Middle contentallow for more control.Below image: Display the content under the image.
Content alignment: Control text and button alignment (
Left,Center, orRight) relative to the content position.Content spacing: Adjust the internal padding of the content (e.g.,
Extra small,Medium,Large). Useful for cards with more or less text.Content gap: Control the spacing between elements like tag, heading, and button.
Card link: Choose where the entire card and the button should lead: a product, collection, or page. Clicking anywhere on the card will navigate to this link.
Show badge: Toggle ON to display a promotional badge (e.g., “Save 20%”, “New”).
Color scheme: Choose a color preset for the badge's label and background that contrasts well with the image background.
Shape:
Circle– Best for prices or short attention-grabbing text.Square– Great for labels or rectangular highlights.
Position: Select from corners like
Top right,Bottom left, etc.Subtext: Add a smaller caption above the main badge text (e.g., “Save”).
Text: The main value or highlight (e.g., “99$”, “New”).
💡 Tip: Use badges strategically to highlight limited-time offers or bestsellers. Keep the message short and clear.
Control how each image card behaves and looks on smaller screens, ensuring a mobile-optimized experience.
Color scheme: Select a different color preset specifically for mobile view. This is useful if the mobile image or background needs higher contrast for readability.
Image (Mobile specific): Upload a mobile-optimized image (e.g., vertically cropped or simplified). If provided, this image will replace the desktop version on mobile devices.
💡 Tip: Use vertical or square images on mobile to avoid awkward cropping or whitespace.
Show content below image: Toggle this ON to move card content (heading, button) underneath the image rather than overlaying it. Ideal for clean layouts or when text overlaps key parts of the image.
Content alignment: Choose how the mobile text and button are aligned:
LeftCenterRight
Last updated