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
/Product pages
Product pages
/Buy Box detail
Buy Box detail
Buy Box detail

Buy Box detail

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

Pricing detail

‣
Show price per unit for multi-pack SKUs
💡
Price per unit is an important detail for bulk buyers, Baymard Institute found 86% of sites fail to show it clearly. Here are 3 examples of merchants doing it well:

🔥 Kettle & Fire highlights price per unit for multi-pack variants, and applies super-script for the % discount

image

🍄 Four Sigmatic details price per serving, though it’s harder to notice than the Kettle & Fire example above

image

👕 True Classic Tees details “Only $XX.xx per item” for its multi-pack SKUs

image
‣
🦄 Consider offering multiple BNPL options

👑 CultureKings shows both Klarna and Afterpay options with the per-payment breakdown. Be careful with this styling, the badges may be confused with “variant” selection (these are not clickable)

image

🦈 Gymshark places its BNPL badges below the Cart button which may not be discovered below the fold, but doesn’t hog above-the-fold real estate

image

🛞 Crutchfield uses an accordion to show “financing options” (including its own credit option)

image
‣
🦄 Quantify dollar savings below the Cart button

🍳 Caraway displays the $ savings with the Cart button, right smack in the center of users’ attention (rather than with the price detail that’s out of the eye flow path)

image
‣
Quantify dollar savings near the Regular Price

🛞 Crutchfield highlights its discount in colored type and calls it a “Price break”

image
‣
Place promotion detail below the product title

🦌 Abercrombie uses red type to highlight its active offer right below the Product Title and Price detail

image

👗 Club Monaco uses colored type to emphasize active promotions below the Product Title and Price detail

image
‣
Highlight your % discount with a “red pill”

👖 American Eagle Outfitters draws attention to its discount with a “red pill” — not only does it “pop” but the quantified % value saves customers from mathing-in-their-heads

image

Social proof and urgency

‣
Create urgency for low stock SKUs

👙 Swim Outlet places its urgency copy right bellow the Add to Cart button

image

🩳 American Eagle Outfitters changes Cart Button copy to “Get It Before It’s Gone” for variants that are low in stock

image
‣
Add urgency callout for low-stock variants (with 🔥 emoji)

🔥 Fashion Nova let’s you know what’s hot

image
‣
Create urgency with an animated, dynamic stock countdown

📻 Radio Shack animates its stock countdown badge and adds a bouncing add to cart

image
‣
Show how many others are currently viewing the product

💡Pandora uses a pop-up. We like the idea, but modals that cover content are not ideal. Feel free to test it, your mileage may vary

image

👖 Children’s Place places its Popular! badge near the Add to Bag button

image
‣
Show how many viewed “today”

💡 Journeyz notes how many product views occurred during the last 24 hours

image
‣
Try Selling fast! badges

👶🏽 Carter’s shows a badge indicating when a SKU is selling fast

image

🍀 Lucky Brand uses a “Going Fast” badge under the product title

image
‣
Show how many added to bag in last hour

👕 J.Crew shows how many customers added a product to their bag in the past hour

image
‣
Test a Sale countdown timer

🌿 Shapermint places a sale countdown between the price and variant selectors on its PDPs

image
‣
🦄 Try embedded UGC videos

👱🏾‍♀️ Lelet NY uses the Tolstoy app to embed shoppable product demo videos (TikTok style) in the Buy Box

image

💄 Axiology uses the Vestico app for a similar effect

image
‣
🦄 Try scrolling review snippets

⭐ Public Good features short and sweet social proof scroller below the product title

image

If you try this, just beware of potential layout shift and drag on page load (reserve the real estate for the widget before it populates, and load it after primary content)

‣
🦄 Try an AI review summary drawer

🤖 Corkcicle expands an AI Reviews Summary from a top-line link Vendor: Yotpo

image

Shipping details

‣
🦄 Show the estimated arrival date
💡
88% of shoppers expect to see the estimated delivery date on the PDP (Maergo, 2023), and 53% rated it as “very important”

💡 Consider the example below: It’s semi-interesting to know that the order ships same day — but shoppers care more about when they’ll get it than when it ships

image

👢 Cole Haan shows the arrival date in can’t miss green type.

image

👠 Fashion Nova combines estimated delivery date with Free Shipping reassurance

image
‣
🦄 Show available shipping methods near the Cart button
💡
78% of shoppers want to see available shipping methods on the PDP (Maergo, 2023)

👖 LLBean bakes a shipping method tooltip into its PDPs. Rather than bloat the Buy Box with radio buttons and lots-o-copy, it keeps it compact enough to be clear but unobtrusive

image

On-hover, you can preview Express transit times and costs

image
‣
🦄 Show “Get it by [date]” with countdown timer

🩳 Chubbies combines its free Standard delivery estimate with its shipping cutoff info in an easy to understand, real-time way on its PDPs

image

💁🏻‍♀️ Missguided shows a “get it by tomorrow” countdown timer, boldly

image

👢 Boots places the order cutoff timer front-and-center in the Buy Box above the Cart Button - can’t miss it

