Shopify product page: what the design needs to show

The short answer

A Shopify product page is the store screen where the shopper decides whether to buy: it needs to show the real product, let them choose the variant without a mistake, say what the total will cost and take away the fear of buying from someone they do not know. Almost all of that already exists in the theme. What I most often see missing, when I design this page, is order and priority. Baymard research shows that more than half of people start with the photos, and that an unexpected extra cost is the most cited reason for cart abandonment. So the design starts with the gallery and ends at the buy block, with shipping, exchange and timing in sight. Below, what each part of the page needs, why, and how to build it in the theme without depending on an app for everything.

1. The order in which the shopper looks at the page

Someone who lands on a product page does not read from top to bottom. In Baymard usability tests, 56% of participants started by exploring the images, before reading the title or the description. After the photo, the person looks for three things: whether the variant they want exists, how much they will pay in the end and what happens if it goes wrong.

That changes how you draw the page. The top of the page, the part that shows without scrolling, needs the gallery, the name, the price, the variant choice and the buy button. Everything that helps the decision (shipping, exchange, reviews) stays glued to the button, not in the footer. The rest (brand story, related products, long text) comes after.

When I design a product page, I use a simple question for each block: does this help the person decide now? If it does, it moves up. If it is pretty but decides nothing, it moves down or it goes.

If you are building the store from scratch, the page on creating and tuning Shopify stores shows how this work fits into the whole project, together with the theme, the catalog and the checkout.

What Baymard found in large stores

Baymard's product page review, updated in March 2026, evaluated large stores in the United States and Europe. Only 48% of them have a product page considered reasonable or better on desktop. On mobile, the number falls to 38%. A large store, with a user experience team, still gets this wrong. A small store, with a theme installed and never reviewed, usually repeats the same kind of mistake. The good news is that a good part of the mistakes is design and content, not technology.

2. Photo gallery: what it needs to include

The gallery is the most seen part and the one that sells the most. A pretty photo is not enough: each photo needs to answer a question. A gallery that works has at least these image types:

• Clean main photo: the whole product, neutral background, well lit. It is the one that shows in the collection and in the cart.
• In-scale photo: the product next to a hand, a person or a known object. In Baymard research, 42% of people try to understand the size from the photos, and 37% of large stores still do not have this image.
• Photo with a model: for clothing, accessories and anything worn on the body. 23% of the stores reviewed do not have one.
• Detail: stitching, texture, fit, label. This is where zoom needs to work.
• Explanatory photo: the image with an arrow, a measurement or a short sentence highlighting what matters. 52% of sites do not use this kind of photo even on the best-selling products.
• Short video: when the product has movement, assembly or drape.

Size and format on Shopify

Shopify accepts an image, a video, a 3D model and a YouTube or Vimeo video on the product. For a photo, the official recommendation is the 2048 x 2048 px square, the size the help center points to as the one that usually displays best. Keeping every photo in the same proportion stops the gallery from jumping in height when the shopper changes image, a small flaw that feels like a poorly made store.

Thumbnails on mobile

On mobile, many stores show only dots under the photo to say that other photos exist. Baymard saw that only 24% of mobile sites use thumbnails, and that, when the site used only indicators, half of desktop users had trouble finding the other photos. A thumbnail shows what comes next: the person sees that a photo with a model exists and goes straight to it. Check the options in your theme's product section to see whether the gallery can show thumbnails before you think about code.

Alt text is not a detail

Every photo needs alt text. Shopify explains that assistive technology uses it to describe the image to people with a visual impairment, and that it also helps SEO. The limit is 512 characters, but the recommendation is to stay at 125 or fewer. Write what the photo shows, not a repeated keyword: "White leather sneaker seen from the side, beige rubber sole" works; "white sneaker leather sneaker buy sneaker" does not.

3. Variants: keep the choice visible

Color, size, voltage and flavor are variants. They look simple, but this is where many sales stall: the person does not see that their size exists, chooses the wrong one or does not understand why the buy button disappeared.

Baymard's 2026 review shows that 57% of large stores still do not use buttons to choose size. A dropdown hides the options: the shopper has to tap, open, scroll and close to discover what exists. A button shows everything at once and makes it clear what is sold out.

When you design it, follow these rules:

