The Product Page Checklist: What Gets Shoppers to Press Add to Cart

A product page that sells works for three kinds of shoppers at once: the one who decides in seconds, the one who already knows what they want, and the one who reads everything before paying. The page that serves all three puts a photo that sells, the price and the button at the top, keeps the details in tabs that open on a tap, and puts proof directly under the button. Then it ends with one last reason to buy. This checklist follows that order.

I have built and tuned product pages for online stores since 1998, and the examples here come from camelway.eu, a store I built and ran. The numbers are first-hand. On October 5, 2026 I opened the demo product page of all 24 free Shopify themes on a phone and on a desktop and recorded what a shopper sees before scrolling.

Who reads your product page?

Three kinds of shoppers land on the same page. Most pages serve one. A page made only for the impulse buyer loses the researcher, and a page made for the researcher buries the button under paragraphs the impulse buyer will never read, so build for the middle.

Shopper	How they decide	What they need	Where it goes
Impulse buyer, quick decision maker	Sees the photo, the price and the button, buys in seconds	A photo that sells, a clear price, one obvious button	The first screen
Product-focused, habitual shopper	Knows the product, checks the size, quantity and delivery	Variants, quantity discounts, the delivery promise	Next to the button
Researcher, cautious shopper	Reads, compares and checks reviews before paying	Details, ingredients, reviews, the reasons to buy here	Tabs and the sections under the button

The product page checklist, from top to bottom

1. Photos that sell the product on their own

Shoppers buy what they see. A sharp, well-lit photo that seems to come out of the screen does more than any sentence on the page, and a dark or blurry one makes the product look cheap whatever it costs. You do not need a studio. A small photo light tent of about 40 x 40 cm (16 x 16 inches) with built-in lights gives clean product shots for little money. A cheap rotating stand lets you film a 360-degree turn of the product. Shopify shows a short video in the product gallery as it is, and WooCommerce does with a gallery plugin.

Google times the first photo too. On every one of the 24 theme demos, on both screen sizes, the Largest Contentful Paint, the moment Google counts as the page loaded, was the main product photo. Upload large, sharp originals and let your platform resize them: Shopify serves a version sized to each screen on its own, and WooCommerce builds smaller copies when you upload. The demos delivered that first photo to a phone at a median of 45 KB.

2. A title and a rating shoppers can trust

Put the stars under the title. Show the number of reviews with them. Stars from a review platform that Google licenses, such as REVIEWS.io, carry more weight than stars a theme draws from its own database. Google collects seller ratings through its own Customer Reviews program and through licensed partners like REVIEWS.io, so the same reviews can also show as stars in Google Shopping and ads.

3. One line of value, then short bullets

The impulse buyer reads one line. Make it the reason to buy, in plain numbers: camelway.eu says that one 300 g pack makes 3 liters of milk. Follow it with three to five short bullets that each name one benefit, and keep the long story, the ingredients and the science for later on the page.

4. Details in tabs that open on a tap

The researcher wants everything. Ingredients, sizes, care, directions and materials go in collapsible tabs under the price, so they are one tap away without pushing the button down the page. In Shopify's free Dawn theme these are Collapsible row blocks in the product information section. WooCommerce shows Description, Additional information and Reviews as tabs by default, and most block themes have an accordion block for the rest.

5. A price with an anchor and a reason to buy more

Show the regular price crossed out next to the sale price only when the regular price is real, and say whether taxes are included. Then reward the habitual shopper. Quantity discounts, such as 5% off four packs and 10% off eight, raise the order value without a coupon code, and showing the saving in money makes it concrete. CartHacker's Volume Discounts Engine is in development for exactly this. It is included in CartHacker Premium and due in Q1 2027.

6. The delivery promise next to the price

Extra costs such as shipping are the most common reason shoppers leave a checkout, so answer them before shoppers get there. Next to the price, state the free shipping threshold, the dispatch cutoff and whether tracking is included, because a shopper who reads "Same-day dispatch: order before 14:00" has the answer to two doubts at once. Show it as a countdown. Why shoppers abandon their carts has free code for one.

7. An Add to cart button a phone can see

On a phone, most free Shopify themes put the button just below the first screen. In my measurement it was fully visible without scrolling on only 6 of the 23 free themes that show one, and its bottom edge sat a median of 1.09 screens down the page. A big photo takes the first screen, which is fine, as long as the button follows close behind and the space between them is short. A sticky bar closes the gap.

