🎠 CarrouselsGratuit · 0 NahnahPar NAHNAH
Carrousel « comment ça marche » en étapes
Les étapes d’utilisation (commander, recevoir, profiter…) en diapositives numérotées reliées par une barre de progression cliquable ; boutons Précédent / Suivant et clavier.
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-carrousels-etapes-guidees.liquid (Liquid, CSS et JS inclus).
{%- comment -%} NAHNAH AI · Carrousel « comment ça marche » en étapes {%- endcomment -%}
<div class="nn-carrousels-etapes-guidees" 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-total: {{ section.blocks.size }};">
{%- if section.settings.titre != blank -%}<h2 class="nn-carrousels-etapes-guidees__titre">{{ section.settings.titre | escape }}</h2>{%- endif -%}
<ol class="nn-carrousels-etapes-guidees__barre" role="tablist" aria-label="Étapes" data-nn-barre style="--nn-avance: 0;">
{%- for block in section.blocks -%}
<li role="presentation"><button type="button" role="tab" id="nn-ceg-onglet-{{ section.id }}-{{ forloop.index }}" aria-controls="nn-ceg-panneau-{{ section.id }}-{{ forloop.index }}" aria-selected="{% if forloop.first %}true{% else %}false{% endif %}" tabindex="{% if forloop.first %}0{% else %}-1{% endif %}"><span>{{ forloop.index }}</span><small>{{ block.settings.titre | escape }}</small></button></li>
{%- endfor -%}
</ol>
<div class="nn-carrousels-etapes-guidees__panneaux">
{%- for block in section.blocks -%}
<div class="nn-carrousels-etapes-guidees__panneau{% if forloop.first %} est-actif{% endif %}" role="tabpanel" id="nn-ceg-panneau-{{ section.id }}-{{ forloop.index }}" aria-labelledby="nn-ceg-onglet-{{ section.id }}-{{ forloop.index }}"{% unless forloop.first %} hidden{% endunless %} {{ block.shopify_attributes }}>
<div class="nn-carrousels-etapes-guidees__visuel">{%- if block.settings.image != blank -%}{{ block.settings.image | image_url: width: 900 | image_tag: loading: 'lazy', alt: block.settings.titre }}{%- else -%}<span>{{ forloop.index }}</span>{%- endif -%}</div>
<div class="nn-carrousels-etapes-guidees__contenu">
<p class="nn-carrousels-etapes-guidees__num">Étape {{ forloop.index }} / {{ forloop.length }}</p>
<h3>{{ block.settings.titre | escape }}</h3>
<p>{{ block.settings.texte | escape }}</p>
</div>
</div>
{%- endfor -%}
</div>
<div class="nn-carrousels-etapes-guidees__nav">
<button type="button" class="nn-carrousels-etapes-guidees__btn" data-nn-prec>← Précédent</button>
<button type="button" class="nn-carrousels-etapes-guidees__btn nn-carrousels-etapes-guidees__btn--plein" data-nn-suiv>Suivant →</button>
</div>
</div>
{% schema %}
{
"name": "Étapes guidées",
"tag": "section",
"class": "nn-section-carrousels-etapes-guidees",
"max_blocks": 6,
"settings": [
{ "type": "text", "id": "titre", "label": "Titre", "default": "Comment ça marche ?" },
{ "type": "header", "content": "Couleurs" },
{ "type": "color", "id": "couleur_fond", "label": "Fond", "default": "#FFF8EE" },
{ "type": "color", "id": "couleur_texte", "label": "Texte", "default": "#231A10" },
{ "type": "color", "id": "couleur_accent", "label": "Accent", "default": "#F28C28" },
{ "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": "etape",
"name": "Étape",
"settings": [
{ "type": "image_picker", "id": "image", "label": "Image" },
{ "type": "text", "id": "titre", "label": "Titre", "default": "Choisissez" },
{ "type": "textarea", "id": "texte", "label": "Texte", "default": "Parcourez la boutique et ajoutez vos coups de cœur au panier en un clic." }
]
}
],
"presets": [
{
"name": "Étapes guidées",
"blocks": [
{ "type": "etape" },
{ "type": "etape", "settings": { "titre": "Recevez", "texte": "Votre commande est préparée avec soin et livrée chez vous en quelques jours." } },
{ "type": "etape", "settings": { "titre": "Profitez", "texte": "Utilisez votre produit tout de suite, et notre équipe reste là si besoin." } }
]
}
]
}
{% endschema %}
{% stylesheet %}
.nn-carrousels-etapes-guidees { padding: var(--nn-mh) 16px var(--nn-mb); background: var(--nn-fond); color: var(--nn-texte); }
.nn-carrousels-etapes-guidees__titre { margin: 0 0 26px; text-align: center; font-size: clamp(24px, 3.4vw, 38px); }
.nn-carrousels-etapes-guidees__barre { position: relative; display: flex; justify-content: space-between; max-width: 760px; margin: 0 auto 32px; padding: 0; list-style: none; }
.nn-carrousels-etapes-guidees__barre::before, .nn-carrousels-etapes-guidees__barre::after { content: ""; position: absolute; top: 21px; left: 22px; right: 22px; height: 4px; border-radius: 99px; background: rgba(35, 26, 16, 0.12); }
.nn-carrousels-etapes-guidees__barre::after { right: auto; width: calc((100% - 44px) * var(--nn-avance)); background: var(--nn-accent); transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.nn-carrousels-etapes-guidees__barre li { position: relative; z-index: 1; }
.nn-carrousels-etapes-guidees__barre button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.nn-carrousels-etapes-guidees__barre button span { display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid var(--nn-fond); border-radius: 50%; background: #E9E1D5; font-weight: 800; transition: background-color 0.3s, color 0.3s, transform 0.3s; }
.nn-carrousels-etapes-guidees__barre button.est-fait span, .nn-carrousels-etapes-guidees__barre button[aria-selected="true"] span { background: var(--nn-accent); color: #FFFFFF; }
.nn-carrousels-etapes-guidees__barre button[aria-selected="true"] span { transform: scale(1.12); }
.nn-carrousels-etapes-guidees__barre button:focus-visible span { outline: 2px solid var(--nn-texte); outline-offset: 3px; }
.nn-carrousels-etapes-guidees__barre small { font-size: 13px; font-weight: 600; }
.nn-carrousels-etapes-guidees__panneaux { max-width: 1000px; margin: 0 auto; }
.nn-carrousels-etapes-guidees__panneau { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.nn-carrousels-etapes-guidees__panneau.est-actif { animation: nn-carrousels-etapes-guidees-entree 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.nn-carrousels-etapes-guidees__visuel { aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: linear-gradient(135deg, #FFE0B8, var(--nn-accent)); display: grid; place-items: center; }
.nn-carrousels-etapes-guidees__visuel span { font-size: 96px; font-weight: 800; color: rgba(255, 255, 255, 0.85); }
.nn-carrousels-etapes-guidees__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nn-carrousels-etapes-guidees__num { margin: 0; color: var(--nn-accent); font-weight: 700; font-size: 14px; }
.nn-carrousels-etapes-guidees__contenu h3 { margin: 6px 0 10px; font-size: clamp(22px, 3vw, 32px); }
.nn-carrousels-etapes-guidees__contenu p:last-child { margin: 0; line-height: 1.6; opacity: 0.85; }
.nn-carrousels-etapes-guidees__nav { display: flex; justify-content: center; gap: 12px; margin-top: 30px; }
.nn-carrousels-etapes-guidees__btn { padding: 12px 22px; border: 2px solid var(--nn-texte); border-radius: 99px; background: none; color: inherit; font-weight: 700; cursor: pointer; }
.nn-carrousels-etapes-guidees__btn--plein { background: var(--nn-texte); color: var(--nn-fond); }
.nn-carrousels-etapes-guidees__btn:disabled { opacity: 0.35; cursor: default; }
.nn-carrousels-etapes-guidees__btn:focus-visible { outline: 2px solid var(--nn-accent); outline-offset: 3px; }
@keyframes nn-carrousels-etapes-guidees-entree { from { opacity: 0; transform: translateX(24px); } }
@media (max-width: 749px) { .nn-carrousels-etapes-guidees__panneau { grid-template-columns: 1fr; gap: 18px; } .nn-carrousels-etapes-guidees__barre small { display: none; } }
@media (prefers-reduced-motion: reduce) {
.nn-carrousels-etapes-guidees *, .nn-carrousels-etapes-guidees *::before, .nn-carrousels-etapes-guidees *::after { animation: none !important; transition: none !important; }
}
{% endstylesheet %}
{% javascript %}
(function () {
function brancher(racine) {
if (racine.dataset.nnPret) return;
racine.dataset.nnPret = "1";
var barre = racine.querySelector("[data-nn-barre]"), onglets = [].slice.call(racine.querySelectorAll('[role="tab"]')), panneaux = [].slice.call(racine.querySelectorAll('[role="tabpanel"]'));
var prec = racine.querySelector("[data-nn-prec]"), suiv = racine.querySelector("[data-nn-suiv]");
if (!onglets.length) return;
var actuel = 0;
// Active l'étape i : onglet, panneau, barre de progression et boutons
function aller(i, focus) {
actuel = Math.max(0, Math.min(onglets.length - 1, i));
onglets.forEach(function (o, j) {
o.setAttribute("aria-selected", j === actuel ? "true" : "false");
o.tabIndex = j === actuel ? 0 : -1;
o.classList.toggle("est-fait", j < actuel);
panneaux[j].hidden = j !== actuel;
panneaux[j].classList.toggle("est-actif", j === actuel);
});
barre.style.setProperty("--nn-avance", onglets.length > 1 ? actuel / (onglets.length - 1) : 1);
prec.disabled = actuel === 0;
suiv.disabled = actuel === onglets.length - 1;
if (focus) onglets[actuel].focus();
}
onglets.forEach(function (o, i) {
o.addEventListener("click", function () { aller(i); });
o.addEventListener("keydown", function (e) {
if (e.key === "ArrowRight") { e.preventDefault(); aller(actuel + 1, true); }
if (e.key === "ArrowLeft") { e.preventDefault(); aller(actuel - 1, true); }
});
});
prec.addEventListener("click", function () { aller(actuel - 1); });
suiv.addEventListener("click", function () { aller(actuel + 1); });
aller(0);
}
function tout() { document.querySelectorAll(".nn-carrousels-etapes-guidees").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 : « Carrousel « comment ça marche » en étapes » (Carrousels)
Description : Les étapes d’utilisation (commander, recevoir, profiter…) en diapositives numérotées reliées par une barre de progression cliquable ; boutons Précédent / Suivant et clavier.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/carrousels-etapes-guidees
Fichier : nahnah-carrousels-etapes-guidees.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-carrousels-etapes-guidees.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-carrousels-etapes-guidees ».
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 : carrousels-etapes-guidees).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-carrousels-etapes-guidees ».
- 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 carrousels-etapes-guidees 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