Product page design for Shopify stores: what shoppers look for

Good product page design answers a shopper's questions in the order the shopper asks them: on a phone's first screen, the main image, the product name, the price, the options and the buy button; then images of the product in use, its key detail, its size and every variant; then a description, a specifications block, a size chart beside the size options, and delivery, returns and reviews near the buy button. On a Shopify store every one of these choices is the seller's, unlike a marketplace page, which is mostly designed for the seller. Product structured data with the price and availability helps search engines read the page, and Google documents which properties it reads.

What makes a good ecommerce product page?

A good ecommerce product page answers each question a shopper has at the point the shopper has it, and puts nothing in the way of the product. On a marketplace such as Amazon or Etsy, the product page layout is fixed and the seller fills in fields. On a Shopify store, the seller decides what the shopper sees first, the order of the images, where the size chart sits and how delivery and returns are explained. That freedom helps only when the page follows the shopper's questions.

The rest of this page works through a Shopify product page from the top, as a shopper on a phone meets it, and ends with the structured data search engines read.

What should the first screen of a product page show on a phone?

The first screen of a product page on a phone, before any scrolling, should show five things:

• The main image, large, showing the product clearly.
• The product name, saying what the product is in plain words.
• The price, with any variant price differences clear.
• The options, such as colour and size, if the product has them.
• The buy button.

A first screen taken up by a banner, a promotion bar and a logo, with the product pushed below, makes the shopper work before seeing the product. A quick test: open a product on a phone and take a screenshot before scrolling. If the product, its name, its price and the buy button are not all in the screenshot, simplify the top of the page.

In what order should product images go?

Product images on a Shopify product page should answer questions in the order shoppers have them:

1. The product, clearly, on a plain or simple background.
2. The product in use, showing who it is for and how big it is.
3. The detail that matters most: the material, the mechanism or the finish.
4. Size, in a hand, on a person or with measurements.
5. Each variant, assigned to its option, so choosing "navy" shows navy.
6. What arrives: every piece and the packaging.
7. A size chart, where size matters.

Shopify's product media takes images, video and 3D models, so a short video or a turnable model can sit in the gallery too. Add alt text to every image: a sentence describing what the image shows, which screen readers read aloud and search engines read too.

A store that feeds Google Shopping should keep the first image clean of badges and text, because Google does not allow promotional overlays on the main product image. The guide to Shopify product image size covers image sizes and shapes, and the guide to Google Shopping image rules covers what Merchant Center refuses.

How should a product description and specifications be laid out?

A shopper still deciding after the buy button reads on, and needs two things:

A description that opens with what the product is and who it is for, then the details that matter: how the product is used, what it is made of and how to care for it. Short paragraphs and specifics over adjectives make a product description readable on a phone. The guide on how to write product descriptions covers the method.

A specifications block: a short list of the facts shoppers compare, such as dimensions, weight, materials, capacity, compatibility, what is in the box and care. On a phone, a list of label and value lines reads better than a wide table.

The facts on a Shopify product page should be identical to the seller's marketplace listings, because shoppers compare. Salsify's 2025 survey of US and UK shoppers reports that 54% had abandoned a purchase because of conflicting product information.

Where should the size chart go on a product page?

The size chart should sit beside the size options, as a link or a pop-up, not at the bottom of the page. For anything sold in sizes, size decides both the sale and the return:

• Put the size chart beside the size options.
• Show garment measurements for each size, in the units the store's shoppers use.
• Add one line on fit, such as "relaxed fit; between sizes, size down".
• Show the model's size and height on images of clothing worn.

The guide to size charts covers building one.

How should a product page show delivery, returns and reviews?

Shoppers buying from a store they do not know look for reassurance near the buy button, not only in the footer:

Write the delivery and returns lines plainly and keep them true. A delivery promise a store cannot keep turns a sale into a complaint.

What should go below the fold on a product page?

Shoppers who scroll past the description are looking for a reason to buy or a reason not to, and the lower part of a product page should give the first and remove the second:

