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

Setting
Description

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

Setting
Description

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

Setting
Description

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