🏷️ Logos de marquesGratuit · 0 NahnahPar NAHNAH
Logos de paiement en éventail
Les logos officiels des moyens de paiement que tu acceptes, posés comme des cartes bancaires tenues en éventail : l’éventail s’ouvre au survol (ou tout seul sur téléphone), avec la mention de compatibilité. Logos non modifiés.
Logos officiels affichés pour indiquer la compatibilité ; marques de leurs propriétaires. NAHNAH AI est un service indépendant.
Aperçu en direct
Données de démonstration (produits, menus, textes d’exemple) : dans ta boutique, ce sont les tiennes.
Photos : Unsplash / Pexels (exemples de l’aperçu, jamais inclus dans le code).
Code à copier
Fichier complet sections/nahnah-logos-paiement-eventail.liquid (Liquid, CSS et JS inclus).
{%- comment -%} NAHNAH AI · Logos de paiement en éventail (bibliothèque Sections & effets) {%- endcomment -%}
<div class="nn-logos-paiement-eventail" style="--nn-mh: {{ section.settings.marge_haut }}px; --nn-mb: {{ section.settings.marge_bas }}px; --nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};">
<div class="nn-logos-paiement-eventail__grille">
<div class="nn-logos-paiement-eventail__texte">
<h2>{{ section.settings.titre | escape }}</h2>
{%- if section.settings.texte != blank -%}<p>{{ section.settings.texte | escape }}</p>{%- endif -%}
</div>
<ul class="nn-logos-paiement-eventail__eventail" role="list" aria-label="Moyens de paiement acceptés" data-nn-demo>
{%- if section.settings.afficher_visa -%}<li class="nn-logos-paiement-eventail__carte" style="--nn-i: 0;" title="Visa"><svg class="nn-logos-paiement-eventail__svg" aria-hidden="true" focusable="false" width="30" height="30" fill="#1A1F71" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z"/></svg><span class="nn-logos-paiement-eventail__sr">Visa</span></li>{%- endif -%}
{%- if section.settings.afficher_mastercard -%}<li class="nn-logos-paiement-eventail__carte" style="--nn-i: 1;" title="Mastercard"><svg class="nn-logos-paiement-eventail__svg" aria-hidden="true" focusable="false" width="49" height="30" viewBox="0 0 999.2 618" xmlns="http://www.w3.org/2000/svg"><rect x="364" y="66.1" width="270.4" height="485.8" fill="#FF5F00"/><path fill="#EB001B" d="M382 309c0-98.7 46.4-186.3 117.6-242.9C447.2 24.9 381.1 0 309 0 138.2 0 0 138.2 0 309s138.2 309 309 309c72.1 0 138.2-24.9 190.6-66.1C428.3 496.1 382 407.7 382 309z"/><path fill="#F79E1B" d="M999.2 309c0 170.8-138.2 309-309 309-72.1 0-138.2-24.9-190.6-66.1 72.1-56.7 117.6-144.2 117.6-242.9S570.8 122.7 499.6 66.1C551.9 24.9 618 0 690.1 0 861 0 999.2 139.1 999.2 309z"/></svg><span class="nn-logos-paiement-eventail__sr">Mastercard</span></li>{%- endif -%}
{%- if section.settings.afficher_americanexpress -%}<li class="nn-logos-paiement-eventail__carte" style="--nn-i: 2;" title="American Express"><svg class="nn-logos-paiement-eventail__svg" aria-hidden="true" focusable="false" width="30" height="30" fill="#2E77BC" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.015 14.378c0-.32-.135-.496-.344-.622-.21-.12-.464-.135-.81-.135h-1.543v2.82h.675v-1.027h.72c.24 0 .39.024.478.125.12.13.104.38.104.55v.35h.66v-.555c-.002-.25-.017-.376-.108-.516-.06-.08-.18-.18-.33-.234l.02-.008c.18-.072.48-.297.48-.747zm-.87.407l-.028-.002c-.09.053-.195.058-.33.058h-.81v-.63h.824c.12 0 .24 0 .33.05.098.048.156.147.15.255 0 .12-.045.215-.134.27zM20.297 15.837H19v.6h1.304c.676 0 1.05-.278 1.05-.884 0-.28-.066-.448-.187-.582-.153-.133-.392-.193-.73-.207l-.376-.015c-.104 0-.18 0-.255-.03-.09-.03-.15-.105-.15-.21 0-.09.017-.166.09-.21.083-.046.177-.066.272-.06h1.23v-.602h-1.35c-.704 0-.958.437-.958.84 0 .9.776.855 1.407.87.104 0 .18.015.225.06.046.03.082.106.082.18 0 .077-.035.15-.08.18-.06.053-.15.07-.277.07zM0 0v10.096L.81 8.22h1.75l.225.464V8.22h2.043l.45 1.02.437-1.013h6.502c.295 0 .56.057.756.236v-.23h1.787v.23c.307-.17.686-.23 1.12-.23h2.606l.24.466v-.466h1.918l.254.465v-.466h1.858v3.948H20.87l-.36-.6v.585h-2.353l-.256-.63h-.583l-.27.614h-1.213c-.48 0-.84-.104-1.08-.24v.24h-2.89v-.884c0-.12-.03-.12-.105-.135h-.105v1.036H6.067v-.48l-.21.48H4.69l-.202-.48v.465H2.235l-.256-.624H1.4l-.256.624H0V24h23.786v-7.108c-.27.135-.613.18-.973.18H21.09v-.255c-.21.165-.57.255-.914.255H14.71v-.9c0-.12-.018-.12-.12-.12h-.075v1.022h-1.8v-1.066c-.298.136-.643.15-.928.136h-.214v.915h-2.18l-.54-.617-.57.6H4.742v-3.93h3.61l.518.602.554-.6h2.412c.28 0 .74.03.942.225v-.24h2.177c.202 0 .644.045.903.225v-.24h3.265v.24c.163-.164.508-.24.803-.24h1.89v.24c.194-.15.464-.24.84-.24h1.176V0H0zM21.156 14.955c.004.005.006.012.01.016.01.01.024.01.032.02l-.042-.035zM23.828 13.082h.065v.555h-.065zM23.865 15.03v-.005c-.03-.025-.046-.048-.075-.07-.15-.153-.39-.215-.764-.225l-.36-.012c-.12 0-.194-.007-.27-.03-.09-.03-.15-.105-.15-.21 0-.09.03-.16.09-.204.076-.045.15-.05.27-.05h1.223v-.588h-1.283c-.69 0-.96.437-.96.84 0 .9.78.855 1.41.87.104 0 .18.015.224.06.046.03.076.106.076.18 0 .07-.034.138-.09.18-.045.056-.136.07-.27.07h-1.288v.605h1.287c.42 0 .734-.118.9-.36h.03c.09-.134.135-.3.135-.523 0-.24-.045-.39-.135-.526zM18.597 14.208v-.583h-2.235V16.458h2.235v-.585h-1.57v-.57h1.533v-.584h-1.532v-.51M13.51 8.787h.685V11.6h-.684zM13.126 9.543l-.007.006c0-.314-.13-.5-.34-.624-.217-.125-.47-.135-.81-.135H10.43v2.82h.674v-1.034h.72c.24 0 .39.03.487.12.122.136.107.378.107.548v.354h.677v-.553c0-.25-.016-.375-.11-.516-.09-.107-.202-.19-.33-.237.172-.07.472-.3.472-.75zm-.855.396h-.015c-.09.054-.195.056-.33.056H11.1v-.623h.825c.12 0 .24.004.33.05.09.04.15.128.15.25s-.047.22-.134.266zM15.92 9.373h.632v-.6h-.644c-.464 0-.804.105-1.02.33-.286.3-.362.69-.362 1.11 0 .512.123.833.36 1.074.232.238.645.31.97.31h.78l.255-.627h1.39l.262.627h1.36v-2.11l1.272 2.11h.95l.002.002V8.786h-.684v1.963l-1.18-1.96h-1.02V11.4L18.11 8.744h-1.004l-.943 2.22h-.3c-.177 0-.362-.03-.468-.134-.125-.15-.186-.36-.186-.662 0-.285.08-.51.194-.63.133-.135.272-.165.516-.165zm1.668-.108l.464 1.118v.002h-.93l.466-1.12zM2.38 10.97l.254.628H4V9.393l.972 2.205h.584l.973-2.202.015 2.202h.69v-2.81H6.118l-.807 1.904-.876-1.905H3.343v2.663L2.205 8.787h-.997L.01 11.597h.72l.26-.626h1.39zm-.688-1.705l.46 1.118-.003.002h-.915l.457-1.12zM11.856 13.62H9.714l-.85.923-.825-.922H5.346v2.82H8l.855-.932.824.93h1.302v-.94h.838c.6 0 1.17-.164 1.17-.945l-.006-.003c0-.78-.598-.93-1.128-.93zM7.67 15.853l-.014-.002H6.02v-.557h1.47v-.574H6.02v-.51H7.7l.733.82-.764.824zm2.642.33l-1.03-1.147 1.03-1.108v2.253zm1.553-1.258h-.885v-.717h.885c.24 0 .42.098.42.344 0 .243-.15.372-.42.372zM9.967 9.373v-.586H7.73V11.6h2.237v-.58H8.4v-.564h1.527V9.88H8.4v-.507"/></svg><span class="nn-logos-paiement-eventail__sr">American Express</span></li>{%- endif -%}
{%- if section.settings.afficher_paypal -%}<li class="nn-logos-paiement-eventail__carte" style="--nn-i: 3;" title="PayPal"><svg class="nn-logos-paiement-eventail__svg" aria-hidden="true" focusable="false" width="30" height="30" fill="#003087" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.016 19.198h-4.2a.562.562 0 0 1-.555-.65L5.093.584A.692.692 0 0 1 5.776 0h7.222c3.417 0 5.904 2.488 5.846 5.5-.006.25-.027.5-.066.747A6.794 6.794 0 0 1 12.071 12H8.743a.69.69 0 0 0-.682.583l-.325 2.056-.013.083-.692 4.39-.015.087zM19.79 6.142c-.01.087-.01.175-.023.261a7.76 7.76 0 0 1-7.695 6.598H9.007l-.283 1.795-.013.083-.692 4.39-.134.843-.014.088H6.86l-.497 3.15a.562.562 0 0 0 .555.65h3.612c.34 0 .63-.249.683-.585l.952-6.031a.692.692 0 0 1 .683-.584h2.126a6.793 6.793 0 0 0 6.707-5.752c.306-1.95-.466-3.744-1.89-4.906z"/></svg><span class="nn-logos-paiement-eventail__sr">PayPal</span></li>{%- endif -%}
{%- if section.settings.afficher_applepay -%}<li class="nn-logos-paiement-eventail__carte" style="--nn-i: 4;" title="Apple Pay"><svg class="nn-logos-paiement-eventail__svg" aria-hidden="true" focusable="false" width="30" height="30" fill="#000000" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2.15 4.318a42.16 42.16 0 0 0-.454.003c-.15.005-.303.013-.452.04a1.44 1.44 0 0 0-1.06.772c-.07.138-.114.278-.14.43-.028.148-.037.3-.04.45A10.2 10.2 0 0 0 0 6.222v11.557c0 .07.002.138.003.207.004.15.013.303.04.452.027.15.072.291.142.429a1.436 1.436 0 0 0 .63.63c.138.07.278.115.43.142.148.027.3.036.45.04l.208.003h20.194l.207-.003c.15-.004.303-.013.452-.04.15-.027.291-.071.428-.141a1.432 1.432 0 0 0 .631-.631c.07-.138.115-.278.141-.43.027-.148.036-.3.04-.45.002-.07.003-.138.003-.208l.001-.246V6.221c0-.07-.002-.138-.004-.207a2.995 2.995 0 0 0-.04-.452 1.446 1.446 0 0 0-1.2-1.201 3.022 3.022 0 0 0-.452-.04 10.448 10.448 0 0 0-.453-.003zm0 .512h19.942c.066 0 .131.002.197.003.115.004.25.01.375.032.109.02.2.05.287.094a.927.927 0 0 1 .407.407.997.997 0 0 1 .094.288c.022.123.028.258.031.374.002.065.003.13.003.197v11.552c0 .065 0 .13-.003.196-.003.115-.009.25-.032.375a.927.927 0 0 1-.5.693 1.002 1.002 0 0 1-.286.094 2.598 2.598 0 0 1-.373.032l-.2.003H1.906c-.066 0-.133-.002-.196-.003a2.61 2.61 0 0 1-.375-.032c-.109-.02-.2-.05-.288-.094a.918.918 0 0 1-.406-.407 1.006 1.006 0 0 1-.094-.288 2.531 2.531 0 0 1-.032-.373 9.588 9.588 0 0 1-.002-.197V6.224c0-.065 0-.131.002-.197.004-.114.01-.248.032-.375.02-.108.05-.199.094-.287a.925.925 0 0 1 .407-.406 1.03 1.03 0 0 1 .287-.094c.125-.022.26-.029.375-.032.065-.002.131-.002.196-.003zm4.71 3.7c-.3.016-.668.199-.88.456-.191.22-.36.58-.316.918.338.03.675-.169.888-.418.205-.258.345-.603.308-.955zm2.207.42v5.493h.852v-1.877h1.18c1.078 0 1.835-.739 1.835-1.812 0-1.07-.742-1.805-1.808-1.805zm.852.719h.982c.739 0 1.161.396 1.161 1.089 0 .692-.422 1.092-1.164 1.092h-.979zm-3.154.3c-.45.01-.83.28-1.05.28-.235 0-.593-.264-.981-.257a1.446 1.446 0 0 0-1.23.747c-.527.908-.139 2.255.374 2.995.249.366.549.769.944.754.373-.014.52-.242.973-.242.454 0 .586.242.98.235.41-.007.667-.366.915-.733.286-.417.403-.82.41-.841-.007-.008-.79-.308-.797-1.209-.008-.754.615-1.113.644-1.135-.352-.52-.9-.578-1.09-.593a1.123 1.123 0 0 0-.092-.002zm8.204.397c-.99 0-1.606.533-1.652 1.256h.777c.072-.358.369-.586.845-.586.502 0 .803.266.803.711v.309l-1.097.064c-.951.054-1.488.484-1.488 1.184 0 .72.548 1.207 1.332 1.207.526 0 1.032-.281 1.264-.727h.019v.659h.788v-2.76c0-.803-.62-1.317-1.591-1.317zm1.94.072l1.446 4.009c0 .003-.073.24-.073.247-.125.41-.33.571-.711.571-.069 0-.206 0-.267-.015v.666c.06.011.267.019.335.019.83 0 1.226-.312 1.568-1.283l1.5-4.214h-.868l-1.012 3.259h-.015l-1.013-3.26zm-1.167 2.189v.316c0 .521-.45.917-1.024.917-.442 0-.731-.228-.731-.579 0-.342.278-.56.769-.593z"/></svg><span class="nn-logos-paiement-eventail__sr">Apple Pay</span></li>{%- endif -%}
{%- if section.settings.afficher_googlepay -%}<li class="nn-logos-paiement-eventail__carte" style="--nn-i: 5;" title="Google Pay"><svg class="nn-logos-paiement-eventail__svg" aria-hidden="true" focusable="false" width="30" height="30" fill="#4285F4" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3.963 7.235A3.963 3.963 0 00.422 9.419a3.963 3.963 0 000 3.559 3.963 3.963 0 003.541 2.184c1.07 0 1.97-.352 2.627-.957.748-.69 1.18-1.71 1.18-2.916a4.722 4.722 0 00-.07-.806H3.964v1.526h2.14a1.835 1.835 0 01-.79 1.205c-.356.241-.814.379-1.35.379-1.034 0-1.911-.697-2.225-1.636a2.375 2.375 0 010-1.517c.314-.94 1.191-1.636 2.225-1.636a2.152 2.152 0 011.52.594l1.132-1.13a3.808 3.808 0 00-2.652-1.033zm6.501.55v6.9h.886V11.89h1.465c.603 0 1.11-.196 1.522-.588a1.911 1.911 0 00.635-1.464 1.92 1.92 0 00-.635-1.456 2.125 2.125 0 00-1.522-.598zm2.427.85a1.156 1.156 0 01.823.365 1.176 1.176 0 010 1.686 1.171 1.171 0 01-.877.357H11.35V8.635h1.487a1.156 1.156 0 01.054 0zm4.124 1.175c-.842 0-1.477.308-1.907.925l.781.491c.288-.417.68-.626 1.175-.626a1.255 1.255 0 01.856.323 1.009 1.009 0 01.366.785v.202c-.34-.193-.774-.289-1.3-.289-.617 0-1.11.145-1.479.434-.37.288-.554.677-.554 1.165a1.476 1.476 0 00.525 1.156c.35.308.785.463 1.305.463.61 0 1.098-.27 1.465-.81h.038v.655h.848v-2.909c0-.61-.19-1.09-.568-1.44-.38-.35-.896-.525-1.551-.525zm2.263.154l1.946 4.422-1.098 2.38h.915L24 9.963h-.965l-1.368 3.391h-.02l-1.406-3.39zm-2.146 2.368c.494 0 .88.11 1.156.33 0 .372-.147.696-.44.973a1.413 1.413 0 01-.997.414 1.081 1.081 0 01-.69-.232.708.708 0 01-.293-.578c0-.257.12-.47.363-.647.24-.173.54-.26.9-.26Z"/></svg><span class="nn-logos-paiement-eventail__sr">Google Pay</span></li>{%- endif -%}
{%- if section.settings.afficher_klarna -%}<li class="nn-logos-paiement-eventail__carte nn-logos-paiement-eventail__carte--sombre" style="--nn-i: 6;" title="Klarna"><svg class="nn-logos-paiement-eventail__svg" aria-hidden="true" focusable="false" width="30" height="30" fill="#FFB3C7" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4.592 2v20H0V2h4.592zm11.46 0c0 4.194-1.583 8.105-4.415 11.068l-.278.283L17.702 22h-5.668l-6.893-9.4 1.779-1.332c2.858-2.14 4.535-5.378 4.637-8.924L11.562 2h4.49zM21.5 17a2.5 2.5 0 110 5 2.5 2.5 0 010-5z"/></svg><span class="nn-logos-paiement-eventail__sr">Klarna</span></li>{%- endif -%}
</ul>
</div>
<p class="nn-logos-paiement-eventail__mention">{{ section.settings.mention | default: 'Logos officiels affichés pour indiquer la compatibilité ; marques de leurs propriétaires.' | escape }}</p>
</div>
{% schema %}
{
"name": "Paiements en éventail",
"tag": "section",
"class": "nn-section-logos-paiement-eventail",
"settings": [
{
"type": "text",
"id": "titre",
"label": "Titre",
"default": "Paiement sécurisé"
},
{
"type": "text",
"id": "texte",
"label": "Texte (vide : aucun)",
"default": "Tes données bancaires sont chiffrées, nous n’y avons jamais accès."
},
{
"type": "header",
"content": "Logos officiels de paiement"
},
{
"type": "paragraph",
"content": "Coche uniquement les moyens de paiement réellement activés dans ta boutique. Logos officiels non modifiés, affichés pour indiquer la compatibilité."
},
{
"type": "checkbox",
"id": "afficher_visa",
"label": "Visa",
"default": true
},
{
"type": "checkbox",
"id": "afficher_mastercard",
"label": "Mastercard",
"default": true
},
{
"type": "checkbox",
"id": "afficher_americanexpress",
"label": "American Express",
"default": false
},
{
"type": "checkbox",
"id": "afficher_paypal",
"label": "PayPal",
"default": true
},
{
"type": "checkbox",
"id": "afficher_applepay",
"label": "Apple Pay",
"default": true
},
{
"type": "checkbox",
"id": "afficher_googlepay",
"label": "Google Pay",
"default": true
},
{
"type": "checkbox",
"id": "afficher_klarna",
"label": "Klarna",
"default": false
},
{
"type": "text",
"id": "mention",
"label": "Mention sous les logos (vide : mention par défaut)",
"default": "Logos officiels affichés pour indiquer la compatibilité ; marques de leurs propriétaires."
},
{
"type": "header",
"content": "Couleurs"
},
{
"type": "color",
"id": "couleur_fond",
"label": "Fond",
"default": "#F8FAFC"
},
{
"type": "color",
"id": "couleur_texte",
"label": "Texte",
"default": "#0F172A"
},
{
"type": "color",
"id": "couleur_accent",
"label": "Accent",
"default": "#0EA5E9"
},
{
"type": "header",
"content": "Espacement"
},
{
"type": "range",
"id": "marge_haut",
"label": "Marge haute",
"min": 0,
"max": 120,
"step": 4,
"unit": "px",
"default": 40
},
{
"type": "range",
"id": "marge_bas",
"label": "Marge basse",
"min": 0,
"max": 120,
"step": 4,
"unit": "px",
"default": 40
}
],
"presets": [
{
"name": "Paiements en éventail"
}
]
}
{% endschema %}
{% stylesheet %}
.nn-logos-paiement-eventail { padding: var(--nn-mh) 16px var(--nn-mb); background: var(--nn-fond); color: var(--nn-texte); }
.nn-logos-paiement-eventail__grille { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 5vw, 60px); flex-wrap: wrap; max-width: 960px; margin: 0 auto; }
.nn-logos-paiement-eventail__texte { max-width: 340px; }
.nn-logos-paiement-eventail__texte h2 { margin: 0 0 8px; font-size: clamp(22px, 3vw, 30px); }
.nn-logos-paiement-eventail__texte p { margin: 0; opacity: 0.75; }
.nn-logos-paiement-eventail__eventail { position: relative; width: 300px; height: 190px; margin: 0; padding: 0; list-style: none; }
.nn-logos-paiement-eventail__carte { position: absolute; left: 50%; bottom: 0; display: grid; place-items: center; width: 120px; height: 76px; margin-left: -60px; border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 12px; background: #FFFFFF; box-shadow: 0 10px 22px -12px rgba(15, 23, 42, 0.5); transform-origin: 50% 160%; transform: rotate(calc((var(--nn-i) - 3) * 4deg)); transition: transform 0.6s cubic-bezier(0.3, 1.3, 0.5, 1); }
.nn-logos-paiement-eventail__carte--sombre { background: #111111; }
.nn-logos-paiement-eventail__eventail:hover .nn-logos-paiement-eventail__carte, .nn-logos-paiement-eventail__eventail[data-nn-actif] .nn-logos-paiement-eventail__carte { transform: rotate(calc((var(--nn-i) - 3) * 14deg)); }
.nn-logos-paiement-eventail__svg { display: block; width: auto; height: 30px; }
.nn-logos-paiement-eventail__mention { max-width: 640px; margin: 18px auto 0; font-size: 11px; text-align: center; opacity: 0.65; }
.nn-logos-paiement-eventail__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (hover: none) { .nn-logos-paiement-eventail__carte { animation: nn-logos-paiement-eventail-ouvre 4s ease-in-out infinite; } }
[data-nn-demo] .nn-logos-paiement-eventail__carte { animation: nn-logos-paiement-eventail-ouvre 4s ease-in-out infinite; }
@keyframes nn-logos-paiement-eventail-ouvre { 0%, 100% { transform: rotate(calc((var(--nn-i) - 3) * 4deg)); } 50% { transform: rotate(calc((var(--nn-i) - 3) * 14deg)); } }
@media (max-width: 400px) { .nn-logos-paiement-eventail__eventail { width: 260px; height: 170px; } .nn-logos-paiement-eventail__carte { width: 100px; height: 64px; margin-left: -50px; } }
@media (prefers-reduced-motion: reduce) {
.nn-logos-paiement-eventail *, .nn-logos-paiement-eventail *::before, .nn-logos-paiement-eventail *::after { animation: none !important; transition: none !important; }
}
{% endstylesheet %}
Licence NAHNAH AI : utilisation libre dans tes boutiques (y compris commerciales), modification permise, revente de l’élément seul interdite.
Prompt à copier
À coller dans Claude ou ChatGPT avec le fichier téléchargé (ou le code copié) : l’assistant t’aide à l’installer et à l’adapter à ta marque.
Tu es un expert des thèmes Shopify Online Store 2.0. Aide-moi à installer puis à adapter à ma marque cet élément gratuit de la bibliothèque NAHNAH AI.
Élément : « Logos de paiement en éventail » (Logos de marques)
Description : Les logos officiels des moyens de paiement que tu acceptes, posés comme des cartes bancaires tenues en éventail : l’éventail s’ouvre au survol (ou tout seul sur téléphone), avec la mention de compatibilité. Logos non modifiés.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/logos-paiement-eventail
Fichier : nahnah-logos-paiement-eventail.liquid (bouton « Télécharger » de la page) ou le code copié avec le bouton « Copier » : je te le joins ou je le colle après ce message.
Emplacement dans le thème : sections/nahnah-logos-paiement-eventail.liquid (Liquid, puis {% stylesheet %} et {% javascript %}, dans ce seul fichier).
Étapes d’installation :
1. Dans Shopify : Boutique en ligne → Thèmes → bouton « … » du thème → Modifier le code.
2. Dossier « sections » → « Ajouter une section » (ou « Nouveau fichier ») → nomme-la « nahnah-logos-paiement-eventail ».
3. Efface le contenu proposé, colle le code de l’onglet Liquid (fichier complet), puis Enregistrer.
4. Ouvre Personnaliser → Ajouter une section → choisis-la, règle les textes et les couleurs, puis Enregistrer.
Ce que j’attends de toi :
- Guide-moi pas à pas dans Shopify : Boutique en ligne → Thèmes → « … » → Modifier le code → dossier sections → Ajouter une section, puis Personnaliser → Ajouter une section.
- Propose-moi d’adapter les couleurs, les textes et les liens à ma marque : demande d’abord mes couleurs (codes hexadécimaux), mon ton et mes liens.
- Garde le bloc {% schema %} et tous ses réglages (identifiants, types, presets) : je dois pouvoir tout régler ensuite dans l’éditeur de thème.
- Rends-moi le fichier complet modifié, prêt à coller, sans faux avis, fausse urgence ni chiffre inventé.
Si tu as le connecteur NAHNAH AI (MCP), récupère directement le code exact avec l’outil obtenir_code_element (id : logos-paiement-eventail).Installer dans ma boutique
En un clic, la section est ajoutée à un thème de ta boutique Shopify connectée (un thème non publié par défaut).
Chargement de tes boutiques…
Installer dans Shopify
- Dans Shopify : Boutique en ligne → Thèmes → bouton « … » du thème → Modifier le code.
- Dossier « sections » → « Ajouter une section » (ou « Nouveau fichier ») → nomme-la « nahnah-logos-paiement-eventail ».
- Efface le contenu proposé, colle le code de l’onglet Liquid (fichier complet), puis Enregistrer.
- Ouvre Personnaliser → Ajouter une section → choisis-la, règle les textes et les couleurs, puis Enregistrer.
Installer via le MCP
Depuis Claude, Claude Code ou ChatGPT connecté à NAHNAH AI, demande : « Donne-moi le code de l’élément logos-paiement-eventail de la bibliothèque NAHNAH AI et les étapes pour l’installer ». L’assistant récupère le code et les étapes (outil obtenir_code_element), gratuitement.
Boutique connectée à NAHNAH AI : l’assistant peut aussi l’installer directement (outil installer_element).
Connecter le MCP