Collection list

by Admin on Apr 11, 2024

1. What is a collection list?

A collection list is a compilation of different collections, often displayed prominently on  the homepage. Collection lists serve as a convenient way for users to explore a variety of product categories right from the homepage, streamlining the browsing experience and guiding them towards relevant products of interest.

2. How to set up the collection list?

To set up the collection list, follow these steps:

  • Enter the heading of the collection list section.
  • Adjust the size and alignment of the heading.
  • Choose the style of product image (Square, Rectangle, Round, Natural).
  • Optionally, show a "View all" button and a section divider.
  • Determine whether the section should be full width.
  • Choose the background color for light and dark modes.
  • Adjust the number of columns to display on desktop and mobile devices.
  • Add spacing between blocks if desired.
  • Enable carousel settings to display blocks in a slide type on desktop and mobile devices.
  • Adjust the padding on the top and bottom of the section.
  • Add collections to the list by configuring each collection block.
  • For each block, Click the "Select collection" button to choose a collection to display.
  • Arrange the order in which collections appear.

3. How to add a promotion or image in the collection list?

The purpose of a promotion image is to provide information about featured collections, ongoing sale campaigns, or create focal points to attract customers' attention. It serves as a visual representation to highlight specific products or collections, enticing users to explore further and potentially make a purchase. To add a promotion or image in the collection list, follow these steps:

Click on "Add block" and select "Promotion." Configure the settings within the promotion block:

  • Enter the heading & the text of the section that will be displayed under the heading.
  • Select an image to set as the background of the promotion block.
  • Adjust the overlay opacity of the background image.
  • Enter the label of the button. Leave empty if no button is required. Enter the link users will be redirected to when they click on the button.
  • Adjust the alignment of all elements (heading, text, button) in the promotion block.
  • Choose the background color in light or dark mode.
  • Choose the text color of the promotion block in light or dark mode.
  • You can also add an image directly to the collection list without using a promotion block.
  • Upload or select an image to display within the collection list.

Example for text block:

Example for image block: