Copier et coller

Fragments de code de boutique du laboratoire CFDFpromo

Les fragments exacts que nous utilisons pour peaufiner les boutiques : un sélecteur de langue français/anglais, votre propre marque de pied de page et des images de produits arrondies. Copiez-en un, collez-le là où c'est indiqué, et c'est fait.

Les fragments

Chacun est un copier-coller. L'étiquette sur chaque bloc vous indique où il va dans les paramètres de votre boutique (un fragment d'en-tête, votre CSS personnalisé ou le pied de page). Ils modifient l'apparence et le comportement de votre boutique, jamais vos produits ou commandes, ils sont donc sûrs à essayer et faciles à annuler. Chaque bloc est estampillé avec cfdfpromo.com dans un commentaire afin que vous sachiez toujours d'où il vient.

Sélecteur de langue français/anglais de marque

Ajoute une petite pastille "Langue" sur votre boutique qui bascule tout le site entre l'anglais et le français en un clic, dans la couleur de votre marque, tout en protégeant les noms que vous ne voulez jamais traduire (marques, gammes de produits, mots-clés).

Fragment d'en-tête+ Pied de page / Corps

Comment l'utiliser : collez tout le bloc dans le fragment d'en-tête de votre boutique. Il contient une partie HEAD clairement indiquée et une petite partie BODY (la pastille elle-même) dans le même bloc.

Comment le modifier : changez la couleur de la pastille avec --cfdf-pill-bg (réglé sur votre bordeaux #72383d), déplacez-la avec --cfdf-lang-top / --cfdf-lang-right, et ajoutez tous les mots à garder non traduits à la liste PROTECTED_TERMS.

Fragment d'en-tête — inclut 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 -->

Rendre la pastille de langue entièrement cliquable

Style complémentaire pour que la pastille entière soit la cible du clic, et non seulement la petite liste déroulante qu'elle contient. S'associe au sélecteur ci-dessus.

CSS personnalisé

Comment l'utiliser : ajoutez ceci en bas de votre CSS personnalisé, sous le sélecteur de langue.

Comment le modifier : l'arrondi des coins suit --cfdf-pill-radius du fragment du sélecteur, donc modifiez-le une fois là-bas et les deux se mettront à jour.

CSS personnalisé 
/* CFDFpromo.com · extrait de boutique gratuit -> https://cfdfpromo.com/pages/code-snippet-library */
/* Faire en sorte que toute la pilule linguistique soit la zone de clic */
.cfdf-lang-pill{
  position: relative !important;
  overflow: hidden !important;
  background-color: var(--cfdf-pill-bg) !important;
  border-radius: var(--cfdf-pill-radius) !important;
}

/* Garder l'étiquette visible stylisée et au-dessus de la sélection cachée */
.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;
}

/* Étirer le conteneur Google sur toute la pilule */
#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;
}

/* Étirer les enveloppes internes de Google */
#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;
}

/* Masquer l'icône et le texte supplémentaire de Google */
#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;
}

/* Faire en sorte que le vrai menu déroulant cliquable couvre tout le bouton */
#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;
}

Forcer toute la boutique en français (sans sélecteur)

Pour une boutique uniquement en français : traduit automatiquement tout en français et masque toute l'interface utilisateur de traduction de Google, sans sélecteur affiché. Utilise la même liste de termes protégés pour que les noms de marque restent intacts.

Extrait d'en-tête+ CSS personnalisé

Comment l'utiliser : collez le script dans votre extrait d'en-tête, puis ajoutez le bloc CSS à votre CSS personnalisé pour masquer toute barre Google restante.

Comment l'ajuster : modifiez la liste PROTECTED_TERMS pour contrôler quels mots restent en anglais. Pour traduire dans une autre langue à la place, modifiez "/en/fr" et includedLanguages: "fr".

Extrait d'en-tête — JavaScript 
<!-- CFDFpromo.com · extrait de boutique gratuit -> 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",

    /* nouvelle interface utilisateur de Google Traduction */
    ".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>
CSS personnalisé 
/* CFDFpromo.com · extrait de boutique gratuit -> https://cfdfpromo.com/pages/code-snippet-library */
/* =========================================
GOOGLE TRADUCTION - MASQUER L'INTERFACE UTILISATEUR
========================================= */

body {
top: 0 !important;
}

/* ancienne interface utilisateur de Google Traduction */
.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;
}

/* nouvelle interface utilisateur de Google Traduction */
.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;
}

/* supprimer uniquement la surbrillance au survol */
.goog-text-highlight,
font.goog-text-highlight,
span.goog-text-highlight {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}

