Toggle this on to add custom JavaScript that runs on the pre-checkout page.
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 Pre-Checkout Page > Custom CSS for class names and examples)
Scripts run in the context of the pre-checkout page 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 Pre-Checkout Page
A built-in translation feature is coming soon. In the meantime, you can use Scripts to translate buttons and labels on the pre-checkout page.
Since the pre-checkout page 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.