Copy & paste

Store code snippets from the CFDFpromo lab

The exact snippets we use to polish stores: a French / English language switch, your own footer branding, and rounded product images. Copy one, paste it where noted, done.

The snippets

Each one is copy-and-paste. The label on every block tells you where it goes in your store settings (a Head snippet, your Custom CSS, or the footer). They change how your store looks and behaves, never your products or orders, so they are safe to try and easy to undo. Every block is stamped with cfdfpromo.com in a comment so you always know where it came from.

Branded French / English language switch

Drops a small "Language" pill on your store that flips the whole site between English and French in one click, in your brand color, while protecting names you never want translated (brands, product lines, key words).

Head snippet+ Footer / Body

How to use: paste the whole block into your store's Head snippet. It has a clearly marked HEAD part and a small BODY part (the pill itself) inside the same block.

How to tweak: change the pill color with --cfdf-pill-bg (set to your burgundy #72383d), move it with --cfdf-lang-top / --cfdf-lang-right, and add any words to keep untranslated to the PROTECTED_TERMS list.

Head snippet — includes HEAD + BODY 
<!-- CFDFpromo.com · free store snippet -> https://cfdfpromo.com/pages/code-snippet-library -->
<!-- =========================================================
     Google Translate + Nice Selector + Protected Terms
     Front-end only
     Hide Google loading UI + hover/rating popup + top banner
========================================================== -->

<!-- START: HEAD -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

<style>
  :root{
    --cfdf-lang-top: 5px;
    --cfdf-lang-right: 10px;
    --cfdf-pill-bg: #72383d;
    --cfdf-pill-radius: 12px;
    --cfdf-font-size: 14px;
  }
@media (max-width: 768px){
:root{
--cfdf-lang-top: 160px;
}
} 
  .cfdf-lang-wrap{
    position: fixed;
    top: var(--cfdf-lang-top);
    right: var(--cfdf-lang-right);
    z-index: 9999;
    font-family: 'Montserrat', sans-serif;
  }

  .cfdf-lang-pill{
    background-color: var(--cfdf-pill-bg);
    padding: 6px 12px;
    border-radius: var(--cfdf-pill-radius);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .cfdf-lang-label{
    color: #fff;
    font-size: var(--cfdf-font-size);
    margin-right: 0;
    white-space: nowrap;
  }

  /* Keep selector visible and styled */
  #google_translate_element{
    display: inline-block !important;
    line-height: 1 !important;
  }

  #google_translate_element select.goog-te-combo{
    background-color: var(--cfdf-pill-bg) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: var(--cfdf-font-size) !important;
    font-family: 'Montserrat', sans-serif !important;
    cursor: pointer !important;
    height: auto !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* Hide Google branding text around selector, but keep dropdown working */
  #google_translate_element .goog-logo-link,
  #google_translate_element .goog-te-gadget span:not(.goog-te-combo),
  #google_translate_element .goog-te-gadget img {
    display: none !important;
  }

  #google_translate_element .goog-te-gadget {
    color: transparent !important;
    font-size: 0 !important;
  }

  /* Kill top banner */
  .goog-te-banner-frame.skiptranslate,
  .goog-te-banner-frame,
  iframe.goog-te-banner-frame,
  iframe.goog-te-banner-frame.skiptranslate {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    max-height: 0 !important;
    top: -9999px !important;
  }

  html {
    margin-top: 0 !important;
  }

  body {
    top: 0 !important;
    position: relative !important;
  }

  /* Hide old Google popup / tooltip / rating UI */
  .goog-te-balloon-frame,
  iframe.goog-te-balloon-frame,
  .goog-tooltip,
  #goog-gt-tt,
  .goog-text-highlight {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Remove highlight effect without hiding translated text */
  .goog-text-highlight,
  font.goog-text-highlight,
  span.goog-text-highlight {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Hide newer Google Translate floating/loading/rating elements */
  .VIpgJd-ZVi9od-ORHb,
  .VIpgJd-ZVi9od-ORHb-OEVmcd,
  .VIpgJd-ZVi9od-aZ2wEe,
  .VIpgJd-ZVi9od-aZ2wEe-OiiCO,
  .VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
  .VIpgJd-ZVi9od-vH1Gmf,
  .VIpgJd-ZVi9od-l4eHX-hSRGPd,
  .VIpgJd-yAWNEb-L7lbkb,
  .VIpgJd-ZVi9od-xl07Ob-lTBxed {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }
</style>

<script>
  const BACKEND_PATH_PREFIXES = ["/manage_site/", "/manage/", "/admin/", "/design/", "/designer/"];

  function isBackendArea(){
    const p = (window.location && window.location.pathname) ? window.location.pathname : "";
    return BACKEND_PATH_PREFIXES.some(prefix => p.indexOf(prefix) === 0);
  }

  if (isBackendArea()) {
    // Do nothing on backend
  } else {

    const PROTECTED_TERMS = [
      "Good","better","Best","Crewnecks","Hoodies",
      "commandez","Personnalisez","choisissez",
      "Under Armour","Colombia","Berne Apparel","Comfort Colors","DRI DUCK",
      "King Fashion","New Balance","Independent Trading Co.","Muskoka Trail","Marmot",
      "North End","Original Penguin®","Red Kap","Russell Athletic","Team 365",
      "Threadfast Apparel","commander","Modifier","Configurer","The North Face","High Five","Next Level Apparel","Anvil","CH Essential"
    ];

    function escapeRegExp(str){
      return str.replace(/[.*+?^${}()|[\]\\]/g,'\\$&');
    }

    function isWordish(term){
      return /^[A-Za-z0-9]+$/.test(term);
    }

    function protectTerms(root){
      if (!root) return;

      const walker = document.createTreeWalker(
        root,
        NodeFilter.SHOW_TEXT,
        {
          acceptNode(node){
            const p = node.parentNode;
            if (!p) return NodeFilter.FILTER_REJECT;

            const tag = (p.nodeName || '').toLowerCase();
            if (['script','style','noscript','textarea','input','select'].includes(tag)) return NodeFilter.FILTER_REJECT;
            if (p.closest && p.closest('.notranslate,[translate="no"]')) return NodeFilter.FILTER_REJECT;
            if (!node.nodeValue || !node.nodeValue.trim()) return NodeFilter.FILTER_REJECT;

            return NodeFilter.FILTER_ACCEPT;
          }
        }
      );

      const textNodes = [];
      while (walker.nextNode()) textNodes.push(walker.currentNode);

      for (const node of textNodes){
        const text = node.nodeValue;
        const matches = [];

        for (const term of PROTECTED_TERMS){
          if (!term) continue;

          const escaped = escapeRegExp(term);
          const pattern = isWordish(term) ? `\\b${escaped}\\b` : escaped;
          const re = new RegExp(pattern,'g');
          let m;

          while ((m = re.exec(text)) !== null){
            matches.push({ start:m.index, end:m.index + m[0].length, value:m[0] });
            if (m.index === re.lastIndex) re.lastIndex++;
          }
        }

        if (!matches.length) continue;

        matches.sort((a,b)=>a.start-b.start || (b.end-b.start)-(a.end-a.start));

        const filtered = [];
        let lastEnd = -1;

        for (const m of matches){
          if (m.start >= lastEnd){
            filtered.push(m);
            lastEnd = m.end;
          }
        }

        let cursor = 0;
        const frag = document.createDocumentFragment();

        for (const m of filtered){
          if (m.start > cursor) {
            frag.appendChild(document.createTextNode(text.slice(cursor, m.start)));
          }

          const span = document.createElement('span');
          span.className = 'notranslate';
          span.setAttribute('translate','no');
          span.textContent = m.value;
          frag.appendChild(span);

          cursor = m.end;
        }

        if (cursor < text.length) {
          frag.appendChild(document.createTextNode(text.slice(cursor)));
        }

        const parent = node.parentNode;
        if (parent){
          parent.insertBefore(frag, node);
          parent.removeChild(node);
        }
      }
    }

    let protectTimer = null;
    function scheduleProtect(){
      clearTimeout(protectTimer);
      protectTimer = setTimeout(function(){
        protectTerms(document.body);
      }, 250);
    }

    function hideGoogleUi(){
      try {
        const selectors = [
          '.goog-te-banner-frame',
          'iframe.goog-te-banner-frame',
          '.goog-te-balloon-frame',
          'iframe.goog-te-balloon-frame',
          '.goog-tooltip',
          '#goog-gt-tt',
          '.VIpgJd-ZVi9od-ORHb',
          '.VIpgJd-ZVi9od-ORHb-OEVmcd',
          '.VIpgJd-ZVi9od-aZ2wEe',
          '.VIpgJd-ZVi9od-aZ2wEe-OiiCO',
          '.VIpgJd-ZVi9od-aZ2wEe-wOHMyf',
          '.VIpgJd-ZVi9od-vH1Gmf',
          '.VIpgJd-ZVi9od-l4eHX-hSRGPd',
          '.VIpgJd-yAWNEb-L7lbkb',
          '.VIpgJd-ZVi9od-xl07Ob-lTBxed'
        ];

        selectors.forEach(function(selector){
          document.querySelectorAll(selector).forEach(function(el){
            el.style.setProperty('display', 'none', 'important');
            el.style.setProperty('visibility', 'hidden', 'important');
            el.style.setProperty('opacity', '0', 'important');
            el.style.setProperty('pointer-events', 'none', 'important');
            el.style.setProperty('max-width', '0', 'important');
            el.style.setProperty('max-height', '0', 'important');
            el.style.setProperty('overflow', 'hidden', 'important');
          });
        });

        document.documentElement.style.setProperty('margin-top', '0px', 'important');
        document.documentElement.style.setProperty('top', '0px', 'important');
        document.body.style.setProperty('top', '0px', 'important');
      } catch(e) {}
    }

    function scheduleHideUi(){
      hideGoogleUi();
      setTimeout(hideGoogleUi, 400);
      setTimeout(hideGoogleUi, 1200);
      setTimeout(hideGoogleUi, 2500);
      setTimeout(hideGoogleUi, 5000);
      setTimeout(hideGoogleUi, 8000);
    }

    document.addEventListener('DOMContentLoaded', function(){
      protectTerms(document.body);

      const obs = new MutationObserver(function(){
        scheduleProtect();
        hideGoogleUi();
      });

      obs.observe(document.body, { childList:true, subtree:true, characterData:true });

      document.addEventListener('change', function(e){
        const t = e.target;
        if (t && t.matches && t.matches('#google_translate_element select.goog-te-combo')){
          setTimeout(function(){ protectTerms(document.body); }, 600);
          setTimeout(function(){ protectTerms(document.body); }, 1400);
          setTimeout(hideGoogleUi, 600);
          setTimeout(hideGoogleUi, 1400);
          setTimeout(hideGoogleUi, 2500);
        }
      }, true);

      scheduleHideUi();
    });

    function googleTranslateElementInit(){
      new google.translate.TranslateElement({
        pageLanguage:'en',
        includedLanguages:'en,fr',
        layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
        autoDisplay: false
      }, 'google_translate_element');

      scheduleHideUi();
    }

    window.googleTranslateElementInit = googleTranslateElementInit;

    (function loadGT(){
      const s = document.createElement('script');
      s.type = 'text/javascript';
      s.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
      s.async = true;
      document.head.appendChild(s);
    })();
  }
</script>
<!-- END: HEAD -->


<!-- START: BODY -->
<script>
  if (!isBackendArea()) {
    document.write(
      '<div class="cfdf-lang-wrap">' +
        '<div class="cfdf-lang-pill">' +
          '<span class="cfdf-lang-label">Language</span>' +
          '<div id="google_translate_element" style="display:inline-block;"></div>' +
        '</div>' +
      '</div>'
    );
  }
</script>
<!-- END: BODY -->

Make the language pill fully clickable

Companion styling so the whole pill is the click target, not just the tiny dropdown inside it. Pairs with the switch above.

Custom CSS

How to use: add this at the bottom of your Custom CSS, under the language switch.

How to tweak: the corner roundness follows --cfdf-pill-radius from the switch snippet, so change it once there and both update.

Custom CSS 
/* CFDFpromo.com · free store snippet -> https://cfdfpromo.com/pages/code-snippet-library */
/* Make the whole language pill the click area */
.cfdf-lang-pill{
  position: relative !important;
  overflow: hidden !important;
  background-color: var(--cfdf-pill-bg) !important;
  border-radius: var(--cfdf-pill-radius) !important;
}

/* Keep the visible label styled and above the hidden select */
.cfdf-lang-label{
  pointer-events: none !important;
  position: relative !important;
  z-index: 3 !important;
  color: #fff !important;
  font-size: var(--cfdf-font-size) !important;
  font-family: 'Montserrat', sans-serif !important;
  white-space: nowrap !important;
}

/* Stretch the Google container over the full pill */
#google_translate_element{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  display: block !important;
  line-height: 1 !important;
}

/* Stretch Google's internal wrappers */
#google_translate_element .skiptranslate,
#google_translate_element .goog-te-gadget,
#google_translate_element .goog-te-gadget-simple,
#google_translate_element .goog-te-gadget > div,
#google_translate_element .goog-te-gadget > div > div{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Hide Google's icon and extra text */
#google_translate_element .goog-te-gadget-icon,
#google_translate_element .goog-te-gadget-simple span,
#google_translate_element .goog-te-gadget-simple img{
  display: none !important;
}

