🏷️ Logos de marquesGratuit · 0 NahnahPar NAHNAH
Réseaux sociaux en cartes de profil
Une carte par réseau que tu utilises vraiment : logo officiel, nom du réseau, ton identifiant (@taboutique) et « Suivre ». Les cartes s’inclinent sous la souris avec un reflet. Un réseau n’apparaît que si tu donnes son lien ; mention de compatibilité incluse.
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-reseaux-cartes-profil.liquid (Liquid, CSS et JS inclus).
{%- comment -%} NAHNAH AI · Réseaux sociaux en cartes de profil (bibliothèque Sections & effets) {%- endcomment -%}
<div class="nn-logos-reseaux-cartes-profil" 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 }};">
<h2 class="nn-logos-reseaux-cartes-profil__titre">{{ section.settings.titre | escape }}</h2>
<ul class="nn-logos-reseaux-cartes-profil__grille" role="list">
{%- if section.settings.lien_instagram != blank -%}<li class="nn-logos-reseaux-cartes-profil__carte" style="--nn-i: 0;"><a href="{{ section.settings.lien_instagram }}" class="nn-logos-reseaux-cartes-profil__lien" aria-label="Instagram{% if section.settings.compte_instagram != blank %} : {{ section.settings.compte_instagram | escape }}{% endif %}"><span class="nn-logos-reseaux-cartes-profil__logo"><svg class="nn-logos-reseaux-cartes-profil__svg" aria-hidden="true" focusable="false" width="34" height="34" fill="#FF0069" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/></svg></span><span class="nn-logos-reseaux-cartes-profil__nom">Instagram</span>{%- if section.settings.compte_instagram != blank -%}<span class="nn-logos-reseaux-cartes-profil__compte">{{ section.settings.compte_instagram | escape }}</span>{%- endif -%}<span class="nn-logos-reseaux-cartes-profil__suivre" aria-hidden="true">Suivre →</span></a></li>{%- endif -%}
{%- if section.settings.lien_tiktok != blank -%}<li class="nn-logos-reseaux-cartes-profil__carte" style="--nn-i: 1;"><a href="{{ section.settings.lien_tiktok }}" class="nn-logos-reseaux-cartes-profil__lien" aria-label="TikTok{% if section.settings.compte_tiktok != blank %} : {{ section.settings.compte_tiktok | escape }}{% endif %}"><span class="nn-logos-reseaux-cartes-profil__logo"><svg class="nn-logos-reseaux-cartes-profil__svg" aria-hidden="true" focusable="false" width="34" height="34" fill="#000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg></span><span class="nn-logos-reseaux-cartes-profil__nom">TikTok</span>{%- if section.settings.compte_tiktok != blank -%}<span class="nn-logos-reseaux-cartes-profil__compte">{{ section.settings.compte_tiktok | escape }}</span>{%- endif -%}<span class="nn-logos-reseaux-cartes-profil__suivre" aria-hidden="true">Suivre →</span></a></li>{%- endif -%}
{%- if section.settings.lien_facebook != blank -%}<li class="nn-logos-reseaux-cartes-profil__carte" style="--nn-i: 2;"><a href="{{ section.settings.lien_facebook }}" class="nn-logos-reseaux-cartes-profil__lien" aria-label="Facebook{% if section.settings.compte_facebook != blank %} : {{ section.settings.compte_facebook | escape }}{% endif %}"><span class="nn-logos-reseaux-cartes-profil__logo"><svg class="nn-logos-reseaux-cartes-profil__svg" aria-hidden="true" focusable="false" width="34" height="34" fill="#0866FF" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/></svg></span><span class="nn-logos-reseaux-cartes-profil__nom">Facebook</span>{%- if section.settings.compte_facebook != blank -%}<span class="nn-logos-reseaux-cartes-profil__compte">{{ section.settings.compte_facebook | escape }}</span>{%- endif -%}<span class="nn-logos-reseaux-cartes-profil__suivre" aria-hidden="true">Suivre →</span></a></li>{%- endif -%}
{%- if section.settings.lien_youtube != blank -%}<li class="nn-logos-reseaux-cartes-profil__carte" style="--nn-i: 3;"><a href="{{ section.settings.lien_youtube }}" class="nn-logos-reseaux-cartes-profil__lien" aria-label="YouTube{% if section.settings.compte_youtube != blank %} : {{ section.settings.compte_youtube | escape }}{% endif %}"><span class="nn-logos-reseaux-cartes-profil__logo"><svg class="nn-logos-reseaux-cartes-profil__svg" aria-hidden="true" focusable="false" width="34" height="34" fill="#FF0000" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg></span><span class="nn-logos-reseaux-cartes-profil__nom">YouTube</span>{%- if section.settings.compte_youtube != blank -%}<span class="nn-logos-reseaux-cartes-profil__compte">{{ section.settings.compte_youtube | escape }}</span>{%- endif -%}<span class="nn-logos-reseaux-cartes-profil__suivre" aria-hidden="true">Suivre →</span></a></li>{%- endif -%}
{%- if section.settings.lien_pinterest != blank -%}<li class="nn-logos-reseaux-cartes-profil__carte" style="--nn-i: 4;"><a href="{{ section.settings.lien_pinterest }}" class="nn-logos-reseaux-cartes-profil__lien" aria-label="Pinterest{% if section.settings.compte_pinterest != blank %} : {{ section.settings.compte_pinterest | escape }}{% endif %}"><span class="nn-logos-reseaux-cartes-profil__logo"><svg class="nn-logos-reseaux-cartes-profil__svg" aria-hidden="true" focusable="false" width="34" height="34" fill="#BD081C" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/></svg></span><span class="nn-logos-reseaux-cartes-profil__nom">Pinterest</span>{%- if section.settings.compte_pinterest != blank -%}<span class="nn-logos-reseaux-cartes-profil__compte">{{ section.settings.compte_pinterest | escape }}</span>{%- endif -%}<span class="nn-logos-reseaux-cartes-profil__suivre" aria-hidden="true">Suivre →</span></a></li>{%- endif -%}
{%- if section.settings.lien_x != blank -%}<li class="nn-logos-reseaux-cartes-profil__carte" style="--nn-i: 5;"><a href="{{ section.settings.lien_x }}" class="nn-logos-reseaux-cartes-profil__lien" aria-label="X{% if section.settings.compte_x != blank %} : {{ section.settings.compte_x | escape }}{% endif %}"><span class="nn-logos-reseaux-cartes-profil__logo"><svg class="nn-logos-reseaux-cartes-profil__svg" aria-hidden="true" focusable="false" width="34" height="34" fill="#000000" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/></svg></span><span class="nn-logos-reseaux-cartes-profil__nom">X</span>{%- if section.settings.compte_x != blank -%}<span class="nn-logos-reseaux-cartes-profil__compte">{{ section.settings.compte_x | escape }}</span>{%- endif -%}<span class="nn-logos-reseaux-cartes-profil__suivre" aria-hidden="true">Suivre →</span></a></li>{%- endif -%}
{%- if section.settings.lien_snapchat != blank -%}<li class="nn-logos-reseaux-cartes-profil__carte" style="--nn-i: 6;"><a href="{{ section.settings.lien_snapchat }}" class="nn-logos-reseaux-cartes-profil__lien" aria-label="Snapchat{% if section.settings.compte_snapchat != blank %} : {{ section.settings.compte_snapchat | escape }}{% endif %}"><span class="nn-logos-reseaux-cartes-profil__logo"><svg class="nn-logos-reseaux-cartes-profil__svg" aria-hidden="true" focusable="false" width="34" height="34" fill="#FFFC00" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.206.793c.99 0 4.347.276 5.93 3.821.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51.075.045.203.09.401.09.3-.016.659-.12 1.033-.301.165-.088.344-.104.464-.104.182 0 .359.029.509.09.45.149.734.479.734.838.015.449-.39.839-1.213 1.168-.089.029-.209.075-.344.119-.45.135-1.139.36-1.333.81-.09.224-.061.524.12.868l.015.015c.06.136 1.526 3.475 4.791 4.014.255.044.435.27.42.509 0 .075-.015.149-.045.225-.24.569-1.273.988-3.146 1.271-.059.091-.12.375-.164.57-.029.179-.074.36-.134.553-.076.271-.27.405-.555.405h-.03c-.135 0-.313-.031-.538-.074-.36-.075-.765-.135-1.273-.135-.3 0-.599.015-.913.074-.6.104-1.123.464-1.723.884-.853.599-1.826 1.288-3.294 1.288-.06 0-.119-.015-.18-.015h-.149c-1.468 0-2.427-.675-3.279-1.288-.599-.42-1.107-.779-1.707-.884-.314-.045-.629-.074-.928-.074-.54 0-.958.089-1.272.149-.211.043-.391.074-.54.074-.374 0-.523-.224-.583-.42-.061-.192-.09-.389-.135-.567-.046-.181-.105-.494-.166-.57-1.918-.222-2.95-.642-3.189-1.226-.031-.063-.052-.15-.055-.225-.015-.243.165-.465.42-.509 3.264-.54 4.73-3.879 4.791-4.02l.016-.029c.18-.345.224-.645.119-.869-.195-.434-.884-.658-1.332-.809-.121-.029-.24-.074-.346-.119-1.107-.435-1.257-.93-1.197-1.273.09-.479.674-.793 1.168-.793.146 0 .27.029.383.074.42.194.789.3 1.104.3.234 0 .384-.06.465-.105l-.046-.569c-.098-1.626-.225-3.651.307-4.837C7.392 1.077 10.739.807 11.727.807l.419-.015h.06z"/></svg></span><span class="nn-logos-reseaux-cartes-profil__nom">Snapchat</span>{%- if section.settings.compte_snapchat != blank -%}<span class="nn-logos-reseaux-cartes-profil__compte">{{ section.settings.compte_snapchat | escape }}</span>{%- endif -%}<span class="nn-logos-reseaux-cartes-profil__suivre" aria-hidden="true">Suivre →</span></a></li>{%- endif -%}
{%- if section.settings.lien_whatsapp != blank -%}<li class="nn-logos-reseaux-cartes-profil__carte" style="--nn-i: 7;"><a href="{{ section.settings.lien_whatsapp }}" class="nn-logos-reseaux-cartes-profil__lien" aria-label="WhatsApp{% if section.settings.compte_whatsapp != blank %} : {{ section.settings.compte_whatsapp | escape }}{% endif %}"><span class="nn-logos-reseaux-cartes-profil__logo"><svg class="nn-logos-reseaux-cartes-profil__svg" aria-hidden="true" focusable="false" width="34" height="34" fill="#25D366" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg></span><span class="nn-logos-reseaux-cartes-profil__nom">WhatsApp</span>{%- if section.settings.compte_whatsapp != blank -%}<span class="nn-logos-reseaux-cartes-profil__compte">{{ section.settings.compte_whatsapp | escape }}</span>{%- endif -%}<span class="nn-logos-reseaux-cartes-profil__suivre" aria-hidden="true">Suivre →</span></a></li>{%- endif -%}
{%- if section.settings.lien_threads != blank -%}<li class="nn-logos-reseaux-cartes-profil__carte" style="--nn-i: 8;"><a href="{{ section.settings.lien_threads }}" class="nn-logos-reseaux-cartes-profil__lien" aria-label="Threads{% if section.settings.compte_threads != blank %} : {{ section.settings.compte_threads | escape }}{% endif %}"><span class="nn-logos-reseaux-cartes-profil__logo"><svg class="nn-logos-reseaux-cartes-profil__svg" aria-hidden="true" focusable="false" width="34" height="34" fill="#000000" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.263 11.097c-.03-3.486-1.92-5.586-5.111-5.586-2.13 0-3.922.963-4.863 2.499l2.062 1.438c.535-.843 1.272-1.543 2.628-1.543 1.528 0 2.318.85 2.544 2.431a15 15 0 0 0-2.236-.173c-4.125 0-6.068 1.867-6.068 4.336s1.943 3.99 4.804 3.99c3.139 0 5.013-2.115 5.781-4.735.798.361 1.348 1.204 1.348 2.47 0 3.387-3.907 5.232-7.22 5.232-4.885 0-8.077-3.207-8.077-8.424 0-6.392 4.223-10.487 9.9-10.487 3.808 0 5.69 1.671 6.97 3.914l2.108-1.475C21.44 2.078 18.331 0 13.663 0 6.227 0 1.168 5.277 1.168 12.934c0 7 4.953 11.066 10.856 11.066 4.878 0 9.809-2.846 9.809-7.716 0-2.545-1.46-4.231-3.569-5.187m-6.33 4.855c-1.077 0-2.026-.512-2.026-1.453 0-1.483 1.822-1.934 3.606-1.934.678 0 1.34.045 1.927.173-.422 1.927-1.671 3.215-3.508 3.214Z"/></svg></span><span class="nn-logos-reseaux-cartes-profil__nom">Threads</span>{%- if section.settings.compte_threads != blank -%}<span class="nn-logos-reseaux-cartes-profil__compte">{{ section.settings.compte_threads | escape }}</span>{%- endif -%}<span class="nn-logos-reseaux-cartes-profil__suivre" aria-hidden="true">Suivre →</span></a></li>{%- endif -%}
</ul>
<p class="nn-logos-reseaux-cartes-profil__mention">{{ section.settings.mention | default: 'Logos officiels affichés pour indiquer la compatibilité ; marques de leurs propriétaires.' | escape }}</p>
</div>
{% schema %}
{
"name": "Réseaux en cartes",
"tag": "section",
"class": "nn-section-logos-reseaux-cartes-profil",
"settings": [
{
"type": "text",
"id": "titre",
"label": "Titre",
"default": "Retrouve-nous ici"
},
{
"type": "header",
"content": "Réseaux (vide : masqué)"
},
{
"type": "paragraph",
"content": "Logos officiels non modifiés. Un réseau n’apparaît que si tu indiques son lien."
},
{
"type": "url",
"id": "lien_instagram",
"label": "Lien Instagram"
},
{
"type": "url",
"id": "lien_tiktok",
"label": "Lien TikTok"
},
{
"type": "url",
"id": "lien_facebook",
"label": "Lien Facebook"
},
{
"type": "url",
"id": "lien_youtube",
"label": "Lien YouTube"
},
{
"type": "url",
"id": "lien_pinterest",
"label": "Lien Pinterest"
},
{
"type": "url",
"id": "lien_x",
"label": "Lien X"
},
{
"type": "url",
"id": "lien_snapchat",
"label": "Lien Snapchat"
},
{
"type": "url",
"id": "lien_whatsapp",
"label": "Lien WhatsApp"
},
{
"type": "url",
"id": "lien_threads",
"label": "Lien Threads"
},
{
"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": "Identifiants affichés (facultatif)"
},
{
"type": "text",
"id": "compte_instagram",
"label": "Identifiant Instagram",
"default": ""
},
{
"type": "text",
"id": "compte_tiktok",
"label": "Identifiant TikTok",
"default": ""
},
{
"type": "text",
"id": "compte_facebook",
"label": "Identifiant Facebook",
"default": ""
},
{
"type": "text",
"id": "compte_youtube",
"label": "Identifiant YouTube",
"default": ""
},
{
"type": "text",
"id": "compte_pinterest",
"label": "Identifiant Pinterest",
"default": ""
},
{
"type": "text",
"id": "compte_x",
"label": "Identifiant X",
"default": ""
},
{
"type": "text",
"id": "compte_snapchat",
"label": "Identifiant Snapchat",
"default": ""
},
{
"type": "text",
"id": "compte_whatsapp",
"label": "Identifiant WhatsApp",
"default": ""
},
{
"type": "text",
"id": "compte_threads",
"label": "Identifiant Threads",
"default": ""
},
{
"type": "header",
"content": "Couleurs"
},
{
"type": "color",
"id": "couleur_fond",
"label": "Fond",
"default": "#FAFAFA"
},
{
"type": "color",
"id": "couleur_texte",
"label": "Texte",
"default": "#18181B"
},
{
"type": "color",
"id": "couleur_accent",
"label": "Accent",
"default": "#EC4899"
},
{
"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": "Réseaux en cartes"
}
]
}
{% endschema %}
{% stylesheet %}
.nn-logos-reseaux-cartes-profil { padding: var(--nn-mh) 16px var(--nn-mb); background: var(--nn-fond); color: var(--nn-texte); }
.nn-logos-reseaux-cartes-profil__titre { margin: 0 0 22px; text-align: center; font-size: clamp(22px, 3.2vw, 34px); }
.nn-logos-reseaux-cartes-profil__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; max-width: 1000px; margin: 0 auto; padding: 0; list-style: none; perspective: 900px; }
.nn-logos-reseaux-cartes-profil__carte { animation: nn-logos-reseaux-cartes-profil-entre 0.6s calc(var(--nn-i) * 0.06s) cubic-bezier(0.2, 1.1, 0.3, 1) both; }
.nn-logos-reseaux-cartes-profil__lien { --nn-rx: 0deg; --nn-ry: 0deg; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 150px; padding: 18px; overflow: hidden; border-radius: 20px; background: #FFFFFF; color: inherit; text-decoration: none; box-shadow: 0 16px 30px -24px rgba(24, 24, 27, 0.6), 0 0 0 1px rgba(24, 24, 27, 0.06); transform: rotateX(var(--nn-rx)) rotateY(var(--nn-ry)); transition: transform 0.25s ease-out, box-shadow 0.3s; }
.nn-logos-reseaux-cartes-profil__lien::after { content: ""; position: absolute; inset: 0; background: radial-gradient(240px circle at var(--nn-mx, -200px) var(--nn-my, -200px), rgba(236, 72, 153, 0.14), transparent 60%); pointer-events: none; }
.nn-logos-reseaux-cartes-profil__lien:hover { box-shadow: 0 24px 40px -24px rgba(24, 24, 27, 0.6), 0 0 0 1px rgba(236, 72, 153, 0.3); }
.nn-logos-reseaux-cartes-profil__lien:focus-visible { outline: 2px solid var(--nn-accent); outline-offset: 3px; }
.nn-logos-reseaux-cartes-profil__logo { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 8px; border-radius: 16px; background: #F4F4F5; }
.nn-logos-reseaux-cartes-profil__svg { display: block; width: auto; height: 30px; }
.nn-logos-reseaux-cartes-profil__nom { font-weight: 800; }
.nn-logos-reseaux-cartes-profil__compte { font-size: 13px; opacity: 0.7; overflow-wrap: anywhere; }
.nn-logos-reseaux-cartes-profil__suivre { margin-top: auto; color: var(--nn-accent); font-size: 13px; font-weight: 700; }
.nn-logos-reseaux-cartes-profil__mention { max-width: 640px; margin: 18px auto 0; font-size: 11px; text-align: center; opacity: 0.65; }
@keyframes nn-logos-reseaux-cartes-profil-entre { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
.nn-logos-reseaux-cartes-profil *, .nn-logos-reseaux-cartes-profil *::before, .nn-logos-reseaux-cartes-profil *::after { animation: none !important; transition: none !important; }
}
{% endstylesheet %}
{% javascript %}
(function () {
var reduit = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
function brancher(racine) {
if (racine.dataset.nnPret) return;
racine.dataset.nnPret = "1";
if (reduit) return;
racine.querySelectorAll(".nn-logos-reseaux-cartes-profil__lien").forEach(function (l) {
l.addEventListener("pointermove", function (e) { var r = l.getBoundingClientRect(), x = e.clientX - r.left, y = e.clientY - r.top; l.style.setProperty("--nn-ry", ((x / r.width - 0.5) * 14).toFixed(1) + "deg"); l.style.setProperty("--nn-rx", ((0.5 - y / r.height) * 14).toFixed(1) + "deg"); l.style.setProperty("--nn-mx", x + "px"); l.style.setProperty("--nn-my", y + "px"); });
l.addEventListener("pointerleave", function () { ["--nn-rx", "--nn-ry", "--nn-mx", "--nn-my"].forEach(function (p) { l.style.removeProperty(p); }); });
});
}
function tout() { document.querySelectorAll(".nn-logos-reseaux-cartes-profil").forEach(brancher); }
tout();
document.addEventListener("shopify:section:load", tout);
})();
{% endjavascript %}
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 : « Réseaux sociaux en cartes de profil » (Logos de marques)
Description : Une carte par réseau que tu utilises vraiment : logo officiel, nom du réseau, ton identifiant (@taboutique) et « Suivre ». Les cartes s’inclinent sous la souris avec un reflet. Un réseau n’apparaît que si tu donnes son lien ; mention de compatibilité incluse.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/logos-reseaux-cartes-profil
Fichier : nahnah-logos-reseaux-cartes-profil.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-reseaux-cartes-profil.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-reseaux-cartes-profil ».
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-reseaux-cartes-profil).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-reseaux-cartes-profil ».
- 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-reseaux-cartes-profil 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