• Buttons for a few options, a list only for many. Sizes from P to GG and three colors fit on buttons. A very long list of numbered sizes might not.
• Color with a swatch, not with a name. "Sand" and "beige" confuse a lot of people. The swatch solves it, and the gallery photo should change with the color.
• Sold out appears struck through or dimmed, it does not vanish. If the size disappears from the screen, the person thinks the store does not carry it. If it appears struck through, they understand it ran out and can ask for a back-in-stock alert.
• A size chart next to the selector. A "see measurements" link beside the size, opening a window or a section just below. Hidden in the footer, it does not get used.
• Selected state with contrast. A thick border or a filled background. A subtle difference in gray does not work, especially in sunlight, on a phone.

The variant also affects the price. If the larger size costs more, the price on the page needs to change the moment the shopper chooses, without reloading and without waiting for the cart to show the difference.

4. Price, shipping and total cost next to the button

This is the part that weighs most on the sale and the one most stores leave for later. On Baymard's list of cart abandonment reasons, not counting people who were only browsing, 40% of people abandoned because of a high extra cost (shipping, fees) and 12% because they could not see or calculate the total cost beforehand. The documented average cart abandonment rate, combining 50 studies, is 70.22%.

The problem is rarely the shipping itself. It is the surprise. If the person discovers the shipping only at checkout, they feel the store hid it, even when the amount is fair. And 67% of the large stores reviewed in 2026 still do not show a total cost estimate near the buy button.

The ideal buy block

Around the "Buy" or "Add to cart" button, the shopper should find, without scrolling:

