A product page checklist we use on every build
The product page is where people decide. The things we check before a product template goes live.
We keep a short list for product pages. None of it is new, but it's easy to miss one item when a project gets busy, so we go through it on every build.
Images
- At least one image shows the product at real scale, worn by a person or next to something familiar.
- All images use the same ratio, so the gallery doesn't jump when you swipe.
- Zoom works on mobile, or the images are big enough that nobody needs it.
Price and variants
- The price changes when the variant changes, compare-at price included.
- Sold out variants are clearly marked before the customer taps add to cart.
- When there are many options, the default selection is the one most people buy.
The buy area
- On mobile, the add to cart button is close to the top, or a sticky bar appears once it scrolls out of view.
- Shipping cost or the free shipping threshold is visible near the button, not only in the cart.
- The returns policy is one tap away.
Content that answers questions
Size charts, ingredients, care instructions and dimensions belong on the page. We usually keep them in metafields, so the team can edit them per product without touching code. Reviews help most when they sit near the price with the count visible.
Things that break quietly
- A product with only one variant still shows a variant picker.
- A long product title pushes the price out of view on small phones.
- The "back to collection" link goes to the wrong place when a product sits in several collections.
Before launch we test with the longest title in the catalog, a sold out product and a product with no reviews. Those three catch most layout bugs before a customer does.
We go through this checklist on every Figma to Shopify build.
