<style> .wf-force-outline-none[tabindex="-1"]:focus{outline:none;} </style> <style> [data-option-label="color-name-link"] { background-image: url("image-color-name"); // you get those field from a cms colors collections / put as many data option label field as maximum colors swatch you would like to have } [data-option-label="{{wf {"path":"color-2:name","type":"PlainText"\} }}"] { background-image: url("{{wf {"path":"color-2:colors-link","type":"Link"\} }}"); } [data-option-label="{{wf {"path":"color-3:name","type":"PlainText"\} }}"] { background-image: url("{{wf {"path":"color-3:colors-link","type":"Link"\} }}"); } [data-option-label="{{wf {"path":"color-4:name","type":"PlainText"\} }}"] { background-image: url("{{wf {"path":"color-4:colors-link","type":"Link"\} }}"); } [data-option-label="{{wf {"path":"color-5:name","type":"PlainText"\} }}"] { background-image: url("{{wf {"path":"color-5:colors-link","type":"Link"\} }}"); } ֿ/*/ ((--=.lw-commerce-commerceaddtocartoptionpill.w--ecommerce-pill-selected { kjborder: 3px solid #ffb700;))-- } /*/ video::-webkit-media-controls-panel { display: none !important; opacity: 1 !important;} </style> <style> .color-buttons:focus { outline: none; } .color-buttons{ box-shadow: 0 0 0 1px #1f2d1c; border: 2.5px solid #faf5f2; } .color-buttons:active { box-shadow: 0 0 0 1px #bababa; } .color-buttons:hover { box-shadow: 0 0 0 1px #bababa; } body { overflow-x: hidden !important; position: relative !important; width:100% !important; } </style> <!-- No Highlight Tabs --> <style> .arrow { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ </style> <script> document.querySelectorAll('[data-node-type="commerce-add-to-cart-pill"]').forEach(el => el.dataset['optionLabel'] = el.textContent) </script> <script> var FC = FC || {}; FC.onLoad = function () { FC.client.on("ready.done", function () { document .querySelector(".w-commerce-commerceaddtocartbutton") .addEventListener("click", (e) => { e.preventDefault(); const name = document.querySelector(".foxy-product-name").innerText; const price = document.querySelector(".foxy-product-price").innerText; const code = document.querySelector(".foxy-product-code").innerText; const image = document.querySelector(".foxy-product-image").src; const quantity = document.querySelector(".w-commerce-commerceaddtocartquantityinput").value; let cartUrl = `https://${FC.settings.storedomain}/cart?name=${encodeURIComponent(name)}&price=${price}&code=${code ?? encodeURIComponent(code)}&quantity=${quantity ?? 1}&image=${encodeURIComponent(image)}`; const variantSelect = document.querySelectorAll("[data-node-type='commerce-add-to-cart-option-select']"); const variantName = Array.from(variantSelect).map((select) => encodeURIComponent(select.previousElementSibling.innerText) ); const variantValueName = Array.from(variantSelect).map((select) => encodeURIComponent(select.options[select.selectedIndex].text) ); const variantValue = Array.from(variantSelect).map((select) => encodeURIComponent(select.value) ); if (variantSelect.length > 0 && variantValue.includes("")) { return; } else { variantName.forEach( (name, index) => (cartUrl += `&${name}=${variantValueName[index]}`) ); FC.client.event("cart-submit").trigger({ data: { cart: "add" }, url: cartUrl, }); } }); }); }; </script>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter