A Custom Buy Box Product Page for a Coffee Roaster

Brew is a specialty coffee roaster, and a demo store we built to show what a conversion-focused product page can look like on Shopify. The brief we gave ourselves was simple: take a clean but ordinary product page and turn it into one that does the selling, with everything a hesitant coffee buyer wonders about answered right next to the button.

Transparency note: Brew is a demonstration store. The rating, review count, featured review and guarantee text are placeholder copy, and we are not claiming measured conversion results. This article is about the design and the build, and why each piece is there.

Before (left) and after (right): the same product, Colombian Supremo, on a phone.

The starting point: a page that only asks for the sale

The original product page had the standard ingredients: a title, a price, a quantity box, an Add to cart button and a plain size selector, followed by the description and a recommendations row. It works, but it leaves the shopper to answer every question alone:

• Is this coffee any good, and who says so?
• What will it taste like, and how dark is the roast?
• Which size is the better deal?
• Can I subscribe, and can I cancel?
• When will it arrive, and what if I do not like it?

Before: price, quantity, Add to cart and a plain size selector.

What we changed

Rather than stacking apps on the page, we built one custom theme block, a single buy box that replaces the old buy buttons, bundle selector and variant picker. It is organised in the order a buyer makes the decision.

1. Social proof and product character, above the fold

• Star rating and review count directly under the title, linking down to the reviews.
• Tasting-note chips (caramel, toasted hazelnut, red apple), pulled from a product metafield.
• A roast meter built from coffee beans, with the roast name and origin beside it, so the strength is understood at a glance.

After: rating, tasting notes, roast level and size cards in the first screen.

2. Size cards that make the better deal obvious

The plain size buttons became cards. Each one shows the price, the compare-at saving and the price per 100g, so the bigger bag is clearly the better value. The middle size is tagged Most popular and the largest Best value, which nudges the shopper toward a larger order.

3. Subscribe and save, preselected

• A Subscribe & save card with a 10% saving badge, three short perks (free shipping, skip or cancel anytime, early access) and a delivery frequency dropdown, built on Shopify selling plans.
• A One-time purchase option right below it, so nobody feels forced.
• The price on every card and on the button updates live with the size and purchase option.

4. Gentle urgency and a free-shipping goal

• An Only X left in this size line that appears only when real inventory is tracked and low, never invented.
• A free-shipping progress bar. On one-time purchases it counts up to the threshold as the quantity grows, and on subscriptions it shows the unlocked state.
• An Add to cart button with a quantity stepper that shows the live total, and switches to Subscribe & save when that option is chosen.

After: purchase options, stock line, free-shipping progress and the buy button.

5. Reassurance right under the button

• A delivery estimate with an order-by cutoff.
• A 30-day guarantee and a freshness promise.
• A featured customer review.
• Accordions for description, how to brew and shipping & returns, so the page stays short on a phone while the answers are still one tap away.

After: delivery promise, guarantee, a review and tidy accordions.

6. A sticky add-to-cart bar

Once the main button scrolls out of view, a slim bar slides in with the product name, the selected option and the price, so the buy button is never more than a thumb away.

Built to be robust, not just pretty

• No fragile dependencies. The buy box script does not rely on any external library to render. If something is blocked by a browser extension or a slow network, the price, sizes, subscription options and shipping bar still work.
• Native cart behaviour. Add to cart uses the theme's own cart events, so the cart drawer opens exactly as it does everywhere else on the store.
• Editable by the merchant. Rating, review count, featured review, guarantee text, free-shipping threshold and colours are all theme editor settings. Tasting notes, roast level and origin are product metafields.
• Data-driven. Eight coffees each have three sizes, compare-at prices and a Subscribe & save plan, so every product page gets the same upgraded experience.

Before and after at a glance

The full mobile page, before (left) and after (right).

What this demo shows, and what it does not

Every element above exists to answer a question a buyer would otherwise leave to find out: social proof, clarity on value, a risk-free way to subscribe, and reassurance on delivery and returns. That is the pattern we apply to real stores. This demo does not include before and after revenue numbers, because it has no real traffic, and we would rather say so than invent them. On a live store, we would pair this kind of rebuild with an A/B test against the original page so the lift is measured, not assumed.

Want this on your store?

If your product pages are doing the minimum and you would like them to work harder, we can audit them and build something similar for your products, brand and customers. Book a call and we will look at your best-selling product page together.