• Questions and answers: the questions customers send most, answered on the page, such as "Does it fit a 15-inch laptop?" or "Is the lid dishwasher safe?".
• How to use or care for the product, in a few short steps, with images where they help.
• Related products that go with this product, not a random grid.
• The full reviews, with photos from buyers where the store has them.

Every question answered on the product page is one fewer message to the store, and one fewer shopper who leaves to ask elsewhere.

How should variants appear on a Shopify product page?

Variants are where product pages most often confuse shoppers. Four habits keep variants clear:

• Show every option clearly, with colour swatches where colour matters.
• Change the image when the option changes. Shopify lets a seller assign images to variants.
• Show stock by variant, so a shopper does not choose a size that is sold out.
• Keep the price visible as options change it.

Does Shopify product page design affect search?

Yes, through the page's search title and description, its alt text and its structured data. Shopify lets a seller set each product's page title and description for search, which is where the product's main phrase belongs. Alt text on product media describes each image for screen readers and search engines.

Product structured data is a block of code that states a product's name, image, price, availability and reviews in a standard format, and search engines read a product page more reliably when it carries it. Google's documentation for product structured data explains which properties Google reads. Most Shopify themes add basic product structured data; check that the theme includes the price and availability, and that the details match the page.

How fast should a product page load?

A product page that loads slowly on mobile data is a page many shoppers never see. Keep product images at a sensible size and compress them, as the guide to Shopify product image size explains; limit apps that add scripts to the product page; and test the page on a phone, away from office wifi.

What does a well-designed product page look like?

A made-up product, a stoneware mug, laid out for a phone:

1. Gallery: the mug on white; the mug in a hand with coffee; the glaze close up; the mug beside a standard mug for size; the three colours; the gift box.
2. Name and price: "Stoneware mug, speckled white, 350 ml", with the price beside it.
3. Options: three colour swatches, each changing the image.
4. Buy button, with the store's delivery time and returns window in one line under it.
5. Description: two short paragraphs on what the mug is and how it is made.
6. Specifications: height, width, capacity, material and care.
7. Questions and answers, then reviews.

Nothing on the mug's product page is decoration: each part answers a question a shopper has at that point on the page.

A product page checklist

1. The first screen on a phone shows the main image, name, price, options and the buy button.
2. Images in the order shoppers ask: product, use, detail, size, variants, contents.
3. Alt text on every image.
4. A clean first image for Google Shopping.
5. A description that opens with what the product is and who it is for.
6. A specifications block with the facts shoppers compare.
7. A size chart beside the size options.
8. Delivery, returns and reviews near the buy button.
9. Structured data with price and availability.
10. The same facts as the marketplace listings.

How Commicorn helps

• The images, in the order shoppers need them: a clean main image on white, lifestyle scenes, feature callouts, Dimensions, What's in the set and Size chart images, square at 2,000 pixels or more.
• The words: a product description and specifications from your facts, the same facts as your marketplace listings.
• Your Shopify store on every plan, beside your marketplaces.

Commicorn makes the images and words for your Shopify product page. Start free.

Questions sellers ask

What should be at the top of a product page?

The main image, the product name, the price, the options and the buy button, all visible on a phone before any scrolling.

How many images should a Shopify product page have?

Enough to answer each question in order: the product clearly, the product in use, its key detail, its size, each variant and what arrives, plus a size chart where size matters. Shopify's product media also takes video and 3D models.

Does alt text on product images matter?

Yes. Alt text describes each image for screen readers, which read it aloud, and search engines read it too; Shopify lets a seller add alt text to each item of product media.

Should a Shopify product page match the marketplace listings?

Yes. Salsify's 2025 survey of US and UK shoppers reports that 54% had abandoned a purchase because of conflicting product information.

What is product structured data?

Product structured data is code on a product page that states the product's name, image, price, availability and reviews in a standard format; Google's documentation lists the properties it reads.