🎨 Thèmes completsGratuit · 0 NahnahPar NAHNAH
Thème Ondée
Thème premium bien-être : tons sauge et sable, formes organiques qui respirent, halo lumineux au curseur, parallaxe douce et sections apaisées pour rituels et soins du quotidien.
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/nn-th-ondee.liquid (Liquid, CSS et JS inclus).
{%- comment -%} NAHNAH AI · Thème Ondée {%- endcomment -%}
<div class="nn-themes-ondee" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }}; --nn-doux: {{ section.settings.couleur_doux }};">
<header class="nn-themes-ondee__entete" data-entete><a class="nn-themes-ondee__marque" href="/">{{ shop.name | escape }}</a><nav aria-label="Menu principal">{%- for l in linklists[section.settings.menu].links limit: 5 -%}<a href="{{ l.url }}">{{ l.title | escape }}</a>{%- endfor -%}</nav><a href="{{ routes.cart_url }}">Panier ({{ cart.item_count }})</a></header>
<section class="nn-themes-ondee__heros">
<div class="nn-themes-ondee__heros-texte" data-apparait><p class="nn-themes-ondee__sur">{{ section.settings.surtitre | escape }}</p><h1>{{ section.settings.titre | escape }}</h1>{%- if section.settings.texte != blank -%}<p>{{ section.settings.texte | escape }}</p>{%- endif -%}<a class="nn-themes-ondee__bouton" href="{{ section.settings.collection.url | default: '/collections/all' }}">{{ section.settings.bouton | escape }}</a></div>
<div class="nn-themes-ondee__heros-visuel" data-parallaxe="0.15">{%- if section.settings.image != blank -%}{{ section.settings.image | image_url: width: 1400 | image_tag: alt: section.settings.titre, class: 'nn-themes-ondee__media' }}{%- else -%}{{ 'lifestyle-1' | placeholder_svg_tag: 'nn-themes-ondee__media' }}{%- endif -%}</div>
</section>
{%- if section.settings.bandeau != blank -%}<div class="nn-themes-ondee__bandeau" aria-label="{{ section.settings.bandeau | escape }}"><div class="nn-themes-ondee__piste">{%- for i in (1..4) -%}<span aria-hidden="true">{{ section.settings.bandeau | escape }} ✦ </span>{%- endfor -%}</div></div>{%- endif -%}
<section class="nn-themes-ondee__collections"><h2 class="nn-themes-ondee__titre-section" data-apparait>{{ section.settings.titre_collections | escape }}</h2><div class="nn-themes-ondee__grille-col">
{%- for block in section.blocks -%}{%- if block.type == 'collection' -%}{%- assign c = block.settings.collection -%}<a class="nn-themes-ondee__col" href="{{ c.url | default: '/collections/all' }}" data-spot data-apparait {{ block.shopify_attributes }}>{%- if c.featured_image -%}{{ c.featured_image | image_url: width: 700 | image_tag: loading: 'lazy', alt: c.title, class: 'nn-themes-ondee__media' }}{%- else -%}{{ 'collection-1' | placeholder_svg_tag: 'nn-themes-ondee__media' }}{%- endif -%}<span>{{ c.title | default: 'Choisis une collection' | escape }}</span></a>{%- endif -%}{%- endfor -%}
</div></section>
<section class="nn-themes-ondee__produits"><h2 class="nn-themes-ondee__titre-section" data-apparait>{{ section.settings.titre_produits | escape }}</h2><div class="nn-themes-ondee__grille">
{%- for p in section.settings.collection.products limit: section.settings.nombre -%}<a class="nn-themes-ondee__carte" href="{{ p.url }}" data-num="{{ forloop.index }}" data-incliner data-apparait><span class="nn-themes-ondee__cadre">{%- if p.featured_image -%}{{ p.featured_image | image_url: width: 600 | image_tag: loading: 'lazy', alt: p.title, class: 'nn-themes-ondee__media' }}{%- endif -%}</span><span class="nn-themes-ondee__nom">{{ p.title | escape }}</span><strong>{{ p.price | money }}</strong></a>{%- else -%}{%- for i in (1..4) -%}<div class="nn-themes-ondee__carte" data-num="{{ i }}" data-incliner data-apparait><span class="nn-themes-ondee__cadre">{{ 'product-1' | placeholder_svg_tag: 'nn-themes-ondee__media' }}</span><span class="nn-themes-ondee__nom">Choisis une collection</span></div>{%- endfor -%}{%- endfor -%}
</div></section>
<section class="nn-themes-ondee__histoire" data-apparait><div><h2 class="nn-themes-ondee__titre-section">{{ section.settings.titre_histoire | escape }}</h2>{%- if section.settings.texte_histoire != blank -%}<div class="nn-themes-ondee__rte">{{ section.settings.texte_histoire }}</div>{%- endif -%}</div>
<div class="nn-themes-ondee__chiffres">{%- for block in section.blocks -%}{%- if block.type == 'chiffre' and block.settings.valeur > 0 -%}<p {{ block.shopify_attributes }}><b data-cible="{{ block.settings.valeur }}">0</b>{{ block.settings.suffixe | escape }}<span>{{ block.settings.legende | escape }}</span></p>{%- endif -%}{%- endfor -%}</div></section>
<section class="nn-themes-ondee__avis"><div class="nn-themes-ondee__avis-tete"><h2 class="nn-themes-ondee__titre-section">{{ section.settings.titre_avis | escape }}</h2><div><button type="button" data-carrousel="-1" aria-label="Avis précédent">←</button><button type="button" data-carrousel="1" aria-label="Avis suivant">→</button></div></div>
<div class="nn-themes-ondee__rail" data-rail>{%- for block in section.blocks -%}{%- if block.type == 'avis' and block.settings.texte != blank -%}<figure {{ block.shopify_attributes }}><blockquote>{{ block.settings.texte | escape }}</blockquote><figcaption>{{ block.settings.auteur | escape }}</figcaption></figure>{%- endif -%}{%- endfor -%}{%- if request.design_mode -%}<figure class="nn-themes-ondee__aide"><blockquote>Ajoute un bloc « Avis » avec un vrai retour client.</blockquote></figure>{%- endif -%}</div></section>
<section class="nn-themes-ondee__faq" data-apparait><h2 class="nn-themes-ondee__titre-section">{{ section.settings.titre_faq | escape }}</h2>{%- for block in section.blocks -%}{%- if block.type == 'question' -%}<details {{ block.shopify_attributes }}><summary>{{ block.settings.question | escape }}</summary><div class="nn-themes-ondee__rte">{{ block.settings.reponse }}</div></details>{%- endif -%}{%- endfor -%}</section>
<footer class="nn-themes-ondee__pied"><a class="nn-themes-ondee__marque" href="/">{{ shop.name | escape }}</a><nav aria-label="Pied de page">{%- for l in linklists[section.settings.menu_pied].links limit: 6 -%}<a href="{{ l.url }}">{{ l.title | escape }}</a>{%- endfor -%}</nav>{%- form 'customer' -%}<input type="hidden" name="contact[tags]" value="newsletter"><input type="email" name="contact[email]" placeholder="Votre e-mail" required aria-label="E-mail"><button type="submit">{{ section.settings.texte_newsletter | escape }}</button>{%- endform -%}<small>© {{ 'now' | date: '%Y' }} {{ shop.name | escape }}</small></footer>
</div>
{% schema %}
{"name":"Thème Ondée","tag":"section","settings":[{"type":"header","content":"En-tête et héros"},{"type":"link_list","id":"menu","label":"Menu","default":"main-menu"},{"type":"text","id":"surtitre","label":"Surtitre","default":"Rituels du quotidien"},{"type":"text","id":"titre","label":"Titre","default":"Prendre le temps, simplement"},{"type":"textarea","id":"texte","label":"Texte","default":"Des produits choisis pour vos moments de pause et de douceur."},{"type":"text","id":"bouton","label":"Bouton","default":"Explorer les rituels"},{"type":"image_picker","id":"image","label":"Image du héros"},{"type":"text","id":"bandeau","label":"Texte du bandeau défilant","default":"Pause · Douceur · Rituels · Fait avec soin · Moments à soi"},{"type":"header","content":"Collections et produits"},{"type":"text","id":"titre_collections","label":"Titre collections","default":"Nos univers"},{"type":"text","id":"titre_produits","label":"Titre produits vedettes","default":"Sélection du moment"},{"type":"collection","id":"collection","label":"Collection des produits vedettes"},{"type":"range","id":"nombre","label":"Nombre de produits","min":2,"max":12,"step":1,"default":4},{"type":"header","content":"Histoire, avis et FAQ"},{"type":"text","id":"titre_histoire","label":"Titre histoire","default":"Notre approche"},{"type":"richtext","id":"texte_histoire","label":"Texte histoire","default":"<p>Raconte ici ton histoire, ta façon de travailler et ce qui te rend unique.</p>"},{"type":"text","id":"titre_avis","label":"Titre avis","default":"Ils en parlent"},{"type":"text","id":"titre_faq","label":"Titre FAQ","default":"Questions fréquentes"},{"type":"header","content":"Pied de page"},{"type":"link_list","id":"menu_pied","label":"Menu du pied de page","default":"footer"},{"type":"text","id":"texte_newsletter","label":"Bouton newsletter","default":"Recevoir nos rituels de saison"},{"type":"header","content":"Couleurs"},{"type":"color","id":"couleur_fond","label":"Fond","default":"#F3F1EA"},{"type":"color","id":"couleur_texte","label":"Texte","default":"#26332B"},{"type":"color","id":"couleur_accent","label":"Accent","default":"#7C9A82"},{"type":"color","id":"couleur_doux","label":"Fond secondaire","default":"#E3E7DC"}],"blocks":[{"type":"collection","name":"Collection","limit":4,"settings":[{"type":"collection","id":"collection","label":"Collection"}]},{"type":"chiffre","name":"Chiffre clé","limit":4,"settings":[{"type":"number","id":"valeur","label":"Valeur (0 = masqué)","default":0},{"type":"text","id":"suffixe","label":"Suffixe","default":""},{"type":"text","id":"legende","label":"Légende","default":"À compléter"}]},{"type":"avis","name":"Avis client","settings":[{"type":"textarea","id":"texte","label":"Avis réel d'un client"},{"type":"text","id":"auteur","label":"Prénom du client"}]},{"type":"question","name":"Question FAQ","settings":[{"type":"text","id":"question","label":"Question","default":"Votre question ici ?"},{"type":"richtext","id":"reponse","label":"Réponse","default":"<p>Votre réponse ici.</p>"}]}],"presets":[{"name":"Thème Ondée","blocks":[{"type":"collection"},{"type":"collection"},{"type":"collection"},{"type":"chiffre"},{"type":"chiffre"},{"type":"chiffre"},{"type":"avis"},{"type":"avis"},{"type":"avis"},{"type":"question"},{"type":"question"},{"type":"question"}]}]}
{% endschema %}
{% stylesheet %}
/* NAHNAH AI · Thème Ondée : thème complet bien-être */
.nn-themes-ondee{--nn-rayon:28px;--nn-titre:"DM Serif Display",Georgia,serif;position:relative;background:var(--nn-fond);color:var(--nn-texte);font-family:"Nunito Sans","Helvetica Neue",Arial,sans-serif;line-height:1.6;overflow-x:clip}
.nn-themes-ondee a{color:inherit;text-decoration:none}
.nn-themes-ondee h1,.nn-themes-ondee h2{font-family:var(--nn-titre);line-height:1.05;margin:0}
.nn-themes-ondee__media{display:block;width:100%;height:100%;object-fit:cover}
/* Menu collant */
.nn-themes-ondee__entete{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 16px;font-size:14px;transition:padding .3s,background .3s,box-shadow .3s}
.nn-themes-ondee__entete.est-colle{padding:10px 16px;background:color-mix(in srgb,var(--nn-fond) 86%,transparent);backdrop-filter:blur(12px);box-shadow:0 1px 0 color-mix(in srgb,var(--nn-texte) 12%,transparent)}
.nn-themes-ondee__entete nav{display:flex;gap:18px;flex-wrap:wrap}
.nn-themes-ondee__entete nav a{background:linear-gradient(var(--nn-accent),var(--nn-accent)) 0 100%/0 1px no-repeat;transition:background-size .3s}
.nn-themes-ondee__entete nav a:hover{background-size:100% 1px}
.nn-themes-ondee__marque{font-family:var(--nn-titre);font-size:20px;font-weight:600}
/* Héros */
.nn-themes-ondee__heros{display:grid;gap:28px;padding:40px 16px 60px;max-width:1240px;margin:0 auto;align-items:center}
.nn-themes-ondee__sur{margin:0 0 12px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--nn-accent)}
.nn-themes-ondee__heros h1{font-size:clamp(40px,7.5vw,104px)}
.nn-themes-ondee__heros-texte>p:not(.nn-themes-ondee__sur){max-width:46ch;opacity:.8;margin:20px 0 0}
.nn-themes-ondee__heros-visuel{aspect-ratio:4/5;overflow:hidden;border-radius:calc(var(--nn-rayon) / 2);will-change:transform}
.nn-themes-ondee__bouton{display:inline-block;margin-top:28px;padding:15px 28px;border-radius:var(--nn-rayon);background:var(--nn-accent);color:var(--nn-fond)!important;font-weight:600;transition:transform .25s,box-shadow .25s}
.nn-themes-ondee__bouton:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px var(--nn-accent)}
/* Bandeau défilant */
.nn-themes-ondee__bandeau{overflow:hidden;border-block:1px solid color-mix(in srgb,var(--nn-texte) 15%,transparent);padding:16px 0;font-family:var(--nn-titre);font-size:clamp(18px,2.4vw,28px);white-space:nowrap}
.nn-themes-ondee__piste{display:inline-flex;animation:nn-themes-ondee-defile 30s linear infinite}
.nn-themes-ondee__bandeau:hover .nn-themes-ondee__piste{animation-play-state:paused}
@keyframes nn-themes-ondee-defile{to{transform:translateX(-50%)}}
/* Sections */
.nn-themes-ondee__collections,.nn-themes-ondee__produits,.nn-themes-ondee__histoire,.nn-themes-ondee__avis,.nn-themes-ondee__faq{max-width:1240px;margin:0 auto;padding:60px 16px}
.nn-themes-ondee__titre-section{font-size:clamp(28px,4vw,48px);margin-bottom:28px!important}
.nn-themes-ondee__grille-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.nn-themes-ondee__col{--nn-sx:50%;--nn-sy:50%;position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border-radius:calc(var(--nn-rayon) / 2)}
.nn-themes-ondee__col::after{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--nn-sx) var(--nn-sy),color-mix(in srgb,var(--nn-accent) 45%,transparent),transparent 60%),linear-gradient(transparent 50%,rgba(0,0,0,.55));opacity:.85;transition:opacity .3s}
.nn-themes-ondee__col span{position:absolute;left:16px;bottom:16px;z-index:1;color:#fff;font-family:var(--nn-titre);font-size:24px}
.nn-themes-ondee__col .nn-themes-ondee__media{transition:transform .8s}
.nn-themes-ondee__col:hover .nn-themes-ondee__media{transform:scale(1.06)}
.nn-themes-ondee__grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.nn-themes-ondee__carte{display:flex;flex-direction:column;gap:8px;transform:perspective(900px) rotateX(var(--nn-rx,0deg)) rotateY(var(--nn-ry,0deg));transition:transform .2s ease-out;font-size:14px}
.nn-themes-ondee__cadre{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:calc(var(--nn-rayon) / 3)}
.nn-themes-ondee__nom{font-weight:500}
.nn-themes-ondee__carte strong{color:var(--nn-accent)}
.nn-themes-ondee__histoire{display:grid;gap:30px;background:var(--nn-doux);border-radius:var(--nn-rayon);max-width:1208px}
.nn-themes-ondee__rte{opacity:.85;max-width:60ch}
.nn-themes-ondee__chiffres{display:flex;flex-wrap:wrap;gap:30px}
.nn-themes-ondee__chiffres p{margin:0;display:flex;flex-direction:column;font-family:var(--nn-titre);font-size:clamp(34px,5vw,60px);line-height:1}
.nn-themes-ondee__chiffres b{font-weight:600}
.nn-themes-ondee__chiffres span{font-family:"Nunito Sans","Helvetica Neue",Arial,sans-serif;font-size:14px;opacity:.7;margin-top:6px}
.nn-themes-ondee__avis-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.nn-themes-ondee__avis-tete button{width:46px;height:46px;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;font-size:18px;margin-left:6px}
.nn-themes-ondee__rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:6px}
.nn-themes-ondee__rail figure{flex:0 0 min(85%,420px);margin:0;padding:28px;border-radius:var(--nn-rayon);background:var(--nn-doux);scroll-snap-align:start}
.nn-themes-ondee__rail blockquote{margin:0 0 16px;font-family:var(--nn-titre);font-size:20px;line-height:1.35}
.nn-themes-ondee__rail figcaption{font-size:13px;opacity:.7}
.nn-themes-ondee__aide{border:1px dashed currentColor;background:transparent!important}
.nn-themes-ondee__faq details{border-bottom:1px solid color-mix(in srgb,var(--nn-texte) 18%,transparent);padding:18px 0}
.nn-themes-ondee__faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;font-weight:600;font-size:17px}
.nn-themes-ondee__faq summary::after{content:"+";color:var(--nn-accent);transition:transform .3s}
.nn-themes-ondee__faq details[open] summary::after{transform:rotate(45deg)}
.nn-themes-ondee__pied{display:grid;gap:20px;justify-items:center;text-align:center;padding:50px 16px;border-top:1px solid color-mix(in srgb,var(--nn-texte) 15%,transparent);font-size:14px}
.nn-themes-ondee__pied nav{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.nn-themes-ondee__pied form{display:flex;flex-wrap:wrap;width:100%;max-width:480px;border:1px solid currentColor;border-radius:var(--nn-rayon);overflow:hidden}
.nn-themes-ondee__pied input[type=email]{flex:1 1 200px;min-width:0;padding:13px 16px;border:0;background:transparent;color:inherit;font:inherit}
.nn-themes-ondee__pied button{padding:13px 18px;border:0;background:var(--nn-accent);color:var(--nn-fond);font:inherit;font-weight:600;cursor:pointer}
/* Apparition au défilement */
.nn-themes-ondee.est-anime [data-apparait]{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.nn-themes-ondee.est-anime [data-apparait].est-visible{opacity:1;transform:none}
@media (min-width:750px){.nn-themes-ondee__heros{grid-template-columns:1.1fr .9fr;padding:60px 32px 80px}.nn-themes-ondee__grille{grid-template-columns:repeat(4,minmax(0,1fr))}.nn-themes-ondee__histoire{grid-template-columns:1.2fr 1fr;padding:60px 48px;align-items:center}.nn-themes-ondee__entete{padding-inline:32px}}
.nn-themes-ondee__heros::before{content:"";position:absolute;width:min(70vw,520px);aspect-ratio:1;right:-8%;top:10%;background:radial-gradient(circle at 30% 30%,var(--nn-accent),transparent 70%);opacity:.25;border-radius:42% 58% 63% 37%/45% 41% 59% 55%;animation:nn-themes-ondee-respire 12s ease-in-out infinite;z-index:-1}
@keyframes nn-themes-ondee-respire{50%{border-radius:58% 42% 37% 63%/55% 59% 41% 45%;transform:scale(1.08)}}
.nn-themes-ondee__heros{position:relative;isolation:isolate}
.nn-themes-ondee__media{border-radius:var(--nn-rayon)}
@media (prefers-reduced-motion: reduce){.nn-themes-ondee *,.nn-themes-ondee *::before{animation:none!important;transition:none!important}.nn-themes-ondee__carte{transform:none!important}.nn-themes-ondee__heros-visuel{transform:none!important}}
{% endstylesheet %}
{% javascript %}
// NAHNAH AI · Thème Ondée : menu collant, apparitions, parallaxe, inclinaison 3D, halo, compteurs, carrousel
(function () {
var reduit = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var survol = window.matchMedia('(hover: hover)').matches;
document.querySelectorAll('.nn-themes-ondee').forEach(function (bloc) {
// Menu collant : ombre et fond dès qu'on défile
var entete = bloc.querySelector('[data-entete]');
var parallaxes = bloc.querySelectorAll('[data-parallaxe]');
function auDefilement() {
if (entete) entete.classList.toggle('est-colle', window.scrollY > 20);
bloc.style.setProperty('--nn-defile', Math.round(window.scrollY / 4));
if (reduit) return;
// Parallaxe : le visuel glisse moins vite que la page
parallaxes.forEach(function (el) {
var vitesse = parseFloat(el.getAttribute('data-parallaxe')) || 0.1;
var r = el.getBoundingClientRect();
el.style.transform = 'translateY(' + ((r.top + r.height / 2 - window.innerHeight / 2) * -vitesse).toFixed(1) + 'px)';
});
}
window.addEventListener('scroll', auDefilement, { passive: true });
auDefilement();
// Compteurs : animés une seule fois quand ils deviennent visibles
function compter(el) {
var cible = parseFloat(el.getAttribute('data-cible')) || 0;
if (reduit) { el.textContent = cible; return; }
var debut = null;
function pas(t) {
if (!debut) debut = t;
var k = Math.min((t - debut) / 1400, 1);
el.textContent = Math.round(cible * (1 - Math.pow(1 - k, 3)));
if (k < 1) requestAnimationFrame(pas);
}
requestAnimationFrame(pas);
}
// Apparition au défilement
if ('IntersectionObserver' in window) {
if (!reduit) bloc.classList.add('est-anime');
var obs = new IntersectionObserver(function (entrees) {
entrees.forEach(function (e) {
if (!e.isIntersecting) return;
e.target.classList.add('est-visible');
e.target.querySelectorAll('[data-cible]').forEach(compter);
obs.unobserve(e.target);
});
}, { threshold: 0.15 });
bloc.querySelectorAll('[data-apparait]').forEach(function (el) { obs.observe(el); });
} else {
bloc.querySelectorAll('[data-cible]').forEach(compter);
}
// Inclinaison 3D des cartes produit et halo qui suit le curseur
if (!reduit && survol) {
bloc.querySelectorAll('[data-incliner]').forEach(function (carte) {
carte.addEventListener('pointermove', function (e) {
var r = carte.getBoundingClientRect();
var x = (e.clientX - r.left) / r.width - 0.5, y = (e.clientY - r.top) / r.height - 0.5;
carte.style.setProperty('--nn-ry', (x * 10).toFixed(2) + 'deg');
carte.style.setProperty('--nn-rx', (y * -10).toFixed(2) + 'deg');
});
carte.addEventListener('pointerleave', function () {
carte.style.setProperty('--nn-rx', '0deg');
carte.style.setProperty('--nn-ry', '0deg');
});
});
bloc.querySelectorAll('[data-spot]').forEach(function (el) {
el.addEventListener('pointermove', function (e) {
var r = el.getBoundingClientRect();
el.style.setProperty('--nn-sx', (e.clientX - r.left) + 'px');
el.style.setProperty('--nn-sy', (e.clientY - r.top) + 'px');
});
});
}
// Carrousel d'avis : boutons précédent / suivant
var rail = bloc.querySelector('[data-rail]');
bloc.querySelectorAll('[data-carrousel]').forEach(function (b) {
b.addEventListener('click', function () {
if (!rail) return;
var sens = parseInt(b.getAttribute('data-carrousel'), 10);
rail.scrollBy({ left: sens * rail.clientWidth * 0.8, behavior: reduit ? 'auto' : 'smooth' });
});
});
});
})();
{% 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 : « Thème Ondée » (Thèmes complets)
Description : Thème premium bien-être : tons sauge et sable, formes organiques qui respirent, halo lumineux au curseur, parallaxe douce et sections apaisées pour rituels et soins du quotidien.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/themes-ondee
Fichier : nahnah-themes-ondee.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/nn-th-ondee.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 « nn-th-ondee ».
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 : themes-ondee).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 « nn-th-ondee ».
- 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 themes-ondee 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.