Ecom Ideas
  • Homepages & nav
  • Category pages
  • Product pages
  • Cart pages
  • Checkout
  • Site search
  • Internationalization
  • Holiday ideas
  • Featured idea gallery
  • Topical articles
Subscribe

Get daily ideas

LinkedIn
💡
Ecom Ideas
/Home pages & nav
Home pages & nav
/
🍭
Merchandising blocks
🍭

Merchandising blocks

Tap any tip to open toggle ⚡ some gifs may take a moment to load

Featured ideas 🦄 are rare ideas you may not have seen before ;-)

💡 Ideas and tips

‣
Promote category tiles above hero banner
💡
The homepage’s primary goal is to win a click deeper into the site. Banners don’t always achieve this goal. Promoting popular or featured categories above your banners can help customers orient themselves faster.

🧦 Bombas features category tiles above its traditional banners

image

⌚ MVMT adopts the mobile trend of featuring a category carousel above banner content. Consider making them horizontally scrollable

image
‣
Promote trending search pills above hero banner

⚽ Dick’s Sporting Goods shows timely, trending searches in pill-button form for quick inspiration. If you get the search terms right, you can help users bypass both search and browse effort (consider personalizing them if you have first-party data to work from)

image
‣
🦄 Embed tabbed product lists
💡
It’s rare to find product lists embedded in ecommerce home pages anymore — layouts lean towards banners, banners and more banners. Giving mobile home page visitors a way to shop without fiddling with hamburger menus or mobile search can help support customer journeys, especially when focused on New, Sale and trending categories. Caution: Pay close attention to the impact on performance - A/B test against alternative presentations and track click throughs (via event tagging) as well as key metrics like revenue per visitor, conversion rate and time on site.

👙 Fashion Nova embeds product lists right into the home page, below its hero banner. The tabbed style makes it easy to explore multiple shopping scopes without leaving the home page (This GIF may take a bit to load)

image

🌈 Guess’ Shop by Color tabs are super-sweet

image

🥾 Kuru lets you browse by Style, Activity or Career attributes

image

🧸 Melissa and Doug allows you to view All “Most Gifted” products by default, and winnow down by age group if desired (top right)

image

📿 Puravida’s tabbed links are harder to spot than pill buttons

image
‣
Feature a product finder or quiz

🧸 Melissa and Doug features a can’t-miss product finder on its home page

image
‣
🦄 Try a “Mad libs” style product finder

🩹 First Aid Beauty takes a tip from the popular fill-in-the-blank Mad Libs game to send customers to targeted (pre-filtered) products from a home page banner widget

image

Looks great on mobile too!

image
‣
Embed a product finder flow inline

🎁 Cotopaxi bakes its Holiday Gift Finder flow directly into the home page template — no modals or page loads, just seamless guided selling

This kind of experience could also work nicely on product list pages as a hero block or mid-page section

image

Check out the flow demo below:

‣
Rotate featured products in a banner
💡
Animations can draw more attention and tell more of a merchandising story than static images. For this tactic, avoid GIFs — they’re heavier and slower than .mp4 files. And make sure your first frame loads as a static image first.

🦌 Moosejaw promotes its Sandals category with a 3-product animation (with some clever copy to boot 🥾)

image
‣
🦄 Try a mix-and-match visualizer experience

👙 La Vie en Rose lets you preview bikini top and bottom combos from a home page merchandising block - while you can’t add your creation to cart from this widget, it does help you quickly play with the possibilities

image
‣
Promote “back in stock” products

🍭 Colourpop features restocks in a carousel. As a “fast beauty” brand, this serves its customers who often miss out on product drops. It also suggests urgency, what sold out before may sell out again…

image
‣
🦄 Geolocate trending products to visitor city

👙 Monday Swimwear shows a “Trending in [City]” section on the home page, geolocated to visitor’s IP address

image
‣
Try “visual UGC” blocks

⌚ MVMT uses Yotpo’s Visual UGC feature to pull Instagram fan content into its home page

image

🧸 Melissa and Doug pulls posts that use their @MelissaAndDougToys tag into an Instagram carousel mid-homepage