/* Make the real clickable dropdown cover the whole button */
#google_translate_element select.goog-te-combo{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  opacity: 0.01 !important;
  background: transparent !important;
  color: transparent !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

Force the whole store into French (no switch)

For a French-only storefront: auto-translates everything to French and hides all of Google's translate UI, with no selector shown. Uses the same protected-terms list so brand names stay intact.

Head snippet+ Custom CSS

How to use: paste the script into your Head snippet, then add the CSS block to your Custom CSS to hide any leftover Google bar.

How to tweak: edit the PROTECTED_TERMS list to control which words stay in English. To translate to a different language instead, change "/en/fr" and includedLanguages: "fr".

Head snippet — JavaScript 
<!-- CFDFpromo.com · free store snippet -> https://cfdfpromo.com/pages/code-snippet-library -->
<script type="text/javascript">
(function () {
  const isAdmin = /(\/manage_site\/|\/manage\/|\/admin\/|\/design\/|\/designer\/)/i.test(window.location.pathname);
  if (isAdmin) return;

  const PROTECTED_TERMS = [
    "Good","better","Best","Crewnecks","Hoodies",
    "commandez","Personnalisez","choisissez",
    "Under Armour","Colombia","Berne Apparel","Comfort Colors","DRI DUCK",
    "King Fashion","New Balance","Independent Trading Co.","Muskoka Trail","Marmot",
    "North End","Original Penguin®","Red Kap","Russell Athletic","Team 365",
    "Threadfast Apparel","commander","Modifier","Configurer","The North Face",
    "High Five","Next Level Apparel","Anvil","CH Essential","Taxes"
  ];

  const HIDE_SELECTORS = [
    "#google_translate_element",
    ".goog-te-banner-frame.skiptranslate",
    "iframe.goog-te-banner-frame.skiptranslate",
    ".goog-te-menu-frame.skiptranslate",
    "iframe.goog-te-menu-frame.skiptranslate",
    ".goog-te-balloon-frame",
    "iframe.goog-te-balloon-frame",
    ".goog-tooltip",
    "#goog-gt-tt",
    ".goog-logo-link",
    ".goog-te-gadget",
    ".goog-te-gadget-simple",
    ".goog-te-gadget-icon",
    ".goog-te-combo",

    /* newer Google Translate UI */
    ".VIpgJd-ZVi9od-ORHb-OEVmcd",
    ".VIpgJd-ZVi9od-aZ2wEe-wOHMyf",
    ".VIpgJd-ZVi9od-aZ2wEe-OiiCO",
    ".VIpgJd-ZVi9od-aZ2wEe",
    ".VIpgJd-ZVi9od-ORHb",
    ".VIpgJd-ZVi9od-vH1Gmf",
    ".VIpgJd-ZVi9od-l4eHX-hSRGPd",
    ".VIpgJd-yAWNEb-L7lbkb",
    ".VIpgJd-ZVi9od-xl07Ob-lTBxed"
  ];

  function escapeRegExp(s) {
    return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  }

  function protectAllText(root) {
    try {
      if (!root) return;

      const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
        acceptNode: function (n) {
          if (!n.nodeValue || !n.parentNode) return NodeFilter.FILTER_REJECT;

          const p = n.parentNode;
          const tag = (p.tagName || "").toUpperCase();

          if (tag === "SCRIPT" || tag === "STYLE" || tag === "NOSCRIPT") {
            return NodeFilter.FILTER_REJECT;
          }

          if (
            p.id === "google_translate_element" ||
            (p.classList && (p.classList.contains("skiptranslate") || p.classList.contains("notranslate")))
          ) {
            return NodeFilter.FILTER_REJECT;
          }

          return NodeFilter.FILTER_ACCEPT;
        }
      });

      const patterns = PROTECTED_TERMS.map(function (t) {
        return new RegExp(escapeRegExp(t), "gi");
      });

      const toReplace = [];
      let node, processed = 0, LIMIT = 20000;

      while ((node = walker.nextNode()) && processed < LIMIT) {
        const txt = node.nodeValue;
        let out = txt;

        for (let i = 0; i < patterns.length; i++) {
          out = out.replace(patterns[i], '<span class="notranslate">$&</span>');
        }

        if (out !== txt) {
          toReplace.push({ node: node, html: out });
        }

        processed++;
      }

      toReplace.forEach(function (r) {
        const span = document.createElement("span");
        span.innerHTML = r.html;
        if (r.node.parentNode) {
          r.node.parentNode.replaceChild(span, r.node);
        }
      });
    } catch (e) {}
  }

  function hideGoogleUi() {
    try {
      HIDE_SELECTORS.forEach(function (selector) {
        document.querySelectorAll(selector).forEach(function (el) {
          el.style.setProperty("display", "none", "important");
          el.style.setProperty("visibility", "hidden", "important");
          el.style.setProperty("opacity", "0", "important");
          el.style.setProperty("pointer-events", "none", "important");
          el.style.setProperty("max-width", "0", "important");
          el.style.setProperty("max-height", "0", "important");
          el.style.setProperty("overflow", "hidden", "important");
        });
      });

      document.documentElement.style.setProperty("top", "0px", "important");
      document.body.style.setProperty("top", "0px", "important");
    } catch (e) {}
  }

  function scheduleHideGoogleUi() {
    hideGoogleUi();
    setTimeout(hideGoogleUi, 500);
    setTimeout(hideGoogleUi, 1500);
    setTimeout(hideGoogleUi, 3000);
    setTimeout(hideGoogleUi, 6000);
    setTimeout(hideGoogleUi, 10000);
  }

  function onReady(fn) {
    if (document.readyState === "complete" || document.readyState === "interactive") {
      setTimeout(fn, 0);
    } else {
      document.addEventListener("DOMContentLoaded", fn);
    }
  }

  function initGoogleTranslate() {
    try {
      protectAllText(document.body);

      const host = window.location.hostname;
      document.cookie = "googtrans=/en/fr; path=/";
      document.cookie = "googtrans=/en/fr; path=/; domain=" + host;

      let container = document.getElementById("google_translate_element");
      if (!container) {
        container = document.createElement("div");
        container.id = "google_translate_element";
        document.body.appendChild(container);
      }

      window.googleTranslateElementInit = function () {
        try {
          new google.translate.TranslateElement({
            pageLanguage: "en",
            includedLanguages: "fr",
            layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
            autoDisplay: false
          }, "google_translate_element");

          scheduleHideGoogleUi();
        } catch (e) {}
      };

      const s = document.createElement("script");
      s.src = "https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
      s.async = true;
      document.body.appendChild(s);

      const mo = new MutationObserver(function (muts) {
        muts.forEach(function (m) {
          m.addedNodes.forEach(function (n) {
            if (n.nodeType === 1 && n.childNodes && n.childNodes.length < 500) {
              protectAllText(n);
            }
          });
        });

        hideGoogleUi();
      });

      mo.observe(document.documentElement, { childList: true, subtree: true });

      scheduleHideGoogleUi();
    } catch (e) {}
  }

  onReady(initGoogleTranslate);
})();
</script>
Custom CSS 
/* CFDFpromo.com · free store snippet -> https://cfdfpromo.com/pages/code-snippet-library */
/* =========================================
GOOGLE TRANSLATE - HIDE UI
========================================= */

