Most advice about e-commerce product pages was written for a brand shipping a hoodie across the country in four days. If you run a bakery, a flower shop, a catering kitchen or a wholesale operation that puts its own orders in its own vehicles, that advice skips the part your customers care about most: when the thing actually shows up, and whether it shows up at their address at all.
That gap is expensive. A local shopper reads your page with two questions running in parallel: do I want this, and can you get it to me Saturday. A page that only answers the first one loses the sale to the shop down the road that answered both. This guide covers the whole product page, block by block, with the delivery promise treated as a first-class part of it rather than something buried in a policy link. Photos are covered at length in our guide to finding ethical, legally usable images for an online store, so here we’ll stay on what the photos need to say.
The Bottom Line
- Baymard Institute benchmarked 343 leading US and European e-commerce sites against 110+ product page UX guidelines and found 51% score “mediocre” or worse (Baymard Institute, retrieved 2026-09-24). The bar is lower than it looks.
- 43% of e-commerce sites show no shipping cost or calculator on the product page at all, even though 64% of test users went looking for it there before adding to cart (Baymard Institute, retrieved 2026-09-24).
- Extra costs like shipping, tax and fees are the single biggest addressable reason carts get abandoned, cited by 48% of US shoppers (Baymard Institute, retrieved 2026-09-24).
- If you deliver locally, your delivery zone, cutoff time and delivery window belong above the fold, not in a footer policy page.
Lower your delivery costs by 23%
How we reduce costs:
- No delivery vehicle expenses
- Optimized local routes
- Pay-per-delivery model
- Average 23% delivery cost reduction
What every e-commerce product page has to do
A product page has one job: move a browser to a decision with no unanswered question left. Baymard’s benchmark of 343 sites against 110+ product page guidelines found that 51% land in “mediocre” or worse territory, with 49% rated decent or good (Baymard Institute, retrieved 2026-09-24). That’s not a design problem so much as an information problem. Pages look fine and still leave people guessing.
Every product page, local delivery or not, owes the reader six things:
- Identification. What is this, in what size, made of what, in which variant. A “medium bouquet” means nothing without stem count or dimensions.
- Evidence. Photos and reviews that let someone judge quality without holding the item.
- Price clarity. The real number, including anything that gets added later.
- Availability. In stock, made to order, seasonal, sold by the tray.
- Fulfillment. How it reaches them, when, and for how much.
- A decision point. One obvious button, with the quantity and variant choices resolved before it.
For a business that delivers its own orders, the fifth item is not the last thing on the list. It’s often the first thing the customer checks.
Where the delivery promise belongs on a product page
Put the delivery answer next to the price, not behind a link. The evidence here is unusually direct: 64% of users in Baymard’s testing looked for shipping costs on the product page before deciding whether to add the item to their cart, and 43% of e-commerce sites don’t display any shipping cost or calculator there (Baymard Institute, retrieved 2026-09-24). Those users don’t hunt for long. They assume the worst and leave.
It gets worse at the next step. Baymard’s checkout research found 21% of US online shoppers abandoned an order in a recent quarter specifically because they couldn’t see the total cost upfront before starting checkout, and across a meta-analysis of 49 studies the average cart abandonment rate sits at 70.19%, with 48% of shoppers naming extra costs (shipping, tax, fees) as their reason for leaving (Baymard Institute, retrieved 2026-09-24).
If you deliver inside a radius, four pieces of information resolve almost all of that anxiety:
- Zone. A ZIP or postcode checker right on the page. Let people type their code and get a yes or no in one step, rather than discovering at checkout that they’re two miles outside your line.
- Cost. The local delivery fee, and the order value that makes it free. “Free local delivery over $60” is a stronger line than any banner ad you’ll ever run.
- Cutoff. The time by which today’s order still goes out today. Make it dynamic if you can, so that “order within 3 hours 12 minutes for Friday delivery” outperforms a static sentence because it does the arithmetic for the reader.
- Window. The actual slot. “Between 9am and 1pm Saturday” is a promise. “1-2 business days” is a hedge, and local shoppers read hedges as risk.
The demand signal behind this is strong. Roughly 80% of consumers now expect same-day delivery to be on the table, about 70% say they’re more likely to buy online when it’s offered, and around 28% have abandoned a purchase because the delivery estimate didn’t match their urgency (Capital One Shopping Research, retrieved 2026-09-24). You don’t have to offer same-day to benefit from this. You have to answer the question on the page.
Delivery details by business type
| Business | The question the page must answer | Where it should sit |
|---|---|---|
| Bakery | Is this baked and delivered on the day I choose? | Next to the date picker, above add-to-cart |
| Florist | Will it arrive before the event, and in what condition? | Beside price, with a cutoff countdown |
| Catering | What’s the lead time, and is my address in range? | Above the fold, with a ZIP checker |
| Wholesale | What’s the minimum order, and which weekday is my route day? | In the pricing block, per account tier |
Product photos that match what you actually deliver
Photography carries more weight for local, perishable and made-to-order goods than for almost anything else, because the buyer is judging freshness and craft from a screen. Three rules cover most of it.
Shoot the real thing at the real size. A cake photographed alone looks like every other cake; photographed next to a hand or a coffee cup it becomes an eight-inch cake. Second, show the packed state as well as the plated state. A customer ordering delivery wants to know what lands on the doorstep, not just what it looks like styled. Third, keep a consistent crop and background across your catalogue so the grid reads as one shop.
Where you get supporting imagery matters legally as well as visually, and that’s a bigger subject than it looks: licence terms, model releases and AI provenance all bite. Our companion piece on free and ethically sourced stock images for e-commerce covers which libraries are safe for commercial use and what each licence actually permits.
Writing product descriptions for perishable and made-to-order goods
Lead with what the reader can’t see in the photo. For a physical product that travels, that means shelf life, storage, allergens, serving size and what condition it arrives in. A description that opens with “handcrafted with love in small batches” has spent its best sentence on something the reader already assumed.
A structure that works for delivered goods:
- One sentence of plain identification. “A 9-inch sourdough boule, baked the morning of delivery.”
- Specs as a scannable list. Weight, dimensions, ingredients, allergens, serving count.
- Condition on arrival. “Delivered still warm in a vented box” or “packed with a gel pack, keeps four hours.”
- Handling. How to store it, how long it keeps, whether it freezes.
- A use case. What occasion or order size this item is actually for.
That last one does quiet work for wholesale in particular. A buyer ordering for a café needs to know a tray serves 24, not that the pastry is artisanal.
The add-to-cart block: price, cutoff, and delivery window
The add-to-cart block is where conversion is won or lost, and it should be the tightest part of the page. Resolve every choice before the button, then make the button unmissable.
Order the block like this: price (with the delivery threshold underneath), variant and quantity selectors, delivery date picker, the cutoff line, then the button. Keep one primary button. A page with “Add to Cart” competing against “Buy Now”, “Subscribe” and “Add to Wishlist” at equal visual weight makes the shopper do your prioritising for you.
Two specifics that matter for delivery businesses. Put the date picker before the button, not after it in a cart step. Someone who can’t get Saturday needs to know now, while they still have the energy to pick Sunday. And show the fee as a line the customer can see, not a surprise. The cheapest conversion fix most local shops have available is moving a number that already exists from the checkout page to the product page.
High-converting product page examples worth copying
The pages that rank as examples of good product page design tend to share a small set of moves rather than a house style. Looking across the teardowns that dominate this topic (Bazaarvoice, VWO, Shogun and Baymard’s own design example library all cover the same ground), the repeatable patterns are these:
- Answer the top questions in the page body. Yeti’s product pages pull the most common customer questions into the page copy itself instead of leaving them in a separate FAQ tab, so nobody has to go hunting. For a delivery business the equivalent is the cutoff and the zone.
- Let the shopper simulate the product. Bose’s headphone pages include an interactive module that demonstrates noise cancellation in the browser. You can’t demo a croissant, but you can show a short clip of the item being unpacked on a doorstep.
- Put social proof near the title. Star ratings beside the product name rather than a thousand words down the page.
- Use scarcity honestly. “Only 6 trays left for Friday” is true, useful and urgent when it reflects real capacity. Invented countdowns train people to distrust you.
- Keep the CTA in view. A sticky add-to-cart bar on mobile, where most local ordering happens.
Steal the structure, not the aesthetic. A florist copying Apple’s page layout ends up with a page that looks expensive and says nothing about Saturday.
A product page checklist for businesses that deliver locally
Work top to bottom. If you can’t tick a line, that’s the fix.
- Title and photo identify the item at real scale, with a consistent crop.
- Price is visible without scrolling, with the free-delivery threshold under it.
- Delivery zone checker sits on the page, not at checkout.
- Cutoff time is stated, ideally as a live countdown.
- Delivery window is a real slot, not a business-day range.
- Delivery fee appears before add-to-cart.
- Specs cover size, weight, allergens and serving count.
- Condition on arrival and storage guidance are written out.
- Reviews appear near the title and in full further down.
- One primary button, with variants and date resolved above it.
- Mobile check: everything above still true on a 390px screen.
Frequently asked questions about e-commerce product pages
What should an e-commerce product page include?
Identification, evidence, price clarity, availability, fulfillment detail and a single clear decision point. For a business delivering its own orders, fulfillment detail means the delivery zone, fee, cutoff time and window, shown on the page rather than linked from it.
Should shipping and delivery costs be shown on the product page?
Yes. 64% of users in Baymard’s testing looked for shipping costs on the product page before adding an item to the cart, yet 43% of e-commerce sites don’t show any cost or calculator there (Baymard Institute, retrieved 2026-09-24).
How many photos does a product page need?
Enough to remove doubt, which for most delivered goods means three to six: the item at scale, a detail shot, the packed state, and one in context. Quantity past that point adds load time rather than confidence.
Why do shoppers abandon carts on local orders?
Mostly cost surprises and timing. Extra costs are cited by 48% of US shoppers, and average cart abandonment across 49 studies sits at 70.19% (Baymard Institute, retrieved 2026-09-24). Roughly 28% have abandoned specifically because a delivery estimate didn’t meet their urgency (Capital One Shopping Research, retrieved 2026-09-24).
Does a date picker on the product page hurt conversion?
It doesn’t, as long as it sits before the button. Surfacing an unavailable date early lets the shopper choose another one while they’re still engaged, rather than discovering the problem at checkout and leaving.
What to fix first
If you change one thing this week, move your delivery fee and cutoff time onto the product page. It costs nothing, it’s the gap 43% of e-commerce sites still have, and it addresses the reason nearly half of abandoning shoppers give for leaving.
After that, work the checklist above in order. Most local shops find their pages are fine on identification and evidence and thin on fulfillment, which is the one thing a national competitor can’t match and a local one absolutely can.
