The Shopify checkout that’s bleeding you the most money probably looks fine when you test it on your laptop. It loads without errors and the buttons sit where they should. Everything functions, which is precisely why so many store owners never look deeper. But function and conversion are different things entirely, and most ecommerce CRO problems on Shopify sit in that gap between a store that technically works and one that actually sells.
I’ve spent the better part of a decade split-testing Shopify product pages and cart flows alongside collection layouts, and the same friction points crop up in nearly every audit.
Each one is a small leak on its own, barely visible in the analytics, but enough small leaks running at once will sink a store’s conversion rate without anyone spotting a single catastrophic event. This guide covers the ecommerce CRO changes that consistently make a real difference, grouped into five sections: product pages, collection pages, cart and checkout, navigation, and site speed.
Product Pages
Never Delete Out-of-Stock Product Pages
Pulling an out-of-stock page off your site throws away every backlink and ranking signal that URL has accumulated. That equity took months to build. Gone in one click.
Keep the page live and show three or four close alternatives near the top so visitors still find what they came for. Add a ‘notify me when back in stock’ email capture. Back-in-stock alerts are the highest-converting automated email type in Omnisend’s benchmarks, and Klaviyo makes the automation dead simple. The page stays indexed and the visitor gets pointed towards a sale. You’ve not binned months of link equity for nothing.
Countdown Timers for Next-Day Delivery Cut-Offs
A live countdown showing ‘Order within 2h 47m for delivery tomorrow’ creates time pressure that static text never will. The key is accuracy. If the timer promises next-day and the parcel arrives three days later, you’ve torched trust for one conversion.
Your timer has to reflect real courier collection times, which vary by postcode. A Manchester warehouse shipping with DPD might have until 7pm for next-day, whilst rural Scotland needs orders by 2pm. Apps like Essential Countdown Timer on Shopify handle this postcode logic.
Bodging it with a generic timer that resets at midnight is worse than no timer at all.
Low Stock Indicators and Scarcity
Showing ‘Only 3 left’ or ‘1 remaining in size M’ gives shoppers useful information that happens to accelerate decisions. The critical bit is honesty, and it’s the same principle that applies to any urgency and scarcity tactic. Set the threshold at five units or fewer. If you’re displaying scarcity warnings with 200 units in the warehouse, customers will notice the same message sitting there a fortnight later and your credibility takes a proper hit.
Pull stock levels directly from your inventory management system rather than hard-coding them. Shopify’s Liquid templating lets you conditionally display variant-level stock counts without any apps, and it updates in real time.
Review Stars, Trust Badges, and Social Proof
The most common mistake with reviews is positioning. Shops collect hundreds and then bury the summary stars below the fold, nowhere near the buy button. Your aggregate rating belongs directly adjacent to the add-to-cart, right where hesitation peaks.
Ratings between 4.7 and 4.9 convert better than a perfect 5.0. A 4.8 from 300-odd reviews carries more weight than 5.0 from a dozen people. Display the star rating alongside the total count, with a single tap to read full reviews. Placement matters more than which review app you use.
Below the buy button, line up trust indicators: SSL certificates, payment method icons, ’30-day returns’, ‘Free exchanges’. Shopify 2.0 themes let you add an image or icon row block directly below the buy button in the product template editor, no code required. Baymard’s checkout research found that 25% of shoppers abandon over security concerns, so this visual reassurance lands at exactly the moment doubt creeps in.
Photo and video reviews take social proof further still. Gymshark leans into customer workout videos alongside professional imagery. Glossier turned buyer selfies into a core element of its product pages. The slight roughness is what makes it believable. Incentivise media submissions through loyalty points and display customer content alongside professional shots.
Third-party validation does what self-promotion can’t. A row of publication logos below your product images signals that independent sources found you credible. Trade publications relevant to your niche carry weight alongside names like the BBC or The Times. Customer photo grids go one further: real buyers using your product in real settings, no professional lighting or careful staging.
Keep Product Information Visible and Hierarchical
Within a couple of seconds, a visitor should clock the product name and price alongside stock status and estimated delivery. Miss that window and they’re back in the search results choosing someone else.
Build a visual hierarchy that leads the eye. Product title in a clear H1. Price in a contrasting colour. Stock status with a green tick or red text for low stock. Estimated delivery visible without scrolling. The buy button in a colour that pops. I run a three-second test on every product page audit: show someone the page briefly, then ask what it costs and whether it’s in stock. If they can’t answer, the hierarchy needs simplifying.
Some buyers scan. Others read every word. Above the fold, directly under the price, keep a punchy summary of three lines focused on core benefits. ‘Waterproof to 100m. Swiss movement. 10-year warranty.’ Below the fold, expand into specifications and materials. Care instructions and sizing belong here too. Shopify’s product description field plus a metafield-driven ‘Details’ tab is the cleanest way to structure this. Sorted.
Price Anchoring With Strikethrough Pricing
Showing ‘£89.99 Now £54.99 (Save £35)’ creates a value perception that ‘£54.99’ on its own never will. Shopify handles this through the ‘Compare at price’ field in the product admin. Fill in the original price there and set the actual price as the selling price. Your theme will display the strikethrough automatically.
For products under £100, concrete savings work better than percentages. ‘Save £35’ registers faster than ‘39% off’ because the brain processes a specific pound amount more readily. For higher-ticket or luxury items, softer framing fits better. ‘Members save £50’ or ‘Exclusive price’ preserves the positioning whilst still flagging the discount.
Delivery Costs, Size Guides, and Shipping Transparency
Hidden shipping costs are the biggest driver of cart abandonment. Baymard’s data puts it at 48% of shoppers citing surprise fees as their reason for leaving. Show delivery options on the product page itself: ‘Standard (3-5 days): £4.99’ and ‘Next day: £9.99’. If you offer free shipping above a threshold, spell it out: ‘FREE delivery on orders over £50 (you need £12 more)’. Shopify apps like Estimated Delivery Date can calculate this per product.
The same transparency principle applies to sizing. The UK fashion industry loses billions annually to sizing returns because customers order multiple sizes then keep one and send the rest back. A buried size guide in a tab nobody clicks is not going to fix this.
Place ‘Size Guide’ or ‘Find Your Fit’ directly beside the size dropdown. Show measurements in centimetres and inches with model stats: ‘Model wears M, 178cm, 96cm chest’. ASOS’s Fit Assistant and True Fit both handle size recommendation well, and the return rate drop more than justifies the setup.
Sticky Add-to-Cart and Cross-Sells
Mobile product pages run three or four screen-lengths. Once a shopper scrolls past the buy button to read reviews or check specs, getting back requires deliberate effort. A sticky bar keeps the purchase option available at every scroll position.
Trigger it after 25% scroll depth. The product name and price should sit alongside an add-to-cart button in a slim 60-80 pixel bar. Shopify themes like Dawn support sticky buy buttons natively, and most others have an app or a few lines of custom code that sorts it.
Showing related products beneath serves two purposes. If the current item is not quite right, the visitor finds an alternative. If it is, they might add a complement and lift the order value. Shopify’s built-in ‘Related products’ section pulls recommendations automatically, but the algorithm isn’t always spot on. Apps like Frequently Bought Together give you manual override. Cap it at four to six items with mixed price points. Relevance matters far more than quantity.
Collection Pages
Bin the Full-Width Banner
Collection pages exist to show products. Massive hero banners that push inventory below the fold on mobile defeat the entire purpose. Shopify themes like Dawn and Sense default to a full-width collection image you can disable under the Collection template settings in the theme editor. Start the product grid immediately. That lifestyle banner might look cracking on desktop, but I’ve watched session recordings where mobile users bounce before a single product loads beneath it.
Grid Position, Badges, and Card Content
Western reading patterns start top-left and scan right. The first product in your grid gets disproportionately more attention and clicks than anything else on the page.
Your highest-margin, best-selling product belongs in position one. New arrivals that need visibility take positions two and three. Never waste that top-left spot on a poor performer unless it’s a deliberate loss leader. Shopify’s manual sort order in the Collection admin lets you drag products into position. Rotate your featured products weekly, treating that first slot as prime real estate.
Subtle badges on product cards nudge decisions without shouting. A ‘Bestseller’ label adds social proof, whilst ‘Last few’ signals genuine scarcity. ‘Staff pick’ gives a personal touch that stands out from automated recommendations.
In Shopify, the cleanest way to handle this is through product tags combined with Liquid conditionals in your theme’s product-card snippet, so badges appear automatically based on the tag applied in the admin. Restraint is key. Badge 15-20% of your catalogue at most. Once every card has a label, none of them mean anything.
Beyond badges, the information on each grid card matters enormously. Forcing a click just to see the price or available sizes is a faff most shoppers won’t tolerate. Display the essentials: product name and price (with strikethrough if on sale) plus star rating and available sizes or colours. Show sale prices with the original struck through. On desktop, add ‘Quick View’ on hover so shoppers can check details without leaving the collection page.
Filtering and Pagination
Broken filters send people straight to competitors. Shopify’s Storefront Filtering (in Online Store 2.0 themes) pulls options from product tags and variant options, with metafields available for custom filter criteria. Price sliders and sale toggles are the baseline. Colour swatches and size options come next, with availability indicators rounding out the essentials.
Mobile filters should slide in without triggering a full page reload. Shopify’s native AJAX filtering handles this if your theme supports it. Most critically, preserve filter selections when shoppers hit the back button. Losing a carefully applied set of filters is the kind of ecommerce UX failure that gets people to close the tab entirely.
The same applies to pagination. Applied filters resetting when a shopper clicks to page two is maddening. Shopify’s default pagination caps at 50 products per page, adjustable in the collection template settings. Whichever approach you use, maintain filter state across navigation and show progress: ‘Viewing 24 of 89 products’.
Popups, Heatmaps, and Collection FAQs
A popup triggered after 45 seconds of browsing winter coats signals purchase intent worth pursuing. Exit-intent popups capture 3-5% of leaving visitors when the offer matches browsing behaviour. ‘Sign up for our newsletter’ falls flat. ‘Get 10% off these running shoes’ after browsing footwear lands differently. Privy and OptinMonster both integrate with Shopify and handle the behavioural targeting.
Once you’ve got popups running, you need data on whether they’re working. Hotjar and Microsoft Clarity show exactly where visitors click and how far they scroll before dropping off. Crazy Egg offers similar heatmap data with a slightly different interface.
Session recordings are the feature most shop owners overlook. They play back anonymised footage of real visits, and I’ve found more conversion problems in 30 minutes of watching recordings than in hours of staring at analytics dashboards. If recordings show visitors consistently exiting after reaching a specific section, that’s your conversion bottleneck. Fix that section and you’ve got a quick win that doesn’t require a full A/B testing programme to validate.
An FAQ section beneath the product grid serves two jobs: answering buyer questions and adding indexable content to what is otherwise a thin page for SEO purposes. Shopify’s Online Store 2.0 themes let you add a collapsible content block below the collection grid through the theme editor, no code needed for basic implementations.
Keep answers collection-specific. Running shoes: ‘What is the difference between neutral and stability shoes?’ Kitchen appliances: ‘Which mixer attachment is best for bread dough?’ Mark them up with FAQ schema for potential featured snippet visibility.
Cart and Checkout
Seven out of every ten carts get abandoned before payment. Baymard Institute’s aggregate research across 50 studies puts the global figure at 70.22% on average. Every point of friction between the cart and the confirmation page is a point where money walks out the door. The changes below target the most common reasons people leave.
Show the Savings and Upsell in the Cart
Reinforcing value at checkout reduces last-second hesitation. Instead of just displaying ‘Total: £156.99’, break down the maths. ‘Subtotal: £189.99. Discount: -£33.00. Total: £156.99.’ Highlight the saving in green. Shopify’s cart object exposes cart.total_discount in Liquid, so displaying this is a theme edit rather than an app install. Supermarkets worked this out years ago. ‘You saved £24.50 today!’ is not there by accident.
Cart pages are also prime territory for upsells because purchase intent is already established. Show complementary products the shopper can add without leaving the page, like phone cases alongside phones or insoles with running shoes. Shopify apps like ReConvert and CartHook handle the cart-page upsell logic, pulling product recommendations based on what’s already in the basket.
Keep suggestions under 30% of the current cart value to stay in impulse-buy territory. I’ve tested ‘Don’t forget’ against ‘Goes well with’ messaging across several Shopify stores, and the helpful framing consistently outperforms the reminder framing. Cap it at three or four items.
Guest Checkout, Trust Signals, and Express Payment
Baymard’s research shows that 26% of shoppers abandon when forced to create an account. In Shopify, you control this under Settings > Checkout > Customer accounts. Set it to ‘Accounts are optional’ so guest checkout is the default. Capture the email early for abandoned cart recovery. Shopify’s built-in abandoned checkout emails handle the basics, though Klaviyo gives far more control over timing and segmentation.
Purchase anxiety peaks at the payment step, and the fix is visual reassurance placed right where doubt creeps in. SSL badges beside form fields paired with payment method logos signal security, whilst a visible phone number tells the shopper there’s a real business behind the screen. Each trust element removes one more reason to abandon. Your CTAs should include a brief customer quote nearby: ‘Fast delivery, exactly as described’ carries weight at the moment of commitment.
Shop Pay and Apple Pay buttons belong above the traditional form fields, not beneath them, with PayPal Express alongside if your customer base skews towards it. Enable these under Settings > Payments > Accelerated checkouts. Shop Pay is particularly worth prioritising because it stores customer details across all Shopify stores, giving returning shoppers a one-tap checkout.
Free-Shipping Progress Bars
‘You’re £8 away from FREE delivery!’ is more effective at increasing order values than any clever copywriting. Shopify apps like Hextom’s Free Shipping Bar or a custom cart drawer using the cart.total_price Liquid object handle this natively. Set the threshold at roughly 30% above your current average order value (find this in Shopify Analytics > Reports). Worth tracking the AOV impact through proper conversion tracking over time.
One-Page Checkout and Address Handling
Lengthy, multi-step checkouts are a right pain, and Baymard’s data confirms that 22% of shoppers abandon because the process feels too complicated. Shopify moved to a one-page checkout as default in late 2023. If your store is still on the older three-page flow, switch it under Settings > Checkout > Checkout layout.
Shopify Plus merchants can customise further through the Checkout Extensibility API with app blocks and conditional logic. For non-Plus stores, the native one-page layout with Shop Pay covers the basics well.
Manual address entry creates typos that lead to failed deliveries and frustrated customers. Shopify’s checkout already includes basic address autocomplete powered by Google, but it’s worth checking that it’s enabled under Settings > Checkout. Start suggestions after three characters. Validate fields instantly with red outlines for errors and green ticks for valid entries. Never make the shopper wait until they hit ‘Submit’ to find out their postcode format is wrong.
Shipping Protection and Cost Transparency
Route lets customers pay £2-3 to protect their order against loss or damage in transit. For the shop, it’s mostly margin on top of the sale. For the buyer, it removes anxiety about parcels going missing, which is a genuine concern for anyone who’s had a delivery disappear. Position it as a pre-checked option. Most shoppers leave it ticked. You’ve added pure margin whilst reducing the volume of delivery complaint tickets.
Surprise fees are the single biggest reason people abandon carts, and in my experience it’s the one that catches the most Shopify store owners off guard. Calculate and display everything before the customer reaches payment: subtotal, delivery, VAT, total. Use Shopify’s geolocation for shipping estimates before address entry. If exact calculation is not possible, show a range: ‘Delivery from £4.99’.
Post-Purchase Conversions
Timing changes everything with account creation. Asking before payment creates friction. Asking afterwards captures far more sign-ups. ‘Save your details for next time?’ on the Shopify order confirmation page. One tap creates the account using existing order data. Sweeten it: ‘Members get early access to sales.’
The moment after purchase is also a sweet spot for upselling. Shopify Plus merchants can use the post-purchase checkout extension natively. Non-Plus stores get similar results through ReConvert or AfterSell, which insert an offer page between payment and the thank-you page. ‘Add our best-selling moisturiser for 40% off (next 30 seconds only).’ One click adds it to the completed order. No new payment forms. Set clear expectations: ‘Your original order is confirmed regardless.’
Navigation
Visual Search With Searchanise
Shopify’s default search is basic. Searchanise replaces it with a visual product discovery tool. Instead of plain text links, shoppers see product cards with images and prices directly in the search dropdown, plus star ratings where reviews exist. Typing ‘blue dress’ shows actual blue dresses with prices, not just keyword predictions.
It installs as a Shopify app and replaces the search bar across your theme without custom code. Typo tolerance and synonym matching prevent dead ends. ‘Trainers’ and ‘sneakers’ should return the same results.
Search suggestions should preview products, not just predict text. A dropdown showing ‘Gaming Laptop, £899’ with a thumbnail and a star rating is a completely different experience from a plain text ‘gaming laptops’ suggestion. Include three to five product previews alongside keyword suggestions. Mobile autocomplete needs larger touch targets and proper spacing.
Page Layout and Menu Structure
Eye-tracking research consistently shows a Z-pattern on web pages: top-left to top-right, then diagonally to bottom-left, then across to bottom-right. The corners get the most attention. Top-left holds your logo. Top-right is where the cart icon and account link should sit, with any welcome offer visible nearby. Use Hotjar heatmaps to verify your Shopify theme’s layout aligns with actual viewing patterns.
Mega menus can overwhelm. Every dropdown section needs a ‘Shop All [Collection]’ link as an escape route for shoppers who want to browse the full range rather than pick a subcollection.
Shopify’s native navigation editor handles basic dropdowns, but for proper mega menus with images and featured products, apps like Mega Menu by Qikify or custom Liquid sections give you the flexibility. Position these links consistently at the top or bottom of each section. Dead-end navigation frustrates people who know what they want but can’t find the right path to it.
Mobile Navigation and Footer
Mobile accounts for the majority of Shopify traffic but a disproportionate share of abandonment. Tiny hamburger menus tucked into the top corner are a contributor to that gap. Most Shopify 2.0 themes place the mobile menu icon top-left, but the size and touch target vary massively between themes.
Larger menu buttons or bottom navigation bars accommodate one-handed use. Accordion-style menus beat endless scrolling lists. Feature search prominently, since a sizeable proportion of mobile users prefer searching to browsing. Test your Shopify store with your phone in one hand. If reaching the menu requires finger gymnastics, it needs reworking.
Footers catch shoppers looking for final reassurance before committing. ‘Free UK delivery over £50′, ’30-day hassle-free returns’, and a visible phone number address the concerns that sit at the back of a buyer’s mind. Shopify 2.0 themes let you configure footer content blocks in the theme editor without touching code.
Shopify Site Speed and Performance
Page speed affects both rankings and revenue. Shopify handles hosting and server infrastructure for you, which is a genuine advantage over self-hosted platforms. But that doesn’t mean speed is sorted by default. Theme bloat and app overload drag Shopify stores down, and uncompressed images make things worse still.
Test on Real Connections, Not Office WiFi
Running PageSpeed Insights over your office WiFi gives a misleading picture. I test every Shopify store on a throttled 4G connection before anything else because that is what real customers are actually using inside buildings with patchy signal.
Shopify’s own speed score in the admin (Online Store > Themes > Speed) gives a directional benchmark against similar stores, but PageSpeed Insights and GTmetrix provide the granular detail. Target a Largest Contentful Paint under 2.5 seconds and a First Input Delay below 100 milliseconds.
Images, Scripts, and Rendering Priority
Shopify automatically converts uploaded images to WebP format and serves them through its own CDN, which is one less thing to worry about compared to self-hosted platforms. The issue is upload size. If you’re uploading 4,000-pixel product photos straight from the camera, Shopify still has to process and serve larger files than necessary.
Resize images to 2048 pixels on the longest edge before uploading. Shopify’s img_url Liquid filter with size parameters handles responsive sizing from there. Keep hero banners under 200KB and product images under 150KB.
Product information and buy buttons should render before Instagram feeds or live chat widgets load. On Shopify, the biggest culprit is app scripts injected into the theme header. Every app you install potentially adds JavaScript that runs before your product page content renders. Defer non-essential app scripts where possible. Load third-party widgets asynchronously. Check your theme.liquid file for scripts that could be moved below the closing </body> tag.
Images and videos that sit below the visible viewport should not hold up what the visitor can actually see. Shopify 2.0 themes like Dawn include native lazy loading on collection page product images by default. If you’re on an older theme, adding loading="lazy" to image tags in your Liquid templates is a quick fix. Avoid autoplaying video on mobile entirely, where data costs and battery life are real considerations.
App Bloat and Third-Party Scripts
Every Shopify app you install injects JavaScript into your store. Each one adds latency, and it accumulates fast. I’ve seen stores running 15+ apps where removing three unused ones cut load time by a full second.
Go to Settings > Apps and audit everything. If an app is not actively contributing to sales or operations, uninstall it. Some apps leave residual code in your theme even after uninstalling, so check theme.liquid and the Snippets folder for orphaned scripts. Shopify’s built-in speed report flags the slowest apps, which is a decent starting point for the cull.
Shopify handles browser caching at the server level, so you don’t configure cache headers manually. Where you can make a difference is minimising the total number of assets your theme loads by consolidating CSS files and removing unused font weights.
That Tidio or Gorgias chat widget might be costing more in lost sales than it generates in support value. Use Chrome DevTools’ Network tab to audit every third-party resource. Anything adding over 200ms needs justification. Most Shopify chat apps have a ‘load on click’ option buried in their settings. If an ecommerce SEO consulting audit flags CWV problems, app scripts are almost always the first place to look.
