🎨 Thèmes completsGratuit · 0 NahnahPar NAHNAH
Thème Orfèvre
Un thème ivoire et noir aux filets dorés, à la typographie didone et aux apparitions lentes, pour une maison qui cultive l'exception.
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-orfevre.liquid (Liquid, CSS et JS inclus).
{%- comment -%} NAHNAH AI · Thème Orfèvre {%- endcomment -%}
<div class="nn-themes-orfevre" 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: 'Cormorant Garamond','Didot',serif; --nn-font2: 'Jost',system-ui,sans-serif; --nn-vitesse: {{ section.settings.vitesse }}s;">
<header class="nn-themes-orfevre__entete">
<a class="nn-themes-orfevre__logo" href="{{ routes.root_url }}">{{ shop.name | escape }}</a>
<nav class="nn-themes-orfevre__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-orfevre__panier" href="{{ routes.cart_url }}">Panier ({{ cart.item_count }})</a>
</header>
<section class="nn-themes-orfevre__hero">
<div class="nn-themes-orfevre__spot" aria-hidden="true"></div>
<div class="nn-themes-orfevre__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-orfevre__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-orfevre__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-orfevre__bandeau" aria-label="{{ section.settings.bandeau | escape }}"><div class="nn-themes-orfevre__piste" aria-hidden="true">{%- for i in (1..4) -%}<span>{{ section.settings.bandeau | escape }}</span>{%- endfor -%}</div></div>
{%- endif -%}
<section class="nn-themes-orfevre__bloc">
<h2 class="nn-themes-orfevre__titre-section" data-nn-reveal>{{ section.settings.titre_collections | escape }}</h2>
<div class="nn-themes-orfevre__collections">
{%- for c in section.settings.collections -%}
<a class="nn-themes-orfevre__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-orfevre__collection" data-nn-reveal>{{ 'collection-' | append: i | placeholder_svg_tag }}<span>Choisis tes collections</span></div>{%- endfor -%}
{%- endfor -%}
</div>
</section>
<section class="nn-themes-orfevre__bloc">
<h2 class="nn-themes-orfevre__titre-section" data-nn-reveal>{{ section.settings.titre_produits | escape }}</h2>
<div class="nn-themes-orfevre__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-orfevre__carrousel">
{%- for p in section.settings.collection.products limit: section.settings.nb_produits -%}
<a class="nn-themes-orfevre__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-orfevre__carte-info"><span>{{ p.title | escape }}</span><strong>{{ p.price | money }}</strong></div></a>
{%- else -%}
{%- for i in (1..4) -%}<div class="nn-themes-orfevre__carte">{{ 'product-' | append: i | placeholder_svg_tag }}<div class="nn-themes-orfevre__carte-info"><span>Choisis une collection vedette</span></div></div>{%- endfor -%}
{%- endfor -%}
</div>
</section>
<section class="nn-themes-orfevre__bloc nn-themes-orfevre__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-orfevre__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-orfevre__bloc nn-themes-orfevre__histoire">
<div class="nn-themes-orfevre__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-orfevre__titre-section">{{ section.settings.titre_histoire | escape }}</h2><div class="rte">{{ section.settings.histoire }}</div></div>
</section>
<section class="nn-themes-orfevre__bloc">
<h2 class="nn-themes-orfevre__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-orfevre__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-orfevre__vide">Ajoute de vrais avis clients avec le bloc « Avis client ».</p>
{%- endif -%}
</section>
<section class="nn-themes-orfevre__bloc nn-themes-orfevre__faq">
<h2 class="nn-themes-orfevre__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-orfevre__pied">
<div class="nn-themes-orfevre__pied-in">
<div><p class="nn-themes-orfevre__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-orfevre__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 Orfèvre","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":"#F7F3EC"},{"type":"color","id":"couleur_surface","label":"Surfaces","default":"#FFFFFF"},{"type":"color","id":"couleur_texte","label":"Texte","default":"#141210"},{"type":"color","id":"couleur_accent","label":"Accent","default":"#A8834A"},{"type":"color","id":"couleur_accent2","label":"Accent secondaire","default":"#1E1B18"},{"type":"header","content":"Héros"},{"type":"text","id":"titre","label":"Titre","default":"L'art du détail, transmis à la main"},{"type":"textarea","id":"texte","label":"Texte","default":"Des pièces façonnées lentement, en petites séries, pour durer bien au-delà des saisons."},{"type":"text","id":"bouton","label":"Bouton","default":"Découvrir la collection"},{"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":"Fait main · Petites séries · Matières nobles · Service personnalisé"},{"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":40},{"type":"text","id":"legende_1","label":"Légende 1","default":"heures par pièce"},{"type":"number","id":"chiffre_2","label":"Chiffre 2","default":12},{"type":"text","id":"legende_2","label":"Légende 2","default":"étapes de façonnage"},{"type":"number","id":"chiffre_3","label":"Chiffre 3","default":1},{"type":"text","id":"legende_3","label":"Légende 3","default":"artisan par pièce"},{"type":"header","content":"Histoire"},{"type":"text","id":"titre_histoire","label":"Titre","default":"La maison"},{"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 Orfèvre","blocks":[{"type":"faq","settings":{"question":"Proposez-vous la gravure ?","reponse":"<p>À remplacer : décris tes options de personnalisation.</p>"}},{"type":"faq","settings":{"question":"Comment entretenir ma pièce ?","reponse":"<p>À remplacer : donne tes conseils d'entretien.</p>"}}]}]}
{% endschema %}
{% stylesheet %}
/* NAHNAH AI · Thème Orfèvre : direction artistique luxe */
.nn-themes-orfevre{background:var(--nn-fond);color:var(--nn-texte);font-family:var(--nn-font2);overflow:hidden;position:relative}
.nn-themes-orfevre a{color:inherit;text-decoration:none}
.nn-themes-orfevre h1,.nn-themes-orfevre h2,.nn-themes-orfevre h3{font-family:var(--nn-font);margin:0}
.nn-themes-orfevre__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-orfevre__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-orfevre__logo{font-family:var(--nn-font);font-size:22px}
.nn-themes-orfevre__nav{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.nn-themes-orfevre__nav a{opacity:.75;transition:opacity .2s}.nn-themes-orfevre__nav a:hover{opacity:1}
.nn-themes-orfevre__panier{padding:8px 14px;border-radius:var(--nn-r);background:var(--nn-texte);color:var(--nn-fond)!important;font-size:14px}
.nn-themes-orfevre__hero{position:relative;min-height:88vh;display:grid;align-items:center;padding:40px 16px 60px}
.nn-themes-orfevre__hero-in{position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%;display:grid;gap:32px;align-items:center}
.nn-themes-orfevre h1{font-size:clamp(40px,8vw,96px);line-height:1}
.nn-themes-orfevre__hero p{max-width:48ch;line-height:1.7;opacity:.8;margin:20px 0 28px}
.nn-themes-orfevre__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-orfevre__hero-forme img,.nn-themes-orfevre__hero-forme svg{width:100%;height:100%;object-fit:cover}
.nn-themes-orfevre__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-orfevre__bouton{display:inline-block;padding:15px 28px;background:var(--nn-accent);color:#fff!important;font-weight:600;transition:transform .25s,background .25s}
.nn-themes-orfevre__bouton:hover{transform:translateY(-2px)}
.nn-themes-orfevre__bandeau{overflow:hidden;white-space:nowrap;padding:14px 0;font-size:18px}
.nn-themes-orfevre__piste{display:inline-flex;gap:48px;padding-right:48px;animation:nn-themes-orfevre-defile var(--nn-vitesse,30s) linear infinite}
@keyframes nn-themes-orfevre-defile{to{transform:translateX(-50%)}}
.nn-themes-orfevre__bloc{max-width:1200px;margin:0 auto;padding:72px 16px}
.nn-themes-orfevre__titre-section{font-size:clamp(28px,5vw,52px);margin-bottom:32px}
.nn-themes-orfevre__collections{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.nn-themes-orfevre__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-orfevre__collection img,.nn-themes-orfevre__collection svg{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.nn-themes-orfevre__collection:hover img{transform:scale(1.05)}
.nn-themes-orfevre__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-orfevre__carrousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:12px;scrollbar-width:thin}
.nn-themes-orfevre__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-orfevre__carte img,.nn-themes-orfevre__carte svg{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.nn-themes-orfevre__carte-info{display:flex;justify-content:space-between;gap:10px;padding:14px;font-size:15px}
.nn-themes-orfevre__fleches{display:flex;gap:8px;justify-content:flex-end;margin-bottom:16px}
.nn-themes-orfevre__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-orfevre__chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:24px;text-align:center}
.nn-themes-orfevre__chiffre strong{display:block;font-family:var(--nn-font);font-size:clamp(44px,7vw,80px);line-height:1}
.nn-themes-orfevre__chiffre span{opacity:.7;font-size:14px}
.nn-themes-orfevre__histoire{display:grid;gap:32px;align-items:center}
.nn-themes-orfevre__histoire-img{aspect-ratio:1;border-radius:var(--nn-r);overflow:hidden;background:linear-gradient(45deg,var(--nn-accent2),var(--nn-accent))}
.nn-themes-orfevre__histoire-img img,.nn-themes-orfevre__histoire-img svg{width:100%;height:100%;object-fit:cover}
.nn-themes-orfevre__histoire .rte{line-height:1.8;opacity:.85}
.nn-themes-orfevre__avis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.nn-themes-orfevre__avis figure{margin:0;padding:24px;background:var(--nn-surface);border-radius:var(--nn-r)}
.nn-themes-orfevre__avis blockquote{margin:0 0 14px;line-height:1.7}
.nn-themes-orfevre__vide{padding:24px;border:1px dashed currentColor;border-radius:var(--nn-r);opacity:.6;text-align:center}
.nn-themes-orfevre__faq details{border-bottom:1px solid color-mix(in srgb,var(--nn-texte) 18%,transparent);padding:18px 0}
.nn-themes-orfevre__faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.nn-themes-orfevre__faq summary::after{content:"+";transition:transform .3s}
.nn-themes-orfevre__faq details[open] summary::after{transform:rotate(45deg)}
.nn-themes-orfevre__faq p{margin:12px 0 0;line-height:1.7;opacity:.8}
.nn-themes-orfevre__pied{padding:48px 16px;border-top:1px solid color-mix(in srgb,var(--nn-texte) 14%,transparent)}
.nn-themes-orfevre__pied-in{max-width:1200px;margin:0 auto;display:grid;gap:24px}
.nn-themes-orfevre__pied form{display:flex;gap:8px;flex-wrap:wrap}
.nn-themes-orfevre__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-orfevre__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-orfevre [data-nn-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.nn-themes-orfevre [data-nn-reveal].est-visible{opacity:1;transform:none}
@media (min-width:750px){.nn-themes-orfevre__hero-in{grid-template-columns:1.2fr .8fr}.nn-themes-orfevre__histoire{grid-template-columns:1fr 1fr}.nn-themes-orfevre__pied-in{grid-template-columns:1fr 1fr;align-items:center}.nn-themes-orfevre__carte{flex-basis:calc(25% - 12px)}}
@media (prefers-reduced-motion: reduce){.nn-themes-orfevre [data-nn-reveal]{opacity:1;transform:none;transition:none}.nn-themes-orfevre__piste{animation:none}.nn-themes-orfevre__carte,.nn-themes-orfevre__collection img,.nn-themes-orfevre__hero-forme{transition:none;transform:none!important}.nn-themes-orfevre__carrousel{scroll-behavior:auto}}
.nn-themes-orfevre{--nn-r:0}
.nn-themes-orfevre__hero{background:linear-gradient(180deg,var(--nn-fond),var(--nn-surface))}
.nn-themes-orfevre h1,.nn-themes-orfevre h2{font-weight:400;letter-spacing:.01em}
.nn-themes-orfevre h1{font-size:clamp(44px,8vw,110px)}
.nn-themes-orfevre__hero-forme{border-radius:999px 999px 0 0;outline:1px solid var(--nn-accent);outline-offset:10px}
.nn-themes-orfevre__bouton{border-radius:0;background:transparent!important;color:var(--nn-texte)!important;border:1px solid var(--nn-texte);letter-spacing:.25em;text-transform:uppercase;font-size:12px}
.nn-themes-orfevre__bouton:hover{background:var(--nn-texte)!important;color:var(--nn-fond)!important}
.nn-themes-orfevre__bandeau{border-block:1px solid var(--nn-accent);color:var(--nn-accent);letter-spacing:.3em;text-transform:uppercase;font-size:12px}
.nn-themes-orfevre__titre-section{text-align:center}
.nn-themes-orfevre__titre-section::after{content:"";display:block;width:1px;height:40px;margin:16px auto 0;background:var(--nn-accent)}
.nn-themes-orfevre [data-nn-reveal]{transition-duration:1.4s}
{% endstylesheet %}
{% javascript %}
// NAHNAH AI · Thème Orfèvre : effets (apparition, parallaxe, inclinaison 3D, spotlight, compteurs, carrousel, en-tête sticky)
(function () {
var racines = document.querySelectorAll('.nn-themes-orfevre');
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-orfevre__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-orfevre__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-orfevre__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-orfevre__carrousel');
if (!piste) return;
r.querySelectorAll('[data-nn-dir]').forEach(function (b) {
b.addEventListener('click', function () {
var carte = piste.querySelector('.nn-themes-orfevre__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 Orfèvre » (Thèmes complets)
Description : Un thème ivoire et noir aux filets dorés, à la typographie didone et aux apparitions lentes, pour une maison qui cultive l'exception.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/themes-orfevre
Fichier : nahnah-themes-orfevre.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-orfevre.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-orfevre ».
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-orfevre).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-orfevre ».
- 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-orfevre 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.