Custom JavaScript guide

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.

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.

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.

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 `<script>` tag or HTML in the box is a syntax error, so the code does not run.
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. Connections from your code to most other websites are blocked the same way.
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, Google Analytics or Google Tag Manager, 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 with document.querySelector('.that-class').

These selectors exist on most themes:

Selector	Element
`.navbar-store`	The top header
`.announcement-bar`	The promo strip above the header
`.product-card`	One product tile in a grid
`.product-price`	The price on a product tile
`.btn-buy-now`	The Buy Now button on the product page
`a.whatsapp-float`	The floating WhatsApp button
`.footer`	The page footer (Brico uses `.brico-footer`)

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');
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.

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')) {
    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	You pasted a `<script>` tag or HTML	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 `/landing/…` pages	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.

Where to paste it​

Where it runs​

How it loads​

Limits​

Finding the element you want​

Snippets​

A notice at the top of every page​

A note on product pages only​

Countdown to the end of an offer​

A prefilled WhatsApp message​

Open outside links in a new tab​

A back-to-top button​

Run something on phones only​

React to a click on Buy Now​

Best practices​

Troubleshooting​

Remove it​