Aller au contenu

🛍️ Fiches produitGratuit · 0 NahnahPar NAHNAH AI

Galerie produit et miniatures

Photos et vidéos du produit à faire glisser au doigt, flèches, compteur et miniatures cliquables (sous l’image ou à gauche).

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-fiche-galerie-miniatures.liquid (Liquid, CSS et JS inclus).

{%- comment -%} NAHNAH AI · Galerie produit avec miniatures (bibliothèque Sections & effets) {%- endcomment -%}
{%- assign produit = section.settings.produit | default: product -%}
{%- assign id_vue = 'nn-fg-' | append: section.id -%}
{%- if produit != blank -%}
<div class="nn-fiche-galerie-miniatures" 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-ratio: {{ section.settings.ratio }}; --nn-ajustement: {{ section.settings.ajustement }};">
  <div class="nn-fiche-galerie-miniatures__conteneur">
    <nn-fiche-galerie-miniatures class="nn-fiche-galerie-miniatures__galerie nn-fiche-galerie-miniatures__galerie--{{ section.settings.position }}" role="region" aria-roledescription="carrousel" aria-label="Galerie : {{ produit.title | escape }}">
      <div class="nn-fiche-galerie-miniatures__principale">
        <ul class="nn-fiche-galerie-miniatures__vue" id="{{ id_vue }}" data-nn-vue role="list" tabindex="0" aria-label="Médias du produit (flèches gauche et droite pour défiler)">
          {%- for media in produit.media -%}
            {%- if forloop.first -%}{%- assign chargement = 'eager' -%}{%- else -%}{%- assign chargement = 'lazy' -%}{%- endif -%}
            <li class="nn-fiche-galerie-miniatures__diapo" role="group" aria-roledescription="diapositive" aria-label="{{ forloop.index }} sur {{ forloop.length }}">
              {%- case media.media_type -%}
                {%- when 'video' -%}
                  {{ media | video_tag: controls: true, preload: 'none', playsinline: true, class: 'nn-fiche-galerie-miniatures__media' }}
                {%- when 'external_video' -%}
                  {{ media | external_video_tag: class: 'nn-fiche-galerie-miniatures__media' }}
                {%- else -%}
                  {{ media | image_url: width: 1400 | image_tag: loading: chargement, sizes: '(min-width: 990px) 760px, 100vw', widths: '400, 600, 800, 1100, 1400', class: 'nn-fiche-galerie-miniatures__media' }}
              {%- endcase -%}
            </li>
          {%- else -%}
            <li class="nn-fiche-galerie-miniatures__diapo">{{ 'product-1' | placeholder_svg_tag: 'nn-fiche-galerie-miniatures__media' }}</li>
          {%- endfor -%}
        </ul>
        {%- if produit.media.size > 1 -%}
          <button type="button" class="nn-fiche-galerie-miniatures__fleche nn-fiche-galerie-miniatures__fleche--prec" data-nn-prec aria-controls="{{ id_vue }}" aria-label="Média précédent"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></button>
          <button type="button" class="nn-fiche-galerie-miniatures__fleche nn-fiche-galerie-miniatures__fleche--suiv" data-nn-suiv aria-controls="{{ id_vue }}" aria-label="Média suivant"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg></button>
          <p class="nn-fiche-galerie-miniatures__compteur" aria-hidden="true"><span data-nn-numero>1</span> / {{ produit.media.size }}</p>
        {%- endif -%}
      </div>
      {%- if produit.media.size > 1 -%}
        <ul class="nn-fiche-galerie-miniatures__miniatures" role="list" data-nn-miniatures>
          {%- for media in produit.media -%}
            <li>
              <button type="button" class="nn-fiche-galerie-miniatures__miniature" data-nn-index="{{ forloop.index0 }}" aria-controls="{{ id_vue }}" aria-label="Afficher le média {{ forloop.index }} sur {{ forloop.length }}"{% if forloop.first %} aria-current="true"{% endif %}>
                {{ media.preview_image | image_url: width: 160 | image_tag: loading: 'lazy', class: 'nn-fiche-galerie-miniatures__vignette', alt: '', widths: '80, 160', sizes: '80px' }}
                {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}<span class="nn-fiche-galerie-miniatures__lecture" aria-hidden="true">▶</span>{%- endif -%}
              </button>
            </li>
          {%- endfor -%}
        </ul>
      {%- endif -%}
    </nn-fiche-galerie-miniatures>
  </div>
</div>
{%- elsif request.design_mode -%}
  <div class="nn-fiche-galerie-miniatures__conteneur"><p class="nn-fiche-galerie-miniatures__vide">Place cette section sur le modèle de fiche produit, ou choisis un produit dans ses réglages.</p></div>
{%- endif -%}

