DesignerLeo

you could try something like this in the header code injection:

 
<!--SIMPLE ALL BUTTONS PLAY A NOSIE ON CLICK--> <script> document.addEventListener('DOMContentLoaded', function() { //make sure document is loaded let buttons = document.querySelectorAll(".sqs-block-button-container"); //get all buttons, add or change if your buttons have different classes var BTNaudioCLICK = new Audio('INSERT LINK TO AUDIO FILE HERE'); //provide a link to your audio file BTNaudioCLICK.preload = 'auto'; //make sure the audio is ready BTNaudioCLICK.volume = 1; //set volume to 100% function CLICK(event) { BTNaudioCLICK.pause(); //pause to avoid clipping sounds on spam BTNaudioCLICK.playbackRate = 1; //set speed of audio playback BTNaudioCLICK.currentTime = 0; //set audio time to beginning BTNaudioCLICK.play(); //play the sound } for(const button of buttons) { button.addEventListener('mousedown', CLICK, false); //assign click listeners to all buttons } }); //closing the dom loaded statement </script> I am unsure if I closed all the brackets correctly but chatGPT should help you along nicely with this.
This should keep your links intact.

I figured it out.
I wrote some JS to log any new elements:
 
<!--LOG NEW ELEMENTS--> <script> // Ensure the DOM is fully loaded before setting up the observer document.addEventListener('DOMContentLoaded', (event) => { // Create a callback function to execute when mutations are observed const callback = (mutationsList, observer) => { for (const mutation of mutationsList) { if (mutation.type === 'childList') { // Loop through the added nodes mutation.addedNodes.forEach(node => { // Check if the node is an element (not a text node, etc.) if (node.nodeType === Node.ELEMENT_NODE) { console.log(`New element added: ID = ${node.id}, Class = ${node.className}`); } }); } } }; // Create an observer instance linked to the callback function const observer = new MutationObserver(callback); // Start observing the document body for configured mutations const targetNode = document.body; if (targetNode) { observer.observe(targetNode, { childList: true, subtree: true }); } else { console.error('Target node for MutationObserver is not available.'); } // Optionally, you can disconnect the observer when you no longer need it // observer.disconnect(); }); </script> And then I identified a single element with no ID and three gibberish classes which appears as I modify the quantity of a product in cart page.
Setting display: none; on any of them removes the spinner along with the background. I set background: transparent; now I retained the spinner wheel loader and removed the pesky grey overlay.
 
<style> //STOCK SPINNER WHEEL MODS// .IxjCAUd2hJFV_2zxKcW9 { // display: none !important; background: transparent !important; } .tTLeCwDAKFm1AX2fwAaS { // display: none !important; } .pFXZ5G2whUcWOosr649g { // display: none !important; } </style> I hope this helps someone else too.

the CSS:
 
//ADDED TO CART POP-OVER// //disable stock pop-over .template-cart-item-added-popover { display: none; } //custom pop-over #custom-popover { display: block; opacity: 0; position: fixed; transition: all 0.5s ease; color: #ffc700; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%); padding: 25; border: 0; width: 100%; z-index: 999999; // min-height: 90px; align-items: center; text-align: center; font-size: 20px; letter-spacing: 2.5px; pointer-events: none; } .popover-message { padding-left: 25px; padding-right: 25px; } #custom-popover.show { opacity: 1; } and the JS:
 
<!--Custom Added to Cart Pop-Over--> <div id="custom-popover"> <p id="popover-message"></p> </div> <script> document.addEventListener('DOMContentLoaded', function() { let hideTimeout; function showPopover(message) { var popover = document.getElementById('custom-popover'); var popoverMessage = document.getElementById('popover-message'); popoverMessage.textContent = message; popover.classList.add('show'); clearTimeout(hideTimeout); hideTimeout = setTimeout(function() { popover.classList.remove('show'); }, 3000); } function checkSelectOptions(productItem) { var selects = productItem.querySelectorAll('select'); for (var i = 0; i < selects.length; i++) { if (selects[i].selectedIndex === 0) { return 'Please select ' + selects[i].options[0].textContent; } } return null; } function listenForAddToCart() { var buttons = document.querySelectorAll('.sqs-add-to-cart-button'); buttons.forEach(function(button) { button.addEventListener('click', function(event) { let productItem = event.target.closest('.ProductItem') || event.target.closest('.grid-item'); let productName = productItem?.querySelector('.ProductItem-details-title')?.textContent || productItem?.querySelector('.grid-title')?.textContent; if (productItem) { let selectMessage = checkSelectOptions(productItem); if (selectMessage) { showPopover(selectMessage); return; // Prevent showing the "acquired" message if select option is not chosen } } if (productName) { showPopover(productName + ' acquired!'); } }); }); } listenForAddToCart(); document.addEventListener('click', function(event) { if (event.target.closest('.sqs-add-to-cart-button')) { listenForAddToCart(); } }); }); </script> This disables the stock popup,
adds a bar at the top whenever a product was added, regardless of whether it was added from product page or category view.

here is the solution:
(replace exampleProductUrl with a product page that has at least 2 images - in my case it is https://www.polivantage.com/shop/p/infinity  but yours would be custom to your site)
 
<!--Add Product image arrows in shop categories--> <script> document.addEventListener('DOMContentLoaded', function() { const subString = 'shop'; const subStringTwo = 'shop/p/'; const getURL = window.location.href; const exampleProductUrl = "https://www.polivantage.com/shop/p/infinity"; if (getURL.includes(subString) && !getURL.includes(subStringTwo)) { const headerActions = document.querySelector('.header-actions'); let isTouch = false; function checkHeader() { const styles = window.getComputedStyle(headerActions); isTouch = styles.getPropertyValue('display') !== 'flex'; } function fetchAndCacheProductHtml(url) { if (!isTouch) { const cachedHtml = localStorage.getItem('cachedProductHtml'); if (cachedHtml) { cloneImageArrows(cachedHtml); } else { fetch(url) .then(response => response.text()) .then(html => { localStorage.setItem('cachedProductHtml', html); cloneImageArrows(html); }) .catch(error => { console.error('Error fetching product HTML:', error); }); } } else { fetch(url) .then(response => response.text()) .then(html => { cloneImageArrows(html); }) .catch(error => { console.error('Error fetching product HTML:', error); }); } } function cloneImageArrows(html) { const tempDiv = document.createElement('div'); tempDiv.innerHTML = html; const elementToClone = tempDiv.querySelector('.ProductItem-gallery-carousel-controls'); const products = document.querySelectorAll('.product-lists-item'); products.forEach((product, index) => { const allImages = product.querySelectorAll('.grid-item-image'); if (allImages.length >= 2) { const clonedElement = elementToClone.cloneNode(true); const productImage = product.querySelector('.grid-image'); productImage.prepend(clonedElement); clonedElement.id = `carousel${index + 1}`; clonedElement.classList.add('carousel', 'categoryArrows'); const leftArrow = clonedElement.querySelector('.ProductItem-gallery-prev'); const rightArrow = clonedElement.querySelector('.ProductItem-gallery-next'); leftArrow.classList.add('arrowButton', 'arrowPrev'); rightArrow.classList.add('arrowButton', 'arrowNext'); leftArrow.type = 'button'; rightArrow.type = 'button'; function adjustImageArrows() { if (!isTouch) { leftArrow.style.position = 'absolute'; leftArrow.style.left = '-14%'; leftArrow.style.transform = 'scale(0.333)'; rightArrow.style.position = 'absolute'; rightArrow.style.right = '-14%'; rightArrow.style.transform = 'scale(0.333)'; } else { leftArrow.style.position = 'absolute'; leftArrow.style.left = '0%'; leftArrow.style.transform = 'scale(1.2)'; rightArrow.style.position = 'absolute'; rightArrow.style.right = '0%'; rightArrow.style.transform = 'scale(1.2)'; } } adjustImageArrows(); productImage.addEventListener('click', function(event) { const clickedArrow = event.target.closest('.arrowButton'); if (!clickedArrow) return; event.preventDefault(); const direction = clickedArrow.classList.contains('arrowPrev') ? 'left' : 'right'; handleArrowClick(direction, allImages); }); function handleArrowClick(direction, images) { const imagesArray = Array.from(images); const currentImage = imagesArray.find(image => image.style.display === 'block' || image.style.opacity === '1'); let currentIndex = imagesArray.indexOf(currentImage); let newIndex; if (direction === 'left') { newIndex = currentIndex > 0 ? currentIndex - 1 : imagesArray.length - 1; } else { newIndex = currentIndex < imagesArray.length - 1 ? currentIndex + 1 : 0; } currentImage.style.display = 'none'; //currentImage.style.opacity = '0'; currentImage.classList.remove('active'); imagesArray[newIndex].style.display = 'block'; //imagesArray[newIndex].style.opacity = '1'; imagesArray[newIndex].classList.remove('grid-image-hover'); imagesArray[newIndex].classList.add('active'); } window.addEventListener('resize', function(event) { const prevIsTouch = isTouch; checkHeader(); if (isTouch !== prevIsTouch) { adjustImageArrows(); } }); } }); } checkHeader(); fetchAndCacheProductHtml(exampleProductUrl); } }); </script> and some css:
 
.carousel { z-index: 9999; position: absolute; width: 100%; height: 100%; display: flex; align-items: center; } .grid-item-image { color: transparent; transition: opacity 1s ease-in-out !important; } .grid-item-image.active { opacity: 100% !important; }  

I solved it. Here is the solution:

 
<!--SEARCH BAR--> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script> $(function(){ var getURL = window.location.href; var subString = 'shop'; let searchBlock = $('#block-yui_3_17_2_1_1717927882701_20949').attr('id','').addClass('header-search-bar'); if (getURL.includes(subString)) { $(searchBlock).insertAfter($('.nested-category-title')); $(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('.header-menu-nav-folder-content')); } else { searchBlock.remove(); } }) </script>