image
‣
Use microcopy for “more options in checkout”

💡 Express hints that more options are available in checkout

image
‣
Consider showing shipping speed microcopy with a tooltip

👙 AdoreMe highlights its Free US Shipping & Exchanges value prop close to its Bag Button, and slips in the transit time for the Free tier with a tooltip to expand for more details

image

👙 Tooltips and modals let you bring critical info into the PDP, rather than hiding it within the checkout flow

image
‣
Indicate when it “leaves the warehouse”
💡
For certain industries, “processing time” (time between placing the order and leaving the warehouse) is relevant to communicate. While consumers typically care more about arrival date, this may be a value proposition your customers care about when: 👉 You provide multiple shipping methods that impact arrival dates, and you don’t want to clutter your Buy Box with them all 👉 You’re in an industry where processing times can be slow (custom products, made-to-order, large items, dropshipping marketplaces, etc) or where back orders are common 👉 When you’re not comfortable making promises for transit times you can’t control

Build.com indicates how quickly items ship, and includes shipping zipcode for multi-warehouse operations.

image
‣
🦄 Provide a shipping estimate lookup tool
💡
This is especially helpful when you use variable rate shipping vs flat rate.

👔 The Men’s Wearhouse lets you preview delivery dates by zipcode to help shoppers decide between store pickup (when available) and ship-to-home Vendor: Fenix Commerce

image

Concerned about Buy-Box clutter? It’s collapsed by default

image
‣
Consider using icons to add visual context

👗 Lulus adds icons to its Shipping and Returns callouts to aid visibility and comprehension

image
‣
Try a wickedly bold “Get it Now” CTA
💡
Most designers will not want to get THIS bold! But it’s something to test — if you dare (and if you really want to promote store pickup over ship-to-home ;) Keep in mind, such bold blocks may be overlooked due to “banner blindness.” A/B test!!
image
‣
Promote account Sign In/Sign Up inline (if free shipping is offered to account holders only)
💡
There’s a growing trend for merchants to offer free shipping for registered accounts only — likely as a way to offset the impact on first party data from declining cookie acceptance. While this is very likely a conversion killer — if this is your policy, consider providing an inline callout to promote Sign In or Sign Up

👑 Hallmark promotes its Crown Rewards shipping perk inline on the PDP

image
image
‣
Use a tooltip/hover link to expose additional same-day delivery info
💡
Provide more information about your Same Day Delivery specs with an accordion or lightbox/hover effect.
image
‣
Indicate your free shipping threshold with Ship to Home option
💡
Of course, your free shipping over $X message is advertised in your sitewide promo bar — but it’s way out of the user’s eyepath on the PDP. It’s a great idea to repeat your free shipping threshold where it’s most relevant to the customer - we call that a “point of action assurance!”
image
‣
🦄 Consider showing a shipping “timeline”

🌴 Palm Golf shows a timeline graph above the Add to Cart button. This communicates visually that delivery times include some order processing time. They could consider moving the Pickup microcopy (below the ShopPay button) closer to this graph for extra clarity.

image

Secondary calls-to-action

‣
Try an email CTA near the Cart Button

👜 Tory Burch puts their email sign up CTA near the cart button. Consider using cookies/personalization to show/hide this, based on state (not logged into account, identified returning customer), closed entry pop-up, etc

image
‣
🦄 Position your email sign up CTA as “weekly notifications”

🧸 Sanrio positions their email CTA as weekly notifications for New Arrivals. Make sure you open your email opt-in as an accordion or modal to not hijack users off the page

image
‣
🦄 Embed a bundle CTA near cart button

🍸 Have a bundle building experience? Show it off with a banner and persuasive copy. Experiment with its design and placement on your PDP

image

🔫 Bulletproof Coffee displays a banner near the cart button to save with a bundle

image
‣
Promote your loyalty program near the Cart button

💄 Ulta slots a CTA for non-logged in visitors reminding them they can earn points with their purchase

image

🥾 Kuru’s CTA includes a tooltip for additional details

image
‣
Highlight active promotions above the Cart button

🩳 Chubbies stuffs its active promotion callout with its Cart button where it’s likely to be noticed

image

👩🏼‍🍳 Ooni Oven’s yellow box is attention grabbing. Consider testing different colored fields

image

⚠️ Be careful not to overdo the CTAs. Staples may be hurting conversion with TMI - too much incentive info

image
‣
🦄 Embed a Gift Finder CTA

💍 Kay Jewelers bakes a Gift Finder CTA into the Buy Box during the holidays

image
‣
🦄 Embed a Product Quiz chatbot

👩🏾‍🦱 Amika embeds a chatbot quiz on certain PDPs with the CTA “Is this product right for me”? The flow guides you through questions that confirm or suggest alternative products based on personal answers. It’s also a great way to capture 1p data ;)

image

If you want to see the full flow for this product - longer GIF below (it may take a few moments to load):

image
‣
🦄 Try a video button

🎥 Emeet animates its secondary CTA with a video background