image
‣
Try showing Shop by links above the footer
💡
Users that scroll to the bottom of your home page obviously didn’t click on any of your shiny graphic home page content. Why not give them another path towards great products? Testing tips: 🧪 Try testing this against no link block, and measure click through via event tags. 🧪 Because this element won’t be visible to all home page visitors, it’s best to apply an “element in view” script — more details in this LinkedIn post from Ruben de Boer. This does require a developer as most testing tools do not offer this out-of-the-box.

💡 Uncommon Goods’ above-the-footer link map on desktop and mobile:

image
image
‣
Feature a Product finder + Best sellers combo

🛏️ Helix provides the best way to leapfrog category browsing and search with its personal mattress finder (left), and provides the second-best alternative, see what’s popular (right) — no rotating banners here! 🎠

image

💐 Proflowers uses the same strategy, but stacks them vertically rather than side-by-side. While they don’t use a carousel, this layout would allow for horizontal scrolling of actual products, vs a static banner

image
‣
🦄 Show a “before and after” interactive slider
💡
This effect is not that difficult to achieve with the right coding chops — here’s a tutorial on how to do this with CSS and Javascript 🧠 

💡Ruggable lets users drag the marker left and right to see the difference between low and high pile heights

image
‣
Use a scrolling ticker for something fun or interesting

🍪 Feastables’ scrolling banners are on-brand and get a message across. (Before you tell me “scrollers are annoying!!” I’ve seen them win A/B tests! 🤓)

image

🦌 Moosejaw scrolls a series of Dad jokes mid-page — it’s certainly entertaining and on-brand

image
‣
Show customer reviews and shop testimonials

💡Ruggable highlights customer reviews with a “Read All Reviews” link

image
‣
Try an FAQ block

👟 Vessi embeds an FAQ accordion into its home page. As an indie brand selling direct to consumer, it allows Vessi to tell their brand story while adding relevant SEO keywords to their home page copy (waterproof shoes, vegan shoes, breathable shoes, etc)

image
‣
Rotate PR praise quotes

⌚ MVMT pairs a PR praise carousel with its charitable value prop to boost its brand value. This simple scroller paired with famous logos is eye-catching below-the-fold content!

image
‣
Show an “infographic” with brand value proposition(s)

🪒 Every Man Jack features an easy-to-scan infographic that communicates the ethos of the brand - it’s clean 🧼

image
‣
Summarize your brand story and mission

⛺ Rumpl uses home page real estate to tell its brand story and communicate its values

image

🐢 Tortuga shares its founder story teaser on the home page. The photo of the founders humanizes the brand and website experience

image
‣
Try a configurable subscription widget

☕ Chamberlain Coffee embeds a configurable subscription widget into its home page - nice idea for #dtc #cpg brands

image
‣
🦄 Animate the 2nd position tile to create a peekaboo nudge on mobile

💄 If you collapse your banners to a slider/carousel view for mobile, animating the second tile can draw eyeballs to it to encourage swiping, like Haus Labs

image
‣
🦄 Try animated infographics

👱🏿‍♀️ Cecred animates a mid-homepage infographic (this one appeared on the home page)

image

Mobile view:

image

🦙 Cotopaxi does something similar on certain PDPs, embedding GIFs within the infographic

image

Desktop view:

image

Alternatively (for better web performance) you could embed something like this as a looping .webm video file — but you may find mobile-to-desktop orientation challenging

❤️ Coach dresses up its featured bag with animated SMS-style customer love

image
‣
🦄 Try interactive infographics

🍳 Proclamation lets you tab through its PDP infographic to show the product in context for different size options

image
‣
🦄 Try “freeze model” tiles
💃

“Freeze models” (or live mannequins) were the rage in 1970’s department store windows, but occasionally you’ll still find them in shop windows and live events today. They certainly are trending on ecommerce sites — the digital version showing video product tiles where models change poses periodically (or frantically, as with GAP’s example below!)

👗 Artizia freeze model product tiles in a collection page

image

Aritzia models on mobile:

Bergdorf Goodman:

GAP wild models:

Telfar 360 rotating models:

‣
🦄  Try an animated slide-in

