🏳️

Banners and tiles

🏳️

Banners and tiles

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

Header banners

‣

🦄 Embed a product finder in the hero banner

🎧 Crutchfield adds a Category-level, quiz-like product finder above results as an alternative to filter and sort

👱🏾‍♀️Amika knows their product thumbnails don’t tell the story — customers can find their best match to their hair type and style goals through their simple quiz

👗 Oxford embeds a gift finder flow inside the hero banner (see optimization suggestions below)

Love the concept but a few implementation tips if you try this:

1) Keep the widget dimensions consistent through the flow to minimize layout shift

2) On mobile, make sure the widget keeps the product grid (somewhat) visible above the fold to avoid confusion (Where am I? Can I just jump to products?)

3) Apply event tags to track abandonment at each step (especially the email CTA) to optimize your flow over time

4) Build vs buy when you can* This 3p app UI shows results inconsistent with the brand's Collection layout and card design

If you have a larger catalog and your quiz will return more than 4-5 results. A native product finder can be built on top of Search like Algolia, Constructor, Doofinder or Bloomreach.

Of course this takes extra dev effort (esp. if you want personalized results to pass to an Account or through Klaviyo / etc) -- you can try an app first as an MVP to gauge whether shoppers use it or not, then "build" if it has legs

Bonus tip: When writing quiz flows, use analytics to find the most commonly applied filters for a given Category -- unnecessary questions/options will increase friction and abandonment

‣

🦄 Try a 2-step promoted attribute filter flow

👗 Zoe Kratzman guides you through top-level filters with hero banner tiles for Fit and Wash attributes in its denim collection

Mobile view:

‣

🦄 Embed a “shop the look” shelf

💡

According to Baymard Institute “35% of ecom sites don’t provide direct access to products featured in inspirational imagery,” meaning customers won't find a banner’s hero products pinned to the top of the product list post-click. Consider providing instant access to featured products with a Shop the Look slider. (Make sure shoppers can choose size and color variants where applicable)

🦅 Amercian Eagle Outfitters is the first merchant to launch such a feature (these GIFs are heavy and may take a few to load, jump to static screens below for the gist)

Mobile view:

Static shots:

‣

🦄 Link to FAQ accordion modal from hero banner

🥘 Le Creuset embeds 2 FAQ links in its Dutch Ovens category banner for quick access

‣

🦄 Animated category tiles

👗 Aritzia features conveyer belt and rotating model style animated sub-category tiles on specific pages. Note the pause button for accessibility

Desktop view:

‣

Try value prop illustrations

👕 Classic Tees shouts out its top value propositions for easy scanning and prime visibility

‣

Feature expert staff photo + quote

🎧 Crutchfield features their “headphone guy” in a whimsical photo that also highlights their helpful customer service value proposition (although the low contrast white text is a bit hard to read)

‣

Test a featured customer review

💡

If a review captures your top value prop or other persuasive message, it may work in your hero banner. Keep in mind this will eat real estate in mobile, so best to make it a desktop-only vibe. Make sure to test it against different creative — this tactic is off the beaten path and may not work. It’s just an idea!

👟 KURU promotes a 5-star review to its category banner

Zoom:

‣

Promote filters to the banner with CTA buttons

🧦 Bombas knows sleeve length is an important attribute when shopping for t-shirts, so it gets marquee treatment in the Men’s T-Shirt banner

‣

Try a live help CTA in your header

🛍️ Macy’s invites you to talk to a Style Expert above filter chips

‣

Try scrolling USP text

🌙 Baboon to the Moon uses scrolling text to highlight category-level selling propositions (with icons!)

Mobile view:

‣

Link to your fit finder

👔 Hugo Boss promotes a bold CTA in its category headers to find your fit (and filter results by your size when you’re done the quiz)

Subcategory tiles

‣

Use full-page or hybrid tile layouts

💡

While subcategory filter menus help customers narrow their results, not all customers think to use them (and they can be near invisible on mobile). Presenting a grid of subcategory “tiles” (squares or circles with representative thumbnail images) is a popular way to support navigation toward tighter result sets. Baymard Institute dubs these kind of Categories Intermediary Category Pages, and suggests you use them for your top-two levels of your site taxonomy. However, this should not be a one-size-fits-all rule. Many smaller catalogs and DTC sites don’t have the same problems to solve as Amazon, Walmart or Home Depot. You may be better served by a Hybrid approach that blends a few promoted tiles with product results.

Examples of full-page subcategory tiles (Intermediate Category Pages)

Example of single row subcategory tiles (Hybrid layout)

💡

Consider using this tactic for attribute-level filters as well — notice how Lampsplus promotes popular styles for Ceiling Fans with Lights; heights for Contemporary Table Lamps; and a blend of style and heights for Barstools

‣

