The Collection list: gallery section allows you to display your store's collections in a clean text-based list layout integrated with a visual image gallery. When customers hover over or click a collection title, corresponding illustrative images dynamically appear around the text. This section enhances visual engagement and encourages shoppers to explore featured product categories.
Click on Collection list: gallery in the left sidebar to access the general section settings in the right sidebar.
Customize the spacing and interaction behavior for the collection list:
Preset: Select the font size preset for the collection titles (e.g., Heading 2XL).
Space between items: Adjust the vertical spacing between collection names on desktop devices.
Space between items (Mobile): Adjust the vertical spacing between collection names on mobile devices.
Image ratio (mobile): Choose the aspect ratio for images displayed on mobile devices (e.g., Adapt to first image, Square, Portrait).
Interaction: Choose how the gallery images are triggered:
Hover: Display images when hovering over a collection title.
Click: Display images when clicking on a collection title.
Customize the color scheme and layout width:
Color scheme: Select a color scheme for the section. You can choose from presets or customize one via Edit scheme.
Width: Choose between Page (contained width) or Full (full-width layout).
Adjust section padding to maintain a balanced visual layout across screen sizes:
Top: Set the top padding for desktop view.
Bottom: Set the bottom padding for desktop view.
Mobile padding:
Top: Set the top padding for mobile view.
Bottom: Set the bottom padding for mobile view.
Add custom CSS code to apply advanced styling adjustments to the section.
You can add header elements at the top of the section:
Click Add block under Section header to insert elements such as Heading, Subheading, Text, or Spacer.
Subheading / Heading: Enter text to introduce the collection list (e.g., Shop by Collection).
Click Add Collection under the section to add a new collection item to the list. Each Collection block represents an individual category.
When configuring a Collection block, the right sidebar offers the following settings:
Collection: Select the store collection to link to this block.
Mobile Image: Upload a dedicated image optimized for mobile devices (Recommended: 1000 x 1000px .jpg if overriding the default collection image).
Title: Enter a custom display title (If left blank, the default collection title will be used).
Count: Optionally override the item count display badge (e.g., (15)).
Link: Provide a custom link (Defaults to the selected collection's URL).
Under each Collection block, you can add nested Image sub-blocks to create the floating image layout when interacting with that collection.
Click Add block inside a specific Collection to insert Image sub-blocks. Configure each image using the following settings:
Image: Upload the image to be displayed in the section gallery.
Link: Add a destination URL when the image is clicked. Toggle Open link in new tab to launch the URL in a separate browser tab.
Position & layout:
Position preset: Select the anchor position of the image within the container (e.g., Center left, Top right, Bottom right).
Horizontal offset: Fine-tune the horizontal displacement in pixels (shift left or right).
Vertical offset: Fine-tune the vertical displacement in pixels (shift up or down).
Dimensions & style:
Width: Adjust the display width of the image in pixels (e.g., 380px).
Image ratio: Set the image aspect ratio (e.g., Portrait, Square, Landscape).
Corner radius: Apply rounded corners to the image in pixels.