👀 Jordan Craig flies category tiles into view on its home page, this can also be applied to category pages

image

Desktop view:

‣
Try tabbed “I’m looking for” recommendations

💡 Aavrani's home page hero banner summarizes brand ethos paired with "I'm looking for..." tabs (mobile screen in comments). This is effectively 'step 1' of a product finder quiz and a quicker way to see product than fiddling with hamburger/mega-menus

image
‣
Try promotional deal drawers

💰 If you’ve ever wondered if those “deal drawers” on Old Navy and GAP convert — they do (and that’s why they stick around). Here’s a collection of sites using the pattern, which can slide open automatically or remain a closed tab for user-initiated interaction

image
‣
Add one-liner microcopy to featured collection cards

🐦 Allbirds annotates its featured collection cards with a short “why you should care” statement (scroll below to see video demo tabbing through cards)

image

Video:

Desktop-specific examples

‣
Give your copy some (white) space

💋 Kylie Cosmetics flanks its copy and call to action with graphics. Rather than slap text over a graphic background, this draws the eye inward and makes the message stand out

image

🍸 Skinny Mixes uses a white overlay to make its copy clear from the background image. (Bonus points for the emoji — you know we love our emojis at Ecom💡 Ideas!)

image

🦌 Common Deer’s value prop pops on a white block surrounded by a grid of shiny, happy people

image
‣
🦄 Embed featured “mini collection” grids
💡
Instead of forcing visitors to choose a category from your header navigation (or mobile hamburger menu) - pull category grids directly into the home page. This is a rarely used tactic that could outperform traditional photographic banner stacks.

👖 The Great Divide brings back the old skool Home page product grid, giving users a way to shop without searching or browsing the Category menu

image

👕 True Classic embeds mini collections that replicate the Product List grid for featured categories on its home page (This is a larger GIF file - it may take a bit to load)

image
‣
🦄 Try a shoppable TikTok widget
💡
Engaging content can help increase time on site which could boost your SEO. The downside is third party scripts like this can bloat your page load and drag performance. For this reason, you may want to try it lower down on the page — and definitely lazy load it only for users that scroll that far. Be sure to measure your search rankings, time on site and bounce rates when adding interactive features like this.

🪒 Every Man Jack shows off its street clout with a TikTok carousel. Click any Tik to open a fully shoppable video player 👇🏾 (they use VideoWise for this)

image

Zoomed in for effect ;-)

image
‣
Use an unconventional layout for featured products

🦌 Moosejaw’s messy merchandising is unconventional — the pattern interrupt may draw more attention than a typical X-by-X product grid

image
‣
Try a compare table for flagship products (or competitors)
💡
This tactic is trending across DTC brands. If you have a tight catalog / product line that has competitive value propositions, baking this info into the home page could be a home run

🐢 Tortuga compares its travel backpacks against alternative products

image

🥑 Graza uses a table to compare its brand against alternative buying options (that shall remain nameless)

image

🛏️ Helix helps home page scrollers learn more about the product line with an embedded compare table

image

👁️ Esqido compares its value pricing against drug store and high end alternatives

image
‣
Try banner sub-navigation effects

🧦 Bombas lets you pre-filter by department from home page banners

image
‣
🦄 Try story-merchandising

👜 Bill Blass embeds featured products within a story narrative

image
‣
Auto-expand the mini-cart shelf on site entry
💡
This is just an idea — NOT a best practice! (As are all the examples featured on Ecom Ideas) Princess Polly auto-expands its mini-cart shelf when you land on the home page. This is a tricky move — it’s unexpected and customers may be confused. But it does call attention to and communicate a few things: 1 - the site’s Free Shipping threshold (geolocated to user’s country) 2 - Featured shopping links 3 - Featured products 4 - Carbon neutral delivery value prop Of course, for returning visitors, populating the cart reminds them of their previous journey, and with personalized recommendations can push them to keep building their basket. *Note, Princess Polly has since removed this feature — we can only speculate from afar that this was due to a conversion or performance issue. Your mileage may vary
image

Back to Home page & nav ideas

👉 Follow on LinkedIn for daily ideas 💡