Aller au contenu

🔣 IcônesGratuit · 0 NahnahPar NAHNAH AI

Icônes paiement & sécurité

10 icônes de paiement et de sécurité au trait (carte, cadenas, bouclier, sans contact, reçu…) en grille animable.

Voir le codeModifier avec l’IA · 1 Nahnah

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-icones-paiement.liquid (Liquid, CSS et JS inclus).

{%- comment -%} NAHNAH AI · Icônes paiement & sécurité (bibliothèque Sections & effets) : 10 icônes au trait, animables {%- endcomment -%}
<div class="nn-icones-paiement nn-icones-paiement--{{ section.settings.alignement }}" data-nn-animation="{{ section.settings.animation }}" data-nn-mode="{{ section.settings.mode }}" 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 }}; --nn-icone: {{ section.settings.couleur_icone }}; --nn-taille: {{ section.settings.taille }}px; --nn-colonnes: {{ section.settings.colonnes }};">
  {%- if section.settings.titre != blank or section.settings.texte != blank -%}
    <div class="nn-icones-paiement__entete">
      {%- if section.settings.titre != blank -%}<h2 class="nn-icones-paiement__titre">{{ section.settings.titre }}</h2>{%- endif -%}
      {%- if section.settings.texte != blank -%}<p class="nn-icones-paiement__intro">{{ section.settings.texte | escape }}</p>{%- endif -%}
    </div>
  {%- endif -%}
  <ul class="nn-icones-paiement__grille" role="list">
    {%- for block in section.blocks -%}
      <li class="nn-icones-paiement__carte" style="--nn-i: {{ forloop.index0 }};" {{ block.shopify_attributes }}>
        <span class="nn-icones-paiement__pastille nn-icones-paiement__pastille--{{ section.settings.forme }}">
          <svg class="nn-icones-paiement__svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
        {%- case block.settings.icone -%}
          {%- when 'carte' -%}
            <rect pathLength="1" x="2.5" y="5.5" width="19" height="13" rx="2"/><path pathLength="1" d="M2.5 10h19M6 15h4"/>
          {%- when 'cadenas' -%}
            <rect pathLength="1" x="5" y="10.5" width="14" height="10" rx="2"/><path pathLength="1" d="M8 10.5v-3a4 4 0 0 1 8 0v3"/><path pathLength="1" d="M12 14.5v2"/>
          {%- when 'bouclier' -%}
            <path pathLength="1" d="M12 3 4.5 6v5.5c0 4.5 3.2 8.2 7.5 9.5 4.3-1.3 7.5-5 7.5-9.5V6z"/><path pathLength="1" d="m9 12 2.2 2.2L15.5 10"/>
          {%- when 'portefeuille' -%}
            <path pathLength="1" d="M17 7.5V4H5.5a2 2 0 0 0 0 4H19a1.5 1.5 0 0 1 1.5 1.5v9A1.5 1.5 0 0 1 19 20H5.5a2 2 0 0 1-2-2V6"/><path pathLength="1" d="M20.5 11.5h-3.5a2 2 0 0 0 0 4h3.5"/>
          {%- when 'especes' -%}
            <rect pathLength="1" x="2.5" y="6" width="19" height="12" rx="1.5"/><circle pathLength="1" cx="12" cy="12" r="2.6"/><path pathLength="1" d="M6 9.5v5M18 9.5v5"/>
          {%- when 'recu' -%}
            <path pathLength="1" d="M6 3h12v18l-2-1.4-2 1.4-2-1.4-2 1.4-2-1.4L6 21z"/><path pathLength="1" d="M9 8h6M9 12h6M9 16h3"/>
          {%- when 'paiement-mobile' -%}
            <rect pathLength="1" x="6.5" y="2.5" width="11" height="19" rx="2.2"/><path pathLength="1" d="M11 18.5h2"/><path pathLength="1" d="M9.8 10.2a3.2 3.2 0 0 1 4.4 0M8.3 8.2a5.4 5.4 0 0 1 7.4 0"/>
          {%- when 'sans-contact' -%}
            <path pathLength="1" d="M7 9a4.2 4.2 0 0 1 0 6M10.5 6.5a7.8 7.8 0 0 1 0 11M14 4a11.4 11.4 0 0 1 0 16"/>
          {%- when 'verifie' -%}
            <path pathLength="1" d="M12 3l2.8 2.2 3.6.4.4 3.6L21 12l-2.2 2.8-.4 3.6-3.6.4L12 21l-2.8-2.2-3.6-.4-.4-3.6L3 12l2.2-2.8.4-3.6 3.6-.4z"/><path pathLength="1" d="m9 12 2 2 4-4"/>
          {%- when 'remboursement' -%}
            <path pathLength="1" d="M20 12a8 8 0 1 1-2.3-5.7"/><path pathLength="1" d="M20 4v4h-4"/><path pathLength="1" d="M14.5 9.3a3.2 3.2 0 1 0 0 5.4M8.5 11h4.5M8.5 13h4.5"/>
        {%- endcase -%}
          </svg>
        </span>
        {%- if block.settings.titre != blank -%}
          <h3 class="nn-icones-paiement__nom">
            {%- if block.settings.lien != blank -%}
              <a class="nn-icones-paiement__lien" href="{{ block.settings.lien }}">{{ block.settings.titre | escape }}</a>
            {%- else -%}
              {{ block.settings.titre | escape }}
            {%- endif -%}
          </h3>
        {%- endif -%}
        {%- if block.settings.texte != blank -%}<p class="nn-icones-paiement__texte">{{ block.settings.texte | escape }}</p>{%- endif -%}
      </li>
    {%- endfor -%}
  </ul>
