Card images

You can use this section to showcase bestseller products, and collections under banner image format, or even tell your brand's story through images.

#How to add Card images

#How to edit Card images

#Section settings

#Section header

Use the provided text fields to add a suitable Heading, Subheading, and Text.

• Leave them blank if you do not want to display them

You can also change the Heading size to Heading 1/ Heading 2/ Heading 3 and the Text alignment to Left/ Center to make the content look balanced on your website.

#Card settings

Select the card's Image ratio as:

• Adapt to image
• Square (1:1)
• Portrait (3:4)
• Landscape (4:3)

#Grid settings

Set the Number of columns on desktop view between 1-3 column(s), and choose your favorable Column gap as Extra large/ Large/Medium/Small/ Extra small/ None.

#Carousel settings

You can Enable the carousel on desktop (when the number of collections added > the number of columns).

#Block settings

#Image card

Select the Color scheme for the image card block.

Click Select image to assign the image to the banner on the desktop and use the slider to change the Image overlay opacity.

Add some text for the banner’s Heading, Subheading, and Description.

• Leave them blank if you do not want to display them.

You can also change the Heading size (Heading display 1/ Heading display 2/ Heading display 3/ Heading 1) and the Description size (Small/ Base size/ Large) to make your image card block look more balanced.

Add a call-to-action button that directs customers to the target page specified in the Card link field.

Add a Label then choose a Button style

• Primary button
• Secondary button
• Underline button

Furthermore, you can also modify the look as well as the position of the content by changing these properties:

• Content position: Top left/ Top center/ Top right/ Middle left/ Middle center/ Middle right/ Bottom left/ Bottom center/ Bottom right
• Content alignment: Left/ Center/ Right
• Content spacing: Small/ Medium/ Large

#Mobile settings

Especially, if you want to display a different card image on the mobile device, you can insert another image to the Image field.

Moreover, the block also allows you to change Content position and Content alignment on mobile.