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
Element | Selector |
Add to cart button |
|
Go to checkout button |
|
Summary row |
|
Free shipping label |
|
Product title |
|
Variant label |
|
Discount badge |
|
Skip offer link |
|
You can copy the same script to multiple links.