Remplacer le crédit du pied de page par votre propre marque

Masque le crédit de plateforme par défaut en bas de votre boutique et le remplace par votre propre ligne "Propulsé par CFDFpromo.com", stylisée et toujours visible.

CSS personnalisé+ HTML de pied de page

Comment l'utiliser : ajoutez le CSS à votre CSS personnalisé, puis collez le HTML dans votre pied de page, juste en dessous de l'extrait custom_footer.

Comment l'ajuster : modifiez le libellé ou le lien dans le bloc HTML. Ajustez la couleur du texte avec color: #333333 dans le CSS.

CSS personnalisé 
/* CFDFpromo.com · extrait de boutique gratuit -> https://cfdfpromo.com/pages/code-snippet-library */
/* Masquer le crédit DecoNetwork par défaut */
body > footer > div.dn-powered-by-container > ul > li {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Ajouter votre propre ligne "Propulsé par" */
.cfdfpromo-credit {
    color: #333333 !important; /* Texte gris foncé */
    text-align: center !important;
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    margin-top: 10px !important;
    user-select: none !important; /* Empêcher la sélection de texte */
}

/* Styliser et sécuriser le lien */
.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;
}

/* S'assurer que le crédit reste toujours visible */
body > footer .cfdfpromo-credit {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 9999 !important;
}
HTML de pied de page 
<!-- CFDFpromo.com · extrait de boutique gratuit -> https://cfdfpromo.com/pages/code-snippet-library -->
  <div class="cfdfpromo-credit">
  Propulsé par <a href="https://cfdfpromo.com/" target="_blank"><strong>CFDFpromo.com</strong></a>
</div>

Arrondir les coins des images et des variantes de produits

Ajoute un coin arrondi net à l'image principale du produit, aux vignettes avant / arrière / manche et aux images supplémentaires, pour que les pages de produits aient un aspect moderne et fini.

CSS personnalisé

Comment l'utiliser : collez ceci dans votre CSS personnalisé. Il s'applique partout où les images de produits sont affichées.

Comment l'ajuster : modifiez le degré d'arrondi des coins en éditant la valeur border-radius: 20px (utilisez le même nombre dans chaque règle pour les maintenir cohérents).

CSS personnalisé 
/* CFDFpromo.com · extrait de boutique gratuit -> https://cfdfpromo.com/pages/code-snippet-library */
/* ---------------------------------
   IMAGE PRINCIPALE DU PRODUIT
--------------------------------- */
img.dn-product-main-image,
.dn-product-main-image-container img,
.dn-product-view-container img {
    border-radius: 20px !important;
    overflow: hidden !important;
}


/* ---------------------------------
   VIGNETTES DE VARIANTES (FIXES)
   Avant / Arrière / Manches etc.
--------------------------------- */

/* TRÈS IMPORTANT: le rayon doit être sur le conteneur LI */
.dn-product-views-container ul li,
.dn-product-views-container .dn-grid-item {
    border-radius: 20px !important;
    overflow: hidden !important;
}

/* et AUSSI sur l'image elle-même */
.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;
}


/* ---------------------------------
   PANNEAU D'IMAGES SUPPLÉMENTAIRES
--------------------------------- */
#extra_images img,
.dn-product-extra-images img {
    border-radius: 20px !important;
}


/* ---------------------------------
   SUBSTITUTIONS DE SÉCURITÉ GLOBALES
--------------------------------- */
div.dn-product-image-panel img,
div.dn-product-panels img {
    border-radius: 20px !important;
}

Besoin d'un coup de main pour l'installation, ou que tout soit fait pour vous ?

Ces extraits corrigent les aspérités. Le plus grand avantage est un magasin qui gère déjà les devis, les maquettes, les paiements et les nouvelles commandes de manière autonome, de sorte que vous n'ayez pas du tout à maintenir le code.

Bricoler avec des extraits, c'est du temps ; un magasin qui tourne tout seul, c'est de l'argent. Voyons ce que cela pourrait faire pour votre boutique.

Réservez un court entretien

15 minutes · sans engagement.

Pour que ce soit clair : il s'agit d'un outil gratuit qui fournit des estimations approximatives et des informations générales pour vous aider à explorer vos options. Il ne s'agit pas de conseils financiers, juridiques, fiscaux ou professionnels. Les programmes, les prix, les chiffres et l'éligibilité changent, alors faites toujours vos propres recherches et confirmez les détails avant d'agir sur quoi que ce soit ici. CFDFpromo n'est pas responsable des décisions prises sur la base de cet outil. Canada et États-Unis.