Free Shopify themes, demo product page	Phone, 390 x 844	Desktop, 1366 x 768
Add to cart fully visible without scrolling	6 of 23	20 of 23
Main product photo is the Largest Contentful Paint	24 of 24	24 of 24
Main product photo, median size delivered	45 KB	30 KB

Measured on October 5, 2026 in Chrome, one window per page, page not scrolled; on a phone the button was visible on Atelier, Fabric, Pitch, Refresh, Ritual and Tinker. Trade's demo has no Add to cart button.

Under the button, add the express checkout buttons your platform offers, such as Shop Pay, Apple Pay and Google Pay, and the payment icons. A shopper who sees their usual way to pay stops wondering whether it will work.

8. Trust badges under the button

Two to four badges that answer real doubts, such as free shipping, easy returns and secure checkout, belong directly under the button, where the decision happens. Do trust badges work? covers which ones help, which ones the law forbids and how to test them.

9. Social proof directly under the buying area

Researchers scroll for the reviews. Put the reviews directly under the buying area, marked as verified purchases, with photos where customers sent them, and let shoppers filter or sort them by rating and date. Reviews in the shopper's language count twice, because a review nobody can read proves nothing.

10. Why this product, and why from you

After the proof, tell the story: what makes the product better and why buying from you is safe. Short looping videos work well here. On camelway.eu four cards show the powder dissolving, the resealable pack and the label, each a few seconds long and silent, and they show in seconds what a paragraph would take a minute to explain.

11. A closing nudge for the shopper still deciding

End the page with a short block for the shopper who scrolled all the way down: "Still wondering?" Three reasons to order now, such as dispatch speed, the returns promise and what makes the product better, then the product again with its price and a second Add to cart button. That reader is ready now. Nobody should have to scroll back to the top to buy.

12. Text that is easy to read on a phone

Set body text at 16 pixels or more on phones and keep its contrast against the background at 4.5 to 1 or higher, the minimum the Web Content Accessibility Guidelines set for normal text. Light gray text on white looks elegant in a design file and disappears in sunlight. Most shoppers skim. Short paragraphs and bold key words help them.

Code: looping video cards for Shopify and WooCommerce

The code builds four short video cards, two per row on a phone and four on a desktop. Each video loads only when it scrolls into view and pauses when it leaves, so the cards do not slow down the top of the page. Reduced-motion users get still posters.

1. Prepare the videos: 4 to 8 seconds each, no sound, at most 720 pixels wide, saved as MP4 and kept under about 1.5 MB. Export one still frame of each as a JPG poster.
2. Upload them: on Shopify, in Content, then Files; on WooCommerce, in the Media library. Copy each file's address.
3. Paste the code: on Shopify, open Online Store, then Themes, then Customize, open the product template and add a Custom Liquid section. On WooCommerce, add a Custom HTML block to the product description.
4. Replace the addresses and texts: the four video files, the four posters, and the kicker, heading and line of each card.

<section class="why-cards" aria-label="Why shoppers choose this product">
  <h2 class="why-cards__title">Why shoppers choose us</h2>
  <div class="why-cards__grid">
    <figure class="why-card">
      <video class="why-card__video" muted loop playsinline preload="none" poster="https://shop.example.com/files/why-1.jpg" aria-hidden="true">
        <source src="https://shop.example.com/files/why-1.mp4" type="video/mp4">
      </video>
      <figcaption class="why-card__text">
        <span class="why-card__kicker">Dissolves instantly</span>
        <strong class="why-card__head">Smooth in seconds</strong>
        <span class="why-card__line">No clumps in water, coffee or a shaker.</span>
      </figcaption>
    </figure>
    <figure class="why-card">
      <video class="why-card__video" muted loop playsinline preload="none" poster="https://shop.example.com/files/why-2.jpg" aria-hidden="true">
        <source src="https://shop.example.com/files/why-2.mp4" type="video/mp4">
      </video>
      <figcaption class="why-card__text">
        <span class="why-card__kicker">Resealable pack</span>
        <strong class="why-card__head">Stays fresh for weeks</strong>
        <span class="why-card__line">A closure that keeps air and moisture out.</span>
      </figcaption>
    </figure>
    <figure class="why-card">
      <video class="why-card__video" muted loop playsinline preload="none" poster="https://shop.example.com/files/why-3.jpg" aria-hidden="true">
        <source src="https://shop.example.com/files/why-3.mp4" type="video/mp4">
      </video>
      <figcaption class="why-card__text">
        <span class="why-card__kicker">One ingredient</span>
        <strong class="why-card__head">Nothing added</strong>
        <span class="why-card__line">No fillers, no sugar, no preservatives.</span>
      </figcaption>
    </figure>
    <figure class="why-card">
      <video class="why-card__video" muted loop playsinline preload="none" poster="https://shop.example.com/files/why-4.jpg" aria-hidden="true">
        <source src="https://shop.example.com/files/why-4.mp4" type="video/mp4">
      </video>
      <figcaption class="why-card__text">
        <span class="why-card__kicker">Checked every batch</span>
        <strong class="why-card__head">Tested before it ships</strong>
        <span class="why-card__line">Each batch has its lot number and test date.</span>
      </figcaption>
    </figure>
  </div>
