🎨 Thèmes completsGratuit · 0 NahnahPar NAHNAH
Thème Braise
Un thème sombre et chaleureux aux lueurs de braise, pensé pour les restaurants qui veulent donner faim dès le premier défilement.
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-braise.liquid (Liquid, CSS et JS inclus).
{%- comment -%} NAHNAH AI · Thème Braise {%- endcomment -%}
<div class="nn-themes-braise" data-parallaxe="{{ section.settings.parallaxe }}" data-inclinaison="{{ section.settings.inclinaison }}" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-surface: {{ section.settings.couleur_surface }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }}; --nn-accent2: {{ section.settings.couleur_accent2 }}; --nn-font: 'Fraunces','Georgia',serif; --nn-font2: 'Inter',system-ui,sans-serif; --nn-vitesse: {{ section.settings.vitesse }}s;">
<header class="nn-themes-braise__entete">
<a class="nn-themes-braise__logo" href="{{ routes.root_url }}">{{ shop.name | escape }}</a>
<nav class="nn-themes-braise__nav" aria-label="Menu principal">{%- for l in section.settings.menu.links limit: 5 -%}<a href="{{ l.url }}">{{ l.title | escape }}</a>{%- endfor -%}</nav>
<a class="nn-themes-braise__panier" href="{{ routes.cart_url }}">Panier ({{ cart.item_count }})</a>
</header>
<section class="nn-themes-braise__hero">
<div class="nn-themes-braise__spot" aria-hidden="true"></div>
<div class="nn-themes-braise__hero-in">
<div data-nn-reveal>
<h1>{{ section.settings.titre | escape }}</h1>
{%- if section.settings.texte != blank -%}<p>{{ section.settings.texte | escape }}</p>{%- endif -%}
<a class="nn-themes-braise__bouton" href="{{ section.settings.bouton_lien | default: section.settings.collection.url | default: routes.all_products_collection_url }}">{{ section.settings.bouton | escape }}</a>
</div>
<div class="nn-themes-braise__hero-forme" data-nn-parallaxe>{%- if section.settings.image != blank -%}{{ section.settings.image | image_url: width: 1200 | image_tag: alt: section.settings.titre, loading: 'eager' }}{%- endif -%}</div>
</div>
</section>
{%- if section.settings.bandeau != blank -%}
<div class="nn-themes-braise__bandeau" aria-label="{{ section.settings.bandeau | escape }}"><div class="nn-themes-braise__piste" aria-hidden="true">{%- for i in (1..4) -%}<span>{{ section.settings.bandeau | escape }}</span>{%- endfor -%}</div></div>
{%- endif -%}
<section class="nn-themes-braise__bloc">
<h2 class="nn-themes-braise__titre-section" data-nn-reveal>{{ section.settings.titre_collections | escape }}</h2>
<div class="nn-themes-braise__collections">
{%- for c in section.settings.collections -%}
<a class="nn-themes-braise__collection" href="{{ c.url }}" data-nn-reveal>{%- if c.featured_image -%}{{ c.featured_image | image_url: width: 600 | image_tag: loading: 'lazy', alt: c.title }}{%- endif -%}<span>{{ c.title | escape }}</span></a>
{%- else -%}
{%- for i in (1..3) -%}<div class="nn-themes-braise__collection" data-nn-reveal>{{ 'collection-' | append: i | placeholder_svg_tag }}<span>Choisis tes collections</span></div>{%- endfor -%}
{%- endfor -%}
</div>
</section>
<section class="nn-themes-braise__bloc">
<h2 class="nn-themes-braise__titre-section" data-nn-reveal>{{ section.settings.titre_produits | escape }}</h2>
<div class="nn-themes-braise__fleches"><button type="button" data-nn-dir="-1" aria-label="Précédent">←</button><button type="button" data-nn-dir="1" aria-label="Suivant">→</button></div>
<div class="nn-themes-braise__carrousel">
{%- for p in section.settings.collection.products limit: section.settings.nb_produits -%}
<a class="nn-themes-braise__carte" href="{{ p.url }}">{%- if p.featured_image -%}{{ p.featured_image | image_url: width: 600 | image_tag: loading: 'lazy', alt: p.featured_image.alt | default: p.title }}{%- else -%}{{ 'product-1' | placeholder_svg_tag }}{%- endif -%}<div class="nn-themes-braise__carte-info"><span>{{ p.title | escape }}</span><strong>{{ p.price | money }}</strong></div></a>
{%- else -%}
{%- for i in (1..4) -%}<div class="nn-themes-braise__carte">{{ 'product-' | append: i | placeholder_svg_tag }}<div class="nn-themes-braise__carte-info"><span>Choisis une collection vedette</span></div></div>{%- endfor -%}
{%- endfor -%}
</div>
</section>
<section class="nn-themes-braise__bloc nn-themes-braise__chiffres">
{%- for i in (1..3) -%}{%- capture cle -%}chiffre_{{ i }}{%- endcapture -%}{%- capture leg -%}legende_{{ i }}{%- endcapture -%}
{%- if section.settings[leg] != blank -%}<div class="nn-themes-braise__chiffre" data-nn-reveal><strong data-nn-compteur="{{ section.settings[cle] }}">{{ section.settings[cle] }}</strong><span>{{ section.settings[leg] | escape }}</span></div>{%- endif -%}
{%- endfor -%}
</section>
<section class="nn-themes-braise__bloc nn-themes-braise__histoire">
<div class="nn-themes-braise__histoire-img" data-nn-reveal>{%- if section.settings.image_histoire != blank -%}{{ section.settings.image_histoire | image_url: width: 900 | image_tag: loading: 'lazy', alt: section.settings.titre_histoire }}{%- endif -%}</div>
<div data-nn-reveal><h2 class="nn-themes-braise__titre-section">{{ section.settings.titre_histoire | escape }}</h2><div class="rte">{{ section.settings.histoire }}</div></div>
</section>
<section class="nn-themes-braise__bloc">
<h2 class="nn-themes-braise__titre-section" data-nn-reveal>{{ section.settings.titre_avis | escape }}</h2>
{%- assign avis = section.blocks | where: 'type', 'avis' -%}
{%- if avis.size > 0 -%}
<div class="nn-themes-braise__avis">{%- for b in avis -%}{%- if b.settings.texte != blank -%}<figure {{ b.shopify_attributes }} data-nn-reveal><blockquote>{{ b.settings.texte | escape }}</blockquote><figcaption>{{ b.settings.auteur | escape }}</figcaption></figure>{%- endif -%}{%- endfor -%}</div>
{%- elsif request.design_mode -%}<p class="nn-themes-braise__vide">Ajoute de vrais avis clients avec le bloc « Avis client ».</p>
{%- endif -%}
</section>
<section class="nn-themes-braise__bloc nn-themes-braise__faq">
<h2 class="nn-themes-braise__titre-section" data-nn-reveal>{{ section.settings.titre_faq | escape }}</h2>
{%- for b in section.blocks -%}{%- if b.type == 'faq' -%}<details {{ b.shopify_attributes }} data-nn-reveal><summary>{{ b.settings.question | escape }}</summary>{{ b.settings.reponse }}</details>{%- endif -%}{%- endfor -%}
</section>
<footer class="nn-themes-braise__pied">
<div class="nn-themes-braise__pied-in">
<div><p class="nn-themes-braise__logo">{{ shop.name | escape }}</p><p>{{ section.settings.pied_texte | escape }}</p></div>
{%- form 'customer' -%}<input type="hidden" name="contact[tags]" value="newsletter"><input type="email" name="contact[email]" placeholder="Ton e-mail" required aria-label="E-mail"><button type="submit">S'inscrire</button>{%- if form.posted_successfully? -%}<p>Merci, c'est noté.</p>{%- endif -%}{%- endform -%}
<nav class="nn-themes-braise__nav" aria-label="Pied de page">{%- for l in section.settings.menu_pied.links -%}<a href="{{ l.url }}">{{ l.title | escape }}</a>{%- endfor -%}</nav>
<small>© {{ 'now' | date: '%Y' }} {{ shop.name | escape }}</small>
</div>
</footer>
</div>
{% schema %}
{"name":"Thème Braise","tag":"section","class":"nn-section-theme","settings":[{"type":"link_list","id":"menu","label":"Menu","default":"main-menu"},{"type":"header","content":"Couleurs"},{"type":"color","id":"couleur_fond","label":"Fond","default":"#14100E"},{"type":"color","id":"couleur_surface","label":"Surfaces","default":"#1F1915"},{"type":"color","id":"couleur_texte","label":"Texte","default":"#F3E9DF"},{"type":"color","id":"couleur_accent","label":"Accent","default":"#E4572E"},{"type":"color","id":"couleur_accent2","label":"Accent secondaire","default":"#F2A541"},{"type":"header","content":"Héros"},{"type":"text","id":"titre","label":"Titre","default":"Cuisiné à la flamme, servi avec le cœur"},{"type":"textarea","id":"texte","label":"Texte","default":"Une carte courte, des produits de saison et un feu de bois qui ne s'éteint jamais."},{"type":"text","id":"bouton","label":"Bouton","default":"Voir la carte"},{"type":"url","id":"bouton_lien","label":"Lien du bouton"},{"type":"image_picker","id":"image","label":"Visuel du héros"},{"type":"range","id":"parallaxe","label":"Force de la parallaxe","min":0,"max":30,"step":2,"unit":"%","default":12},{"type":"header","content":"Bandeau défilant"},{"type":"text","id":"bandeau","label":"Texte du bandeau","default":"Cuisson au feu de bois · Produits de saison · Réservation conseillée · Plats à emporter"},{"type":"range","id":"vitesse","label":"Durée d'un tour","min":10,"max":60,"step":5,"unit":"s","default":30},{"type":"header","content":"Collections"},{"type":"text","id":"titre_collections","label":"Titre","default":"Nos univers"},{"type":"collection_list","id":"collections","label":"Collections","limit":4},{"type":"header","content":"Produits vedettes"},{"type":"text","id":"titre_produits","label":"Titre","default":"Les incontournables"},{"type":"collection","id":"collection","label":"Collection vedette"},{"type":"range","id":"nb_produits","label":"Nombre de produits","min":4,"max":12,"step":1,"default":8},{"type":"checkbox","id":"inclinaison","label":"Inclinaison 3D au survol","default":true},{"type":"header","content":"Chiffres clés"},{"type":"number","id":"chiffre_1","label":"Chiffre 1","default":12},{"type":"text","id":"legende_1","label":"Légende 1","default":"plats à la carte"},{"type":"number","id":"chiffre_2","label":"Chiffre 2","default":7},{"type":"text","id":"legende_2","label":"Légende 2","default":"jours sur 7"},{"type":"number","id":"chiffre_3","label":"Chiffre 3","default":40},{"type":"text","id":"legende_3","label":"Légende 3","default":"couverts"},{"type":"header","content":"Histoire"},{"type":"text","id":"titre_histoire","label":"Titre","default":"Notre histoire"},{"type":"richtext","id":"histoire","label":"Texte","default":"<p>À remplacer : raconte comment tout a commencé, ce qui te rend unique et ce que tu promets à tes clients.</p>"},{"type":"image_picker","id":"image_histoire","label":"Photo"},{"type":"header","content":"Avis et FAQ"},{"type":"text","id":"titre_avis","label":"Titre des avis","default":"Ils en parlent"},{"type":"text","id":"titre_faq","label":"Titre de la FAQ","default":"Questions fréquentes"},{"type":"header","content":"Pied de page"},{"type":"text","id":"pied_texte","label":"Texte d'inscription","default":"Reçois nos nouveautés en avant-première."},{"type":"link_list","id":"menu_pied","label":"Menu du pied de page","default":"footer"}],"blocks":[{"type":"avis","name":"Avis client","settings":[{"type":"textarea","id":"texte","label":"Avis (texte réel d'un client)"},{"type":"text","id":"auteur","label":"Prénom du client"}]},{"type":"faq","name":"Question","settings":[{"type":"text","id":"question","label":"Question","default":"À remplacer : ta question"},{"type":"richtext","id":"reponse","label":"Réponse","default":"<p>À remplacer : ta réponse.</p>"}]}],"presets":[{"name":"Thème Braise","blocks":[{"type":"faq","settings":{"question":"Faut-il réserver ?","reponse":"<p>À remplacer : explique ta politique de réservation.</p>"}},{"type":"faq","settings":{"question":"Proposez-vous des plats à emporter ?","reponse":"<p>À remplacer : précise tes horaires et ton fonctionnement.</p>"}}]}]}
{% endschema %}
{% stylesheet %}
/* NAHNAH AI · Thème Braise : direction artistique restaurant */
.nn-themes-braise{background:var(--nn-fond);color:var(--nn-texte);font-family:var(--nn-font2);overflow:hidden;position:relative}
.nn-themes-braise a{color:inherit;text-decoration:none}
.nn-themes-braise h1,.nn-themes-braise h2,.nn-themes-braise h3{font-family:var(--nn-font);margin:0}
.nn-themes-braise__entete{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 16px;transition:padding .3s,background .3s,box-shadow .3s}
.nn-themes-braise__entete.est-compact{padding:10px 16px;background:color-mix(in srgb,var(--nn-fond) 88%,transparent);backdrop-filter:blur(10px);box-shadow:0 1px 0 color-mix(in srgb,var(--nn-texte) 12%,transparent)}
.nn-themes-braise__logo{font-family:var(--nn-font);font-size:22px}
.nn-themes-braise__nav{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.nn-themes-braise__nav a{opacity:.75;transition:opacity .2s}.nn-themes-braise__nav a:hover{opacity:1}
.nn-themes-braise__panier{padding:8px 14px;border-radius:var(--nn-r);background:var(--nn-texte);color:var(--nn-fond)!important;font-size:14px}
.nn-themes-braise__hero{position:relative;min-height:88vh;display:grid;align-items:center;padding:40px 16px 60px}
.nn-themes-braise__hero-in{position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%;display:grid;gap:32px;align-items:center}
.nn-themes-braise h1{font-size:clamp(40px,8vw,96px);line-height:1}
.nn-themes-braise__hero p{max-width:48ch;line-height:1.7;opacity:.8;margin:20px 0 28px}
.nn-themes-braise__hero-forme{position:relative;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(135deg,var(--nn-accent),var(--nn-accent2));will-change:transform}
.nn-themes-braise__hero-forme img,.nn-themes-braise__hero-forme svg{width:100%;height:100%;object-fit:cover}
.nn-themes-braise__spot{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(400px circle at var(--nn-x,50%) var(--nn-y,50%),color-mix(in srgb,var(--nn-accent) 22%,transparent),transparent 60%)}
.nn-themes-braise__bouton{display:inline-block;padding:15px 28px;background:var(--nn-accent);color:#fff!important;font-weight:600;transition:transform .25s,background .25s}
.nn-themes-braise__bouton:hover{transform:translateY(-2px)}
.nn-themes-braise__bandeau{overflow:hidden;white-space:nowrap;padding:14px 0;font-size:18px}
.nn-themes-braise__piste{display:inline-flex;gap:48px;padding-right:48px;animation:nn-themes-braise-defile var(--nn-vitesse,30s) linear infinite}
@keyframes nn-themes-braise-defile{to{transform:translateX(-50%)}}
.nn-themes-braise__bloc{max-width:1200px;margin:0 auto;padding:72px 16px}
.nn-themes-braise__titre-section{font-size:clamp(28px,5vw,52px);margin-bottom:32px}
.nn-themes-braise__collections{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.nn-themes-braise__collection{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--nn-r);overflow:hidden;background:linear-gradient(160deg,var(--nn-surface),var(--nn-accent2))}
.nn-themes-braise__collection img,.nn-themes-braise__collection svg{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.nn-themes-braise__collection:hover img{transform:scale(1.05)}
.nn-themes-braise__collection span{position:absolute;left:14px;bottom:14px;padding:8px 12px;background:var(--nn-fond);border-radius:var(--nn-r);font-weight:600}
.nn-themes-braise__carrousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:12px;scrollbar-width:thin}
.nn-themes-braise__carte{position:relative;flex:0 0 min(78%,300px);scroll-snap-align:start;background:var(--nn-surface);border-radius:var(--nn-r);overflow:hidden;transform-style:preserve-3d;transition:transform .2s ease-out,box-shadow .3s}
.nn-themes-braise__carte img,.nn-themes-braise__carte svg{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.nn-themes-braise__carte-info{display:flex;justify-content:space-between;gap:10px;padding:14px;font-size:15px}
.nn-themes-braise__fleches{display:flex;gap:8px;justify-content:flex-end;margin-bottom:16px}
.nn-themes-braise__fleches button{width:44px;height:44px;border-radius:var(--nn-r);border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;font-size:18px}
.nn-themes-braise__chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:24px;text-align:center}
.nn-themes-braise__chiffre strong{display:block;font-family:var(--nn-font);font-size:clamp(44px,7vw,80px);line-height:1}
.nn-themes-braise__chiffre span{opacity:.7;font-size:14px}
.nn-themes-braise__histoire{display:grid;gap:32px;align-items:center}
.nn-themes-braise__histoire-img{aspect-ratio:1;border-radius:var(--nn-r);overflow:hidden;background:linear-gradient(45deg,var(--nn-accent2),var(--nn-accent))}
.nn-themes-braise__histoire-img img,.nn-themes-braise__histoire-img svg{width:100%;height:100%;object-fit:cover}
.nn-themes-braise__histoire .rte{line-height:1.8;opacity:.85}
.nn-themes-braise__avis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.nn-themes-braise__avis figure{margin:0;padding:24px;background:var(--nn-surface);border-radius:var(--nn-r)}
.nn-themes-braise__avis blockquote{margin:0 0 14px;line-height:1.7}
.nn-themes-braise__vide{padding:24px;border:1px dashed currentColor;border-radius:var(--nn-r);opacity:.6;text-align:center}
.nn-themes-braise__faq details{border-bottom:1px solid color-mix(in srgb,var(--nn-texte) 18%,transparent);padding:18px 0}
.nn-themes-braise__faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.nn-themes-braise__faq summary::after{content:"+";transition:transform .3s}
.nn-themes-braise__faq details[open] summary::after{transform:rotate(45deg)}
.nn-themes-braise__faq p{margin:12px 0 0;line-height:1.7;opacity:.8}
.nn-themes-braise__pied{padding:48px 16px;border-top:1px solid color-mix(in srgb,var(--nn-texte) 14%,transparent)}
.nn-themes-braise__pied-in{max-width:1200px;margin:0 auto;display:grid;gap:24px}
.nn-themes-braise__pied form{display:flex;gap:8px;flex-wrap:wrap}
.nn-themes-braise__pied input[type=email]{flex:1;min-width:0;padding:13px 16px;border:1px solid currentColor;border-radius:var(--nn-r);background:transparent;color:inherit;font:inherit}
.nn-themes-braise__pied button{padding:13px 22px;border:0;border-radius:var(--nn-r);background:var(--nn-accent);color:#fff;font-weight:600;cursor:pointer}
.nn-themes-braise [data-nn-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.nn-themes-braise [data-nn-reveal].est-visible{opacity:1;transform:none}
@media (min-width:750px){.nn-themes-braise__hero-in{grid-template-columns:1.2fr .8fr}.nn-themes-braise__histoire{grid-template-columns:1fr 1fr}.nn-themes-braise__pied-in{grid-template-columns:1fr 1fr;align-items:center}.nn-themes-braise__carte{flex-basis:calc(25% - 12px)}}
@media (prefers-reduced-motion: reduce){.nn-themes-braise [data-nn-reveal]{opacity:1;transform:none;transition:none}.nn-themes-braise__piste{animation:none}.nn-themes-braise__carte,.nn-themes-braise__collection img,.nn-themes-braise__hero-forme{transition:none;transform:none!important}.nn-themes-braise__carrousel{scroll-behavior:auto}}
.nn-themes-braise{--nn-r:6px}
.nn-themes-braise__hero{background:radial-gradient(120% 80% at 70% 110%,color-mix(in srgb,var(--nn-accent) 55%,transparent),transparent 60%),radial-gradient(60% 50% at 20% 0%,color-mix(in srgb,var(--nn-accent2) 25%,transparent),transparent 70%),var(--nn-fond)}
.nn-themes-braise h1{font-style:italic;font-weight:600;letter-spacing:-.02em}
.nn-themes-braise__bouton{border-radius:2px;box-shadow:0 0 0 1px var(--nn-accent),0 10px 40px -10px var(--nn-accent)}
.nn-themes-braise__bandeau{background:var(--nn-accent);color:#1a0d08;font-family:var(--nn-font);font-style:italic}
.nn-themes-braise__carte{border:1px solid rgba(255,255,255,.08)}
.nn-themes-braise__titre-section::after{content:"";display:block;width:48px;height:2px;margin-top:12px;background:linear-gradient(90deg,var(--nn-accent),var(--nn-accent2))}
{% endstylesheet %}
{% javascript %}
// NAHNAH AI · Thème Braise : effets (apparition, parallaxe, inclinaison 3D, spotlight, compteurs, carrousel, en-tête sticky)
(function () {
var racines = document.querySelectorAll('.nn-themes-braise');
var calme = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
racines.forEach(function (r) {
// Apparition au défilement
var aReveler = r.querySelectorAll('[data-nn-reveal]');
if (calme || !('IntersectionObserver' in window)) {
aReveler.forEach(function (el) { el.classList.add('est-visible'); });
} else {
var obs = new IntersectionObserver(function (entrees) {
entrees.forEach(function (e) {
if (!e.isIntersecting) return;
e.target.classList.add('est-visible');
obs.unobserve(e.target);
});
}, { threshold: 0.15 });
aReveler.forEach(function (el) { obs.observe(el); });
}
// Compteurs animés quand ils deviennent visibles
r.querySelectorAll('[data-nn-compteur]').forEach(function (el) {
var cible = parseFloat(el.getAttribute('data-nn-compteur')) || 0;
if (calme || !('IntersectionObserver' in window)) { el.textContent = cible; return; }
el.textContent = '0';
var o = new IntersectionObserver(function (en) {
if (!en[0].isIntersecting) return;
o.disconnect();
var debut = null;
function pas(t) {
if (!debut) debut = t;
var p = Math.min((t - debut) / 1400, 1);
el.textContent = Math.round(cible * (1 - Math.pow(1 - p, 3)));
if (p < 1) requestAnimationFrame(pas);
}
requestAnimationFrame(pas);
}, { threshold: 0.5 });
o.observe(el);
});
// En-tête qui se compacte au défilement
var entete = r.querySelector('.nn-themes-braise__entete');
var forme = r.querySelector('[data-nn-parallaxe]');
var force = parseFloat(r.getAttribute('data-parallaxe')) || 0;
var enCours = false;
function surDefilement() {
enCours = false;
if (entete) entete.classList.toggle('est-compact', window.scrollY > 40);
// Parallaxe légère sur le visuel du héros
if (forme && !calme && force > 0) forme.style.transform = 'translateY(' + (window.scrollY * force / 100) + 'px)';
}
window.addEventListener('scroll', function () { if (!enCours) { enCours = true; requestAnimationFrame(surDefilement); } }, { passive: true });
surDefilement();
if (calme) return;
// Spotlight qui suit le curseur dans le héros
var hero = r.querySelector('.nn-themes-braise__hero');
if (hero) hero.addEventListener('pointermove', function (e) {
var b = hero.getBoundingClientRect();
hero.style.setProperty('--nn-x', (e.clientX - b.left) + 'px');
hero.style.setProperty('--nn-y', (e.clientY - b.top) + 'px');
});
// Inclinaison 3D des cartes produits au survol
if (r.getAttribute('data-inclinaison') === 'true') r.querySelectorAll('.nn-themes-braise__carte').forEach(function (c) {
c.addEventListener('pointermove', function (e) {
var b = c.getBoundingClientRect();
var x = (e.clientX - b.left) / b.width - 0.5, y = (e.clientY - b.top) / b.height - 0.5;
c.style.transform = 'perspective(800px) rotateY(' + (x * 10) + 'deg) rotateX(' + (-y * 10) + 'deg)';
});
c.addEventListener('pointerleave', function () { c.style.transform = ''; });
});
});
// Carrousel : flèches précédent / suivant
racines.forEach(function (r) {
var piste = r.querySelector('.nn-themes-braise__carrousel');
if (!piste) return;
r.querySelectorAll('[data-nn-dir]').forEach(function (b) {
b.addEventListener('click', function () {
var carte = piste.querySelector('.nn-themes-braise__carte');
var pasX = carte ? carte.getBoundingClientRect().width + 16 : 300;
piste.scrollBy({ left: pasX * parseInt(b.getAttribute('data-nn-dir'), 10), behavior: calme ? '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 Braise » (Thèmes complets)
Description : Un thème sombre et chaleureux aux lueurs de braise, pensé pour les restaurants qui veulent donner faim dès le premier défilement.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/themes-braise
Fichier : nahnah-themes-braise.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-braise.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-braise ».
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-braise).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-braise ».
- 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-braise 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.