Your Shopify Store Looks Beautiful but Isn't Selling: 12 Design Mistakes That Kill Conversions

A note before I start: this is a practical audit guide, not a case study. Any example labelled "hypothetical" is invented to illustrate a point. I'm not quoting client results, revenue figures or test data, and no change below is guaranteed to lift your conversion rate. Where I make a technical claim, I link to the official source.

A founder shows me their store and says the same thing most of the time: "It looks great. Why isn't it selling?" Often the store really does look great. The trouble is that a shopper is not grading the design. A shopper is trying to answer a handful of questions quickly: what is this, is it for me, can I trust it, what will it cost me in total, and how hard is it to buy?

When a store fails to answer those questions, I think of it as conversion friction. It builds up across the whole buying journey, from the first screen to the last checkout field, which is why I look at more than the homepage. I covered the first screen in moving away from traditional Shopify homepage layouts and the sameness problem in I think most Shopify stores look the same; this article is about everything after someone arrives.

Before you blame the design

Design is only one reason a store underperforms, and I would be doing you a disservice if I implied otherwise. Poor sales can come from:

• Traffic quality. Visitors who were never likely to buy will not be rescued by a better layout.
• Pricing. If the price feels wrong against alternatives, no button colour will fix it.
• Product demand. Some products simply have a small or shrinking audience.
• The offer. Weak guarantees, thin bundles or an unclear reason to buy now all count.

So before I recommend a redesign, I try to separate these causes using analytics and, where possible, session recordings. Design problems tend to show up as people who reached the right page and still left: they viewed the product but never added to cart, or they started checkout and stopped.

1. A beautiful first screen that doesn't explain the offer

The symptom. The hero is a lovely image with a poetic headline. I can't tell what it sells or who it is for.

Why it may lose customers. A new visitor decides within moments whether the store is relevant. If they have to scroll or guess, some will simply leave.

What I would change. I would state the product category and the main benefit in plain words in the headline or the line beneath it, show at least one real product or a clear route to the range, and keep one obvious next step.

What I check or measure. I check whether a stranger can describe the store in one sentence after five seconds on the first screen. I also look at hero click-through to collections or products.

2. Mobile layouts that hide products or obstruct buying actions

The symptom. On a phone, the first screen is a tall banner, a sticky announcement bar and a cookie notice, and the products start far below.

Why it may lose customers. Most shoppers will be on a small screen, and stacked overlays can take up a large share of it. A shopper who can't see products or tap the buying button won't work around it.

What I would change. I recommend designing the mobile layout first, then expanding it. I would cap the height of the hero so products peek above the fold, limit sticky elements to one, and make sure the primary buying action is never covered.

What I check or measure. I test on real phones, not just a resized desktop window. I compare mobile and desktop add-to-cart rates separately.

3. Oversized media and too many apps slowing every page

The symptom. Full-width images are uploaded at camera size, a video autoplays on the homepage, and a dozen apps each inject their own scripts. Pages feel heavy, and buttons respond late.

Why it may lose customers. Slow loading and sluggish interaction make a store feel untrustworthy before the design is even noticed. web.dev's Core Web Vitals overview lists Largest Contentful Paint at 2.5 seconds or less, Interaction to Next Paint at 200 milliseconds or less and Cumulative Layout Shift at 0.1 or less as the "good" thresholds, measured at the 75th percentile of page loads.

What I would change. Shopify's theme performance guidance recommends using Shopify's image filters with responsive sizes, loading the main above-the-fold image eagerly with high fetch priority, and auditing apps and tracking scripts to remove anything not worth its cost. web.dev's guide to optimising LCP makes the same point: never lazy-load the LCP image. I would remove apps that no longer earn their place.

What I check or measure. I check field data for mobile first, then lab tests to find the heaviest scripts and images. I look at each template separately.

4. Confusing navigation, search and product discovery

The symptom. The menu uses brand-invented labels, the collections overlap, and search returns odd or empty results for ordinary words a shopper would type.

Why it may lose customers. If search or categories fail, a shopper with real intent may leave without ever seeing the right product.

