The Sub collections feature allows sellers to organize large product collections into smaller, more specific categories. Displaying sub-collections in an intuitive and easy-to-navigate manner is important for improving the user experience. They can be displayed as links, thumbnails, or in navigation menus, making it easy for customers to explore more detailed product categories.
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 to open dropdown pages in the topbar > select Collections > select Default collection
Step 03: In the Sections tab > scroll and find Sub collections in Template
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
Collections: Select the collections to display, determining the featured product content in this section.
Style (Overlay, Overlay with blur, Overlay with underline, Overlay with nav icon): 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 images, ensuring images display beautifully and propotionally (Adapt to image, Square, Portrait)
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
In the Sub collections > 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
In the Sub collections > click open Custom CSS tab
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