Aller au contenu

🏷️ Logos de marquesGratuit · 0 NahnahPar NAHNAH

Logos avec reflet qui balaie

Une grille de logos partenaires en gris ; un faisceau de lumière traverse la grille en diagonale et colore chaque logo au passage, en boucle. Discret mais vivant.

Logos officiels affichés pour indiquer la compatibilité ; marques de leurs propriétaires. NAHNAH AI est un service indépendant.

Voir le code

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

{%- comment -%} NAHNAH AI · Logos avec reflet qui balaie {%- endcomment -%}
<section class="nn-logos-reflet-balayage" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }};">
  {%- if section.settings.titre != blank -%}<p>{{ section.settings.titre | escape }}</p>{%- endif -%}
  <ul>
    {%- for block in section.blocks -%}
    <li style="--nn-i:{{ forloop.index0 }}" {{ block.shopify_attributes }}>{%- if block.settings.logo != blank -%}{{ block.settings.logo | image_url: width: 240 | image_tag: loading: 'lazy', alt: block.settings.nom }}{%- else -%}<span>{{ block.settings.nom | escape }}</span>{%- endif -%}</li>
    {%- endfor -%}
  </ul>
</section>
{% schema %}
{"name":"Logos reflet balayage","settings":[
{"type":"text","id":"titre","label":"Titre","default":"Ils nous font confiance"},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#FFFFFF"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#1E1E1E"}],
"blocks":[{"type":"logo","name":"Logo","settings":[
{"type":"image_picker","id":"logo","label":"Logo"},
{"type":"text","id":"nom","label":"Nom (texte de secours)","default":"Marque"}]}],
"presets":[{"name":"Logos reflet balayage","blocks":[
{"type":"logo","settings":{"nom":"Lumen"}},{"type":"logo","settings":{"nom":"Kora"}},{"type":"logo","settings":{"nom":"Nordik"}},
{"type":"logo","settings":{"nom":"Atelier 9"}},{"type":"logo","settings":{"nom":"Vela"}},{"type":"logo","settings":{"nom":"Opal"}}]}]}
{% endschema %}

{% stylesheet %}
/* Faisceau qui colore les logos au passage */
.nn-logos-reflet-balayage{padding:44px 16px;background:var(--nn-fond);color:var(--nn-texte);font-family:system-ui,sans-serif;text-align:center}
.nn-logos-reflet-balayage p{margin:0 0 22px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.nn-logos-reflet-balayage ul{list-style:none;margin:0 auto;padding:0;max-width:1000px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:color-mix(in srgb,var(--nn-texte) 10%,transparent);border:1px solid color-mix(in srgb,var(--nn-texte) 10%,transparent)}
.nn-logos-reflet-balayage li{display:grid;place-items:center;height:96px;padding:16px;background:var(--nn-fond);filter:grayscale(1);opacity:.5;animation:nn-logos-reflet-balayage-passe 6s ease-in-out infinite;animation-delay:calc(var(--nn-i) * .35s)}
.nn-logos-reflet-balayage li img{max-width:120px;max-height:44px;object-fit:contain}
.nn-logos-reflet-balayage li span{font-weight:900;font-size:20px;letter-spacing:-.02em}
.nn-logos-reflet-balayage li:hover{filter:none;opacity:1}
@keyframes nn-logos-reflet-balayage-passe{0%,30%,100%{filter:grayscale(1);opacity:.5;background:var(--nn-fond)}15%{filter:none;opacity:1;background:color-mix(in srgb,var(--nn-texte) 4%,var(--nn-fond))}}
@media (min-width:750px){.nn-logos-reflet-balayage ul{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (prefers-reduced-motion: reduce){.nn-logos-reflet-balayage li{animation:none}}
{% endstylesheet %}
Télécharger le fichier .liquid

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 avec reflet qui balaie » (Logos de marques)
Description : Une grille de logos partenaires en gris ; un faisceau de lumière traverse la grille en diagonale et colore chaque logo au passage, en boucle. Discret mais vivant.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/logos-reflet-balayage
Fichier : nahnah-logos-reflet-balayage.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-reflet-balayage.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-reflet-balayage ».
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-reflet-balayage).

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-logos-reflet-balayage ».
  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 logos-reflet-balayage 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