</section>

<style>
  .why-cards { max-width: 1100px; margin: 40px auto; padding: 0 16px; }
  .why-cards__title { font-size: clamp(22px, 3vw, 30px); line-height: 1.2; margin: 0 0 18px; }
  .why-cards__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  @media (min-width: 900px) { .why-cards__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
  .why-card { margin: 0; background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 14px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 24px -14px rgba(0, 0, 0, .25); display: flex; flex-direction: column; }
  .why-card__video { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #f1f1f1; }
  .why-card__text { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 4px; }
  .why-card__kicker { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9a6b12; }
  .why-card__head { font-size: 16px; line-height: 1.3; }
  .why-card__line { font-size: 14px; line-height: 1.45; color: #555; }
</style>

<script>
  (function () {
    var videos = document.querySelectorAll('.why-card__video');
    // Shoppers who ask their system for less motion get the still poster.
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    function play(v) { if (v.preload === 'none') v.preload = 'auto'; var p = v.play(); if (p && p.catch) p.catch(function () {}); }
    // Load and play a video only while it is on screen, so the page stays light.
    if (!('IntersectionObserver' in window)) { videos.forEach(play); return; }
    var seen = new IntersectionObserver(function (entries) {
      entries.forEach(function (e) { if (e.isIntersecting) play(e.target); else e.target.pause(); });
    }, { threshold: 0.35 });
    videos.forEach(function (v) { seen.observe(v); });
  })();
</script>

Videos without sound may play on their own in every current browser, except on an iPhone in Low Power Mode, which shows the poster instead, and the playsinline attribute keeps them inside the card on an iPhone instead of opening full screen. I rendered the section in Chrome at 390 and 1200 pixels wide before printing it here: two cards per row on the phone, four on the desktop, no sideways scrolling.

Product page checklist

1. Sharp photos that fill the screen, plus a short video or a 360-degree turn.
2. Title with a star rating from a review platform Google licenses.
3. One line of value and three to five benefit bullets.
4. Details in collapsible tabs under the price.
5. A real anchor price and a quantity discount.
6. The delivery promise next to the price: threshold, cutoff, tracking.
7. Add to cart within one swipe on a phone, or a sticky bar.
8. Express checkout buttons, payment icons and two to four trust badges under the button.
9. Verified reviews under the buying area, with photos.
10. Why this product and why you, in short silent videos.
11. A "Still wondering?" block with a second Add to cart button.
12. Body text of 16 pixels or more with strong contrast.

Product page questions store owners ask

What should a product page include?

Photos that sell, a clear title with a rating, one line of value, the price with any discount, the delivery promise, the Add to cart button with express checkout and payment icons, trust badges, reviews, the reasons to buy from you and a closing nudge. Put the first part on the first screen and everything else in order of the questions shoppers ask.

Where should the Add to cart button be?

Next to the product photo on a desktop, and no more than one swipe below it on a phone. In my measurement of 23 free Shopify theme demos, the button was fully visible on the first phone screen in only 6, so check yours on a real phone and add a sticky bar if it sits further down.

How many product photos should I use?

Enough to answer what a shopper would check in a shop: the front, the back with the label, the product in use, its size next to something familiar, and the details that justify the price. Five to eight sharp photos and one short video cover most products.

Should I add a sticky Add to cart button?

On a phone, usually yes, if your button sits below the first screen. Make sure the bar does not cover the price or the cookie banner, and that it disappears when the real button is on screen.

Sources

• Theme measurement: the demo product page of all 24 free Shopify Theme Store themes, October 5, 2026, Chrome at 390 x 844 and 1366 x 768, one window per page, page not scrolled.
• W3C: Understanding Success Criterion 1.4.3, Contrast (Minimum).
• Google: Largest Contentful Paint. REVIEWS.io: Google Seller Ratings.
• Baymard Institute: Cart abandonment rate statistics, for extra costs as the most common reason to leave a checkout.