🎨 Thèmes completsGratuit · 0 NahnahPar NAHNAH
Thème Boussole
Thème premium voyage : bleu nuit et terracotta, rose des vents en rotation au défilement, héros panoramique en parallaxe, bandeau de destinations et cartes d'escale inclinables.
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-boussole.liquid (Liquid, CSS et JS inclus).
{%- comment -%} NAHNAH AI · Thème Boussole {%- endcomment -%}
<div class="nn-themes-boussole" 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-boussole__entete" data-entete><a class="nn-themes-boussole__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-boussole__heros">
<div class="nn-themes-boussole__heros-texte" data-apparait><p class="nn-themes-boussole__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-boussole__bouton" href="{{ section.settings.collection.url | default: '/collections/all' }}">{{ section.settings.bouton | escape }}</a></div>
<div class="nn-themes-boussole__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-boussole__media' }}{%- else -%}{{ 'lifestyle-1' | placeholder_svg_tag: 'nn-themes-boussole__media' }}{%- endif -%}</div>
<span class="nn-themes-boussole__rose" aria-hidden="true"></span>
</section>
{%- if section.settings.bandeau != blank -%}<div class="nn-themes-boussole__bandeau" aria-label="{{ section.settings.bandeau | escape }}"><div class="nn-themes-boussole__piste">{%- for i in (1..4) -%}<span aria-hidden="true">{{ section.settings.bandeau | escape }} ✦ </span>{%- endfor -%}</div></div>{%- endif -%}
<section class="nn-themes-boussole__collections"><h2 class="nn-themes-boussole__titre-section" data-apparait>{{ section.settings.titre_collections | escape }}</h2><div class="nn-themes-boussole__grille-col">
{%- for block in section.blocks -%}{%- if block.type == 'collection' -%}{%- assign c = block.settings.collection -%}<a class="nn-themes-boussole__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-boussole__media' }}{%- else -%}{{ 'collection-1' | placeholder_svg_tag: 'nn-themes-boussole__media' }}{%- endif -%}<span>{{ c.title | default: 'Choisis une collection' | escape }}</span></a>{%- endif -%}{%- endfor -%}
</div></section>
<section class="nn-themes-boussole__produits"><h2 class="nn-themes-boussole__titre-section" data-apparait>{{ section.settings.titre_produits | escape }}</h2><div class="nn-themes-boussole__grille">
{%- for p in section.settings.collection.products limit: section.settings.nombre -%}<a class="nn-themes-boussole__carte" href="{{ p.url }}" data-num="{{ forloop.index }}" data-incliner data-apparait><span class="nn-themes-boussole__cadre">{%- if p.featured_image -%}{{ p.featured_image | image_url: width: 600 | image_tag: loading: 'lazy', alt: p.title, class: 'nn-themes-boussole__media' }}{%- endif -%}</span><span class="nn-themes-boussole__nom">{{ p.title | escape }}</span><strong>{{ p.price | money }}</strong></a>{%- else -%}{%- for i in (1..4) -%}<div class="nn-themes-boussole__carte" data-num="{{ i }}" data-incliner data-apparait><span class="nn-themes-boussole__cadre">{{ 'product-1' | placeholder_svg_tag: 'nn-themes-boussole__media' }}</span><span class="nn-themes-boussole__nom">Choisis une collection</span></div>{%- endfor -%}{%- endfor -%}
</div></section>
<section class="nn-themes-boussole__histoire" data-apparait><div><h2 class="nn-themes-boussole__titre-section">{{ section.settings.titre_histoire | escape }}</h2>{%- if section.settings.texte_histoire != blank -%}<div class="nn-themes-boussole__rte">{{ section.settings.texte_histoire }}</div>{%- endif -%}</div>
<div class="nn-themes-boussole__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-boussole__avis"><div class="nn-themes-boussole__avis-tete"><h2 class="nn-themes-boussole__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-boussole__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-boussole__aide"><blockquote>Ajoute un bloc « Avis » avec un vrai retour client.</blockquote></figure>{%- endif -%}</div></section>
<section class="nn-themes-boussole__faq" data-apparait><h2 class="nn-themes-boussole__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-boussole__rte">{{ block.settings.reponse }}</div></details>{%- endif -%}{%- endfor -%}</section>
<footer class="nn-themes-boussole__pied"><a class="nn-themes-boussole__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 Boussole","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":"Carnet de route"},{"type":"text","id":"titre","label":"Titre","default":"Partir loin, voyager léger"},{"type":"textarea","id":"texte","label":"Texte","default":"L'équipement et les idées pour préparer chaque départ."},{"type":"text","id":"bouton","label":"Bouton","default":"Préparer mon départ"},{"type":"image_picker","id":"image","label":"Image du héros"},{"type":"text","id":"bandeau","label":"Texte du bandeau défilant","default":"Montagne · Océan · Désert · Villes · Road-trip · Week-end"},{"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 itinéraire"},{"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 idées d'escapades"},{"type":"header","content":"Couleurs"},{"type":"color","id":"couleur_fond","label":"Fond","default":"#F6EFE4"},{"type":"color","id":"couleur_texte","label":"Texte","default":"#14243A"},{"type":"color","id":"couleur_accent","label":"Accent","default":"#D2693C"},{"type":"color","id":"couleur_doux","label":"Fond secondaire","default":"#E9DDCB"}],"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 Boussole","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 Boussole : thème complet voyage */
.nn-themes-boussole{--nn-rayon:10px;--nn-titre:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;position:relative;background:var(--nn-fond);color:var(--nn-texte);font-family:"Work Sans","Helvetica Neue",Arial,sans-serif;line-height:1.6;overflow-x:clip}
.nn-themes-boussole a{color:inherit;text-decoration:none}
.nn-themes-boussole h1,.nn-themes-boussole h2{font-family:var(--nn-titre);line-height:1.05;margin:0}
.nn-themes-boussole__media{display:block;width:100%;height:100%;object-fit:cover}
/* Menu collant */
.nn-themes-boussole__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-boussole__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-boussole__entete nav{display:flex;gap:18px;flex-wrap:wrap}
.nn-themes-boussole__entete nav a{background:linear-gradient(var(--nn-accent),var(--nn-accent)) 0 100%/0 1px no-repeat;transition:background-size .3s}
.nn-themes-boussole__entete nav a:hover{background-size:100% 1px}
.nn-themes-boussole__marque{font-family:var(--nn-titre);font-size:20px;font-weight:600}
/* Héros */
.nn-themes-boussole__heros{display:grid;gap:28px;padding:40px 16px 60px;max-width:1240px;margin:0 auto;align-items:center}
.nn-themes-boussole__sur{margin:0 0 12px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--nn-accent)}
.nn-themes-boussole__heros h1{font-size:clamp(40px,7.5vw,104px)}
.nn-themes-boussole__heros-texte>p:not(.nn-themes-boussole__sur){max-width:46ch;opacity:.8;margin:20px 0 0}
.nn-themes-boussole__heros-visuel{aspect-ratio:4/5;overflow:hidden;border-radius:calc(var(--nn-rayon) / 2);will-change:transform}
.nn-themes-boussole__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-boussole__bouton:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px var(--nn-accent)}
/* Bandeau défilant */
.nn-themes-boussole__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-boussole__piste{display:inline-flex;animation:nn-themes-boussole-defile 30s linear infinite}
.nn-themes-boussole__bandeau:hover .nn-themes-boussole__piste{animation-play-state:paused}
@keyframes nn-themes-boussole-defile{to{transform:translateX(-50%)}}
/* Sections */
.nn-themes-boussole__collections,.nn-themes-boussole__produits,.nn-themes-boussole__histoire,.nn-themes-boussole__avis,.nn-themes-boussole__faq{max-width:1240px;margin:0 auto;padding:60px 16px}
.nn-themes-boussole__titre-section{font-size:clamp(28px,4vw,48px);margin-bottom:28px!important}
.nn-themes-boussole__grille-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.nn-themes-boussole__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-boussole__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-boussole__col span{position:absolute;left:16px;bottom:16px;z-index:1;color:#fff;font-family:var(--nn-titre);font-size:24px}
.nn-themes-boussole__col .nn-themes-boussole__media{transition:transform .8s}
.nn-themes-boussole__col:hover .nn-themes-boussole__media{transform:scale(1.06)}
.nn-themes-boussole__grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.nn-themes-boussole__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-boussole__cadre{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:calc(var(--nn-rayon) / 3)}
.nn-themes-boussole__nom{font-weight:500}
.nn-themes-boussole__carte strong{color:var(--nn-accent)}
.nn-themes-boussole__histoire{display:grid;gap:30px;background:var(--nn-doux);border-radius:var(--nn-rayon);max-width:1208px}
.nn-themes-boussole__rte{opacity:.85;max-width:60ch}
.nn-themes-boussole__chiffres{display:flex;flex-wrap:wrap;gap:30px}
.nn-themes-boussole__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-boussole__chiffres b{font-weight:600}
.nn-themes-boussole__chiffres span{font-family:"Work Sans","Helvetica Neue",Arial,sans-serif;font-size:14px;opacity:.7;margin-top:6px}
.nn-themes-boussole__avis-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.nn-themes-boussole__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-boussole__rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:6px}
.nn-themes-boussole__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-boussole__rail blockquote{margin:0 0 16px;font-family:var(--nn-titre);font-size:20px;line-height:1.35}
.nn-themes-boussole__rail figcaption{font-size:13px;opacity:.7}
.nn-themes-boussole__aide{border:1px dashed currentColor;background:transparent!important}
.nn-themes-boussole__faq details{border-bottom:1px solid color-mix(in srgb,var(--nn-texte) 18%,transparent);padding:18px 0}
.nn-themes-boussole__faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;font-weight:600;font-size:17px}
.nn-themes-boussole__faq summary::after{content:"+";color:var(--nn-accent);transition:transform .3s}
.nn-themes-boussole__faq details[open] summary::after{transform:rotate(45deg)}
.nn-themes-boussole__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-boussole__pied nav{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.nn-themes-boussole__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-boussole__pied input[type=email]{flex:1 1 200px;min-width:0;padding:13px 16px;border:0;background:transparent;color:inherit;font:inherit}
.nn-themes-boussole__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-boussole.est-anime [data-apparait]{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.nn-themes-boussole.est-anime [data-apparait].est-visible{opacity:1;transform:none}
@media (min-width:750px){.nn-themes-boussole__heros{grid-template-columns:1.1fr .9fr;padding:60px 32px 80px}.nn-themes-boussole__grille{grid-template-columns:repeat(4,minmax(0,1fr))}.nn-themes-boussole__histoire{grid-template-columns:1.2fr 1fr;padding:60px 48px;align-items:center}.nn-themes-boussole__entete{padding-inline:32px}}
.nn-themes-boussole__rose{position:absolute;right:16px;bottom:16px;width:90px;height:90px;border:1px solid var(--nn-accent);border-radius:50%;transform:rotate(calc(var(--nn-defile,0) * 1deg));background:conic-gradient(from 0deg,var(--nn-accent) 0 2%,transparent 2% 25%,var(--nn-accent) 25% 27%,transparent 27% 50%,var(--nn-accent) 50% 52%,transparent 52% 75%,var(--nn-accent) 75% 77%,transparent 77%)}
.nn-themes-boussole__heros h1{text-transform:uppercase;font-weight:800;letter-spacing:-.02em}
.nn-themes-boussole__carte{border-radius:var(--nn-rayon);overflow:hidden;background:#fff;box-shadow:0 18px 30px -20px rgba(20,36,58,.45)}
.nn-themes-boussole__carte>*:not(.nn-themes-boussole__media){padding:0 12px}.nn-themes-boussole__carte{padding-bottom:12px}
@media (prefers-reduced-motion: reduce){.nn-themes-boussole *,.nn-themes-boussole *::before{animation:none!important;transition:none!important}.nn-themes-boussole__carte{transform:none!important}.nn-themes-boussole__heros-visuel{transform:none!important}}
{% endstylesheet %}
{% javascript %}
// NAHNAH AI · Thème Boussole : 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-boussole').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 Boussole » (Thèmes complets)
Description : Thème premium voyage : bleu nuit et terracotta, rose des vents en rotation au défilement, héros panoramique en parallaxe, bandeau de destinations et cartes d'escale inclinables.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/themes-boussole
Fichier : nahnah-themes-boussole.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-boussole.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-boussole ».
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-boussole).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-boussole ».
- 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-boussole 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.