Collection list carousel

by Admin on May 27, 2024

1. What is a Collection list carousel?

The Collection List Carousel is a dynamic feature that presents your collection list in a visually engaging way. It allows you to showcase promotions or banners on one side while displaying related collections on the other. This layout is designed to provide an interactive and eye-catching experience for customers, enabling them to easily browse through various collections without feeling overwhelmed. 

2. How to add collections in the section?

To add a collection to your section, follow these steps and configure the settings accordingly:

Step 1: Customize collection block

  • Add the block Collection.
  • Choose the collection you want to display from your store.
  • Enable “Use collection description” to use the description of the selected collection.
  • Enter an alternative description if you prefer not to use the collection's default description.
  • Adjust the opacity of the overlay to enhance visibility and aesthetics.
  • Enter the label for the button. The button directs to the selected collection page by default.
  • Customize the color to match your theme or branding.

Step 2: Setting up layout and appearance

2.1. Collection Card

  • Choose the style of the image (e.g., original, rounded, etc.).
  • Adjust the size of the collection title.
  • Align the content to the Left, Center, or Right.

2.2. Grid

  • Set the number of columns to be displayed on desktop devices.
  • Choose between 1 column or 2 columns for mobile devices.

2.3. Layout

  • Select the position of the image (Left or Right).
  • Tick the checkbox “Make section full width”  to set the section’s width to match the full width of the user's device. 
  • Tick the checkbox “Show section divider”  to display a divider that separates this section from the one above it.
  • Adjust the padding for desktop and mobile devices to ensure optimal display.

These configurations will help you effectively showcase your collections in a visually appealing manner, enhancing the shopping experience for your customers.

3. How to configure the image?

Adding an image to this section is an excellent way to display promotions, calls-to-action, or banners, offering additional information about the selected collections. Here's how to configure the image in the section to ensure it complements your content effectively:

Adding and Adjusting the Image

  • Click the "Select image" button to choose an image from your library or explore free image resources.
  • Use the image ratio setting to adjust the display ratio of the image. This helps ensure the image looks great in your section.
  • Configure the position of the image within the section. Depending on the section, you might have options to place the image on the left, right, or center.

Configuring Text in the Section

  • Enter the heading of the section.
  • Adjust the size of the heading (range from 50% to 200%) to make it more prominent or subtle.
  • Choose the heading tag (e.g., H1, H2, H3) to define the HTML tag for the heading.
  • Enter the text or subheading to display under the heading with a smaller size.
  • Adjust the alignment of the heading (Left, Center, Right) to position the text appropriately within the section.

By following these steps, you can configure both the image and the text within your section to create a visually appealing and well-organized layout. This setup is ideal for highlighting key information and ensuring that your content is both engaging and informative.