Testing Compare-At Prices
Introduction
Many Shopify merchants display compare-at (strikethrough) prices alongside sale prices to signal a discount. But does showing that crossed-out price actually increase conversions, or does it create skepticism? A/B testing compare-at prices on vs. off helps you answer that question with real data.
This is typically a Content Test (Onsite Edits), not an Offer or Price test. If you're only testing whether the compare-at price is visible — and the actual cart/checkout price isn't changing — an Onsite Edits test is the right approach. Some merchants initially look for this in the Offer or Price test flows, since compare-at pricing can feel like an "offer." But if the price your customer pays at checkout stays the same, Onsite Edits is the way to go.
Which Approach Should I Use?
The right setup depends on whether you want to show/hide compare-at prices across your entire store or only on specific products.
Option 1: All Products (Recommended)
Best for: Hiding or showing compare-at prices sitewide.
This is the most common version of this test. You'll use an Onsite Edits test to hide the compare-at price elements wherever they appear on your site.
Create a new Content Test → Onsite Edits with two test groups.
Leave the Control group unchanged (compare-at prices visible as-is).
For the Variant group, use a CSS injection to hide the compare-at price elements.
For example, your CSS injection for the Variant group might look like:
.compare-at-price {
display: none !important;
}Replace .compare-at-price with the actual CSS selector for compare-at prices on your store. See the section below on finding the right selector.
Compare-at prices can appear in multiple places: product pages, collection pages, the homepage, search results, the cart drawer, and quick-view modals. Make sure your selector covers all of them, or add additional edits for each location. If the selector is the same everywhere, a single CSS injection may be all you need.
Option 2: Specific Products Only
If you only want to test compare-at prices on a subset of products, there are two paths:
Onsite Edits with targeted selectors: If the compare-at price elements on your site have product- or variant-specific attributes (like a data-product-id), you can build selectors that target only those products. However, this can get tricky — you'll likely also need to handle compare-at prices on collection pages where those products appear, and Page Targeting alone won't fully solve this since products show up across multiple page types.
Price Test: Alternatively, you can set up a Price Test where the test group has the same sale price but no compare-at price value. This changes the actual Shopify data rather than just hiding the visual element. Depending on your theme, this may require additional theme adjustments or custom JavaScript to handle styling correctly — for example, ensuring the price doesn't still render in a "sale" style when there's no compare-at value.
For most merchants, Option 1 (sitewide Onsite Edits) is the simplest and most effective starting point.
Finding the Right Selector
Getting the right CSS selector is the most important part of this setup. A bad selector means your test either won't work, will only work on one page, or will accidentally hide elements you didn't intend to touch.
The Common Pitfall
When you use the Onsite Editor's point-and-click tool, it generates a CSS selector based on the specific element you clicked. This selector is often too specific — it targets the compare-at price for one product on one page, not all of them.
For example, the tool might generate:
This would only match one product. What you likely need is something broader:
How to Find a Universal Selector
You can identify the right selector using your browser's Developer Tools (Command+Option+C on Mac, Ctrl+Shift+I on PC):
Inspect a compare-at price element and note which CSS classes it uses.
Check multiple page types (PDP, collection page, homepage) to confirm the same class appears everywhere.
Test your selector in the browser console:
document.querySelectorAll('.your-selector')— this should return all compare-at price elements on the page.
For more details, see our full guide on Selecting the Right Element.
Using Claude in Chrome to Build Selectors
If you're having trouble finding a selector that works across your entire site, the Claude in Chrome Extension can be a big help here. Unlike a standard AI chat, Claude in Chrome can actually read the page you're on and use the developer tools itself to inspect your site's DOM — so it can find the exact selector for your specific theme rather than guessing.
If a selector you have isn't working on all pages, try navigating to your store and prompting something like:
"This selector is only working on one page. Can you inspect this store and build me a selector to target all the compare-at prices across the entire store? I want to use the selector in an Intelligems Onsite Edits test."
Including the link to our Onsite Editor documentation gives Claude context on how the selector will be used, which helps it build something compatible with our test setup.
QA Checklist
Before launching, confirm the following across both desktop and mobile:
[ ] Preview both test groups and check all page types: PDPs, collection pages, homepage, search results, and cart
[ ] Compare-at price is fully hidden in the Variant group (not just shifted off-screen)
[ ] Hiding the compare-at price doesn't break the regular price styling — some themes change the price color or add a "Sale" badge when a compare-at value exists, and hiding the compare-at element alone may leave those visual artifacts
[ ] Cart page and cart drawer line items don't still show compare-at prices
[ ] Your selector isn't accidentally hiding other elements — run
document.querySelectorAll('.your-selector')and verify only compare-at prices are returned
For a full walkthrough, see the Content Test QA Checklist.
Last updated