🎨 Thèmes completsGratuit · 0 NahnahPar NAHNAH
Thème Gaming RGB
Pour les gamers : héros arène néon, setup à points chauds, compte à rebours néon, avis note géante, footer ASCII rétro.
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-gaming-rgb.liquid (Liquid, CSS et JS inclus).
<div class="nn-theme-compose" data-theme="theme-gaming-rgb">
<!-- Section : header-mega-menu -->
<header class="nn-hm"><a class="nn-hm__logo" href="/">{{ shop.name }}</a><nav><div class="nn-hm__item"><button>{{ section.settings.libelle }} ▾</button><div class="nn-hm__panneau"><div class="nn-hm__cols">{% for l in linklists[section.settings.menu].links %}<div><b>{{ l.title }}</b>{% for s in l.links %}<a href="{{ s.url }}">{{ s.title }}</a>{% endfor %}</div>{% endfor %}</div><a class="nn-hm__promo" href="{{ section.settings.lien }}">{% if section.settings.image %}{{ section.settings.image | image_url: width: 500 | image_tag }}{% endif %}<span>{{ section.settings.promo }}</span></a></div></div></nav><a class="nn-hm__panier" href="/cart">🛒 {{ cart.item_count }}</a></header>
<!-- Section : heros-arene-rgb -->
<section class="nn-ar">
<div class="nn-ar__sol"></div>
<div class="nn-ar__contenu">
<span class="nn-ar__live"><i></i> <b class="nn-ar__joueurs">12 480</b> joueurs en ligne</span>
<h1 class="nn-ar__titre">{{ section.settings.titre | default: "PASSE AU NIVEAU SUPÉRIEUR" }}</h1>
<p>{{ section.settings.texte | default: "Casques, caméras et accessoires testés par des streamers. Livrés en 48 h." }}</p>
<div class="nn-ar__boutons"><a class="nn-ar__btn" href="{{ section.settings.lien | default: '/collections/all' }}">{{ section.settings.bouton | default: "Équipe-toi" }}</a><a class="nn-ar__btn2">Voir le setup</a></div>
</div>
<img class="nn-ar__produit" src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=900&q=80" alt="Casque gaming" loading="lazy">
</section>
<!-- Section : fiche-setup-points-chauds -->
<section class="nn-sp">
<h2>{{ section.settings.titre | default: "Compose ton setup" }}</h2>
<div class="nn-sp__scene">
<img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=1400&q=80" alt="Setup" loading="lazy">
<button class="nn-sp__point" style="top:38%;left:28%" data-nom="Caméra Stream 4K" data-prix="159,00 €" aria-label="Caméra Stream 4K"></button>
<button class="nn-sp__point" style="top:62%;left:58%" data-nom="Casque Pro Gamer" data-prix="89,00 €" aria-label="Casque Pro Gamer"></button>
<button class="nn-sp__point" style="top:30%;left:76%" data-nom="Montre Pixel" data-prix="59,00 €" aria-label="Montre Pixel"></button>
<div class="nn-sp__fiche" hidden><b class="nn-sp__nom"></b><span class="nn-sp__prix"></span><a class="nn-sp__btn">Ajouter au panier</a></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 : avis-note-geante -->
<section class="nn-ng" data-note="{{ section.settings.note }}"><div class="nn-ng__gauche"><div class="nn-ng__chiffre">0,0</div><div class="nn-ng__etoiles">★★★★★</div><p>{{ section.settings.nombre }} avis vérifiés</p></div>
<div class="nn-ng__barres">{% assign parts = '82,12,4,1,1' | split: ',' %}{% for p in parts %}<div class="nn-ng__ligne"><span>{{ 6 | minus: forloop.index }} ★</span><div><i style="--p:{{ p }}%"></i></div><span>{{ p }} %</span></div>{% endfor %}</div></section>
<!-- Section : footer-ascii-retro -->
<footer class="nn-fasc"><pre class="nn-fasc__art" aria-hidden="true"></pre><div class="nn-fasc__contenu"><p class="nn-fasc__ligne">> <span class="nn-fasc__tape" data-texte="{{ section.settings.texte | escape }}"></span><i>_</i></p>
<nav>{% for l in section.settings.menu.links %}<a href="{{ l.url }}">./{{ l.handle }}</a>{% else %}<a href="/collections/all">./boutique</a><a href="/pages/contact">./contact</a><a href="/policies/refund-policy">./retours</a>{% endfor %}</nav>
<p class="nn-fasc__bas">© {{ 'now' | date: '%Y' }} {{ shop.name }} — ★★★★★ 4,9/5 (2 300 avis)</p></div></footer>
</div>
{% schema %}{"name":"Thème Gaming RGB","settings":[]}{% endschema %}
{% stylesheet %}
/* header-mega-menu */
.nn-hm{position:relative;display:flex;align-items:center;justify-content:space-between;padding:16px 5vw;background:#fff;border-bottom:1px solid #eee}
.nn-hm__logo{font-weight:900;font-size:20px;color:#111;text-decoration:none}
.nn-hm__item button{background:none;border:0;font-size:15px;cursor:pointer;padding:10px}
.nn-hm__panneau{position:absolute;left:0;right:0;top:100%;display:grid;grid-template-columns:3fr 1fr;gap:30px;padding:30px 5vw;background:#fff;box-shadow:0 20px 40px rgba(0,0,0,.08);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s}
.nn-hm__item:hover .nn-hm__panneau,.nn-hm__item:focus-within .nn-hm__panneau{opacity:1;visibility:visible;transform:none}
.nn-hm__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.nn-hm__cols b{display:block;margin-bottom:10px}.nn-hm__cols a{display:block;color:#52525b;text-decoration:none;padding:4px 0;font-size:14px}.nn-hm__cols a:hover{color:#111}
.nn-hm__promo{position:relative;border-radius:12px;overflow:hidden;background:#f4f4f5;min-height:160px;color:#111;text-decoration:none}
.nn-hm__promo img{width:100%;height:100%;object-fit:cover}.nn-hm__promo span{position:absolute;left:14px;bottom:12px;font-weight:800;background:#fff;padding:6px 10px;border-radius:8px}
.nn-hm__panier{color:#111;text-decoration:none}
@media(max-width:749px){.nn-hm__panneau{grid-template-columns:1fr}}
/* heros-arene-rgb */
.nn-ar{position:relative;min-height:580px;display:flex;align-items:center;padding:64px 6%;background:#0b0614;color:#efe9ff;font-family:Inter,sans-serif;overflow:hidden;perspective:600px}
.nn-ar__sol{position:absolute;left:-50%;right:-50%;bottom:-40%;height:90%;background-image:linear-gradient(#9d4dff 2px,transparent 2px),linear-gradient(90deg,#9d4dff 2px,transparent 2px);background-size:60px 60px;transform:rotateX(70deg);opacity:.45;animation:nnArSol 2s linear infinite;mask-image:linear-gradient(transparent,#000 40%)}
@keyframes nnArSol{to{background-position:0 60px}}
.nn-ar__contenu{position:relative;z-index:1;max-width:620px}
.nn-ar__live{display:inline-flex;align-items:center;gap:8px;border:1px solid #39ff88;color:#39ff88;padding:7px 14px;border-radius:999px;font-weight:700;margin-bottom:18px}
.nn-ar__live i{width:8px;height:8px;border-radius:50%;background:#39ff88;box-shadow:0 0 10px #39ff88;animation:nnArPulse 1s infinite}
@keyframes nnArPulse{50%{opacity:.3}}
.nn-ar__titre{font-family:"Orbitron",sans-serif;font-size:clamp(36px,6vw,72px);line-height:1;margin:0 0 18px;animation:nnArRgb 6s linear infinite}
@keyframes nnArRgb{0%{color:#ff2a6d;text-shadow:0 0 24px #ff2a6d}33%{color:#39ff88;text-shadow:0 0 24px #39ff88}66%{color:#00e5ff;text-shadow:0 0 24px #00e5ff}100%{color:#ff2a6d;text-shadow:0 0 24px #ff2a6d}}
.nn-ar__contenu p{font-size:18px;opacity:.85;margin:0 0 28px}
.nn-ar__boutons{display:flex;gap:12px;flex-wrap:wrap}
.nn-ar__btn{background:#9d4dff;color:#fff;padding:15px 30px;border-radius:10px;font-weight:800;text-decoration:none;box-shadow:0 0 24px rgba(157,77,255,.6);transition:transform .2s}
.nn-ar__btn:hover{transform:translateY(-3px)}
.nn-ar__btn2{border:2px solid #39ff88;color:#39ff88;padding:13px 28px;border-radius:10px;font-weight:800;cursor:pointer}
.nn-ar__produit{position:absolute;right:6%;top:50%;width:min(380px,34vw);aspect-ratio:1;object-fit:cover;border-radius:24px;transform:translateY(-50%);box-shadow:0 0 60px rgba(157,77,255,.55);animation:nnArFlotte 4s ease-in-out infinite}
@keyframes nnArFlotte{50%{transform:translateY(calc(-50% - 14px))}}
@media(max-width:860px){.nn-ar__produit{display:none}}
@media(prefers-reduced-motion:reduce){.nn-ar *{animation:none!important}}
/* fiche-setup-points-chauds */
.nn-sp{padding:64px 6%;background:#0b0614;color:#efe9ff;font-family:Inter,sans-serif}
.nn-sp h2{font-family:"Orbitron",sans-serif;font-size:clamp(26px,4vw,42px);margin:0 0 26px;text-align:center}
.nn-sp__scene{position:relative;max-width:1100px;margin:0 auto;border-radius:22px;overflow:hidden;box-shadow:0 0 50px rgba(157,77,255,.35)}
.nn-sp__scene img{width:100%;height:520px;object-fit:cover;display:block;filter:saturate(1.1) brightness(.8)}
.nn-sp__point{position:absolute;width:26px;height:26px;border-radius:50%;border:3px solid #fff;background:#9d4dff;cursor:pointer;transform:translate(-50%,-50%);box-shadow:0 0 0 0 rgba(157,77,255,.7);animation:nnSpOnde 1.8s infinite}
@keyframes nnSpOnde{to{box-shadow:0 0 0 18px rgba(157,77,255,0)}}
.nn-sp__point.est-actif{background:#39ff88}
.nn-sp__fiche{position:absolute;min-width:220px;background:rgba(17,10,32,.92);backdrop-filter:blur(10px);border:1px solid #9d4dff;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;transform:translate(-50%,calc(-100% - 24px))}
.nn-sp__prix{color:#39ff88;font-weight:800}
.nn-sp__btn{background:#9d4dff;color:#fff;text-align:center;padding:10px;border-radius:8px;font-weight:800;cursor:pointer}
@media(max-width:760px){.nn-sp__scene img{height:360px}}
/* 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}}
/* avis-note-geante */
.nn-ng{display:flex;flex-wrap:wrap;gap:50px;align-items:center;justify-content:center;padding:60px 5vw;background:#ffffff}
.nn-ng__chiffre{font-size:96px;font-weight:800;color:#111111;line-height:1}
.nn-ng__etoiles{color:#f59e0b;font-size:28px;letter-spacing:4px}
.nn-ng__barres{flex:1;min-width:260px;max-width:460px}
.nn-ng__ligne{display:grid;grid-template-columns:40px 1fr 46px;gap:10px;align-items:center;margin:8px 0;color:#52525b;font-size:14px}
.nn-ng__ligne div{height:10px;border-radius:99px;background:#f4f4f5;overflow:hidden}
.nn-ng__ligne i{display:block;height:100%;width:0;background:#f59e0b;border-radius:99px;transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.nn-ng.vu .nn-ng__ligne i{width:var(--p)}
/* footer-ascii-retro */
.nn-fasc{position:relative;overflow:hidden;background:#020617;color:#4ade80;font-family:ui-monospace,Menlo,monospace;padding:70px 5vw 26px}
.nn-fasc__art{position:absolute;inset:0;margin:0;font-size:12px;line-height:12px;color:#14532d;opacity:.7;pointer-events:none}
.nn-fasc__contenu{position:relative;max-width:820px;margin:0 auto}
.nn-fasc__ligne{font-size:clamp(18px,2.6vw,28px);text-shadow:0 0 12px rgba(74,222,128,.6)}
.nn-fasc__ligne i{animation:nnCli 1s steps(1) infinite}@keyframes nnCli{50%{opacity:0}}
.nn-fasc nav{display:flex;flex-wrap:wrap;gap:18px;margin:26px 0}
.nn-fasc nav a{color:#86efac;text-decoration:none;padding:4px 8px;border:1px dashed #166534;transition:background .2s,color .2s}
.nn-fasc nav a:hover{background:#4ade80;color:#020617}
.nn-fasc__bas{color:#15803d;font-size:13px}
{% endstylesheet %}
{% javascript %}
/* header-mega-menu */
// CSS seul (survol + focus clavier)
/* heros-arene-rgb */
document.querySelectorAll('.nn-ar__joueurs').forEach(function(el){var n=12480;setInterval(function(){n+=Math.round(Math.random()*40-18);el.textContent=n.toLocaleString('fr-FR');},1800);});
/* fiche-setup-points-chauds */
document.querySelectorAll('.nn-sp__scene').forEach(function(sc){var f=sc.querySelector('.nn-sp__fiche');sc.querySelectorAll('.nn-sp__point').forEach(function(p){p.addEventListener('click',function(){sc.querySelectorAll('.nn-sp__point').forEach(function(x){x.classList.remove('est-actif')});p.classList.add('est-actif');f.querySelector('.nn-sp__nom').textContent=p.dataset.nom;f.querySelector('.nn-sp__prix').textContent=p.dataset.prix;f.style.top=p.style.top;f.style.left=p.style.left;f.hidden=false;});});});
/* 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);});
/* avis-note-geante */
// Note géante : compteur et barres au moment où le bloc apparaît
document.querySelectorAll('.nn-ng').forEach(function(s){var n=parseFloat(s.dataset.note)||4.9,c=s.querySelector('.nn-ng__chiffre');
new IntersectionObserver(function(e,o){if(!e[0].isIntersecting)return;o.disconnect();s.classList.add('vu');var t0=performance.now();
(function f(t){var p=Math.min(1,(t-t0)/1400);c.textContent=(n*p).toFixed(1).replace('.',',');if(p<1)requestAnimationFrame(f);})(t0);}).observe(s);});
/* footer-ascii-retro */
// ASCII rétro : fond de caractères qui scintille + texte tapé
document.querySelectorAll('.nn-fasc').forEach(function(f){var art=f.querySelector('.nn-fasc__art'),car='01#$%&*+=-:.<>/\\',col=0,lig=0;
function taille(){col=Math.ceil(f.offsetWidth/7);lig=Math.ceil(f.offsetHeight/12);}
function dessin(){var s='';for(var y=0;y<lig;y++){for(var x=0;x<col;x++)s+=Math.random()<.35?car[Math.random()*car.length|0]:' ';s+='\n';}art.textContent=s;}
taille();dessin();setInterval(dessin,180);addEventListener('resize',taille);
var t=f.querySelector('.nn-fasc__tape'),txt=t.dataset.texte,i=0;
new IntersectionObserver(function(e,o){if(!e[0].isIntersecting)return;o.disconnect();(function ecrire(){t.textContent=txt.slice(0,++i);if(i<txt.length)setTimeout(ecrire,55);})();}).observe(f);});
{% 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 Gaming RGB » (Thèmes complets)
Description : Pour les gamers : héros arène néon, setup à points chauds, compte à rebours néon, avis note géante, footer ASCII rétro.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/theme-gaming-rgb
Fichier : nahnah-theme-gaming-rgb.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-gaming-rgb.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-gaming-rgb ».
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-gaming-rgb).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-gaming-rgb ».
- 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-gaming-rgb 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.