{% schema %}
{
  "name": "Galerie produit",
  "tag": "section",
  "class": "nn-section-fiche-galerie-miniatures",
  "settings": [
    {
      "type": "product",
      "id": "produit",
      "label": "Produit (vide : celui de la page produit)"
    },
    {
      "type": "select",
      "id": "position",
      "label": "Miniatures sur ordinateur",
      "options": [
        {
          "value": "bas",
          "label": "Sous l’image"
        },
        {
          "value": "gauche",
          "label": "À gauche"
        }
      ],
      "default": "bas"
    },
    {
      "type": "select",
      "id": "ratio",
      "label": "Format",
      "options": [
        {
          "value": "1",
          "label": "Carré"
        },
        {
          "value": "0.8",
          "label": "Portrait"
        },
        {
          "value": "1.333",
          "label": "Paysage"
        }
      ],
      "default": "1"
    },
    {
      "type": "select",
      "id": "ajustement",
      "label": "Ajustement des images",
      "options": [
        {
          "value": "cover",
          "label": "Remplir le cadre"
        },
        {
          "value": "contain",
          "label": "Image entière"
        }
      ],
      "default": "cover"
    },
    {
      "type": "header",
      "content": "Couleurs"
    },
    {
      "type": "color",
      "id": "couleur_fond",
      "label": "Fond",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "couleur_texte",
      "label": "Texte",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "couleur_accent",
      "label": "Accent",
      "default": "#2EE6A8"
    },
    {
      "type": "header",
      "content": "Espacement"
    },
    {
      "type": "range",
      "id": "marge_haut",
      "label": "Marge haute",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 32
    },
    {
      "type": "range",
      "id": "marge_bas",
      "label": "Marge basse",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 32
    }
  ],
  "presets": [
    {
      "name": "Galerie produit"
    }
  ]
}
{% endschema %}