1. Price with emphasis, and the previous price struck through only when the promotion is real.
2. Payment methods in short form, such as "Pix, card and boleto", with the installment condition the store actually offers.
3. Shipping or a short path to calculate it: a CEP field or the free-shipping rule written directly ("free shipping above R$ X for all of Brazil", if that is your store's case).
4. Delivery or dispatch time, even if it is approximate.
5. A link to exchange and returns, on one line.

If your theme does not have a shipping calculator field on the product page, it can come in through an app or a theme adjustment. Before you install anything, decide the message: sometimes a clear sentence about the shipping rule does more than a calculator.

The button

One button only, with its own color, that does not appear anywhere else on the page. If "Buy" and "See more" share the same color, the eye does not know where to go. On mobile, a fixed bar at the bottom with the price and the button is worth it when the person scrolls to read the description, so the decision does not depend on going back to the top.

After the button comes the checkout, and there the choices are different. If your question is whether to replace Shopify checkout with an external one, the article on Shopify checkout in Brazil: native, Yampi or Cartpanda shows what weighs on that decision.

If your store's product page does not answer these questions in that order, send your current platform, the plan and the URL. If you have not created your Shopify store yet, talk to me before you do: the store is born as a development store, built ready and transferred to your name.

Talk about the project

5. Trust: exchanges, reviews and who the store is

In the same abandonment research, 19% of people gave up because they did not trust the site with their credit card, and 13% because of a poor return policy. Trust is design too: it shows up in details the shopper looks for before paying a store they do not know.

Exchange policy in sight

Baymard's 2026 review shows that 44% of large stores neither show nor link the return policy in the main content of the product page. It is a one-line link. Better still: a sentence with the rule ("exchange within X days, first exchange free"), written to match what the store actually does, and the link to the full policy.

Reviews

A customer review is social proof, but it only works if it is real and if it sits close to the decision. Two design cares:

• Rating and count near the title, with a link that scrolls down to the reviews.
• A browsable customer photo, when one exists. For clothing and sized products, the photo of someone who bought answers a question the studio photo does not.

Replying to a negative review with courtesy also counts. Whoever reads sees that there are people on the other side.

Signs that the store exists

CNPJ in the footer, a visible support channel, an About page with real people and your own domain. A generic security badge, drawn in Canva, weighs less than it seems; what weighs is the store looking cared for in every detail. A crooked photo, text with an error and a price that differs between the page and the cart knock trust down faster than any badge lifts it.

6. Description and specifications: text that can be scanned

After the photo and the price, some people scroll to read. They do not read everything: they look for the answer to one specific question (material, measurement, voltage, how to wash, what comes in the box). The design of the description needs to make that search fast.

• A short first paragraph, with the main benefit. Two or three sentences saying who the product is for and what it solves.
• Specifications in a list or a table, not hidden in the middle of the text. Measurements, weight, material and composition on separate lines.
• Tabs and accordions with care. They organize, but they hide. If the information decides the purchase (measurement, timing, exchange), it should not stay closed.
• What comes in the box, when the product has parts or accessories.

Metafields: the same structure on every product

On Shopify, metafields let you store the product's own information, such as composition, measurements or care instructions, in fields separate from the description. In themes with dynamic sources, those fields can be connected to the theme through the editor. In design practice, that means the spec sheet appears in the same place and with the same look on every product, without depending on someone formatting the description by hand at each registration.

7. Reading, contrast and speed

A pretty page that nobody can read on a phone, or that takes too long to show the main photo, loses the sale before the shopper reaches the button.

Contrast and text size

WCAG criterion 1.4.3, the W3C accessibility reference, asks for contrast of at least 4.5:1 for normal text and 3:1 for large text (from 18 points, or 14 points in bold). On the product page, the points that fail most are a price in light gray, text over a photo and a button with a light color and white text. Test the brand colors in a contrast tool before applying them to the theme. If the brand's main color does not pass with white text, use dark text on the button or darken the tone only for that use.

The main photo is the speed metric

The main photo needs to appear fast. Google measures this by the time until the largest visible piece of the page appears. The target considered good is 2.5 seconds or less, at the 75th percentile of visits. On the product page, that piece is almost always the main photo. An image, a video poster and a background image also enter that count.

For the designer, that becomes three decisions: a photo at the size Shopify recommends, without uploading a giant file "to guarantee quality"; a video that does not play by itself at the top of the page; and no automatic banner carousel above the gallery.

8. How to build the product page in the Shopify theme

Almost everything in this article is solved in the theme editor, without programming. The path I follow:

1. Draw the page before you open the editor. A sketch on paper or in Figma with the order of the blocks: gallery, title, review, price, variant, buy block with shipping and exchange, description, specifications, reviews, related products.
2. Build the default product template with that order in the theme's sections and blocks.
3. Create different templates when the product family asks for it. Shopify allows several product templates and assigning them to products one by one or in bulk, with a limit of 1000 templates in total. Clothing needs a size chart in view; an accessory does not.
4. Standardize the photos and the alt text before you upload the catalog. Fixing it later, product by product, costs much more time.
5. Connect the specifications to metafields so the spec sheet has the same look on every product.
6. Check the structured data. With product structured data, Google can show price, availability, reviews, shipping and the return policy in search. Check with Google's Rich Results Test whether the theme already generates that markup and whether price and availability appear correctly.

Review checklist before publishing

The article on Nuvemshop or Shopify: 12-month total cost helps if you are still deciding the platform before you think about the layout.

Frequently asked questions

How many photos does a product page need?

There is no fixed number. What counts is each photo answering a question: the clean main photo, one in scale, one with a model when the product is worn on the body, details and, if it makes sense, an explanatory photo. For a simple product, a few well chosen photos can be enough.

What is the ideal product photo size on Shopify?

The Shopify help center recommends the 2048 x 2048 px square. The limit is 5000 x 5000 px (25 megapixels) and under 20 MB per file. Keeping every photo in the same proportion keeps the gallery stable.

Do I need an app to show shipping on the product page?

It depends on the theme and on the store's shipping rule. If the rule is simple, a clear sentence near the button can solve it. If shipping varies a lot by region, a CEP field helps, and it can come from an app or a theme adjustment.

Should I use a dropdown or buttons for variants?

Buttons, whenever the options fit on the screen. Baymard shows that 57% of large stores still do not use buttons for size, and the dropdown hides which options exist and which are sold out.

Does Shopify's free theme work for a good product page?

It works as a starting point. Most of what makes the page sell is content and order: the right photos, a clear variant, the cost in sight and the exchange explained. A paid theme helps when the store needs features the free one does not have, not to fix a lack of content.

Conclusion

A product page that sells answers, in the right order, the questions the shopper has: what the product looks like, whether their variant exists, what the total will cost and what happens if it goes wrong. On Shopify, almost all of this is built in the theme editor, with standardized photos, variant buttons, a complete buy block and the spec sheet in metafields. If your store already runs on Shopify and you want a review of the product page, or if you are about to open the store, send a product URL and what you sell. See first how creating and tuning Shopify stores works. If you have not created your Shopify store yet, talk to me before you do: the store is born as a development store, built ready and transferred to your name.

Talk about the project