</div>

{% schema %}
{
  "name": "Icônes paiement & sécurit",
  "tag": "section",
  "class": "nn-section-icones-paiement",
  "max_blocks": 24,
  "settings": [
    {
      "type": "inline_richtext",
      "id": "titre",
      "label": "Titre",
      "default": "Paiement en toute confiance"
    },
    {
      "type": "textarea",
      "id": "texte",
      "label": "Texte d’introduction",
      "default": "Les moyens de paiement et les protections proposés au moment de payer."
    },
    {
      "type": "select",
      "id": "alignement",
      "label": "Alignement",
      "options": [
        {
          "value": "centre",
          "label": "Centré"
        },
        {
          "value": "gauche",
          "label": "À gauche"
        }
      ],
      "default": "centre"
    },
    {
      "type": "range",
      "id": "colonnes",
      "label": "Colonnes sur ordinateur",
      "min": 2,
      "max": 6,
      "step": 1,
      "default": 5
    },
    {
      "type": "header",
      "content": "Icônes"
    },
    {
      "type": "range",
      "id": "taille",
      "label": "Taille des icônes",
      "min": 24,
      "max": 64,
      "step": 4,
      "default": 36,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "forme",
      "label": "Fond de l’icône",
      "options": [
        {
          "value": "cercle",
          "label": "Cercle"
        },
        {
          "value": "carre",
          "label": "Carré arrondi"
        },
        {
          "value": "aucune",
          "label": "Aucun"
        }
      ],
      "default": "cercle"
    },
    {
      "type": "select",
      "id": "animation",
      "label": "Animation",
      "options": [
        {
          "value": "aucune",
          "label": "Aucune"
        },
        {
          "value": "rebond",
          "label": "Rebond"
        },
        {
          "value": "rotation",
          "label": "Rotation"
        },
        {
          "value": "pulsation",
          "label": "Pulsation"
        },
        {
          "value": "balancement",
          "label": "Balancement"
        },
        {
          "value": "trace",
          "label": "Tracé dessiné"
        }
      ],
      "default": "trace"
    },
    {
      "type": "select",
      "id": "mode",
      "label": "Déclenchement",
      "options": [
        {
          "value": "survol",
          "label": "Au survol (souris)"
        },
        {
          "value": "continu",
          "label": "En continu"
        }
      ],
      "default": "survol"
    },
    {
      "type": "paragraph",
      "content": "Les animations sont coupées automatiquement si le visiteur a demandé à réduire les animations."
    },
    {
      "type": "header",
      "content": "Couleurs"
    },
    {
      "type": "color",
      "id": "couleur_fond",
      "label": "Fond",
      "default": "#0B1220"
    },
    {
      "type": "color",
      "id": "couleur_texte",
      "label": "Texte",
      "default": "#F2F5F9"
    },
    {
      "type": "color",
      "id": "couleur_accent",
      "label": "Accent",
      "default": "#2EE6A8"
    },
    {
      "type": "color",
      "id": "couleur_icone",
      "label": "Icône",
      "default": "#2EE6A8"
    },
    {
      "type": "header",
      "content": "Espacement"
    },
    {
      "type": "range",
      "id": "marge_haut",
      "label": "Marge haute",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 48
    },
    {
      "type": "range",
      "id": "marge_bas",
      "label": "Marge basse",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 48
    }
  ],
  "blocks": [
    {
      "type": "icone",
      "name": "Icône",
      "settings": [
        {
          "type": "select",
          "id": "icone",
          "label": "Icône",
          "options": [
            {
              "value": "carte",
              "label": "Carte bancaire"
            },
            {
              "value": "cadenas",
              "label": "Paiement sécurisé"
            },
            {
              "value": "bouclier",
              "label": "Protection"
            },
            {
              "value": "portefeuille",
              "label": "Portefeuille"
            },
            {
              "value": "especes",
              "label": "Espèces"
            },
            {
              "value": "recu",
              "label": "Facture"
            },
            {
              "value": "paiement-mobile",
              "label": "Sur mobile"
            },
            {
              "value": "sans-contact",
              "label": "Sans contact"
            },
            {
              "value": "verifie",
              "label": "Vérifié"
            },
            {
              "value": "remboursement",
              "label": "Remboursement"
            }
          ],
          "default": "carte"
        },
        {
          "type": "text",
          "id": "titre",
          "label": "Titre",
          "default": "Carte bancaire"
        },
        {
          "type": "textarea",
          "id": "texte",
          "label": "Texte",
          "default": "Paiement par carte"
        },
        {
          "type": "url",
          "id": "lien",
          "label": "Lien (facultatif)"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Icônes paiement & sécurit",
      "blocks": [
        {
          "type": "icone",
          "settings": {
            "icone": "carte",
            "titre": "Carte bancaire",
            "texte": "Paiement par carte"
          }
        },
        {
          "type": "icone",
          "settings": {
            "icone": "cadenas",
            "titre": "Paiement sécurisé",
            "texte": "Page de paiement chiffrée (HTTPS)"
          }
        },
        {
          "type": "icone",
          "settings": {
            "icone": "bouclier",
            "titre": "Protection",
            "texte": "Tes données restent protégées"
          }
        },
        {
          "type": "icone",
          "settings": {
            "icone": "portefeuille",
            "titre": "Portefeuille",
            "texte": "Paiement avec ton portefeuille mobile"
          }
        },
        {
          "type": "icone",
          "settings": {
            "icone": "especes",
            "titre": "Espèces",
            "texte": "Selon les options de la boutique"
          }
        },
        {
          "type": "icone",
          "settings": {
            "icone": "recu",
            "titre": "Facture",
            "texte": "Une facture pour chaque commande"
          }
        },
        {
          "type": "icone",
          "settings": {
            "icone": "paiement-mobile",
            "titre": "Sur mobile",
            "texte": "Paie en quelques secondes au téléphone"
          }
        },
        {
          "type": "icone",
          "settings": {
            "icone": "sans-contact",
            "titre": "Sans contact",
            "texte": "Paiement sans contact accepté"
          }
        },
        {
          "type": "icone",
          "settings": {
            "icone": "verifie",
            "titre": "Vérifié",
            "texte": "Commande vérifiée avant l’envoi"
          }
        },
        {
          "type": "icone",
          "settings": {
            "icone": "remboursement",
            "titre": "Remboursement",
            "texte": "Selon nos conditions de retour"
          }
        }
      ]
    }
  ]
}
{% endschema %}

{% stylesheet %}
.nn-icones-paiement {
  padding: var(--nn-mh) 16px var(--nn-mb);
  background: var(--nn-fond);
  color: var(--nn-texte);
}
.nn-icones-paiement__entete { max-width: 640px; margin: 0 auto 28px; }
.nn-icones-paiement--centre .nn-icones-paiement__entete { text-align: center; }
.nn-icones-paiement__titre { margin: 0 0 8px; font-size: clamp(24px, 4vw, 34px); line-height: 1.2; }
.nn-icones-paiement__intro { margin: 0; opacity: 0.8; font-size: 16px; line-height: 1.5; }
.nn-icones-paiement__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 14px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
@media (min-width: 750px) { .nn-icones-paiement__grille { grid-template-columns: repeat(var(--nn-colonnes), minmax(0, 1fr)); gap: 30px 20px; } }
.nn-icones-paiement__carte { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.nn-icones-paiement--gauche .nn-icones-paiement__carte { align-items: flex-start; text-align: start; }
.nn-icones-paiement__pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--nn-taille) * 1.9);
  height: calc(var(--nn-taille) * 1.9);
  margin-bottom: 12px;
  color: var(--nn-icone);
}
.nn-icones-paiement__pastille--cercle { border-radius: 50%; background: color-mix(in srgb, var(--nn-accent) 18%, transparent); }
.nn-icones-paiement__pastille--carre { border-radius: 28%; background: color-mix(in srgb, var(--nn-accent) 18%, transparent); }
.nn-icones-paiement__pastille--aucune { width: auto; height: auto; }
.nn-icones-paiement__svg { display: block; width: var(--nn-taille); height: var(--nn-taille); transform-origin: 50% 50%; }
.nn-icones-paiement__nom { margin: 0 0 4px; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.nn-icones-paiement__texte { margin: 0; font-size: 14px; line-height: 1.45; opacity: 0.75; overflow-wrap: anywhere; }
.nn-icones-paiement__lien { color: inherit; text-decoration: none; }
.nn-icones-paiement__lien::after { content: ""; position: absolute; inset: 0; }
.nn-icones-paiement__carte:has(.nn-icones-paiement__lien) { position: relative; border-radius: 12px; }
.nn-icones-paiement__lien:hover { text-decoration: underline; }
.nn-icones-paiement__lien:focus-visible { outline: none; }
.nn-icones-paiement__carte:has(.nn-icones-paiement__lien:focus-visible) { outline: 3px solid var(--nn-accent); outline-offset: 6px; }
@keyframes nn-icones-paiement-rebond { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-18%); } 55% { transform: translateY(3%); } 75% { transform: translateY(-5%); } }
@keyframes nn-icones-paiement-rotation { to { transform: rotate(1turn); } }
@keyframes nn-icones-paiement-pulsation { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes nn-icones-paiement-balancement { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes nn-icones-paiement-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes nn-icones-paiement-trace-boucle { 0% { stroke-dashoffset: 1; } 45%, 100% { stroke-dashoffset: 0; } }
.nn-icones-paiement[data-nn-mode="continu"][data-nn-animation="rebond"] .nn-icones-paiement__svg { animation: nn-icones-paiement-rebond 1.8s ease-in-out infinite; animation-delay: calc(var(--nn-i) * 120ms); }
.nn-icones-paiement[data-nn-mode="continu"][data-nn-animation="rotation"] .nn-icones-paiement__svg { animation: nn-icones-paiement-rotation 6s linear infinite; }
.nn-icones-paiement[data-nn-mode="continu"][data-nn-animation="pulsation"] .nn-icones-paiement__svg { animation: nn-icones-paiement-pulsation 2.2s ease-in-out infinite; animation-delay: calc(var(--nn-i) * 120ms); }
.nn-icones-paiement[data-nn-mode="continu"][data-nn-animation="balancement"] .nn-icones-paiement__svg { animation: nn-icones-paiement-balancement 2.4s ease-in-out infinite; animation-delay: calc(var(--nn-i) * 120ms); }
.nn-icones-paiement[data-nn-mode="continu"][data-nn-animation="trace"] .nn-icones-paiement__svg > * { stroke-dasharray: 1; animation: nn-icones-paiement-trace-boucle 3.2s ease-in-out infinite; animation-delay: calc(var(--nn-i) * 160ms); }
@media (hover: hover) {
  .nn-icones-paiement[data-nn-mode="survol"][data-nn-animation="rebond"] .nn-icones-paiement__carte:hover .nn-icones-paiement__svg { animation: nn-icones-paiement-rebond 0.8s ease-out; }
  .nn-icones-paiement[data-nn-mode="survol"][data-nn-animation="rotation"] .nn-icones-paiement__carte:hover .nn-icones-paiement__svg { animation: nn-icones-paiement-rotation 0.7s ease-in-out; }
  .nn-icones-paiement[data-nn-mode="survol"][data-nn-animation="pulsation"] .nn-icones-paiement__carte:hover .nn-icones-paiement__svg { animation: nn-icones-paiement-pulsation 0.9s ease-in-out infinite; }
  .nn-icones-paiement[data-nn-mode="survol"][data-nn-animation="balancement"] .nn-icones-paiement__carte:hover .nn-icones-paiement__svg { animation: nn-icones-paiement-balancement 0.7s ease-in-out; }
  .nn-icones-paiement[data-nn-mode="survol"][data-nn-animation="trace"] .nn-icones-paiement__carte:hover .nn-icones-paiement__svg > * { stroke-dasharray: 1; animation: nn-icones-paiement-trace 0.9s ease-out; }
}
.nn-icones-paiement[data-nn-mode="survol"][data-nn-animation="trace"] .nn-icones-paiement__carte:focus-within .nn-icones-paiement__svg > * { stroke-dasharray: 1; animation: nn-icones-paiement-trace 0.9s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .nn-icones-paiement *, .nn-icones-paiement *::before, .nn-icones-paiement *::after {
    animation: none !important;
    transition: none !important;
  }
}
{% endstylesheet %}
Télécharger le fichier .liquid

Les 10 icônes, une par une

  • Carte bancaire
  • Paiement sécurisé
  • Protection
  • Portefeuille
  • Espèces
  • Facture
  • Sur mobile
  • Sans contact
  • Vérifié
  • Remboursement

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 : « Icônes paiement & sécurité » (Icônes)
Description : 10 icônes de paiement et de sécurité au trait (carte, cadenas, bouclier, sans contact, reçu…) en grille animable.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/icones-paiement
Fichier : nahnah-icones-paiement.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-icones-paiement.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-icones-paiement ».
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 : icones-paiement).

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

  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-icones-paiement ».
  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.

Installer via le MCP

Depuis Claude, Claude Code ou ChatGPT connecté à NAHNAH AI, demande : « Donne-moi le code de l’élément icones-paiement 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

Dans la même catégorie