Design for mobile first
On most stores a large share of visits come from mobile, so the product page is designed first for a narrow screen. The first screen should show the main photo, the name and the price and, without much scrolling, the variant picker and the buy button.
A sticky add to cart bar that appears as you scroll helps on long product pages. Make sure it does not cover content, does not cause layout shifts when it appears and that the button is comfortable to tap with a thumb.
Photos that stand in for holding the product
Shoppers cannot touch the product, so the photos have to show what they would see in a physical store: the full product on a neutral background, close-ups of materials and finishes, the product in use and a size reference. A short video helps for products where movement or texture matters.
Assign an image to each variant so that choosing a color shows that color in the gallery. Shopify lets you link images to variants from the admin, and the theme needs to react to the variant change. Fill in the alt text for each photo and upload them at a reasonable size so they do not slow the page down.
Clear variants
Variants are defined with options like size, color or capacity. Show them as buttons or color swatches instead of dropdowns when there are few options: they can be seen at a glance and picked with one tap. Sold out combinations should be clearly marked instead of disappearing without explanation.
If you sell clothing or footwear, link the size guide next to the picker, not at the bottom of the page. And if a variant changes the price or the shipping time, the product page has to update when it is selected.
Price, shipping and delivery times without surprises
The price must be shown with IVA (Spanish VAT) included, as consumer law in Spain requires, along with the previous price if there is a genuine discount. If you sell by weight or volume, Shopify lets you show the unit price.
Finding out the shipping cost at checkout is one of the common reasons for abandonment. Show the shipping cost or the free shipping threshold on the product page, along with an estimated delivery time. If the delivery time depends on stock or origin, store it in a metafield per product or per variant so the information is right in every case.
- Final price including VAT and, where it applies, the unit price.
- Shipping cost or the order value for free shipping.
- Estimated delivery time and carrier.
- Available payment methods, without a wall of logos.
Returns and warranties in plain sight
In the European Union, consumers have the right to withdraw from an online purchase within 14 calendar days. Explaining how this works in your store, whether returns are free and how to request one, reduces doubts at the moment of buying. A one line summary next to the button and a link to the full policy are usually enough.
If your product has a manufacturer warranty, spare parts or repair service, say so too. These details carry weight for mid and high priced products.
Avoid hiding these terms in the footer or writing them in legal language on the product page. Shoppers want to know in one sentence how many days they have, who pays for return shipping and how long the refund takes.
Customer reviews
Reviews answer the question no description can: what people who already bought it think. Place an average rating next to the title that links to the full section further down, and let shoppers filter by rating or by photos if you have the volume.
For reviews, a specialized app is usually worth it, because it handles post-delivery review requests by email, moderation and structured data markup. Choose one that integrates with theme blocks and check that it does not duplicate the product markup your theme already includes.
Technical details with metafields
Composition, dimensions, care instructions, compatibility or downloadable spec sheets should not be mixed into a single description block. Shopify lets you create metafield definitions for products and variants, with types such as text, number, file or reference, and connect them to theme blocks through dynamic sources.
The benefit is twofold: your team fills in tidy fields in the admin, and the product page always shows them in the same place, for example in tabs or accordions. For information that repeats across products, like a size chart per brand, metaobjects let you create it once and reference it from each product page.
Review the product page with data
Once it is live, look at the add to cart rate per product in Shopify's reports and compare similar product pages. A page with lots of visits and few add to carts usually has a specific problem: an unclear price, not enough photos or unanswered questions.
At Weblineo we design and develop custom product pages in the theme code, with metafields so your team can maintain them without depending on anyone, and with training included.
Frequently asked questions
How many photos should a product page have?
As many as it takes to show the whole product, its details, its size and its use. It matters more that each photo answers a question than the total number.
What are metafields in Shopify?
They are custom fields you add to products, variants, collections or other objects to store extra information and display it in the theme in a structured way.
Do I need an app to show the delivery time?
Not necessarily. You can store the delivery time in a metafield and display it with a theme block. An app is only worth it if the calculation depends on complex rules.
Is a long or a short description better?
A brief intro with the essentials at the top and the detailed information organized further down, in blocks or tabs, works better than a single long text.