What I would change. I would rename navigation in the words shoppers use, reduce top-level items, and make search visible and forgiving. Hypothetical example: a tea shop might rename a "Rituals" category "Loose-leaf tea" and keep "Rituals" as a supporting line.

What I check or measure. I review internal search terms and null-result searches.

5. Product imagery that omits scale, detail or use context

The symptom. Every product is a clean cut-out on white, in the same angle. I can see what it looks like, but not how big it is, what the material feels like or how it is used.

Why it may lose customers. Online, the shopper can't pick the product up. If the images leave basic physical questions open, the shopper has to guess, and guessing is a reason to postpone or to buy elsewhere.

What I would change. I recommend a deliberate image set: a clear front view, a detail shot of texture or finish, a scale reference such as a hand or a familiar object, and one image of the product in use.

What I check or measure. I look at gallery interaction rates, how many images people open, and the questions that customer support receives about size or appearance.

6. Product information that leaves purchase questions unanswered

The symptom. The description is two lines of brand copy. Materials, dimensions, care, compatibility, ingredients or what's in the box are missing or buried in an image.

Why it may lose customers. A hesitant shopper looks for reasons to say yes and to stop worrying. Missing specifics push them to leave the page, message you, or abandon the purchase.

What I would change. I would write the description for the buyer's questions, in this order: what it is, who it suits, key specifications, what is included, and care or usage. I would keep important details as real text, not inside images.

What I check or measure. I read the last month of pre-sale support messages and reviews for repeated questions, then check whether the page answers each one.

7. Weak calls to action and confusing variant selection

The symptom. The add-to-cart button is low contrast or visually equal to secondary buttons. Size and colour options are unlabelled swatches, sold-out variants look selectable, and nothing confirms what was chosen.

Why it may lose customers. If the shopper isn't sure what to press or which option they are buying, they hesitate. A wrong variant also creates returns.

What I would change. I would make one primary button obvious, label variants in words as well as swatches, show the selected option clearly, mark unavailable options distinctly, and update price and image when a variant changes.

What I check or measure. I look at add-to-cart rate per product and errors or rapid variant switching in session recordings.

8. Delivery costs, timelines and returns revealed too late

The symptom. Shipping costs, delivery estimates and the returns policy only appear at checkout, or live in a footer page few people open.

Why it may lose customers. Unexpected costs are a classic reason for abandoning a cart. It feels like a surprise when found late.

What I would change. I recommend putting a plain summary near the buy button: where you ship, an honest delivery window, the shipping cost or threshold, and a one-line returns summary.

What I check or measure. I compare the number of people who reach checkout with the number who complete it, and look for drop-offs at the shipping step.

9. Missing or poorly placed authentic trust signals

The symptom. There are no reviews, or a block of generic five-star quotes sits at the bottom of the homepage. Contact details are hard to find, and there is no sign of who is behind the business.

Why it may lose customers. A shopper has to trust a store they have never used with their money and address. Trust signals work when they appear near the decision they support and when they look real.

What I would change. I would place genuine product reviews on product pages and add real contact details and a clear business identity. I would never recommend invented testimonials or badges you haven't earned.

What I check or measure. I check whether reviews exist on the products that get traffic, whether the contact page is reachable in one click, and how people behave on pages that have reviews compared with those that do not.

10. Intrusive popups, competing promotions and distracting motion

The symptom. A discount popup appears within seconds. The announcement bar, a banner and a sticky badge each promote a different offer, and elements slide or flash while I'm trying to read.

Why it may lose customers. Each interruption competes with the product for attention. Several promotions make it unclear which deal applies. Per Shopify's theme performance guidance, dialogs should also not become the largest element on the page.

What I would change. I would show one primary promotion at a time, delay any popup until the shopper has had a chance to engage, make dismissal easy on touch screens, and reduce animation to what helps comprehension.

What I check or measure. I check the popup's dismissal rate, its effect on engagement over time, and whether I can complete a product view on mobile without having to close something.

11. Accessibility problems with contrast, labels, focus and controls

