Skip to content

Services Pricing Resources About

Services Pricing Resources About Send a note

Resources
Shopify product page checklist

Shopify product page checklist

The product page is where a shopper decides. Tick through these checks on your own page, on a phone first, and see where it stands.

ChecklistAbout 15 minutesReviewed October 2026

How to use it

Open one of your best-selling product pages on your phone, then on a laptop. Tick each statement that’s already true. Whatever stays unticked is a candidate fix, and the ones closest to the buy button usually matter most.

Each check comes from published usability research by Baymard Institute and Nielsen Norman Group, Shopify’s own theme requirements, or the WCAG 2.2 accessibility standard. The numbers next to each one link to the source.

Images and mediaEvery product has at least three to five images showing different angles and details.Shoppers rely on product images to judge a product, and one view rarely answers their questions.[2][12]At least one image shows the product at scale, next to a person or an everyday object. Anything worn is shown on a person.In Baymard’s testing, 42% of shoppers tried to judge a product’s size from its images, and without an image showing scale, that was needlessly difficult.[1]Images stay sharp when zoomed, and zoom works on desktop and on phones.In Baymard’s testing, 56% of shoppers started by exploring the product images. Blurry or unzoomable images led some to abandon products they wanted.[3][16]Choosing a variant, like a color, switches the main image to that variant.Shoppers want to see the exact version they’re about to buy. Shopify requires it of every theme in its Theme Store.[13][15]Product videos and 3D models sit inside the main image gallery, not further down the page.Shoppers expect video next to the photos. When it was placed far from the gallery, some shoppers had trouble finding it.[4]

Price, variants and optionsSizes and other key options appear as visible buttons, not hidden in a dropdown.A dropdown hides which sizes exist, and which are sold out, until the shopper opens it.[1]Choosing a variant updates the price, sale price and stock status at once, and sold-out combinations are marked before anyone tries to add them.Shoppers shouldn’t discover in the cart that their size or color isn’t available.[12][13]Products sold in several sizes or quantities show a price per unit, like per ounce or per serving.Without it, shoppers can’t tell which size is the better value. Some regions require it by law.[1][17]On sale items, the sale price and the original price both show, and screen readers can tell which is which.A struck-through price only means something if the shopper can see, or hear, which price is current.[14]

The buy box and add to cartThe Add to cart button has a style no other button on the page uses.Look-alike buttons make shoppers hesitate at the moment they’re ready to buy.[2]After Add to cart, a clearly visible drawer, overlay or page confirms what was added and offers checkout or continue shopping.When the confirmation is easy to miss, shoppers either think nothing happened or add the item twice.[12]Accelerated checkout buttons, like Shop Pay and Apple Pay, are turned on for the product page.A shopper buying one item can go straight to checkout without opening the cart.[18][13]An item that’s only temporarily out of stock can still be ordered, with the later ship date stated, instead of a dead-end “Sold out”.Baymard found that about 30% of shoppers told only that an item is out of stock are likely to leave and look for it elsewhere.[5][19]

Shipping, returns and deliveryThe lowest shipping cost, or the free-shipping threshold, is stated near the buy button, not only in a banner.In Baymard’s survey of US shoppers, leaving aside those just browsing, 40% of those who abandoned an order said extra costs like shipping, tax or fees were too high. Showing the cost early means it isn’t a surprise at checkout.[1][6]Delivery is shown as a date, like “Arrives by Thursday”, not only a speed like “3 to 5 business days”.Given only a speed, shoppers in Baymard’s testing stopped to work out when the order would arrive, which led to hesitation and sometimes abandonment.[7]The product page links to the return policy, or sums it up in plain words, not only in the footer.In a Baymard survey of 1,032 shoppers, 60% said they look for the return policy on the product page.[1][20]

Reviews and trustReviews open with a five-to-one-star breakdown with counts, and each bar filters the reviews to that rating.In Baymard’s testing, shoppers relied on the breakdown even more than the review text, and many go looking for the negative reviews.[8][9]The store replies to negative reviews, and its replies look different from customer reviews.Shoppers in Baymard’s testing read a reply as a sign of care and reachable support.[1][9]

Product informationThe first lines of the description say plainly what the product is and does, and any jargon is explained.Shoppers skim, and read the start more than the end. Complete descriptions help shoppers buy the right item.[12]Every variant has the same information, like dimensions or servings for every size.Shoppers compare variants side by side, and missing details stop them.[12]Description, specs, shipping and reviews sit on the page itself, expanded or in sections that open downward, not behind horizontal tabs.In Baymard’s testing, shoppers repeatedly overlooked content that could only be reached through horizontal tabs.[10]

