The ' Collection list section' is a powerful tool to showcase your product collections in a visually appealing and organized way on your website. By displaying images, titles, and descriptions of the collections, you can help customers easily browse and discover different product offerings.
Step 01: From Shopify Admin, click on Online Store > Select Theme > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click the Sections button > Click the Add Section button or hover below another section until the (➕) icon appears > In the Sections tab, scroll through the list or use the search bar to find and select Collection list
To add Collection item to the Collection list section, click the Add Collection item button (plus icon ➕) under the Collection list.
Once the Collection item is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Collection: Select the product collection to display, determining the featured product content in this section.
Image: Select the image to display for the collection, recommending a 1000 x 1000px .jpg image for optimal quality.
Title: Select the title to display for the collection, defaulting to the collection's title
Link: Select the link to the collection, defaulting to the collection's URL
Button label: Enter the label for the display button, only applicable when the card display style is " Button on hover"
Once you add the Collection list section, you can customize its settings in the left or right sidebar (depending on your screen size)
2.2.1. General
Reveal on scroll (Show animation when section becomes visible): Activates animations when the section becomes visible while scrolling, enhancing engagement and interactivity.
Make section full width: Expands section width to the full page width, optimizing display on large screens and creating an impactful layout.
Color scheme: Selects the color palette for the section, ensuring harmony with the overall website design and creating a unified visual experience
Caption: Enter a brief caption, often used to provide additional information or context for an image or content.
Heading: Enter the main title for the section, helping readers quickly grasp the main topic.
Heading size: Adjust the font size of the heading, creating visual hierarchy and emphasizing content.
Heading style: Select the style for the heading (e.g., normal, uppercase), customizing the interface and creating emphasis.
Heading tag (Will affect SEO): Select the HTML tag for the heading (H1-H6), affecting SEO structure and content hierarchy.
Description: Enter a detailed description for the section, providing additional information and clearer explanations.
Style (Overlay, Overlay with blur, Overlay with underline, Button on hover): Selects the display style for collection cards, customizing image and information display effects on hover or page load.
Image ratio: Adjust the aspect ratio of collection images, ensuring images display beautifully and propotionally (Adapt to image, Square, ASOS, Portrait, Lanscape, Custom)
Number of cards on desktop: Defines the number of card columns displayed on desktop screens, optimizing the layout for large screens
Number of cards on mobile: Defines the number of card columns (1 card, 2 cards) displayed on mobile screens
Corner radius cards: Adjusts the corner radius of collection cards, creating a soft or sharp interface depending on the website design.
Spacing between cards: Adjusts the spacing between collection cards on desktop screens, controlling the layout and creating content clarity.
Spacing between cards (mobile): Adjusts the spacing between collection cards on mobile phone screens, optimizing display for small screens.
Top padding (Desktop/Mobile): Creates space above the content within an element, separating it from elements above and improving visual layout.
Bottom padding (Desktop/Mobile): Creates space below the content within an element, separating it from elements below and improving visual layout.
2.2.2. Theme Settings
In the Collection list > click open Theme Settings tab
Reveal sections on scroll is an effective web design technique to increase interactivity and improve user experience.
Page width: Defines the maximum width of the page content, controlling layout and ensuring optimal display across devices
2.2.3. Custom CSS
Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.
Add custom styles to this section only.
To add custom styles to your entire online store, go to Theme Settings