Image cards 🔥

This design is available from version 1.2.0 and above.

See: Changelog

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

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.

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.

Last updated