🦄 Try tabbed navigation with graphic tiles

💡

Do your subcategories have attributes that represent critical buying criteria? Tabbing your tiles gives shoppers an extra layer of filtering at their fingertips — without having to fiddle with filter menus Keep in mind tabs are often hard to “notice,” so your design and styling will make or break this move.

🥾 Carhartt features attribute tabs above its product grid for select categories, for example Style-Fit-Benefit for Pants and Shorts, Style-Toe-Benefits for Shoes and Warmth-Weather-Collection for Outerwear:

❄️ Alo knows both style and warmth-factor drives purchase decisions for its Jackets & Coats category

‣

🦄 Try scrolling category tiles

🍀 Clove turns its category tiles into a marquee with scrolling animation. This is especially helpful on mobile where many tiles are hidden from the initial viewport. However, animations can have a web performance impact, so make sure to test and keep performance best practices in mind.

Desktop view:

‣

🦄 Try end-of-grid category tiles

👗 OAS displays next-category suggestions when you hit the end of a product list, and animates them for extra jazz. Because the video tiles can be lazy loaded, this has less impact on web performance than if placed at the top of the product list

Desktop view:

‣

🦄 Try an animated slide-in

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

Desktop view:

Grid style

‣

🦄 Try a bento box grid

🍱 This design trend of organizing banner and tile slots in an assymetric and aesthetic way is heating up. Check out Louis Vuitton’s holiday gift guide in bento style

And Balmain’s “bento lite” style

In-grid banners

‣

Place static banners inside the product grid (6 examples inside👇)

💡

Slotting a banner card within your product list lets you promote sitewide or category-specific calls-to-action. Unlike header or footer banners that can often be overlooked due to “banner blindness,” these graphics may be more likely to grab attention as they’re right in the area of focus as customers browse products. Tactics to try: ⚡ Featured or popular sub-category within the category being browsed (clickable) ⚡ Join Loyalty Program call-to-action (clickable) ⚡ Free Shipping or Gift With Purchase offer call-out (not clickable) ⚡ Refer-a-friend ⚡ Sustainable shipping/business practice call-out (not clickable) ⚡ Holiday shipping deadline info (clickable, opens modal) ⚡ Product / gift finder quiz (clickable) Advanced move: ⚡ Personalize banners based on clickstream or other 1st party data (e.g. profile preferences, past purchases, geolocation, etc)

🧘🏼 Featured subcategory

🧘🏾 Refer-a-friend

💄 Product quiz

☕ Promote loyalty program

🎁 Gift finder quiz

🎅🏼 Holiday shipping cutoff info

📣 PR Quotes

Branch and Amberjack use in-grid banners to rotate PR quotes from famous outlets

‣

Try an animated banner in product grid (4 examples inside👇)

💡

Animated cards are undoubtedly more eye-catching than static — and as a call-to-action, the goal is attention and clicks! However, be mindful that animations may impact page speed and conversion, depending on how they are optimized and implemented.

🌟 Feature collections

🧘🏾 Alo advertises its Atelier division within its loungewear categories

🤗 Orient newbies

🧘🏻 Alo links to a “New Here?” special landing page

🤑 Highlight a sale

🔫 Bulletproof Coffee animates its sale banner

🎅🏼 Promote pickup options

👖 Duluth Trading slots an animated banner promoting curbside pickup option with the 12/23 order cutoff for Christmas pickup (geolocated to your time zone!)

‣

🦄 Use negative space to highlight value props

🥾 Patagonia makes its value props stand out with a rotating banner inside the product list grid — the use of “negative” space makes it pop even more

‣

🦄 Try an animated banner inside the filter sidebar

👗 Daniela Draper slips a Gift Voucher CTA in its desktop and mobile filter menus. The animation draws additional eyeballs ;)

‣

🦄 Try a “feeling lucky” tile

👙 Hanky Panky and Uncommon Goods both use a grid tile as a “feeling lucky” button that pulls a random product for inspiration. You may use this strategically to pull from a specific set of strong sellers Hanky Panky:

Uncommon goods:

‣

🦄 Try cross-selling ‘for them’ categories during holiday

🎁 MeUndies understands many of it’s BFCM visitors are brand fans shopping for themselves. Cross-selling “Gifts for Him” within Women’s categories could bump AOV while helping shoppers tackle their gift list faster

‣

Try a “New Here?” CTA

🧘🏾 Alo asks new visitors to click into its brand tour landing page experience (check out the video below to see the landing page)

Landing page:

🫣 Cautions

‣

Avoid full-width in-grid banners

These in-grid graphics are placed mid-page, but they may be confused with the end of the page — avoid them on mobile and desktop, and make sure at least one product flanks your in-grid banner within a given row

Back to Category page ideas

👉 Follow on LinkedIn for daily ideas 💡