Welcome to Part 2 of The Collections Page guide!
We're diving deep into 5 brands and how we adjusted their collections page! You can test ALL these suggestions on your own website.
Let's jump in!
Number 1: Albion Fit
Suggestion 1: Consider adding tabs above, allowing users to easily access and explore different categories with just a simple click. Include images and labels to guide users in their shopping journey.
Suggestion 2: Make sure your primary action button is at least 56px in height to ensure optimal accessibility for mobile users.
Number 2: Reprise
Suggestion 1: Tighten the collections header to help pull up the product cards higher in the user’s view. Layer your key traits below to really break down any purchase barriers!
Suggestion 2: Include the number of products in this collection in the right-side of your header to provide some clarity around the number of products displayed on the collection page.
Suggestion 3: Place the products on a 2-column layout to make it easier for users to compare products and reduce scroll fatigue, which often occurs when using a 1-column layout!
Suggestion 4: Surface your review badge and call-out the number. Ensure this is above the product headline to break down trust barriers earlier!
Suggestion 5: The ingredients is an important info when selling a consumable product — include the top 3 here key ingredients here for transparency! Also, left-align the product card info to improve the readability.
Number 3: Hyperlite Mountain Gear
Suggestion 1: Add an enticing headline that effectively piques users' curiosity and encourages them to read on.
Suggestion 2: Use a subtle gray background for the product image to make it stand out and add carousel indicators so users know they can swipe to see more images! Add a 'Best Sellers' badge to show users that these items are popular among other shoppers.
Suggestion 3: Display the available sizes upfront to remove the extra friction.
Suggestion 4: Clearly explain the product's ideal uses to help users see its benefits in real-life situations. Utilize accurate icons instead of tick marks for an added visual guide!
Number 4: Kate Hewko
Suggestion 1: Remove this copy to declutter the collections header, leaving this here can also look unprofessional and confusing to users.
Suggestion 2: Include tabs as anchor links to help users quickly jump to the top parent categories. Keep the options limited to avoid overwhelming users and reduce cognitive load.
Suggestion 3: Create parent categories and add them as tabs for easy organization. No duplicates or super small subcategories to keep it clean and tidy. Users can filters on the product listing page to narrow down their search for an organized and efficient shopping experience!
Suggestion 4: Ensure subcategory thumbnails are clear and distinct, representing each product type without any repeats. Also, ensure there are no repeated subcategory thumbnails. This way, users can quickly find what they're looking for without any confusion!
Suggestion 5: Surface a full-width dynamic CTA that will lead users to the full product collection for every category tab.
Number 5: Original Grain
Quick Tip - When collections have an odd number of products, there’s a gap — use it! Add in a content card option that calls out something about your product such as reviews or promo offer. These would load in when there’s an empty slot on a page.