Promotions Theme Support

Promotions Theme Support

Learn how to integrate Promotions into themes that don't use standard events.

Custom integration code for different themes

Some themes don’t use standard events that our app emits. Thus they require custom integration code to enable correct operation of auto-add to cart and auto-remove from cart blocks.

How to use integration code

Navigate to Themes / Online Store

Click Edit Theme button

Paste integration code and save

Locate Promotions Runtime and paste the code into Theme Integration field:

Save the theme

Trade Theme

<script>
document.addEventListener('cart:updated', async function(e) {
  var cart = e.detail;
  if (typeof publish === 'function' && cart) {
    publish('cart-update', {
      source: 'fs-cart-service',
      cartData: cart
    });

    // Find theme cart element
    var cartEls = [document.querySelector('cart-drawer'), document.querySelector('cart-notification'), document.querySelector('cart-items')].filter(el => !!el);

    // Collect sections from all cart elements
    var allSectionIds = [];
    var sectionEls = cartEls.filter(function(el) {
      return typeof el.getSectionsToRender === 'function';
    });

    sectionEls.forEach(function(el) {
      el.getSectionsToRender().forEach(function(s) {
        var id = s.section || s.id;
        if (id && allSectionIds.indexOf(id) === -1) allSectionIds.push(id);
      });
    });

    // Fetch deduped sections once, then render each element
    if (sectionEls.length > 0 && allSectionIds.length > 0) {
      try {
        var res = await fetch(window.location.pathname + '?sections=' + allSectionIds.join(','));
        var sections = await res.json();
        cart.sections = sections;
        sectionEls.forEach(function(el) {
          el.getSectionsToRender().forEach(function(s) {
            try {
              var sectionEl = document.getElementById(s.id);
              var sectionKey = s.section || s.id;
              if (!sectionEl || !sections[sectionKey]) return;
              var parsed = new DOMParser().parseFromString(sections[sectionKey], 'text/html');
              var sourceEl = s.selector ? parsed.querySelector(s.selector) : parsed.querySelector('.shopify-section');
              if (sourceEl) sectionEl.innerHTML = sourceEl.innerHTML;
            } catch(e) {}
          });
        });
      } catch(err) {
        console.error('[FS] Failed to fetch cart sections:', err);
      }
    }
  }
});
</script>