body {
top: 0 !important;
}

/* old Google Translate UI */
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame.skiptranslate,
.goog-te-menu-frame.skiptranslate,
iframe.goog-te-menu-frame.skiptranslate,
.goog-te-balloon-frame,
iframe.goog-te-balloon-frame,
.goog-tooltip,
#goog-gt-tt,
#google_translate_element,
.goog-te-gadget,
.goog-te-gadget-simple,
.goog-te-gadget-icon,
.goog-te-combo,
.goog-logo-link {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
max-width: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
}

/* newer Google Translate UI */
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-aZ2wEe-OiiCO,
.VIpgJd-ZVi9od-aZ2wEe,
.VIpgJd-ZVi9od-ORHb,
.VIpgJd-ZVi9od-vH1Gmf,
.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.VIpgJd-yAWNEb-L7lbkb,
.VIpgJd-ZVi9od-xl07Ob-lTBxed {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
max-width: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
}

/* remove hover highlight only */
.goog-text-highlight,
font.goog-text-highlight,
span.goog-text-highlight {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}

Swap the footer credit for your own brand

Hides the default platform credit at the bottom of your store and replaces it with your own "Powered by CFDFpromo.com" line, styled and always visible.

Custom CSS+ Footer HTML

How to use: add the CSS to your Custom CSS, then paste the HTML into your footer, just under the custom_footer snippet.