image
‣
🦄 Try an instant welcome discount CTA
🤑

Instead of serving a “join our email list” pop up on arrival, put users in control when they’re ready to buy

👚 Frank and Oak shows an “Unlock 15% off your order” CTA that opens its email signup widget

image

Add to Cart buttons

‣
Test “I Want It” button copy

👜 Coach replaces the boring “Add to Bag” with “I want it” - be careful, this may be misinterpreted as add to Wish List

image
‣
🦄 Make the whole Buy Box sticky

👖 Mavi pins variant options as users scroll on desktop and mobile, helping super-scrollers keep conversion context!

image
‣
🦄 Change Cart Button copy when product is already in Cart

🛍️ Nordstrom changes its Cart Button copy to “In Your Bag” to help customers keep track of their actions when they Continue Shopping or return later

image
‣
🦄 Use your Cart Button to display a running price total for 2+ quantity

💡Skinny Mixes shows and updates the running total on the Cart Button as users increase quantity

image
‣
Place your Wishlist button as a secondary CTA to Add to Cart
💡
Many shoppers use the Shopping Cart to save items they’re still considering. Showing your Wishlist button near the Cart button reminds customers there’s another way to save products for later. This can have a few benefits: 💙 Keeps the Cart for products they’re really close to buying 💙 Prevents cart recovery emails from firing on items they’re simply bookmarking 💙 May encourage account creation for new visitors 💙 Prevents carts from expiring and kicking products out

❤️ Lulus’ Wishlist secondary CTA is aligned with the cart button

image

❤️ Lampsplus combines the heart symbol with SAVE label for extra clarity

image

❤️ The North Face shows Save to Favorites as a secondary CTA with its Add to Cart button

image

❤️ Nieman Marcus’ subtle heart CTA doesn’t overshadow the Add to Bag button

image
‣
🦄 Try a color blend effect to emphasize the cart drawer

👗 Adam Lippes applies a color blend animation to the PDP after a product is added to cart. This brings focus to the cart drawer and can emphasize specific “next step” CTAs or offers

image

Store pickup

‣
Try a “Check store availability” button

🏬 Rather than clutter the Buy Box with pickup radio buttons, Journeys collapses its pick up options behind a button, and clearly labels it “Check store availability”

image
‣
Try an “In-store pickup” button

💍 Pandora presents its In-store pickup button above its Add to Bag button, with secondary CTA styling. The locator icon is a nice touch!

image
‣
Use radio buttons with nearest store pre-populated

👕 Tillys uses geolocation to pre-select the nearest local store, with stock availability detail and a clear Change Store button

image
‣
Try a store location search box

📍Lush embeds a search box to find local stores by city or postal code

image
‣
🦄 Offer a discount for store pickup
💡
Pass your save shipping expenses to your customer and incentivize local pickup!
image
‣
🦄 Include “Order by XPM” detail for same-day store pickup

🪴 Crate & Barrel indicates the order-by cutoff time for same day pickup

image
‣
Include local pickup speed details

🎯 Target indicates store pickup is “Ready within 2 hours” — twice! And in green for that extra pop

image
‣
Use a tooltip for all delivery options (both for local pickup and shipping)

💡 Best Buy lets you open more details for both pickup locations and shipping methods. This is especially helpful if you offer non-store pickup locations like UPS/FedEx depots

image
‣
Display and disable unavailable shipping options
💡
Rather than remove them, maintain consistency and transparency around options at the SKU level. These are a few examples of UI patterns used by retailers for your inspo
image
image
image
image
image

Subscriptions

‣
🦄 Dynamically show subscription savings on-toggle

🥑 Graza shows discount detail for subscription options

image
‣
Expose subscription saving details with an accordion

🍵 David’s Tea’s streamlined call to action expands with user-action. This keeps the Buy Box cleaner without sacrificing details for those who are interested

image
‣
Test pre-selecting the subscription option against one-time purchase

🔫 Bulletproof Coffee pre-selects the Subscribe & Save option on its PDPs. Consider testing this against the opposite pre-selection to make sure it doesn’t lower conversion

image

Industry specific features

‣
Luggage airline compatibility tool

🧳 Samsonite uses Tangiblee for various features including “See bag size” — a red or green badge displays if the product viewed fits carry on specs for each airline you tab through

image

🫣 Cautions

‣
Don’t style your active Add to Cart button gray

🌧️ Gray is a web convention for an inactive button - reserve it for Out of Stock state or if you need the button disabled until variant selections are made

image
‣
Don’t hide your price in the Cart Button alone
💡
There’s nothing wrong with repeating the price on the Add to Cart button, but presenting it only on the Cart button can throw customers off — even give them the impression it’s out of stock or not for sale online.

😬 This merchant hides the price in the Cart button where shoppers don’t expect it. What’s more, the BNPL price is more prominent than the full price!

image
‣
Don’t bury the price in Buy Box clutter

😬 When prices are overshadowed by text and competing calls to action, users may assume it’s not for sale!

image

Back to Product page ideas

👉 Follow on LinkedIn for daily ideas 💡