Collection list

The Collection List section serves as a curated display of product collections, seamlessly integrating collections from your Shopify store.


Click on Collection list for the general settings

Layout Mode

  • Stack Collections: Display collections in a stack layout.
  • Carousel: Display collections in a carousel layout.

Grid Settings

  • Adjust the grid column settings for different devices:
    • Desktop: Set the number of columns to display on desktop screens.
    • Mobile: Set the number of columns to display on mobile screens.

Text Content

  • Subheading: Add a subheading to appear above the Collection List section.
  • Heading: Set the main heading for the Collection List section.
  • Body Content: Provide additional information or description for the Collection List section using the rich text editor.

Link Options

  • Add a link to the Collection List section. Configure the link text, URL, and decide whether it opens in a new tab or the same tab.

Collection Card Style

Image Ratio: Adjust the image ratios for the collection images. Choose from:

    • Square
    • Landscape
    • Portrait
    • Adapt to Image
    • circle.

Collection Name Display

  • Overlay Name: Overlay the collection name over the collection image.
  • Stack Name: Stack the collection name below the collection image.
  • Background Options: Choose to display the collection name with or without a background.
  • Alignment Options: Adjust the alignment of the collection name.

Collection Title Settings

  • Heading Size: Control the font size of the collection titles.

Appearance Settings

  • Padding: Adjust the padding at the top and bottom of the section.
    • Padding Top: Adjust the top padding.
    • Padding Bottom: Adjust the bottom padding.
  • Color Scheme: Choose a color scheme for the section from predefined options.
  • Custom CSS: Add custom CSS for advanced styling.

Collection Block Options

👜 Choose your collection

Collection → Select

Pick which collection you want to showcase—whether it’s "Summer Essentials," "Bestsellers," or "New Arrivals." This is what customers will browse through!

🖼️ Add a stunning Image

Image → Select

Upload a beautiful cover photo for your collection. This could be a hero shot, a styled flat lay, or a model wearing your products.

🎨 Styling and Overlay option
Text Color

Pick a color (like #000000 for black) to make sure your text stands out.

🔹 When does this work?

  • Only if your content layout is set to 'Overlay'
  • And ‘Hide background below image’ is enabled
Overlay color

Use an overlay (e.g., #000000) to create contrast between your image and text, making everything easier to read.


  • Light text? Try a dark overlay.
  • Dark text? Go for a light or transparent overlay.


Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us