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. If no button is added, clicking the image will automatically navigate to the collection page.
- Customize the color to match your theme or branding.
Step 2: Enter 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.
Step 3: Setting up layout and appearance
3.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.
3.2. Grid
- Set the number of columns to be displayed on desktop devices.
- Choose between 1 column or 2 columns for mobile devices.
3.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 set up the main 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.
- Add an image link: Use the link field to set a destination URL for the image. When customers click the image, they will be redirected to the specified page.
4. Show customized collection images with metafield.
✍️ Why would you need to use metafield for collection images?
- You want to show a designed image for the collection on the menu, without changing the featured images of that collection.
- You want to show higher-resolution images on the menu.
✍️ How to do it?
Step 1: Create a collection metafield:
- In Shopify admin, go to Settings> Custom data > Collection > Add definition.
- Give your metafield a name.
- Choose type as File.
- Click Save.
Step 2: Assign a value for the collection metafield:
- Go back to Shopify admin, and click on the Products > Collection tab.
- Choose a collection.
- Scroll down to Metafields.
- Upload an image in the newly created collection metafield.
- Click Save.
👉 Refer to this guidance about “How to create Product metafields” for a detailed explanation.
Step 3: Set up in Theme Editor:
- In Theme Editor (Visit it by clicking on Online store > Themes > Customize)
- Visit the page you want to add a collection list, then tap on the Collection list carousel section.
- A new panel will appear, scroll down to find Auto-fill collection images with metafield.
- Copy the text after “custom.” of the metafield’s Namespace and key. → Paste to this “Auto-fill collection images with metafield” field. (See the image below)
- Click Save.
