Skip to main content

Shopify Integration

Datsnip runs on Shopify without apps or API modifications. Install the snippet via the theme editor and run experiments from the Datsnip dashboard.

Installation​

  1. Go to Shopify Admin → Online Store → Themes
  2. Click Actions → Edit code on your live theme
  3. Open layout/theme.liquid
  4. Find the closing </head> tag and paste the snippet just before it:
<!-- Datsnip Anti-Flicker + Tracking -->
<style id="_gs_af">html{visibility:hidden;pointer-events:none}</style>
<noscript><style>#_gs_af{visibility:visible!important}</style></noscript>
<script>setTimeout(function(){var e=document.getElementById('_gs_af');if(e)e.remove()},3000)</script>
<script>
(function(w,d,k){
  w._sf = { siteId: k, ingestUrl: 'https://api.datsnip.com' };
  var s = d.createElement('script'); s.async = 1;
  s.src = 'https://api.datsnip.com/sdk/tracker.js';
  d.head.appendChild(s);
})(window, document, 'YOUR_SITE_ID');
</script>
  1. Click Save

A/B testing product pages​

Use the Datsnip visual editor to test:

  • Product title variations
  • "Add to cart" button text and color
  • Product description layout
  • Price presentation (e.g., showing/hiding "Compare at price")
  • Image gallery layout

Set the experiment URL to /products/* to test all products, or /products/your-product-handle for a specific product.

Revenue tracking​

Track actual purchase revenue per variant — the most valuable metric for Shopify experiments.

Add tracking to the Order Status page​

  1. In Shopify Admin, go to Settings → Checkout
  2. Scroll to Order status page section
  3. Add this in the Additional scripts field:
{% if first_time_accessed %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.datsnip) {
      window.datsnip.track('purchase', {
        revenue: {{ checkout.total_price | divided_by: 100.0 }},
        currency: '{{ checkout.currency }}',
        orderId: '{{ checkout.order_id }}',
        items: {{ checkout.line_items | size }}
      })
    }
  })
</script>
{% endif %}

The {% if first_time_accessed %} check ensures the event fires only once per order (Shopify shows the order status page on subsequent visits too).

Set the experiment goal​

Create an experiment goal:

  • Type: Custom event
  • Event name: purchase

The results page will show revenue per visitor for each variant automatically.

Add to cart tracking​

Track add-to-cart events for funnel analysis:

// In theme.liquid or a custom JS file
document.addEventListener('click', function(e) {
  if (e.target.closest('[data-add-to-cart]')) {
    if (window.datsnip) {
      window.datsnip.track('add_to_cart', {
        productId: e.target.closest('[data-add-to-cart]').dataset.productId
      })
    }
  }
})

Cart page experiments​

To test checkout abandonment reduction:

  1. Create an experiment targeting /cart
  2. Use the visual editor to test:
    • "Checkout" button text and color
    • Trust badges (security seals, guarantees)
    • Urgency elements ("Only 3 left in stock")
    • Cart summary layout
  3. Set goal: Page visit to /checkout/thank_you

Shopify Online Store 2.0​

For themes built with OS 2.0 sections, class names are more predictable. Use the Shopify storefront Preview to inspect elements before creating experiments in Datsnip.

OS 2.0 themes generate consistent class names like .product__title, .product__price, .product-form__submit — these work reliably as CSS selectors.

Notes​

  • Datsnip does not modify your Shopify admin, product data, or checkout settings
  • The snippet is loaded via theme.liquid, so it runs on every storefront page
  • Experiments on /checkout/* paths may be blocked by Shopify on some plans (checkout customization requires Shopify Plus)