Averifly

Add-to-cart button and cart page: a checklist for stores

Last updated:

The most direct way to lose a sale is a product page with no way to buy. Every product page needs a clearly visible, working add-to-cart (or buy-now) control, and your cart needs a reachable URL. Both are simple to check and costly to get wrong.

The add-to-cart button

Shoppers decide quickly. If they cannot find the button, or it does nothing, they leave. Check that:

  • The button is visible without hunting, including on mobile, ideally near the price.
  • Its text is plain: "Add to cart" or "Buy now", not only an icon.
  • It is a real button or form submit control, not a styled div with no semantics.
  • Variant choices (size, colour) are clear, and the button explains what is missing when a choice is required.
  • It works with JavaScript slow or blocked, or at least fails with a visible message.

Sold-out products

Do not leave a dead button. Swap it for "Sold out" or a back-in-stock sign-up, and keep stock status consistent in the page text and in your Product structured data.

The cart page

Many themes use only a slide-out drawer. That works for shoppers, but a drawer with no dedicated URL leaves crawlers, shared links and fallback flows without a destination. A reachable cart page such as /cart fixes that.

  1. Give the cart a stable URL, usually /cart.
  2. Link to it from your header or navigation in the page markup.
  3. Do not block it from crawling in a way that hides it from checks that look for it, though you may keep it out of search results with noindex.
  4. Make sure the cart lists items, quantities, totals and a clear checkout button.

Quick test

Open a product page on your phone and try to buy it. Count the taps from landing to cart. Then open /cart directly in a private window. If either step is confusing, a customer will find it confusing too.

Common mistakes

  • Button text set only through an image or icon.
  • A product template that omits the control for some product types.
  • A cart that exists only as JavaScript-driven drawer markup.
  • A buy button that loads late or sits below a long gallery on mobile.

Buyers also need reasons to trust the checkout, so pair this with the trust pages every store needs.

How Averifly helps

Averifly's conversion rules flag product pages with no add-to-cart control and stores where no cart page can be found. See the full list in our rules, then run a free scan to check your own store.

Frequently asked questions

Why does my store need a cart URL if I use a slide-out cart?

A slide-out cart is fine for shoppers, but a dedicated URL such as /cart gives crawlers, links and fallback flows a stable destination. It also helps when JavaScript fails to load.

What should an add-to-cart button say?

Use plain, familiar wording such as 'Add to cart' or 'Buy now'. Clear text is easier for shoppers, assistive technology and automated checks to recognise than an icon alone.

Should the button stay visible when a product is sold out?

Show the real state instead. Replace it with a clear 'Sold out' or 'Notify me' control, and keep stock status consistent in the page text and structured data.