{% stylesheet %}
.nn-fiche-galerie-miniatures {
  padding: var(--nn-mh) 0 var(--nn-mb);
  background: var(--nn-fond);
  color: var(--nn-texte);
}
.nn-fiche-galerie-miniatures__conteneur {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.nn-fiche-galerie-miniatures__titre {
  margin: 0;
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1.2;
  color: inherit;
}
.nn-fiche-galerie-miniatures__cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.nn-fiche-galerie-miniatures__vide {
  margin: 0;
  padding: 16px;
  border: 1px dashed currentColor;
  border-radius: 12px;
  font-size: 14px;
  opacity: 0.8;
}
.nn-fiche-galerie-miniatures__galerie {
  display: grid;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
}
@media (min-width: 990px) {
  .nn-fiche-galerie-miniatures__galerie--gauche { grid-template-columns: 88px minmax(0, 1fr); align-items: start; }
  .nn-fiche-galerie-miniatures__galerie--gauche .nn-fiche-galerie-miniatures__miniatures {
    order: -1;
    flex-direction: column;
    max-height: 640px;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
.nn-fiche-galerie-miniatures__principale {
  position: relative;
  min-width: 0;
}
.nn-fiche-galerie-miniatures__vue {
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  border-radius: 16px;
  background: color-mix(in srgb, var(--nn-texte) 5%, var(--nn-fond));
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.nn-fiche-galerie-miniatures__vue::-webkit-scrollbar { display: none; }
.nn-fiche-galerie-miniatures__vue:focus-visible {
  outline: 3px solid var(--nn-accent);
  outline-offset: 3px;
}
.nn-fiche-galerie-miniatures__diapo {
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: var(--nn-ratio, 1);
  scroll-snap-align: center;
}
.nn-fiche-galerie-miniatures__media {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: var(--nn-ajustement, cover);
}
.nn-fiche-galerie-miniatures__fleche {
  position: absolute;
  top: 50%;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--nn-fond) 88%, transparent);
  color: var(--nn-texte);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
}
.nn-fiche-galerie-miniatures__fleche svg {
  width: 20px;
  height: 20px;
}
.nn-fiche-galerie-miniatures__fleche--prec { inset-inline-start: 10px; }
.nn-fiche-galerie-miniatures__fleche--suiv { inset-inline-end: 10px; }
.nn-fiche-galerie-miniatures__fleche:disabled {
  opacity: 0;
  pointer-events: none;
}
.nn-fiche-galerie-miniatures__fleche:focus-visible {
  outline: 3px solid var(--nn-accent);
  outline-offset: 2px;
}
[dir="rtl"] .nn-fiche-galerie-miniatures__fleche svg { transform: scaleX(-1); }
.nn-fiche-galerie-miniatures__compteur {
  position: absolute;
  right: 12px;
  bottom: 12px;
  margin: 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #FFFFFF;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.nn-fiche-galerie-miniatures__miniatures {
  position: relative;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 3px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}
.nn-fiche-galerie-miniatures__miniature {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.nn-fiche-galerie-miniatures__miniature[aria-current="true"] {
  border-color: var(--nn-accent);
  opacity: 1;
}
.nn-fiche-galerie-miniatures__miniature:focus-visible {
  outline: 3px solid var(--nn-accent);
  outline-offset: 2px;
}
.nn-fiche-galerie-miniatures__vignette {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nn-fiche-galerie-miniatures__lecture {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.35);
  color: #FFFFFF;
  font-size: 18px;
}
@media (prefers-reduced-motion: reduce) {
  .nn-fiche-galerie-miniatures * {
    animation: none !important;
    transition: none !important;
  }
}
{% endstylesheet %}

{% javascript %}
(function () {
  // Galerie : défilement au doigt (scroll-snap), flèches, miniatures (aria-current), clavier, vidéos mises en pause
  function nnQuandPret(f) {
    if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", f, { once: true });
    else f();
  }
  if (!customElements.get("nn-fiche-galerie-miniatures")) {
    var reduit = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    customElements.define("nn-fiche-galerie-miniatures", class extends HTMLElement {
      connectedCallback() {
        var moi = this;
        nnQuandPret(function () {
          if (moi.nnPret || !moi.isConnected) return;
          moi.nnPret = true;
          moi.demarrer();
        });
      }
      demarrer() {
        var vue = this.querySelector("[data-nn-vue]");
        if (!vue) return;
        var minis = Array.prototype.slice.call(this.querySelectorAll("[data-nn-index]"));
        var bande = this.querySelector("[data-nn-miniatures]");
        var numero = this.querySelector("[data-nn-numero]");
        var prec = this.querySelector("[data-nn-prec]");
        var suiv = this.querySelector("[data-nn-suiv]");
        var sens = getComputedStyle(vue).direction === "rtl" ? -1 : 1;
        var courant = -1;
        var attente = 0;
        function total() { return vue.children.length; }
        function aller(i) {
          i = Math.max(0, Math.min(total() - 1, i));
          vue.scrollTo({ left: sens * i * vue.clientWidth, behavior: reduit ? "auto" : "smooth" });
        }
        function maj() {
          attente = 0;
          var i = Math.round(Math.abs(vue.scrollLeft) / Math.max(1, vue.clientWidth));
          if (i === courant) return;
          courant = i;
          minis.forEach(function (m, j) {
            if (j === i) m.setAttribute("aria-current", "true");
            else m.removeAttribute("aria-current");
          });
          if (numero) numero.textContent = String(i + 1);
          if (prec) prec.disabled = i <= 0;
          if (suiv) suiv.disabled = i >= total() - 1;
          Array.prototype.forEach.call(vue.children, function (li, j) {
            if (j === i) return;
            Array.prototype.forEach.call(li.querySelectorAll("video"), function (v) { v.pause(); });
          });
          var m = minis[i];
          if (m && bande) {
            var b = m.parentNode;
            bande.scrollLeft = b.offsetLeft - (bande.clientWidth - b.offsetWidth) / 2;
            bande.scrollTop = b.offsetTop - (bande.clientHeight - b.offsetHeight) / 2;
          }
        }
        vue.addEventListener("scroll", function () {
          if (!attente) attente = requestAnimationFrame(maj);
        }, { passive: true });
        vue.addEventListener("keydown", function (e) {
          if (e.key === "ArrowRight") { e.preventDefault(); aller(courant + sens); }
          else if (e.key === "ArrowLeft") { e.preventDefault(); aller(courant - sens); }
        });
        minis.forEach(function (m) {
          m.addEventListener("click", function () { aller(parseInt(m.getAttribute("data-nn-index"), 10) || 0); });
        });
        if (prec) prec.addEventListener("click", function () { aller(courant - 1); });
        if (suiv) suiv.addEventListener("click", function () { aller(courant + 1); });
        maj();
      }
    });
  }
})();
{% endjavascript %}
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 : « Galerie produit et miniatures » (Fiches produit)
Description : Photos et vidéos du produit à faire glisser au doigt, flèches, compteur et miniatures cliquables (sous l’image ou à gauche).
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/fiche-galerie-miniatures
Fichier : nahnah-fiche-galerie-miniatures.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-fiche-galerie-miniatures.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-fiche-galerie-miniatures ».
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 : fiche-galerie-miniatures).

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-fiche-galerie-miniatures ».
  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 fiche-galerie-miniatures 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