The product page is where a store earns its money, and it is the page owners look at least. They see it every day from the admin side, with the product already in their head. The customer arrives with a question and about ten seconds of patience.
I design and code the product pages for Skin Boutique Online, a skincare store on Shopify. The catalogue there is full of products with long names, several sizes and a lot to explain. This is the order I use, and it works for most stores that sell physical products.
The first screen on a phone
Open your product page on a phone and do not scroll. What you see now is all that many visitors will ever see.
It should hold five things:
- a photo of the product
- the name
- the price
- the variant choice, if there is one
- the button to buy
If the button is below the fold on a common phone, something above it is too big. Usually it is the photo, a long title that wraps to four lines or a strip of badges.
A one-line summary under the name helps a lot. “Lightweight moisturiser for oily skin” tells a visitor in three seconds whether to keep reading. Without it they have to work that out from the photo.
Photos
The photo gallery answers three questions a description cannot.
What does it look like? A clean shot on a plain background, the same style for every product in the store.
How big is it? A hand holding it, or the product beside something familiar. Size is easy to misjudge from a photo on a white background.
What is it like to use? The texture on skin, the fabric up close, the device switched on.
Keep the first image consistent across the catalogue. That image is also the one on the collection page, and a shelf of matching photos looks like one store.
On a phone, let people swipe the gallery and show them there is more than one image. Small dots or a visible edge of the next photo is enough.
Variants
Variants are where product pages break most often.
When a visitor picks a size or a colour, four things should update together: the photo, the price, the stock message and the button. If one of them lags, people lose trust in the other three.
Show the options as buttons when there are few of them. A dropdown hides the choices and adds a tap. Use the dropdown only when the list is long.
Mark what is sold out without hiding it. A greyed-out size tells the customer the product exists in that size, and lets them ask when it is back.
The order below the button
Once someone scrolls, they are interested. Now the page has to answer their questions in a sensible order. This is the one I use.
1. The short description
Two or three sentences. What it is, who it is for and the main reason to choose it. Write it for someone who will read nothing else.
2. Delivery and returns
One line each, close to the button. When will it arrive, what does delivery cost and can I send it back. People look for this before they commit, and if they cannot find it they open a new tab to look, and some do not come back.
3. How to use it
Steps, in order, in plain words. For skincare that means when in the routine and how much. For other products it might be assembly, care or sizing.
4. What is in it
Ingredients, materials or specifications. Put them in a fixed place with a fixed heading on every product. A returning customer should know exactly where to tap.
5. Reviews
If you have them, show the count and the average near the top and the reviews themselves lower down. A few detailed reviews do more than a wall of five-star one-liners.
If you have none yet, leave the section out. An empty reviews block reads as “nobody has bought this”.
6. What goes with it
One or two products that are used with this one. For skincare, the next step in the routine. Keep it to things that are true companions. A random “you may also like” row adds noise.
Collapsible sections or one long page
Themes offer both. Tabs and collapsible rows keep the page short. A long page shows everything.
I use collapsible rows for reference material people look up: full ingredients, delivery details, care instructions. I leave the short description and the usage steps open, because those are the parts that persuade.
Avoid tabs that sit side by side on a phone. They are hard to tap and easy to miss.
When the theme is not enough
A current Shopify theme handles most of the above from the editor. You run out of road when you need something specific to your products.
Common cases:
- an ingredient or specification table
- a routine or a set shown as steps
- a comparison with another product in your range
- a different layout for one type of product
Shopify lets you assign a different template to different products, so a device can have a page built differently from a cream. The special sections themselves usually need custom code. That is developer work, and I explain the split in Shopify designer or developer.
When you have a section built, ask that it comes with its own settings in the theme editor. You should be able to change the text and the images without opening a code file.
Product page SEO, briefly
A few things on this page matter for search.
- The title. Use the name people search for, with the brand and the size if they matter. Keep it readable.
- The description. Write your own. Text copied from a supplier is on many other stores as well.
- The image alt text. Say what the image shows.
- The address. Short and stable. If you change it, redirect the old one.
Shopify adds product structured data through most themes. Check that the price and stock shown to Google match the page, since apps sometimes add a second copy that disagrees.
Check it on a phone
Before you call the page done, go through this on a real phone, not a resized browser window:
- Is the buy button on the first screen?
- Can you change the variant with one thumb?
- Does the photo change when the variant does?
- Can you find delivery cost without leaving the page?
- Is the text large enough to read at arm’s length?
- Does anything jump or shift while the page loads?
Do the same on the product with the longest name and the most variants. If the page survives that one, it will survive the rest.
Where to start
Do not redesign every product page at once. Take the best seller. Fix its first screen, then the order below it. Release it and compare it with the weeks before.
If you want help with that page, send me the store address and the product. Here is what I do for Shopify stores, and here is where to start a project.