The symptom. Light grey text on a pale background, icon-only buttons with no names, form fields that rely only on placeholder text, no visible keyboard focus, and tiny tap targets.

Why it may lose customers. These problems affect many people: those with low vision, motor impairments or temporary limitations, as well as anyone using a phone in bright light. WCAG 2.2 Contrast (Minimum) asks for a contrast ratio of at least 4.5:1 for regular text and 3:1 for large text. Focus Visible requires a visible keyboard focus indicator, and Target Size (Minimum) sets a minimum pointer target of 24 by 24 CSS pixels, with some exceptions.

What I would change. I would raise contrast on text and key controls, give every control an accessible name, use real labels on form fields (see web.dev's guidance on labels and Labels or Instructions), keep a clear focus style, and make tap targets comfortably large. This is not a full accessibility audit.

What I check or measure. I tab through the buying journey with a keyboard, run an automated contrast check, and try the store at a larger text size. Automated tools catch only part of the problem.

12. Cart and checkout friction, including unclear errors and unnecessary steps

The symptom. The cart hides the total, the checkout asks for an account, an error says only "Invalid", and a promo-code field draws shoppers away to hunt for codes.

Why it may lose customers. At this stage the shopper has already decided to buy, so every bit of friction is costly. Unclear errors fail the basic requirement described in Error Identification: when an error is detected, the item in error should be identified and described in text.

What I would change. I would keep the cart clear about totals and next steps, offer guest checkout where possible, and remove optional fields that don't need to be there. On checkout, the limits matter. Per Shopify's checkout customisation documentation, merchants extend checkout with Shopify Extensions rather than old-style theme code, and according to the checkout UI extensions documentation, extensions on the information, shipping and payment steps are available only to stores on a Shopify Plus plan. The checkout documentation also says checkout.liquid is unsupported for those steps, and gives 26 August 2026 as the sunset date for script tags on the Thank you and Order status pages for non-Plus stores. Plans and features change, so I verify the current position before promising any checkout change.

What I check or measure. I look at funnel steps from cart to payment and the fields where people stall. I trigger errors deliberately to see how they read.

A prioritised audit checklist

I wouldn't fix all twelve at once. This is the order I would work in.

1. Confirm the problem is not traffic or offer. Check source quality, price and offer clarity.
2. Fix anything that blocks buying. Covered buttons, broken variants and checkout errors come first.
3. Fix mobile. Overlays, sticky elements and tap targets.
4. Remove speed drags. Oversized images, unused apps and render-blocking scripts.
5. Answer the buyer's questions. Product information, imagery, delivery and returns.
6. Add genuine trust signals where decisions are made.
7. Simplify discovery. Navigation, search and filters.
8. Calm the noise. Popups, competing promotions and motion.
9. Polish accessibility in parallel, since it supports every item above.

How I would measure whether it worked

It is tempting to change ten things and then credit the redesign for whatever happens next. I prefer a calmer approach.

• Set a baseline first. Record conversion rate, add-to-cart rate, checkout completion and Core Web Vitals, split by device and traffic source.
• Change in small groups, so results are easier to interpret.
• Be honest about traffic. Small stores often lack the traffic for fast statistical tests, so I would lean on funnel behaviour and qualitative evidence and state the uncertainty.
• Watch for outside effects. Sales, seasons and ad changes move numbers too.

None of this guarantees a result, but it helps separate improvement from noise.

Frequently asked questions

Can design alone fix low Shopify sales?

Not usually. Design can remove friction and build clarity, but traffic quality, pricing, product demand and the offer all matter too. I try to rule those out first.

Where should I start if I can only fix a few things?

I would start with anything that blocks buying on mobile, then page speed, then the product page information. The checklist above is ordered with that in mind.

Can I customise Shopify checkout freely?

Not freely. Checkout is customised through Shopify's supported extensions, and some options depend on your plan. Check the current documentation for your plan before planning changes.

If you'd like a second pair of eyes

If you'd like a structured review of your store's buying journey, I offer Shopify UI/UX design, and you are welcome to get in touch to talk through what you're seeing.