Toggle this on to add custom JavaScript that runs on the popup.

This feature is intended for developers.

How Scripts Work

Your script is injected at the bottom of the page's HTML (before </body>) on initial load. It runs once when the checkout page loads, and has full access to the page DOM. This means you can add tracking pixels, inject styles, or manipulate page elements just like any script on a regular web page.

Use Cases

• Custom event tracking

• Third-party analytics

• Custom CSS styling (see Popup > Custom CSS for class names and examples)

Scripts run in the context of the popup and have access to the page DOM.

Example: Google Analytics

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> <script>     window.dataLayer = window.dataLayer || [];  function gtag(){dataLayer.push(arguments);}  gtag('js', new Date());  gtag('config','G-XXXXXXXXXX'); </script>

Replace G-XXXXXXXXXX with your Google Analytics measurement ID.

Translating the Popup

A built-in translation feature is coming soon. In the meantime, you can use Scripts to translate buttons and labels on the popup.

Since the popup is React-rendered, elements load dynamically. Use a MutationObserver to detect and rename elements as they appear.

Example: Translate the "Add" button

<script>const observer = new MutationObserver(() => {  document.querySelectorAll('.pc-add-btn:not([data-renamed])').forEach(btn => {    btn.textContent = 'Hinzufügen';    btn.setAttribute('data-renamed', 'true');  });});observer.observe(document.body, { childList: true, subtree: true });</script>

Replace 'Hinzufügen' with any text you want.

Example: Translate labels and hide Subtotal

<script>const observer = new MutationObserver(() => {  // Rename buttons  document.querySelectorAll('.pc-add-btn:not([data-renamed])').forEach(btn => {    btn.textContent = 'Hinzufügen';    btn.setAttribute('data-renamed', 'true');  });  // Translate and hide summary labels  document.querySelectorAll('.pc-summary__row:not([data-renamed])').forEach(row => {    const label = row.querySelector('span:first-child');    if (label) {      if (label.textContent.trim() === 'Subtotal') row.style.display = 'none';      if (label.textContent.trim() === 'Shipping') label.textContent = 'VERSAND';      if (label.textContent.trim() === 'Total') label.textContent = 'Gesamtsumme';    }    const freeSpan = row.querySelector('.pc-summary__free');    if (freeSpan && freeSpan.textContent.trim() === 'Free') {      freeSpan.textContent = 'Gratis';    }    row.setAttribute('data-renamed', 'true');  });});observer.observe(document.body, { childList: true, subtree: true });</script>

Common CSS Selectors

You can copy the same script to multiple links.