Skip to main content

How to A/B Test Inventory Scarcity on Shopify Using Liquid?

You can use Shopify Liquid to expose real-time inventory quantity to Mida experiments, enabling you to test scarcity messaging such as "Only 3 left in stock" on your product pages.

Step 1 — Add the inventory data snippet to your theme

In your Shopify admin, go to Online StoreThemesEdit code. Open your product template file. This is usually one of:

  • sections/main-product.liquid

  • sections/product-template.liquid

  • templates/product.liquid

Paste the following snippet anywhere inside that file, before the closing </section> or </div> of the product section:

<script>
window.midaInventory = window.midaInventory || {};
{% for v in product.variants %}
window.midaInventory["{{ v.id }}"] = {
qty: {{ v.inventory_quantity | default: 0 }},
available: {{ v.available | json }},
policy: {{ v.inventory_policy | json }}
};
{% endfor %}
</script>

Remember to save the file.

To verify it is working, open your product page in a browser, right-click and select View Page Source, then search for midaInventory. You should see your variant IDs with their corresponding stock quantities rendered as plain numbers.

Step 2 — Create a Mida experiment and add variant JavaScript

  1. In the Mida dashboard, create a new A/B Experiment targeting your product page URL.

  2. Set up your variant and open the Custom Code by clicking on the Edit JS button for that variant.

  3. Paste the following code:

(function () {
var variantId = (document.querySelector('[name="id"]') || {}).value;
var inv = window.midaInventory && window.midaInventory[variantId];
if (!inv || !inv.qty || inv.qty <= 0 || inv.qty > 10) return;

var badge = document.createElement('div');
badge.className = 'mida-scarcity-badge';
badge.textContent = 'Only ' + inv.qty + ' left in stock — order soon';
badge.style.cssText = 'color:#c0392b;font-weight:600;margin:8px 0;font-size:14px;';

var form = document.querySelector('form[action*="/cart/add"]');
if (form && form.parentNode) {
form.parentNode.insertBefore(badge, form);
}
})();

This code reads the inventory for whichever variant the customer has selected. The badge only appears when stock is between 1 and 10 units. Adjust the inv.qty > 10 threshold to match your definition of low stock.

Step 3 — Set up your conversion goal

Create a goal in your experiment that tracks AddToCart or Purchase events. Since you have the Mida Customer Pixel installed, these events are already firing.

No additional setup is needed.

Step 4 — Handle variant switching (optional)

If your product has multiple variants (sizes, colours), customers may switch between them using a picker. Replace the Step 2 code with this version so the badge updates when a different variant is selected:

(function () {
function showBadge(variantId) {
var existing = document.querySelector('.mida-scarcity-badge');
if (existing) existing.parentNode.removeChild(existing);

var inv = window.midaInventory && window.midaInventory[variantId];
if (!inv || !inv.qty || inv.qty <= 0 || inv.qty > 10) return;

var badge = document.createElement('div');
badge.className = 'mida-scarcity-badge';
badge.textContent = 'Only ' + inv.qty + ' left in stock — order soon';
badge.style.cssText = 'color:#c0392b;font-weight:600;margin:8px 0;font-size:14px;';

var form = document.querySelector('form[action*="/cart/add"]');
if (form && form.parentNode) form.parentNode.insertBefore(badge, form);
}

var initial = (document.querySelector('[name="id"]') || {}).value;
if (initial) showBadge(initial);

document.addEventListener('change', function (e) {
if (e.target && e.target.name === 'id') showBadge(e.target.value);
});
})();

Final Results

When previewing the variant from your Mida campaign you should see something like this as the result.

When an item is below 10 units of inventory stock in your Shopify product, the badge will appear automatically above the Add to Cart button — for example, "Only 3 left in stock — order soon".

Important Notes

  • Inventory tracking must be enabled on the product variant in your Shopify admin under Products → [Product] → Inventory. Variants without tracking enabled will always show 0.

  • The count is rendered at page load. It will not update in real time if another customer purchases while the page is open. This is expected behaviour for scarcity display tests.

  • inventory_quantity reflects online-store sellable stock — this is Shopify's available quantity for your online channel.

Quick Reference

Add a window.midaInventory Liquid snippet to your product template to expose per-variant stock counts, then read that object in Mida variant JavaScript to conditionally show a scarcity badge.

Did this answer your question?