🎨 Thèmes completsGratuit · 0 NahnahPar NAHNAH
Thème Or et noir
Prestige absolu : héros rideau doré, édition numérotée, avis en cercle, compte à rebours, footer spotlight.
Aperçu en direct
Données de démonstration (produits, menus, textes d’exemple) : dans ta boutique, ce sont les tiennes.
Photos : Unsplash / Pexels (exemples de l’aperçu, jamais inclus dans le code).
Code à copier
Fichier complet sections/nahnah-theme-or-noir-luxe.liquid (Liquid, CSS et JS inclus).
<div class="nn-theme-compose" data-theme="theme-or-noir-luxe">
<!-- Section : header-ilot-flottant -->
<header class="nn-hi"><a class="nn-hi__logo" href="/">{{ shop.name }}</a><nav>{% for l in linklists[section.settings.menu].links %}<a href="{{ l.url }}">{{ l.title }}</a>{% endfor %}</nav><a class="nn-hi__cta" href="{{ section.settings.lien }}">{{ section.settings.bouton }}</a></header>
<!-- Section : heros-rideau-dore -->
<section class="nn-rd">
<span class="nn-rd__rideau g"></span><span class="nn-rd__rideau d"></span>
<img class="nn-rd__photo" src="{{ section.settings.photo | default: 'https://images.unsplash.com/photo-1541643600914-78b084683601?w=1400&q=80' }}" alt="Produit de prestige" loading="lazy">
<div class="nn-rd__texte"><span>{{ section.settings.sur | default: "Édition prestige" }}</span><h1>{{ section.settings.titre | default: "L'exception, sans compromis" }}</h1><a href="{{ section.settings.lien | default: '/collections/all' }}" class="nn-rd__btn">{{ section.settings.bouton | default: "Entrer" }}</a></div>
</section>
<!-- Section : fiche-edition-numerotee -->
<section class="nn-en">
<div class="nn-en__carte"><div class="nn-en__face"><small>Exemplaire</small><b class="nn-en__num">000</b><small>sur {{ section.settings.total | default: "500" }}</small></div><div class="nn-en__dos"><b>Certificat d'authenticité</b><p>Numéroté, signé et scellé à la cire. Livré dans son coffret.</p></div></div>
<div class="nn-en__infos"><h2>{{ section.settings.titre | default: "Montre Héritage — édition limitée" }}</h2><p class="nn-en__prix">{{ section.settings.prix | default: "490 €" }}</p><p>Il ne reste que <b class="nn-en__reste">37</b> exemplaires.</p><a class="nn-en__btn">Réserver mon exemplaire</a></div>
</section>
<!-- Section : avis-cercle-portraits -->
<section class="nn-cer"><div class="nn-cer__zone">{% for block in section.blocks limit: 8 %}<div class="nn-cer__port" data-texte="{{ block.settings.texte | escape }}" data-nom="{{ block.settings.nom | escape }}">{% if block.settings.photo %}{{ block.settings.photo | image_url: width: 160 | image_tag }}{% else %}<span>{{ block.settings.nom | slice: 0 }}</span>{% endif %}</div>{% endfor %}
<div class="nn-cer__centre"><p>★★★★★</p><blockquote></blockquote><b></b></div></div></section>
<!-- Section : compte-a-rebours-neon -->
<section class="nn-cd nn-cd--neon" style="--a:{{ section.settings.c_accent }};--f:{{ section.settings.c_fond }};--t:{{ section.settings.c_texte }}" data-fin="{{ section.settings.fin }}" data-heures="{{ section.settings.heures }}"><div class="nn-cd__in"><p class="nn-cd__sur">{{ section.settings.surtitre }}</p><h2>{{ section.settings.titre }}</h2>
<div class="nn-cd__compteur"><div><b data-u="j">00</b><span>jours</span></div><div><b data-u="h">00</b><span>heures</span></div><div><b data-u="m">00</b><span>min</span></div><div><b data-u="s">00</b><span>sec</span></div></div>
<a class="nn-cd__btn" href="{{ section.settings.lien }}">{{ section.settings.bouton }}</a><p class="nn-cd__note"><span>★★★★★</span> 4,9/5 · déjà 2 300 clients</p></div></section>
<!-- Section : footer-spotlight -->
<footer class="nn-fm nn-fm--spotlight" style="--a:{{ section.settings.accent }}"><div class="nn-fm__spot"></div>
<div class="nn-fm__in"><div class="nn-fm__marque"><b>{{ section.settings.nom }}</b><p>{{ section.settings.accroche }}</p><p class="nn-fm__note"><span>★★★★★</span> 4,9/5 · 2 300 avis</p></div>
<nav class="nn-fm__liens">{% for l in section.settings.menu.links %}<a href="{{ l.url }}">{{ l.title }}</a>{% else %}<a href="/collections/all">Boutique</a><a href="/collections/all">Nouveautés</a><a href="/pages/contact">Contact</a><a href="/policies/shipping-policy">Livraison</a><a href="/policies/refund-policy">Retours</a>{% endfor %}</nav>
<form class="nn-fm__nl" method="post" action="/contact#contact_form"><input type="hidden" name="form_type" value="customer"><input type="hidden" name="contact[tags]" value="newsletter"><input type="email" name="contact[email]" placeholder="Ton e-mail pour -10 %" required><button type="submit">OK</button></form></div>
<p class="nn-fm__bas">© {{ 'now' | date: '%Y' }} {{ shop.name }} · Paiement sécurisé · Livraison 48 h</p></footer>
</div>
{% schema %}{"name":"Thème Or et noir","settings":[]}{% endschema %}
{% stylesheet %}
/* header-ilot-flottant */
.nn-hi{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:26px;padding:10px 12px 10px 22px;border-radius:999px;background:rgba(255,255,255,.7);backdrop-filter:blur(14px);border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 30px rgba(0,0,0,.08);transition:padding .3s,top .3s}
.nn-hi.petit{top:6px;padding:6px 8px 6px 18px}
.nn-hi__logo{font-weight:900;color:#111;text-decoration:none}
.nn-hi nav{display:flex;gap:20px}.nn-hi nav a{color:#3f3f46;text-decoration:none;font-size:14px}.nn-hi nav a:hover{color:#111}
.nn-hi__cta{background:#111;color:#fff;padding:9px 18px;border-radius:999px;text-decoration:none;font-size:14px}
@media(max-width:749px){.nn-hi nav{display:none}}
/* heros-rideau-dore */
.nn-rd{position:relative;min-height:580px;display:grid;place-items:center;text-align:center;background:#000;color:#fff;font-family:"Montserrat",sans-serif;overflow:hidden}
.nn-rd__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;transform:scale(1.15);animation:nnRdZoom 3s 1s ease forwards}
@keyframes nnRdZoom{to{transform:scale(1)}}
.nn-rd__rideau{position:absolute;top:0;bottom:0;width:50.5%;z-index:3;background:repeating-linear-gradient(90deg,#0a0a0a 0 30px,#151515 30px 60px);box-shadow:0 0 40px rgba(0,0,0,.8);animation:nnRdOuvre 1.6s .4s cubic-bezier(.7,0,.2,1) forwards}
.nn-rd__rideau.g{left:0;border-right:3px solid #d4af37}.nn-rd__rideau.d{right:0;border-left:3px solid #d4af37;--s:1}
@keyframes nnRdOuvre{to{transform:translateX(calc(-100% + var(--s,0)*200%))}}
.nn-rd__texte{position:relative;z-index:2}
.nn-rd__texte span{letter-spacing:.4em;text-transform:uppercase;font-size:12px;color:#d4af37}
.nn-rd h1{font-family:"Playfair Display",serif;font-size:clamp(40px,6vw,82px);margin:16px 0 32px;background:linear-gradient(100deg,#b8902c 20%,#fff4c4 40%,#d4af37 55%,#8a6a1d 80%);background-size:250%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:nnRdReflet 4s 2s ease-in-out infinite}
@keyframes nnRdReflet{0%{background-position:100%}60%,100%{background-position:0}}
.nn-rd__btn{display:inline-block;border:1px solid #d4af37;color:#d4af37;padding:15px 44px;letter-spacing:.3em;text-transform:uppercase;font-size:13px;text-decoration:none;transition:background .3s,color .3s}
.nn-rd__btn:hover{background:#d4af37;color:#000}
@media(prefers-reduced-motion:reduce){.nn-rd__rideau{display:none}.nn-rd *{animation:none!important}}
/* fiche-edition-numerotee */
.nn-en{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:80px 7%;background:#0a0a0a;color:#f5f0e1;font-family:"Montserrat",sans-serif}
.nn-en__carte{position:relative;aspect-ratio:4/5;max-width:380px;margin:0 auto;width:100%;perspective:1200px}
.nn-en__face,.nn-en__dos{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #d4af37;border-radius:14px;backface-visibility:hidden;transition:transform .8s;padding:30px;text-align:center}
.nn-en__face{background:radial-gradient(circle,#1c1708,#0a0a0a)}
.nn-en__dos{background:#d4af37;color:#0a0a0a;transform:rotateY(180deg)}
.nn-en__carte:hover .nn-en__face{transform:rotateY(-180deg)}.nn-en__carte:hover .nn-en__dos{transform:rotateY(0)}
.nn-en__num{font-family:"Playfair Display",serif;font-size:96px;color:#d4af37;font-variant-numeric:tabular-nums;line-height:1;margin:10px 0}
.nn-en small{letter-spacing:.3em;text-transform:uppercase;font-size:11px;opacity:.7}
.nn-en h2{font-family:"Playfair Display",serif;font-size:clamp(28px,4vw,42px);margin:0 0 8px}
.nn-en__prix{font-size:24px;color:#d4af37;margin:0 0 14px}
.nn-en__reste{color:#d4af37}
.nn-en__btn{display:block;text-align:center;margin-top:22px;border:1px solid #d4af37;color:#d4af37;padding:16px;letter-spacing:.2em;text-transform:uppercase;font-size:13px;cursor:pointer;transition:background .3s,color .3s}
.nn-en__btn:hover{background:#d4af37;color:#0a0a0a}
@media(max-width:760px){.nn-en{grid-template-columns:1fr}}
/* avis-cercle-portraits */
.nn-cer{padding:60px 5vw;background:#0f172a;display:flex;justify-content:center;overflow:hidden}
.nn-cer__zone{position:relative;width:min(460px,90vw);aspect-ratio:1}
.nn-cer__port{position:absolute;left:50%;top:50%;width:70px;height:70px;margin:-35px;border-radius:50%;overflow:hidden;border:3px solid #334155;transition:transform .9s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s;display:flex;align-items:center;justify-content:center;background:#1e293b;color:#ffffff;font-weight:700}
.nn-cer__port img{width:100%;height:100%;object-fit:cover}
.nn-cer__port.actif{border-color:#facc15;box-shadow:0 0 24px rgba(250,204,21,.6)}
.nn-cer__centre{position:absolute;inset:24%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#ffffff;transition:opacity .4s}
.nn-cer__centre p{color:#facc15;margin:0}.nn-cer__centre blockquote{margin:10px 0;font-size:clamp(14px,2vw,18px);line-height:1.4}
.nn-cer__centre.change{opacity:0}
/* compte-a-rebours-neon */
.nn-cd{position:relative;overflow:hidden;background:var(--f);color:var(--t);padding:70px 5vw;text-align:center}
.nn-cd__in{position:relative;z-index:2;max-width:760px;margin:0 auto}
.nn-cd__sur{display:inline-block;padding:6px 14px;border-radius:99px;background:var(--a);color:#ffffff;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:1px;margin:0}
.nn-cd h2{font-size:clamp(30px,5vw,56px);margin:16px 0 28px;letter-spacing:-.02em;color:inherit}
.nn-cd__compteur{display:flex;justify-content:center;gap:clamp(8px,2vw,18px);margin-bottom:30px}
.nn-cd__compteur div{display:flex;flex-direction:column;align-items:center;min-width:clamp(64px,13vw,104px)}
.nn-cd__compteur b{font-size:clamp(34px,7vw,68px);font-variant-numeric:tabular-nums;line-height:1}
.nn-cd__compteur b.flip{animation:nnFlip .45s}@keyframes nnFlip{40%{transform:rotateX(90deg);opacity:.3}}
.nn-cd__compteur span{font-size:13px;opacity:.65;margin-top:6px;text-transform:uppercase}
.nn-cd__btn{display:inline-block;padding:16px 34px;border-radius:14px;background:var(--a);color:#ffffff;font-weight:800;text-decoration:none;transition:transform .2s,box-shadow .2s}
.nn-cd__btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.2)}
.nn-cd__note{margin:18px 0 0;opacity:.8}.nn-cd__note span{color:#f59e0b}.nn-cd--neon .nn-cd__compteur b{color:#4ade80;text-shadow:0 0 8px #22c55e,0 0 24px #22c55e;animation:nnNeon 4s infinite}
@keyframes nnNeon{0%,92%,100%{opacity:1}94%{opacity:.4}96%{opacity:1}97%{opacity:.6}}
/* footer-spotlight */
.nn-fm{position:relative;overflow:hidden;padding:70px 5vw 22px;font-family:inherit}
.nn-fm__in{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:36px;max-width:1200px;margin:0 auto;align-items:start}
.nn-fm__marque b{font-size:30px;letter-spacing:-.02em}.nn-fm__marque p{opacity:.75;margin:8px 0}
.nn-fm__note span{color:#f59e0b;letter-spacing:2px}
.nn-fm__liens{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.nn-fm__liens a{color:inherit;opacity:.8;text-decoration:none;transition:opacity .2s,transform .2s}.nn-fm__liens a:hover{opacity:1;transform:translateX(4px)}
.nn-fm__nl{display:flex;gap:8px}.nn-fm__nl input{flex:1;min-width:0;padding:14px 16px;border-radius:12px;border:1px solid rgba(127,127,127,.35);background:rgba(127,127,127,.08);color:inherit;font:inherit}
.nn-fm__nl button{padding:0 20px;border:0;border-radius:12px;background:var(--a);color:#ffffff;font-weight:700;cursor:pointer;transition:transform .2s}.nn-fm__nl button:hover{transform:scale(1.06)}
.nn-fm__bas{position:relative;z-index:2;text-align:center;opacity:.55;font-size:13px;margin:40px 0 0}
@media(max-width:749px){.nn-fm__in{grid-template-columns:1fr}}.nn-fm--spotlight{background:#0a0a0a;color:#fafafa}.nn-fm__spot{position:absolute;inset:0;background-image:radial-gradient(#3f3f46 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(260px at var(--x,50%) var(--y,50%),#000,transparent);mask-image:radial-gradient(260px at var(--x,50%) var(--y,50%),#000,transparent)}
.nn-fm--spotlight::before{content:"";position:absolute;inset:0;background:radial-gradient(400px at var(--x,50%) var(--y,50%),rgba(245,158,11,.15),transparent)}
{% endstylesheet %}
{% javascript %}
/* header-ilot-flottant */
// Rétrécit le header au scroll
document.querySelectorAll('.nn-hi').forEach(function(h){addEventListener('scroll',function(){h.classList.toggle('petit',scrollY>40)},{passive:true})});
/* heros-rideau-dore */
/* Aucun script requis */
/* fiche-edition-numerotee */
document.querySelectorAll('.nn-en').forEach(function(s){var n=s.querySelector('.nn-en__num'),cible=463,v=0;var i=setInterval(function(){v+=Math.ceil((cible-v)/9);n.textContent=String(v).padStart(3,'0');if(v>=cible)clearInterval(i);},45);});
/* avis-cercle-portraits */
// Cercle : les portraits tournent, l'avis actif s'affiche au centre
document.querySelectorAll('.nn-cer__zone').forEach(function(z){var p=[].slice.call(z.querySelectorAll('.nn-cer__port')),c=z.querySelector('.nn-cer__centre'),n=p.length,a=0;
function tour(){var R=z.offsetWidth/2-40;p.forEach(function(e,i){var ang=((i-a)/n)*6.283-1.571;e.style.transform='translate('+Math.cos(ang)*R+'px,'+Math.sin(ang)*R+'px)';e.classList.toggle('actif',i===a);});
c.classList.add('change');setTimeout(function(){c.querySelector('blockquote').textContent=p[a].dataset.texte;c.querySelector('b').textContent=p[a].dataset.nom;c.classList.remove('change');},400);}
p.forEach(function(e,i){e.onclick=function(){a=i;tour();};});tour();setInterval(function(){a=(a+1)%n;tour();},4500);});
/* compte-a-rebours-neon */
// Compte à rebours : date fixe ou compte glissant mémorisé par visiteur
document.querySelectorAll('.nn-cd').forEach(function(s){var fin=s.dataset.fin?new Date(s.dataset.fin.replace(' ','T')).getTime():0;
if(!fin){var k='nn-cd-'+location.pathname,v=+localStorage.getItem(k);if(!v||v<Date.now()){v=Date.now()+(+s.dataset.heures||48)*36e5;localStorage.setItem(k,v);}fin=v;}
var u={};s.querySelectorAll('[data-u]').forEach(function(b){u[b.dataset.u]=b;});
function maj(){var r=Math.max(0,fin-Date.now())/1000,val={j:r/86400|0,h:r%86400/3600|0,m:r%3600/60|0,s:r%60|0};
for(var c in val){var t=String(val[c]).padStart(2,'0');if(u[c].textContent!==t){u[c].textContent=t;u[c].classList.remove('flip');void u[c].offsetWidth;u[c].classList.add('flip');}}
s.style.setProperty('--prog',r/((+s.dataset.heures||48)*3600));}
maj();setInterval(maj,1000);});
/* footer-spotlight */
// Projecteur : suit la souris
document.querySelectorAll('.nn-fm--spotlight').forEach(function(f){f.addEventListener('mousemove',function(e){var r=f.getBoundingClientRect();f.style.setProperty('--x',e.clientX-r.left+'px');f.style.setProperty('--y',e.clientY-r.top+'px');});});
{% 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 Or et noir » (Thèmes complets)
Description : Prestige absolu : héros rideau doré, édition numérotée, avis en cercle, compte à rebours, footer spotlight.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/theme-or-noir-luxe
Fichier : nahnah-theme-or-noir-luxe.liquid (bouton « Télécharger » de la page) ou le code copié avec le bouton « Copier » : je te le joins ou je le colle après ce message.
Emplacement dans le thème : sections/nahnah-theme-or-noir-luxe.liquid (Liquid, puis {% stylesheet %} et {% javascript %}, dans ce seul fichier).
Étapes d’installation :
1. Dans Shopify : Boutique en ligne → Thèmes → bouton « … » du thème → Modifier le code.
2. Dossier « sections » → « Ajouter une section » (ou « Nouveau fichier ») → nomme-la « nahnah-theme-or-noir-luxe ».
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 : theme-or-noir-luxe).Installer dans Shopify
- Dans Shopify : Boutique en ligne → Thèmes → bouton « … » du thème → Modifier le code.
- Dossier « sections » → « Ajouter une section » (ou « Nouveau fichier ») → nomme-la « nahnah-theme-or-noir-luxe ».
- 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 theme-or-noir-luxe 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.