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

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.

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.

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.

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

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.

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.