Who are you

Vandal Pop is a youth culture brand built by and for the next generation of creators. We unite a tribe of artists, tween and teen rebels who live loud, wear their expression, and take the stage. Through bold soda flavors and characters, edgy merch, and live shows that amplify youth voices, Vandal Pop turns rebellion into a community that can’t be silenced.

A doll with purple hair and black goggles wearing a tattered red shirt, dark pants, and brown boots.

Contact us

Interested in joining forces for the good of humanity? Hmmm… Fill out some info and we will be in touch shortly. Trust us.

Popular Now
New Stuff
Soda Specs
Distribution Map
Riot Room
Instagram
Tiktok

Contact
Shipping Info.
Initiate a Return
Refund Policy
FAQs
Privacy Policy
Terms & Conditions

For the kids who rewrite tomorrow.

The Vandal Pop Company © 2026 • The Vandal Pop Characters are registered trademarks of The Vandal Pop Company • Malibu, CA

// ------------------------------------------------- // Product grid rotator (collection: /cans) // ------------------------------------------------- const ListingRotator = (() => { const WRAP_SELECTOR = '.product-list-image-wrapper .product-list-item-image .grid-image-wrapper'; const ROTATE_MS = 2000; const states = new Map(); let intervalId = null; let observer = null; const ensureSrc = (img) => { if (!img.getAttribute('src') && img.dataset?.src) { img.setAttribute('src', img.dataset.src); } img.style.display = ''; }; const collectImages = (wrapper) => { const imgs = Array.from(wrapper.querySelectorAll('img')); const usable = imgs.filter((img) => img.getAttribute('src') || img.dataset?.src); return uniqueBy(usable, (img) => (img.getAttribute('src') || img.dataset?.src || '').trim()); }; const setActive = (imgs, idx) => { imgs.forEach((img, i) => { const active = i === idx; img.classList.toggle('nbf-active', active); img.style.opacity = active ? 1 : 0; }); }; const inView = (el) => { const rect = el.getBoundingClientRect(); const vh = win.innerHeight || doc.documentElement.clientHeight; const vw = win.innerWidth || doc.documentElement.clientWidth; return rect.bottom > 0 && rect.right > 0 && rect.top < vh && rect.left < vw; }; const makeArrowButton = (dir, handler) => { const btn = doc.createElement('button'); btn.type = 'button'; btn.className = `nbf-rotator-btn ${dir === 'prev' ? 'nbf-rotator-prev' : 'nbf-rotator-next'}`; btn.setAttribute('aria-label', dir === 'prev' ? 'Previous image' : 'Next image'); btn.innerHTML = dir === 'prev' ? '' : ''; btn.addEventListener('click', handler); return btn; }; const attachArrows = (wrapper, state) => { if (wrapper.querySelector('.nbf-rotator-ui')) return; const ui = doc.createElement('div'); ui.className = 'nbf-rotator-ui'; const go = (delta) => { state.idx = (state.idx + delta + state.imgs.length) % state.imgs.length; setActive(state.imgs, state.idx); }; const pauseTemporarily = () => { state.paused = true; setTimeout(() => { state.paused = false; }, 1000); }; const prev = makeArrowButton('prev', (evt) => { evt.preventDefault(); evt.stopPropagation(); pauseTemporarily(); go(-1); }); const next = makeArrowButton('next', (evt) => { evt.preventDefault(); evt.stopPropagation(); pauseTemporarily(); go(1); }); ui.append(prev, next); wrapper.appendChild(ui); }; const setupWrapper = (wrapper) => { if (wrapper.classList.contains('nbf-rotator-ready')) return; const imgs = collectImages(wrapper); if (imgs.length < 2) return; imgs.forEach(ensureSrc); wrapper.classList.add('nbf-rotator', 'nbf-rotator-ready'); const state = { idx: 0, imgs, paused: false }; states.set(wrapper, state); setActive(imgs, 0); wrapper.addEventListener('mouseenter', () => { const st = states.get(wrapper); if (st) st.paused = true; }); wrapper.addEventListener('mouseleave', () => { const st = states.get(wrapper); if (st) st.paused = false; }); attachArrows(wrapper, state); }; const initAll = () => { doc.querySelectorAll(WRAP_SELECTOR).forEach(setupWrapper); }; const startTimer = () => { if (intervalId) clearInterval(intervalId); intervalId = win.setInterval(() => { for (const [wrapper, state] of states) { if (!doc.body.contains(wrapper)) { states.delete(wrapper); continue; } if (state.paused) continue; if (!inView(wrapper)) continue; state.idx = (state.idx + 1) % state.imgs.length; setActive(state.imgs, state.idx); } }, ROTATE_MS); }; const observeDom = () => { if (observer) return; observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { mutation.addedNodes?.forEach((node) => { if (!(node instanceof HTMLElement)) return; if (node.matches?.(WRAP_SELECTOR)) setupWrapper(node); node.querySelectorAll?.(WRAP_SELECTOR).forEach(setupWrapper); }); }); }); observer.observe(doc.body, { childList: true, subtree: true }); }; const cleanup = () => { for (const [wrapper] of states) { if (!doc.body.contains(wrapper)) states.delete(wrapper); } }; const init = () => { if (!location.pathname.endsWith('/cans')) return; runAfterLoad(() => { setTimeout(() => { initAll(); startTimer(); observeDom(); win.setInterval(cleanup, 10000); }, 1000); }); }; return { init }; })();