Custom JavaScript lets you add behaviour that the customizer has no switch for: a delivery notice on every page, a countdown to the end of an offer, a prefilled WhatsApp message, a back-to-top button. You write the code once in the dashboard and it runs on your storefront for every visitor. This guide covers where to paste it, where it runs, what it cannot do, and a set of snippets you can copy.
📝 Note — Enterprise feature
Custom JavaScript is available on the Enterprise plan. On other plans the section shows as locked. See plans to upgrade.
Where to paste it
Sidebar Personnaliser la boutique / تخصيص المتجر → Personnaliser / تخصيص → JavaScript personnalisé / JavaScript مخصّص. Paste your code, then click Save.
Paste JavaScript only. Do not include a <script> tag or any HTML around it: the box tells you when it sees one.
As you type, the box checks the code. If it finds a syntax error it shows the browser's message under the box, and code with a syntax error does not run at all. Fix the error before you save.
⚠️ Warning — The code does not run in the live preview
The preview on the right of the customizer never runs your JavaScript. To test it, save, then open your store in a new tab. Storefront pages are cached for a few minutes, so allow about five minutes or open the store in a private window.
💡 Tip — You can always go back
If something looks wrong on your store, clear the box and Save. Your products, orders and settings are never touched by this code.
Where it runs
On the homepage, product pages, category and all-products pages, the cart, checkout, order tracking and the order-confirmation page.
It does not run on landing pages at /landing/{slug}, and it does not run inside the customizer preview.
How it loads
Your code is delivered as its own file and runs after the browser has finished reading the page. Two things follow from that:
Every element of the page already exists when your code starts, so you can look elements up right away. You do not need to wait for a "page loaded" event.
An error in your code stops your code at that line. The store itself keeps working: products, cart and the order form do not depend on it.
Visitors download the file once and their browser keeps it until you change the code.
Limits
Limit | What happens |
50,000 bytes of code | A longer paste is refused with a message when you save, and nothing is saved. The counter under the box shows the current size. Arabic letters count as two bytes each. |
JavaScript only | A |
Your own code only | Loading a script file from another website (a chat widget, a heatmap tool) is blocked by the storefront's security policy. A few hosts are allowed, among them the public code-library hosts |
Landing pages | Not covered. |
Other plans | If the store leaves the Enterprise plan, or the plan expires, the code stops running. It stays saved and runs again when the plan is active. |
For Meta, TikTok, Snapchat, Pinterest, Google Analytics, Google Tag Manager or Google Ads, use the Pixels page of the dashboard instead. Those are supported there without any code.
Finding the element you want
Use your browser's inspector, the same way as for Custom CSS:
Open your storefront on a desktop browser.
Right-click the element and choose Inspect.
Note its
class="…"and look it up in your code withdocument.querySelector('.that-class').
These selectors exist on most themes:
Selector | Element |
| The top header |
| The promo strip above the header |
| One product tile in a grid |
| The price on a product tile |
| The Buy Now button on the product page (the Digital theme also uses |
| The floating WhatsApp button. Once you save the settings in Customize → Help widget, it becomes |
| The page footer (the Brico homepage uses |
Class names differ between themes and can change when a theme is updated. Always check that the element exists before you use it, as every snippet below does with if (...).
Snippets
Each snippet below was run in a real browser, on desktop and at phone width, before it was published. Paste one, or several one after the other.
A notice at the top of every page
var bar = document.createElement('div');
bar.textContent = 'Free delivery on orders above 5000 DA';
bar.style.cssText = 'background:#111827;color:#fff;text-align:center;padding:10px 16px;font-size:14px;';
document.body.insertBefore(bar, document.body.firstChild);
Check first whether the built-in Announcement bar (Customize → Announcement bar) does what you need. It needs no code.
A note on product pages only
if (location.pathname.indexOf('/product/') !== -1) {
var note = document.createElement('p');
note.textContent = 'Order before 2 pm and we ship the same day.';
note.style.cssText = 'margin:12px 0;padding:10px 14px;border-radius:8px;background:#fef3c7;color:#92400e;font-size:14px;';
var title = document.querySelector('h1');
if (title) { title.parentNode.insertBefore(note, title.nextSibling); }
}
The same test works for other pages: /cart, /checkout, /category/.
Countdown to the end of an offer
var end = new Date('2026-12-31T23:59:59');
var box = document.createElement('div');
box.style.cssText = 'background:#b91c1c;color:#fff;text-align:center;padding:10px 16px;font-size:14px;';
document.body.insertBefore(box, document.body.firstChild);
function tick() {
var left = Math.floor((end - new Date()) / 1000);
if (left <= 0) { box.style.display = 'none'; return; }
var d = Math.floor(left / 86400), h = Math.floor(left % 86400 / 3600), m = Math.floor(left % 3600 / 60);
box.textContent = 'Offer ends in ' + d + ' d ' + h + ' h ' + m + ' min';
setTimeout(tick, 30000);
}
tick();
Change the date on the first line. The bar hides itself when the date has passed.
A prefilled WhatsApp message
var wa = document.querySelector('a.whatsapp-float, a.dzhw-launcher');
if (wa && wa.href.indexOf('text=') === -1) {
wa.href += (wa.href.indexOf('?') === -1 ? '?' : '&') + 'text=' + encodeURIComponent('Hello, I have a question about: ' + document.title);
}
The customer's message starts with the name of the page they were on. For product pages, Customize → Help widget can add the product name to the WhatsApp message without any code.
Open outside links in a new tab
var links = document.querySelectorAll('a[href^="http"]');
for (var i = 0; i < links.length; i++) {
if (links[i].hostname !== location.hostname) {
links[i].target = '_blank';
links[i].rel = 'noopener';
}
}
A back-to-top button
var up = document.createElement('button');
up.type = 'button';
up.textContent = '↑';
up.setAttribute('aria-label', 'Back to top');
up.style.cssText = 'position:fixed;bottom:90px;left:16px;width:44px;height:44px;border-radius:50%;border:0;background:#111827;color:#fff;font-size:18px;display:none;z-index:900;';
up.addEventListener('click', function () { window.scrollTo({ top: 0, behavior: 'smooth' }); });
document.body.appendChild(up);
window.addEventListener('scroll', function () {
up.style.display = window.scrollY > 600 ? 'block' : 'none';
}, { passive: true });
Run something on phones only
if (window.matchMedia('(max-width: 768px)').matches) {
document.documentElement.classList.add('on-phone');
}
You can then target .on-phone from your Custom CSS.
React to a click on Buy Now
document.addEventListener('click', function (e) {
if (e.target.closest('.btn-buy-now, .dt-btn-buy-now')) {
console.log('Buy now clicked on ' + document.title);
}
});
Listen to the click, as here. Do not replace the button or stop the click: the order would not go through.
Best practices
Leave the order form alone. Do not change, hide or resubmit the fields of the order form or the checkout, and do not redefine functions that already exist on the page. A store that cannot take orders is the one mistake this box can cause.
Check that an element exists before using it (
if (el) { ... }). A missing element is the most common cause of an error.Test on a real phone. Most of your buyers are on phones.
Check both languages if your store sells in Arabic and French. Text you add from code is not translated for you.
Keep it short. A few focused lines are easier to keep working than a long script, and they load faster.
Use a built-in control when one exists. A customizer switch keeps working when a theme changes; a class name in your code may not.
Look at the browser console (right-click → Inspect → Console) after saving. An error from your code shows there with its line.
Troubleshooting
Symptom | Likely cause | Fix |
Nothing happens on my store | The page you see is a cached copy | Wait about five minutes, or open the store in a private window |
Nothing happens, and the box shows an error | The code has a syntax error, so none of it runs | Fix the line the message points to |
The box says to remove the script tag | Your code starts with a | Paste only the JavaScript between the tags |
Saving is refused | The code is longer than 50,000 bytes | Shorten it |
It works on one theme and not after I changed theme | The class name does not exist on the new theme | Inspect the element again and update the selector |
A chat or analytics widget does not load | It loads a file from another website, which is blocked | Use the Pixels page for supported tools; other outside scripts are not supported |
Nothing happens in the customizer preview | The preview never runs custom JavaScript | Save and open the store in a new tab |
Nothing changes on my landing page | Custom JavaScript does not run on | Not supported there |
The store behaves strangely since my change | A line of your code interferes with the page | Clear the box and Save, then add the code back a few lines at a time |
Remove it
Clear the box and click Save. Within a few minutes the storefront no longer loads your code. Reset in the customizer also clears it, along with your other customizations.
Want to change the look instead of the behaviour? See the Custom CSS guide and Storefront customization.