MobileOn phones, extra images show as thumbnails, not only as dots.Dots are hard to tap and give no hint of what the other images show.[11]Add to cart, size and color options, and the quantity buttons are at least 44 by 44 pixels.Small targets cause mis-taps. Shopify asks for 44 pixels on primary controls, and WCAG 2.2 sets 24 pixels as the minimum.[14][23]At 320 pixels wide, the page works without scrolling sideways.Small phones and zoomed-in browsers otherwise cut off prices, options or buttons.[24]

Accessibility and speedEvery product image has short, descriptive alt text.Screen reader users rely on it. Shopify recommends 125 characters or fewer.[21][23]Screen readers announce price and stock changes after a variant is chosen, and announce the add-to-cart confirmation.Otherwise a blind shopper can’t tell that anything changed.[14][25]The variant picker works by keyboard with a visible focus ring, each option group has a visible label, and the selected option is shown by more than color.Keyboard users and color-blind shoppers need to choose a variant and see what they chose.[23][13]Product videos and slideshows don’t play on their own, or can be paused.Motion that starts by itself distracts shoppers and gets in the way of screen readers.[14][23]Product pages pass Core Web Vitals on phones: largest paint within 2.5 seconds, responses within 200 milliseconds, layout shift of 0.1 or less.These are Google’s thresholds for a good experience. Shopify’s web performance report shows them for your store from real visits.[26][22]The main product image isn’t lazy-loaded, and every image and video has its size set so the page doesn’t jump.Lazy-loading the first image slows the page down, and images without a size make the layout shift as they load.[27][28]

Sources

Baymard Institute, Product Page UX Best Practices 2026 (opens in a new tab)
Baymard Institute, 35 Data-Driven Ecommerce Best Practices (opens in a new tab)
Baymard Institute, 25% of E-Commerce Sites Don’t Have Product Images with Sufficient Resolution or Level of Zoom (opens in a new tab)
Baymard Institute, UX Research on Product Page Videos: Where and How to Embed Them (opens in a new tab)
Baymard Institute, Allow Users to Purchase Temporarily “Out of Stock” Products by Increasing the Delivery Time (opens in a new tab)
Baymard Institute, Cart Abandonment Rate Statistics (opens in a new tab)
Baymard Institute, Use “Delivery Date” Not “Shipping Speed” (opens in a new tab)
Baymard Institute, Ratings Design UX Research: 5 Requirements for the “Ratings Distribution Summary” (opens in a new tab)
Baymard Institute, E-Commerce Sites Need to Respond to Some or All Negative User Reviews (opens in a new tab)
Baymard Institute, Avoid Using “Horizontal Tabs” for the Main Product Page Sections (opens in a new tab)
Baymard Institute, Always Use Thumbnails to Represent Additional Product Images (opens in a new tab)
Nielsen Norman Group, UX Guidelines for Ecommerce Product Pages (opens in a new tab)
Shopify, Theme Store requirements (opens in a new tab)
Shopify, Accessibility best practices for Shopify themes (opens in a new tab)
Shopify Help Center, Adding images to product variants (opens in a new tab)
Shopify Help Center, Product media types (opens in a new tab)
Shopify Help Center, Displaying unit prices for products (opens in a new tab)
Shopify Help Center, Accelerated checkout buttons (opens in a new tab)
Shopify Help Center, Selling out of stock products (opens in a new tab)
Shopify Help Center, Adding store policies (opens in a new tab)
Shopify Help Center, Adding alt text to media (opens in a new tab)
Shopify Help Center, Web performance reports (opens in a new tab)
W3C, Web Content Accessibility Guidelines (WCAG) 2.2 (opens in a new tab)
W3C, Understanding Success Criterion 1.4.10: Reflow (opens in a new tab)
W3C, Understanding Success Criterion 4.1.3: Status Messages (opens in a new tab)
web.dev, Web Vitals (opens in a new tab)
web.dev, Browser-level image lazy loading for the web (opens in a new tab)
web.dev, Optimize Cumulative Layout Shift (opens in a new tab)

Want this done for you?

The Product page sprint designs and builds one product template around these checks, for desktop and mobile.

Product page sprint

Help shoppers make a confident choice.

$3,500 2 to 3 weeks

What needs attention on your store?

Pick a service and check out, or send a short note about what you want to improve. Either way, you work with me, and you get a written scope before work starts.

Strategy, design, and development for Shopify brands.

Services Pricing Resources About

(opens in a new tab)

UX Growth Lab is a Shopify Partner.

© 2026 UX Growth LabLinkedIn (opens in a new tab)Privacy Terms Refunds Accessibility

UX Growth Lab is the business name of Vincent M. Dawson (Vinney), a sole proprietor in California. Questions, or a mailing address: vinney@uxgrowthlab.com

Your cart

Nothing here yet. Pick a fixed-price service, or start with the audit.

Browse services

You’ll work directly with Vinney, from the kickoff call to launch.