Collection card
With the Collection card block, you can showcase an entire collection in a visually appealing format. It helps guide customers toward curated products, while layout, alignment, and spacing options let you tailor the presentation to match your store’s design.
General settings

Collection
Choose a collection whose featured image will be displayed. Clicking the image will direct users to the selected collection’s page.
Width
Determines how the image is displayed. Available options:
Fit
Fill
Alignment
Determines the horizontal positioning of the content. Available options:
Left: align content to the left
Center: center content horizontal
Right: align content to the right
Gap
Background
Enables or disables the background color for this element. When enabled, you can select and apply a custom background color.
Background color
Defines the background color for this section.
Border - Corner radius
Adjust this value to create sharp or rounded edges, enhancing the visual style of the component.
Top/Bottom padding
Adjust these values to control the amount of space between the section’s content and its outer edges.
Block settings
Image

Collection
Choose a collection to link to if no collection is defined in the general settings.
If a collection is specified in the general settings, this setting will direct you there.
Image
Allows you to replace the collection’s default featured image with a different image of your choice.
Link
Use an internal link or an external website URL in place of the default collection link.
This allows the image or element to direct users to a different destination than the collection page.
Image width
Defines the specific width of the image on the devices, expressed as a percentage of the container’s width.
Image ratio
The image ratio for the featured images of the blog posts:
Adapt to image - Uses the aspect ratio of the images. This prevents the images from being cropped.
Portrait - Crops the images to use a 3:4 ratio.
Square - Crops the images to use a 1:1 ratio
Landscape - Crops the images to use a 4:3 ratio
Collection title

Collection
Choose a collection to link to if no collection is defined in the general settings.
If a collection is specified in the general settings, this setting will direct you there.
Width
Determines how the image is displayed. Available options:
Fit
Fill
Alignment
Determines the horizontal positioning of the content. Available options:
Left: align content to the left
Center: center content horizontal
Right: align content to the right
Background
Enables or disables the background color for this element. When enabled, you can select and apply a custom background color.
Background color
Defines the background color for this section.
Top/Bottom padding
Adjust these values to control the amount of space between the section’s content and its outer edges.
Last updated