Image cards 🔥

This design is available from ✨version 1.2.0 and above. ✨

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

See settings

Text alignment:
- Align the text in the section to the Left, Center, or Right.
- Adjust alignment based on your banner’s design and layout.
Text alignment on Mobile: Override desktop alignment settings specifically for mobile devices if needed.
Subheading: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.

Heading: Enter the primary title for your banner.
Heading size: Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.

✨Add Highlighted text to your Headings

Text: Add a detailed explanation or summary for the banner. Use rich text formatting like bold, italic, links, and lists for better visual emphasis.
Description size: Select the size of the description text.

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) or Bottom.
- Middle:
- Bottom:

Number of columns on mobile: Choose between 1 column or 2 columns stacked 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.

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 overlay
- 100% = Fully opaque (black cover)

Use 20-40% overlay for bright images with text overlays. Lower it for dark or minimal images.

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 content allow for more control.
- Below image: Display the content under the image.

Content alignment: Control text and button alignment (Left, Center, or Right) 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:
- Left
- Center
- Right

Last updated 2 months ago