Cart Validation Script

Stop Shopify customers seeing blank prices or images for custom products in the cart. Learn what the script does, how it works and how to adapt it.

This script solves a timing issue in Shopify where custom product images and prices don't load immediately when items are added to the cart. Without this solution, customers might see incomplete product information (missing images, $0 prices or blank titles), which could lead to confusion or checkout errors.

This code snippet is designed for the Dawn theme but can be adapted to any Shopify theme by adjusting the cart container selector.

---

What it does

• Detects when custom products (marked with the _mmqProduct property) are added to the cart

• Checks if critical product data is missing (price, image, title, product ID or URL)

• Displays a user-friendly overlay with a loading message to prevent interaction with incomplete data

• Continuously polls Shopify's cart API every 6 seconds until all product information is fully loaded

• Automatically refreshes the page once complete data is available

---

Problem it solves

Shopify's backend processing for custom products can be delayed, causing a gap between when a product is added to the cart and when its full details (especially images and pricing) become available. This script bridges that gap by:

• Preventing customers from seeing or interacting with incomplete product data

• Ensuring accurate pricing and product information before checkout

• Providing clear feedback that the system is working ("We are creating your custom product...")

• Automatically resolving the issue without requiring manual page refreshes

---

How it works

When products are added to the Shopify cart, they receive a _mmqProduct property. The script checks for this property to determine if it should run:

• First, it verifies whether the cart contains products with the _mmqProduct property.

• If found, it checks whether these products are missing critical data — specifically price or image information (configurable via variables at the start of the script).

• When missing data is detected, the script displays an overlay on the cart page to prevent user interaction.

• It then waits for Shopify to finish processing the product data, checking at customisable intervals until the information is complete.

This ensures customers don't proceed with incomplete product information in their cart.

Configurable variables

You can change these variables at the start of the script:

#	Variable	Default	What it controls
1	checkPrice	true	Treat a missing or zero price as missing data.
2	checkImage	true	Treat a missing image as missing data.
3	waitTime	6000	How often the script checks the cart again, in milliseconds.

To preview the overlay without waiting for a real cart, open the browser console on the cart page and run window.mimeeqDebugOverlay(). Run window.mimeeqHideOverlay() to remove it.

---

Code

{% if template.name contains 'cart' %}
<script>
// Mimeeq Script for Cart Checking Variants Start
console.group('[Mimeeq Cart Debug]');
console.log('🟦 Script loaded and running');
console.log('💡 To test overlay, run: window.mimeeqDebugOverlay()');

const checkPrice = true;
const checkImage = true;
const waitTime = 6000;

const items = {{ cart.items | json }};
console.log('📦 Cart items:', items);

const isMmqProduct = items.some(i => i.properties && i.properties._mmqProduct);
const isMissingData = items.some(i => {
  const missingPrice = checkPrice && (!i.price || i.price === 0);
  const missingImage = checkImage && !i.image;
  const missingTitle = !i.product_title;
  const missingProductId = !i.product_id;
  const missingUrl = !i.url;
  const isMissing = missingPrice || missingImage || missingTitle || missingProductId || missingUrl;
  if (isMissing) console.log('🔍 Item missing data:', i);
  return isMissing;
});

console.log('🧩 isMmqProduct:', isMmqProduct);
console.log('⚠️ isMissingData:', isMissingData);

function showMimeeqOverlay(debugMode = false) {
  const cartContainer = document.querySelector('.cartitems--list');
  if (!cartContainer) {
    console.warn('⚠️ No .cartitems--list element found');
    return;
  }

  // --- Create overlay ---
  const overlay = document.createElement('div');
  overlay.id = 'mimeeq-overlay';
  Object.assign(overlay.style, {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    background: 'rgba(255, 255, 255, 0.65)', // soft white-gray blur
    backdropFilter: 'blur(10px)',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: '9999',
    pointerEvents: 'all',
    transition: 'opacity 0.3s ease',
    opacity: '0'
  });

  // --- Spinner (left of text) ---
  const spinner = document.createElement('div');
  Object.assign(spinner.style, {
    width: '22px',
    height: '22px',
    border: '3px solid rgba(0,0,0,0.1)',
    borderTop: '3px solid #ac7349',
    borderRadius: '50%',
    animation: 'mimeeq-spin 1s linear infinite',
    flexShrink: '0',
    marginRight: '12px'
  });

  // Spinner animation keyframes (add once)
  if (!document.getElementById('mimeeq-spinner-style')) {
    const styleTag = document.createElement('style');
    styleTag.id = 'mimeeq-spinner-style';
    styleTag.textContent = `
      @keyframes mimeeq-spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    `;
    document.head.appendChild(styleTag);
  }

  // --- Message box ---
  const messageBox = document.createElement('div');
  Object.assign(messageBox.style, {
    background: '#fff',
    borderRadius: '8px',
    padding: '20px 28px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
    fontFamily: 'system-ui, sans-serif',
    fontSize: '16px',
    color: '#000',
    whiteSpace: 'nowrap',
    maxWidth: '600px'
  });

  // --- Message text ---
  const messageText = document.createElement('div');
  messageText.innerText =  'We are creating your custom product. The page will refresh once it’s ready.';

  messageBox.appendChild(spinner);
  messageBox.appendChild(messageText);
  overlay.appendChild(messageBox);

  // --- Attach to container ---
  cartContainer.style.position = 'relative';
  cartContainer.appendChild(overlay);

  // --- Fade in effect ---
  requestAnimationFrame(() => { overlay.style.opacity = '1'; });

  console.log(debugMode ? '🐞 Debug overlay shown' : '📍 Overlay shown');
}

function hideMimeeqOverlay() {
  const overlay = document.getElementById('mimeeq-overlay');
  if (!overlay) return;
  overlay.style.opacity = '0';
  setTimeout(() => overlay.remove(), 300);
}

window.mimeeqDebugOverlay = () => { showMimeeqOverlay(true); };
window.mimeeqHideOverlay = () => { hideMimeeqOverlay(); };

if (isMmqProduct && isMissingData) {
  console.log('🚀 Conditions met — starting cart data check loop');
  let finishCheck = false;
  showMimeeqOverlay(false);

  const getCartData = async () => {
    console.log('🔄 Checking cart data...');
    try {
      const response = await fetch('/cart.js');
      const { items } = await response.json();
      const missingData = items.some(i => {
        const missingPrice = checkPrice && (!i.price || i.price === 0);
        const missingImage = checkImage && !i.image;
        const missingTitle = !i.product_title;
        const missingProductId = !i.product_id;
        const missingUrl = !i.url;
        return missingPrice || missingImage || missingTitle || missingProductId || missingUrl;
      });
      if (!missingData) {
        finishCheck = true;
        console.log('✅ All data loaded — refreshing page...');
        window.location.reload();
      }
    } catch (error) {
      console.warn('❌ Cart refresh check failed:', error);
    }
  };

  const interval = setInterval(async () => {
    if (finishCheck) {
      clearInterval(interval);
      console.log('🛑 Interval cleared');
    } else {
      await getCartData();
    }
  }, waitTime);
} else {
  console.log('ℹ️ Conditions not met — script exited');
}

console.groupEnd();
// Mimeeq Script for Cart Checking Variants End
</script>
{% endif %}

---

Related articles

Custom Loader

Show your own loading animation while the configurator initialises.

Events & Tracking

Use configurator events to feed your own analytics.

Webhooks

Send real-time Mimeeq event data to your own systems.