How to tweak: change the wording or the link in the HTML block. Adjust the text color with color: #333333 in the CSS.

Custom CSS 
/* CFDFpromo.com · free store snippet -> https://cfdfpromo.com/pages/code-snippet-library */
/* Hide the default DecoNetwork credit */
body > footer > div.dn-powered-by-container > ul > li {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Add your own powered-by line */
.cfdfpromo-credit {
    color: #333333 !important; /* Dark gray text */
    text-align: center !important;
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    margin-top: 10px !important;
    user-select: none !important; /* Prevent text selection */
}

/* Style and secure the link */
.cfdfpromo-credit a {
    color: #333333 !important;
    font-weight: bold !important;
    text-decoration: none !important;
    pointer-events: auto !important;
}

.cfdfpromo-credit a:hover {
    color: #000000 !important;
    text-decoration: underline !important;
}

/* Make sure the credit always stays visible */
body > footer .cfdfpromo-credit {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 9999 !important;
}
Footer HTML 
<!-- CFDFpromo.com · free store snippet -> https://cfdfpromo.com/pages/code-snippet-library -->
  <div class="cfdfpromo-credit">
  Powered by <a href="https://cfdfpromo.com/" target="_blank"><strong>CFDFpromo.com</strong></a>
</div>

Round the corners on product images & variants

Adds a clean rounded corner to the main product image, the front / back / sleeve thumbnails and the extra images, so product pages look modern and finished.

Custom CSS

How to use: paste this into your Custom CSS. It applies everywhere product images show.

How to tweak: change how round the corners are by editing the border-radius: 20px value (use the same number in each rule to keep them consistent).

Custom CSS 
/* CFDFpromo.com · free store snippet -> https://cfdfpromo.com/pages/code-snippet-library */
/* ---------------------------------
   MAIN PRODUCT IMAGE
--------------------------------- */
img.dn-product-main-image,
.dn-product-main-image-container img,
.dn-product-view-container img {
    border-radius: 20px !important;
    overflow: hidden !important;
}


/* ---------------------------------
   VARIANT THUMBNAILS (FIXED)
   Front / Back / Sleeves etc.
--------------------------------- */

/* VERY IMPORTANT: radius must be on LI container */
.dn-product-views-container ul li,
.dn-product-views-container .dn-grid-item {
    border-radius: 20px !important;
    overflow: hidden !important;
}

/* and ALSO on the image itself */
.dn-product-views-container ul li img,
.dn-product-views-container .dn-grid-item img,
img[id^="d_l_i_"] {
    border-radius: 20px !important;
    overflow: hidden !important;
}


/* ---------------------------------
   EXTRA IMAGES PANEL
--------------------------------- */
#extra_images img,
.dn-product-extra-images img {
    border-radius: 20px !important;
}


/* ---------------------------------
   GLOBAL SAFETY OVERRIDES
--------------------------------- */
div.dn-product-image-panel img,
div.dn-product-panels img {
    border-radius: 20px !important;
}

Want a hand installing these, or the whole thing done for you?

These snippets patch the rough edges. The bigger win is a store that already handles quoting, mockups, payments and reorders on its own, so you're not maintaining code at all.

Fiddling with snippets is time; a store that runs itself is money. Let's look at what that could do for your shop.

Book a quick chat

15 minutes · no obligation.

Just so we're clear: this is a free tool that gives rough estimates and general information to help you explore your options. It is not financial, legal, tax, or professional advice. Programs, prices, numbers and eligibility change, so always do your own research and confirm the details before you act on anything here. CFDFpromo is not responsible for decisions made based on this tool. Canada & USA.