🏷️ Logos de marquesGratuit · 0 NahnahPar NAHNAH
Logos triés par filtres
Des pastilles de filtre (Paiement, Livraison, Presse…) au-dessus d'une grille de logos : en cliquant, les logos non concernés s'effacent et les autres se réorganisent en douceur.
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-trieur-filtres.liquid (Liquid, CSS et JS inclus).
{%- comment -%} NAHNAH AI · Logos triés par filtres {%- endcomment -%}
<section class="nn-logos-trieur-filtres" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};">
{%- if section.settings.titre != blank -%}<h2>{{ section.settings.titre | escape }}</h2>{%- endif -%}
<div class="nn-logos-trieur-filtres__filtres" role="group" aria-label="Filtrer">
<button type="button" aria-pressed="true" data-nn-f="tout">Tout</button>
{%- assign familles = section.settings.familles | split: ',' -%}
{%- for f in familles -%}<button type="button" aria-pressed="false" data-nn-f="{{ f | strip | handleize }}">{{ f | strip | escape }}</button>{%- endfor -%}
</div>
<ul>
{%- for block in section.blocks -%}
<li data-nn-f="{{ block.settings.famille | strip | handleize }}" {{ block.shopify_attributes }}>{%- if block.settings.logo != blank -%}{{ block.settings.logo | image_url: width: 200 | image_tag: loading: 'lazy', alt: block.settings.nom }}{%- else -%}<span>{{ block.settings.nom | escape }}</span>{%- endif -%}<small>{{ block.settings.famille | escape }}</small></li>
{%- endfor -%}
</ul>
</section>
{% schema %}
{"name":"Logos triés par filtres","settings":[
{"type":"text","id":"titre","label":"Titre","default":"Nos partenaires"},
{"type":"text","id":"familles","label":"Familles (séparées par des virgules)","default":"Paiement, Livraison, Presse"},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#FFFFFF"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#111827"},
{"type":"color","id":"couleur_accent","label":"Accent","default":"#2563EB"}],
"blocks":[{"type":"logo","name":"Logo","settings":[
{"type":"image_picker","id":"logo","label":"Logo"},
{"type":"text","id":"nom","label":"Nom","default":"Partenaire"},
{"type":"text","id":"famille","label":"Famille (identique à la liste)","default":"Paiement"}]}],
"presets":[{"name":"Logos triés par filtres","blocks":[
{"type":"logo","settings":{"nom":"CB","famille":"Paiement"}},{"type":"logo","settings":{"nom":"PayPal","famille":"Paiement"}},
{"type":"logo","settings":{"nom":"Colissimo","famille":"Livraison"}},{"type":"logo","settings":{"nom":"Mondial Relay","famille":"Livraison"}},
{"type":"logo","settings":{"nom":"Le Mag","famille":"Presse"}},{"type":"logo","settings":{"nom":"Info+","famille":"Presse"}}]}]}
{% endschema %}
{% stylesheet %}
/* Filtres qui masquent / réorganisent les logos */
.nn-logos-trieur-filtres{padding:50px 16px;background:var(--nn-fond);color:var(--nn-texte);font-family:system-ui,sans-serif;text-align:center}
.nn-logos-trieur-filtres h2{margin:0 0 20px;font-size:clamp(26px,4.5vw,40px)}
.nn-logos-trieur-filtres__filtres{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.nn-logos-trieur-filtres__filtres button{padding:9px 18px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--nn-texte) 18%,transparent);background:transparent;color:inherit;font-weight:600;cursor:pointer;transition:all .25s}
.nn-logos-trieur-filtres__filtres button[aria-pressed=true]{background:var(--nn-accent);border-color:var(--nn-accent);color:#fff}
.nn-logos-trieur-filtres ul{list-style:none;margin:0 auto;padding:0;max-width:1000px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.nn-logos-trieur-filtres li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:110px;border-radius:16px;background:color-mix(in srgb,var(--nn-texte) 4%,var(--nn-fond));transition:opacity .35s,transform .35s}
.nn-logos-trieur-filtres li img{max-height:40px;max-width:120px;object-fit:contain}
.nn-logos-trieur-filtres li span{font-weight:800;font-size:18px}
.nn-logos-trieur-filtres li small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.5}
.nn-logos-trieur-filtres li.nn-logos-trieur-filtres--sort{opacity:0;transform:scale(.85)}
.nn-logos-trieur-filtres li[hidden]{display:none}
@media (prefers-reduced-motion: reduce){.nn-logos-trieur-filtres li{transition:none}}
{% endstylesheet %}
{% javascript %}
// Filtre les logos avec un petit fondu avant de les masquer
(function () {
document.querySelectorAll('.nn-logos-trieur-filtres').forEach(function (bloc) {
var boutons = bloc.querySelectorAll('.nn-logos-trieur-filtres__filtres button'), logos = bloc.querySelectorAll('li');
boutons.forEach(function (b) {
b.addEventListener('click', function () {
var f = b.getAttribute('data-nn-f');
boutons.forEach(function (x) { x.setAttribute('aria-pressed', x === b); });
logos.forEach(function (l) {
var ok = f === 'tout' || l.getAttribute('data-nn-f') === f;
if (ok) { l.hidden = false; requestAnimationFrame(function () { l.classList.remove('nn-logos-trieur-filtres--sort'); }); }
else { l.classList.add('nn-logos-trieur-filtres--sort'); setTimeout(function () { if (l.classList.contains('nn-logos-trieur-filtres--sort')) l.hidden = true; }, 350); }
});
});
});
});
})();
{% 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 : « Logos triés par filtres » (Logos de marques)
Description : Des pastilles de filtre (Paiement, Livraison, Presse…) au-dessus d'une grille de logos : en cliquant, les logos non concernés s'effacent et les autres se réorganisent en douceur.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/logos-trieur-filtres
Fichier : nahnah-logos-trieur-filtres.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-trieur-filtres.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-trieur-filtres ».
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-trieur-filtres).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-trieur-filtres ».
- 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-trieur-filtres 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