Designing a mobile product page: 9 choices and the reasons behind them

Nomad Fire Co. sells kamados from €250 to €1,600, plus the accessories that go with them. Most of the traffic arrives on a phone, often in the evening, and almost never on the home page. The product page is the shop.

This is the account of how we redesigned that page: nine concrete choices, each with the reason behind it and what we expect from it. Not a piece about colours and fonts, because nobody comes for that. It is a piece about where designing a mobile product page actually comes unstuck. More examples of this kind of work are in our case studies.

You do not buy a €1,600 kamado on a whim

The barrier to purchase is high, the questions are many, and the customer has to decide in a few minutes about something they will keep for ten years. That makes the brief different from a shop selling socks.

So the brief was not "make the product page prettier". It was more specific: fewer people dropping out halfway, more accessories per order, and fewer people who have to email customer service before they dare to buy. The Grill Bill Pro III became the example product everything was worked out on.

Designing a mobile product page starts with three principles

Three things were settled before anything was drawn.

390 pixels wide first, desktop after. Not because mobile-first is a nice phrase, but because every constraint you solve on a phone gets room to breathe on desktop anyway. It never works the other way round: a desktop design you squeeze down always produces a page where something is in the way.

One visual direction out of three. We called it Campfire: petrol as the base, ember orange for everything the customer can touch, a subtle toile pattern in the background and Manrope as the typeface. The other two were tidy, but Campfire felt the most like fire and the least like a webshop template. Beyond that we are not going to talk about colours here.

Everything the customer has to do happens along the bottom. Within thumb reach. That single principle explains half the choices below.

1. The navigation sits at the bottom, not behind three lines

Along the bottom of the screen sits a dock with five places: home, wishlist, menu (the flame button in the middle), chat and basket. No hamburger menu in the top right.

Why: navigation hidden behind an icon gets found less and used less. Nielsen Norman Group has been measuring that for years, on mobile just as much as on desktop. On top of that comes a purely physical argument. You hold a phone in one hand, your thumb reaches the bottom easily and the top right corner only with effort. So the most expensive piece of screen is exactly where most shops put their menu.

The dock slides away as soon as you scroll down and returns as soon as you scroll up. That way the product photo gets the full screen while the customer is reading, and the navigation is back the moment they want to go somewhere.

2. The gallery shows that there is more to see

The next photo peeks in from the right, just enough to make clear that something follows. Next to it sits a counter: 2 / 6. Tapping opens a full-screen lightbox with thumbnails, double-tapping zooms in.

It sounds like a detail, but a gallery where the next photo is not visible often does not get swiped at all. People see one photo and scroll on. On a €1,500 product that is a waste, because the photos are half the sales conversation.

The last slide is a product video. The same video also sits as a separate card under the size picker, labelled "See it in action", for anyone who does not swipe the gallery through.

3. Picking a size is the first decision, so it is not a dropdown

Medium, Large, L Solo and XL sit side by side, each with its own price next to it. No dropdown you have to tap before you can see what there is to choose from.

The reason: the size sets the price, and the price decides whether someone reads on. Hiding that information behind a tap costs you visitors who would otherwise have seen there is a €250 version too.

Sold-out sizes stay on the page, struck through and labelled. That looks counter-intuitive, but it tells the customer something useful: this thing gets bought, and there is more choice than what happens to be in stock today.

4. The price you see is the price you pay

Under the size picker sits a pre-order block: a countdown, what you get with it (a Grate Organizer worth €149 plus a discount) and a note that you can cancel free of charge. The price includes VAT, and underneath it says: free delivery and assembly, no extra costs at the checkout.

That last line is not marketing, it is damage control. According to the Baymard Institute, unexpected extra costs are the main reason people abandon their basket: 39% of those who drop out name delivery costs, taxes or fees as the reason. If those costs are not there, you have to say so at the point where the doubt appears, not at step three of the checkout.

5. Offer accessories as a set, not as a list

Below the product sit three tabs: Beginner, Pro and Fuel. Each tab holds a curated set of accessories with a 20% bundle discount. Tick something and it counts through immediately in the buy button at the bottom: "Add to basket, 1,573.40".

The reason is twofold. A higher order value is the commercial goal, but the real gain is in decision fatigue. Nomad Fire has dozens of accessories. Show dozens and you sell none. Show six under the heading "Pro" and you sell three.

6. One button wins, the rest do not exist

The buy button is sticky, ember orange, always sits just above the dock and shows the current total price including any ticked accessories. There is no second button beside it. No "compare", no "request a quote", no "save for later" carrying equal weight.

Every extra button of the same weight splits the attention. On a page with only one goal, that is loss without gain. Everything else the customer can do is allowed to exist, just not in the same size and colour.

7. The basket is a drawer, not a new page

Tap buy and the basket slides over the product page as a sheet. You do not lose your place. That sheet holds a suggestion ("often bought together"), the payment methods are visible (iDEAL, Klarna, Apple Pay, PayPal) and at the bottom sits a button: save basket for later. That moves the products to the wishlist and sends an email as soon as the price drops.

That is deliberately not a giveaway. On a purchase this size, almost nobody gets there in one session. The question is not whether someone clicks away, but whether you see them again.

8. Advice is the product, so there is a person in the chat

The chat button in the dock shows a photo of Mike, pitmaster, with a green dot when he is online and his average response time beside it. A few questions sit ready in the chat as tappable chips: "Which size suits me?" and "What is the difference with the Pro II?".

On a €1,500 product, advice is not a service but the sales argument itself. That is exactly why a name and a face do more than a chat bubble with a little robot in it. The customer wants to know whether they are about to pick the right one, and that is a question for a human.

9. Make buying possible first, persuade afterwards

Everything below the fold is story: features with tappable hotspots on the outside and the inside, dimensions, what is in the box, the full specs and reviews with customer photos.

That order is a choice. Anyone who has already decided should not have to pass four sections of brand story before they can buy. Anyone still in doubt will scroll on by themselves. The reverse, persuading first and only then showing the button, punishes the customer who was already ready to pay.

This was built, not drawn

The three visual directions were never presented as a static image. They were clickable prototypes, and the choice was made while everyone had them open on their own phone.

After that the whole page was built as working HTML with real interactions: the scroll behaviour of the dock, the sheets, the gallery, the chat and the running total. Not because it looks impressive in a presentation, but because you only feel whether something works when you try it with your thumb while sitting on the sofa. A picture of a sticky button tells you nothing about whether it gets in the way.

Header and footer sit as separate components that every page loads in, so one change works through everywhere. As a last step the design system was exported: colours, type scale, components and the rules around them, so the team building it in the website builder does not have to guess what was meant.

What we do not know yet

This is a design based on research and experience, not on A/B data from this shop. That is an important difference and we are not pretending otherwise. Every choice above is a reasoned bet, some better founded than others.

What gets measured after launch: the add-to-cart ratio on the product page, the attach rate of accessories (what share of orders contains at least one), the number of chats started and the bounce on the product page itself. Only once those figures have been in for three months will we know which of these nine choices actually worked and which merely sounded sensible.

Does this only apply to kamados?

No. This pattern works for any shop whose product needs explaining: a high price, several variants, accessories that complete the purchase, and customers who want to know something before they buy. From kitchen appliances to bikes to machinery for the business.

The specifics differ, the order does not. Make buying possible first, then persuade, and keep everything that counts within thumb reach. If you want to know what this means for your product page, get in touch. Then we will look together at the page that gets you the most traffic.