Shopify

Run A/B tests on your Shopify store to optimize product pages, landing pages, and checkout flows. One line of code in your theme file gets you started.

Step 1: Add the CADENCE Script

  1. In your Shopify admin, go to Online Store > Themes
  2. Find your active theme and click ... > Edit code (or Actions > Edit Code)
  3. In the Layout folder on the left, click theme.liquid
  4. Find the </head> tag (use Ctrl+F or Cmd+F to search)
  5. Paste this single line right before the </head> tag:
html
<script src="https://cdn.softpath.co/sdk/v1/cadence.min.js" data-project="YOUR_PROJECT_ID"></script>
  1. Click Save

Get your Project ID

Find your Project ID (like proj_Ax8mK2pQr4nB) on your project Settings page in the CADENCE dashboard, under the Quick Install tab.

Test on a preview theme first

Before editing your live theme, consider duplicating it: ... > Duplicate. Edit the duplicate, preview it to verify everything works, then publish it.

Step 2: Verify Installation

Open your Shopify store in a new tab:

  1. Right-click anywhere on the page and select Inspect
  2. Go to the Console tab
  3. Type Cadence and press Enter
  4. You should see an object with methods like init, getVariant, and track

You can also check the Network tab for a request to cadence.min.js (status 200), or go to your project Settings in the CADENCE dashboard and click Test Connection.

Step 3: Create a Visual Test

  1. Go to your project in the CADENCE dashboard
  2. Click New Experiment
  3. Set the Target URL to the Shopify page you want to test (e.g., https://yourstore.myshopify.com/products/featured-product)
  4. Open the Visual Editor to make changes (swap headlines, change button colors, rearrange sections)
  5. Click Start when ready

CADENCE automatically detects when visitors land on the matching page, assigns them to a variant, and applies the visual changes.

Testing product pages

Shopify product pages share a common template. If you set the Target URL to one product page and create visual mutations using CSS selectors like .product-title or .price, those same mutations will apply to other product pages that use the same theme template. This is useful for testing changes across your entire catalog.

For product-specific tests, use more specific selectors or target a unique landing page.

Step 4: Track Conversions

Zero-code: Dashboard rules

The easiest way to track conversions on Shopify is with dashboard-configured rules:

  • URL match — track when visitors reach your order confirmation page (typically contains /checkouts/ and /thank_you)
  • Click selector — track when visitors click Add to Cart (usually .product-form__submit or button[name="add"])

Zero-code: HTML attributes

You can also add data-cadence-goal attributes directly in your Liquid templates:

html
<button type="submit" name="add" data-cadence-goal="add-to-cart">
  Add to Cart
</button>

Edit your theme's product template (usually sections/main-product.liquid or snippets/product-form.liquid) to add the attribute to existing buttons.

Tracking purchases

For tracking completed purchases, use a URL match rule targeting your thank-you page. In Shopify, this is the order confirmation page shown after checkout. The URL typically includes /thank_you or /orders/.

Checkout limitations

Shopify's checkout pages are hosted separately and have restricted custom code access (unless you're on Shopify Plus). CADENCE works best on product pages, collection pages, landing pages, and the cart — any page that uses your theme's theme.liquid layout.

Troubleshooting

Script not appearing on the site

  • Make sure you saved the theme.liquid file after adding the script
  • Check that the script is inside the <head> section, before the </head> tag
  • If you're using a theme app extension or a page builder app, those pages may use a different layout file

Visual Editor shows cross-origin warning

Your Shopify store and the CADENCE dashboard are on different domains. Use manual CSS selectors instead of clicking elements. See Visual Editor > CORS.

Anti-flicker on product pages

If visitors see a flash of the original content before the variant loads, add data-anti-flicker to the script tag:

html
<script src="https://cdn.softpath.co/sdk/v1/cadence.min.js" data-project="YOUR_PROJECT_ID" data-anti-flicker></script>

App conflicts

Some Shopify apps inject their own scripts that modify the DOM. If a CADENCE visual mutation targets an element that another app also modifies, the results may be unpredictable. Test your mutations with all your active apps enabled.

What's Next