🎨 Thèmes completsGratuit · 0 NahnahPar NAHNAH
Thème Nyxar
Thème complet gaming violet néon et noir profond, lignes de balayage, glow au curseur, cartes en relief 3D et bandeau défilant rapide.
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-nyxar.liquid (Liquid, CSS et JS inclus).
{%- comment -%} NAHNAH AI · Thème Nyxar {%- endcomment -%}
<div class="nn-themes-nyxar" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }}; --nn-second: {{ section.settings.couleur_second }}; --nn-font: 'Chakra Petch','Arial Narrow',sans-serif; --nn-font2: 'Rubik',system-ui,sans-serif; --nn-vitesse: {{ section.settings.vitesse_ruban }}s;">
<span class="nn-themes-nyxar__lueur" aria-hidden="true"></span>
<header class="nn-themes-nyxar__entete">
<a class="nn-themes-nyxar__logo" href="{{ routes.root_url }}">{%- if section.settings.logo != blank -%}{{ section.settings.logo | image_url: width: 240 | image_tag: alt: shop.name, height: 36, style: 'height:36px;width:auto' }}{%- else -%}{{ shop.name | escape }}{%- endif -%}</a>
<nav class="nn-themes-nyxar__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-nyxar__heros">
<span class="nn-themes-nyxar__bulle" data-nn-parallaxe="0.35" style="width:120px;height:120px;top:8%;left:46%"></span>
<span class="nn-themes-nyxar__bulle" data-nn-parallaxe="-0.2" style="width:60px;height:60px;bottom:12%;left:6%"></span>
<div data-nn-apparition>
{%- if section.settings.surtitre != blank -%}<p style="text-transform:uppercase;letter-spacing:.18em;font-size:12px;margin-bottom:14px">{{ section.settings.surtitre | escape }}</p>{%- endif -%}
<h1>{{ section.settings.titre | escape }}</h1>
<p style="margin:20px 0 28px">{{ section.settings.texte | escape }}</p>
<a class="nn-themes-nyxar__bouton" href="{{ section.settings.lien_bouton | default: routes.all_products_collection_url }}">{{ section.settings.bouton | escape }}</a>
</div>
<div class="nn-themes-nyxar__heros-visuel" data-nn-apparition><div data-nn-parallaxe="0.08" style="height:100%">{%- if section.settings.image != blank -%}{{ section.settings.image | image_url: width: 1200 | image_tag: alt: section.settings.titre, loading: 'eager' }}{%- else -%}{{ 'lifestyle-1' | placeholder_svg_tag }}{%- endif -%}</div></div>
</section>
{%- if section.settings.ruban != blank -%}
<div class="nn-themes-nyxar__ruban" aria-hidden="true"><div class="nn-themes-nyxar__ruban-piste">{%- assign mots = section.settings.ruban | split: '·' -%}{%- for n in (1..2) -%}{%- for m in mots -%}<span>{{ m | strip | escape }} ✦</span>{%- endfor -%}{%- endfor -%}</div></div>
{%- endif -%}
<section class="nn-themes-nyxar__bloc" id="collections">
<h2 data-nn-apparition>{{ section.settings.titre_collections | escape }}</h2>
<div class="nn-themes-nyxar__grille">
{%- for block in section.blocks -%}{%- if block.type == 'collection' -%}
{%- assign col = block.settings.collection -%}
<a class="nn-themes-nyxar__col" href="{{ col.url | default: routes.collections_url }}" data-nn-apparition {{ block.shopify_attributes }}>
<span class="nn-themes-nyxar__media">{%- if col.featured_image -%}{{ col.featured_image | image_url: width: 600 | image_tag: loading: 'lazy', alt: col.title }}{%- else -%}{{ 'collection-1' | placeholder_svg_tag }}{%- endif -%}</span>
<strong>{{ col.title | default: 'Choisis une collection' | escape }}</strong>
</a>
{%- endif -%}{%- endfor -%}
</div>
</section>
<section class="nn-themes-nyxar__bloc" id="vedettes">
<h2 data-nn-apparition>{{ section.settings.titre_produits | escape }}</h2>
<div class="nn-themes-nyxar__fleches"><button type="button" data-nn-sens="-1" aria-label="Précédent">←</button><button type="button" data-nn-sens="1" aria-label="Suivant">→</button></div>
<div class="nn-themes-nyxar__carrousel" data-nn-carrousel>
{%- for p in section.settings.collection_vedette.products limit: section.settings.nb_produits -%}
<a class="nn-themes-nyxar__carte" href="{{ p.url }}" data-nn-inclinaison="{{ section.settings.force_inclinaison }}">
<span class="nn-themes-nyxar__media">{%- 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 -%}</span>
<span>{{ p.title | escape }}</span>
<span class="nn-themes-nyxar__prix">{%- if p.compare_at_price > p.price -%}<s style="opacity:.5;font-weight:400">{{ p.compare_at_price | money }}</s> {%- endif -%}{{ p.price | money }}</span>
</a>
{%- else -%}
{%- for i in (1..4) -%}<div class="nn-themes-nyxar__carte" data-nn-inclinaison="{{ section.settings.force_inclinaison }}"><span class="nn-themes-nyxar__media">{{ 'product-' | append: i | placeholder_svg_tag }}</span><span>Choisis une collection vedette</span></div>{%- endfor -%}
{%- endfor -%}
</div>
</section>
<section class="nn-themes-nyxar__bloc" id="histoire">
<div class="nn-themes-nyxar__histoire">
<div class="nn-themes-nyxar__media" data-nn-apparition>{%- if section.settings.image_histoire != blank -%}{{ section.settings.image_histoire | image_url: width: 900 | image_tag: loading: 'lazy', alt: section.settings.titre_histoire }}{%- else -%}{{ 'lifestyle-2' | placeholder_svg_tag }}{%- endif -%}</div>
<div data-nn-apparition>
<h2>{{ section.settings.titre_histoire | escape }}</h2>
<div>{{ section.settings.texte_histoire }}</div>
<div class="nn-themes-nyxar__chiffres">
{%- for block in section.blocks -%}{%- if block.type == 'chiffre' -%}<div class="nn-themes-nyxar__chiffre" {{ block.shopify_attributes }}><b data-nn-compteur="{{ block.settings.valeur }}">{{ block.settings.valeur }}</b><span>{{ block.settings.legende | escape }}</span></div>{%- endif -%}{%- endfor -%}
</div>
</div>
</div>
</section>
<section class="nn-themes-nyxar__bloc" id="avis">
<h2 data-nn-apparition>{{ section.settings.titre_avis | escape }}</h2>
<div class="nn-themes-nyxar__grille">
{%- for block in section.blocks -%}{%- if block.type == 'avis' and block.settings.texte != blank -%}
<figure class="nn-themes-nyxar__avis" data-nn-apparition {{ block.shopify_attributes }}><blockquote>« {{ block.settings.texte | escape }} »</blockquote>{%- if block.settings.auteur != blank -%}<figcaption>— {{ block.settings.auteur | escape }}</figcaption>{%- endif -%}</figure>
{%- endif -%}{%- endfor -%}
</div>
{%- if request.design_mode -%}<p style="opacity:.6;font-size:13px">Ajoutez des blocs « Avis client » avec de vrais avis : les blocs vides restent masqués.</p>{%- endif -%}
</section>
<section class="nn-themes-nyxar__bloc nn-themes-nyxar__faq" id="faq">
<h2 data-nn-apparition>{{ section.settings.titre_faq | escape }}</h2>
{%- for block in section.blocks -%}{%- if block.type == 'faq' -%}<details data-nn-apparition {{ block.shopify_attributes }}><summary>{{ block.settings.question | escape }}</summary><div>{{ block.settings.reponse }}</div></details>{%- endif -%}{%- endfor -%}
</section>
<footer class="nn-themes-nyxar__pied">
<div class="nn-themes-nyxar__pied-grille">
<div><strong class="nn-themes-nyxar__logo">{{ shop.name | escape }}</strong><p>{{ section.settings.texte_pied | escape }}</p></div>
<nav aria-label="Pied de page" style="display:grid;gap:6px">{%- for l in linklists[section.settings.menu_pied].links -%}<a href="{{ l.url }}">{{ l.title | escape }}</a>{%- endfor -%}</nav>
<div>
<p>{{ section.settings.titre_newsletter | escape }}</p>
{%- form 'customer', id: 'nn-newsletter-nyxar' -%}<input type="hidden" name="contact[tags]" value="newsletter">{%- if form.posted_successfully? -%}<p>Merci, c'est noté.</p>{%- else -%}<input type="email" name="contact[email]" placeholder="Votre e-mail" required aria-label="E-mail"><button type="submit">S'inscrire</button>{%- endif -%}{%- endform -%}
</div>
</div>
<small>© {{ 'now' | date: '%Y' }} {{ shop.name | escape }} · Tous droits réservés</small>
</footer>
</div>
{% schema %}
{"name":"Thème Nyxar","tag":"section","class":"nn-th-nyxar","settings":[{"type":"header","content":"En-tête"},{"type":"image_picker","id":"logo","label":"Logo"},{"type":"link_list","id":"menu","label":"Menu","default":"main-menu"},{"type":"header","content":"Héros"},{"type":"text","id":"surtitre","label":"Surtitre","default":"Nouvelle collection"},{"type":"text","id":"titre","label":"Titre","default":"Monte ton setup d'un niveau"},{"type":"textarea","id":"texte","label":"Texte","default":"Périphériques, accessoires et déco pour jouer mieux et plus longtemps."},{"type":"text","id":"bouton","label":"Bouton","default":"Équiper mon setup"},{"type":"url","id":"lien_bouton","label":"Lien du bouton"},{"type":"image_picker","id":"image","label":"Image du héros"},{"type":"header","content":"Bandeau défilant"},{"type":"text","id":"ruban","label":"Messages (séparés par ·)","default":"Setup · Périphériques · Éclairage · Confort · Paiement sécurisé"},{"type":"range","id":"vitesse_ruban","label":"Durée d'un tour","min":10,"max":60,"step":2,"unit":"s","default":28},{"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":"Les incontournables"},{"type":"collection","id":"collection_vedette","label":"Collection vedette"},{"type":"range","id":"nb_produits","label":"Nombre de produits","min":2,"max":12,"step":1,"default":8},{"type":"range","id":"force_inclinaison","label":"Force de l'inclinaison 3D","min":0,"max":20,"step":1,"unit":"°","default":8},{"type":"header","content":"Histoire"},{"type":"text","id":"titre_histoire","label":"Titre","default":"Par des joueurs, pour des joueurs"},{"type":"richtext","id":"texte_histoire","label":"Texte","default":"<p>Racontez ici votre parcours de joueur, vos jeux, ce que vous cherchez dans un bon accessoire.</p>"},{"type":"image_picker","id":"image_histoire","label":"Image"},{"type":"header","content":"Avis et FAQ"},{"type":"text","id":"titre_avis","label":"Titre avis","default":"Ce qu'en disent nos clients"},{"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","default":"footer"},{"type":"text","id":"texte_pied","label":"Texte","default":"Décrivez votre marque en une phrase."},{"type":"text","id":"titre_newsletter","label":"Titre newsletter","default":"Recevez nos nouveautés"},{"type":"header","content":"Couleurs"},{"type":"color","id":"couleur_fond","label":"Fond","default":"#07060D"},{"type":"color","id":"couleur_texte","label":"Texte","default":"#EDE9FF"},{"type":"color","id":"couleur_accent","label":"Accent","default":"#A855F7"},{"type":"color","id":"couleur_second","label":"Secondaire","default":"#22D3EE"}],"blocks":[{"type":"collection","name":"Collection","limit":6,"settings":[{"type":"collection","id":"collection","label":"Collection"}]},{"type":"chiffre","name":"Chiffre animé","limit":4,"settings":[{"type":"number","id":"valeur","label":"Valeur","default":14},{"type":"text","id":"legende","label":"Légende","default":"jours pour changer d'avis"}]},{"type":"avis","name":"Avis client","settings":[{"type":"textarea","id":"texte","label":"Avis (réel, avec accord du client)"},{"type":"text","id":"auteur","label":"Prénom du client"}]},{"type":"faq","name":"Question FAQ","settings":[{"type":"text","id":"question","label":"Question","default":"Votre question"},{"type":"richtext","id":"reponse","label":"Réponse","default":"<p>Votre réponse.</p>"}]}],"presets":[{"name":"Thème Nyxar","blocks":[{"type":"collection"},{"type":"collection"},{"type":"collection"},{"type":"chiffre","settings":{"valeur":14,"legende":"jours pour changer d'avis"}},{"type":"chiffre","settings":{"valeur":7,"legende":"jours sur 7, boutique ouverte"}},{"type":"chiffre","settings":{"valeur":3,"legende":"étapes pour commander"}},{"type":"avis"},{"type":"avis"},{"type":"avis"},{"type":"faq","settings":{"question":"Quels sont les délais de livraison ?","reponse":"<p>Indiquez ici vos délais réels de préparation et de livraison.</p>"}},{"type":"faq","settings":{"question":"Puis-je retourner un article ?","reponse":"<p>Vous disposez de 14 jours après réception pour exercer votre droit de rétractation. Précisez ici vos conditions.</p>"}},{"type":"faq","settings":{"question":"Quels moyens de paiement acceptez-vous ?","reponse":"<p>Listez ici les moyens de paiement activés sur votre boutique.</p>"}}]}]}
{% endschema %}
{% stylesheet %}
/* NAHNAH AI · Thème Nyxar : thème complet (direction artistique propre) */
.nn-themes-nyxar{--nn-x:50%;--nn-y:30%;position:relative;overflow:clip;background-color:var(--nn-fond);color:var(--nn-texte);font-family:var(--nn-font2);line-height:1.6}
.nn-themes-nyxar *{box-sizing:border-box}
.nn-themes-nyxar a{color:inherit;text-decoration:none}
.nn-themes-nyxar img,.nn-themes-nyxar svg{display:block;max-width:100%}
.nn-themes-nyxar__lueur{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(420px circle at var(--nn-x) var(--nn-y),color-mix(in srgb,var(--nn-accent) 22%,transparent),transparent 70%)}
.nn-themes-nyxar__entete{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;transition:padding .3s,box-shadow .3s}
.nn-themes-nyxar__entete.est-compact{padding-block:8px;box-shadow:0 10px 30px -18px rgba(0,0,0,.5)}
.nn-themes-nyxar__logo{font-family:var(--nn-font);font-size:22px;font-weight:700}
.nn-themes-nyxar__nav{display:flex;gap:18px;flex-wrap:wrap}
.nn-themes-nyxar__nav a{position:relative}
.nn-themes-nyxar__nav a::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nn-themes-nyxar__nav a:hover::after{transform:scaleX(1)}
.nn-themes-nyxar__heros{position:relative;z-index:1;display:grid;gap:28px;align-items:center;padding:48px 16px 56px;max-width:1200px;margin:0 auto}
.nn-themes-nyxar__heros h1{margin:0;font-size:clamp(38px,7vw,88px);line-height:1}
.nn-themes-nyxar__heros p{margin:0;max-width:48ch;font-size:17px;opacity:.85}
.nn-themes-nyxar__heros-visuel{position:relative;overflow:hidden;aspect-ratio:4/5;max-height:620px}
.nn-themes-nyxar__heros-visuel img,.nn-themes-nyxar__heros-visuel svg{width:100%;height:115%;object-fit:cover;will-change:transform}
.nn-themes-nyxar__bulle{z-index:0;pointer-events:none;will-change:transform}
.nn-themes-nyxar__bouton{display:inline-block;justify-self:start;padding:15px 28px;background:var(--nn-accent);color:var(--nn-fond)!important;font-weight:600;transition:transform .25s,box-shadow .25s,background .25s}
.nn-themes-nyxar__bouton:hover{transform:translateY(-2px)}
.nn-themes-nyxar__ruban{position:relative;z-index:1;overflow:hidden;white-space:nowrap;padding:14px 0}
.nn-themes-nyxar__ruban-piste{display:inline-flex;gap:48px;padding-right:48px;animation:nn-themes-nyxar-defile var(--nn-vitesse,28s) linear infinite}
@keyframes nn-themes-nyxar-defile{to{transform:translateX(-50%)}}
.nn-themes-nyxar__bloc{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:56px 16px}
.nn-themes-nyxar__bloc h2{margin:0 0 24px;font-size:clamp(28px,4.5vw,52px);line-height:1.05}
.nn-themes-nyxar__grille{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.nn-themes-nyxar__col{display:flex;flex-direction:column;gap:10px;padding:14px;overflow:hidden}
.nn-themes-nyxar__col .nn-themes-nyxar__media{aspect-ratio:1}
.nn-themes-nyxar__media{overflow:hidden}
.nn-themes-nyxar__media img,.nn-themes-nyxar__media svg{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.nn-themes-nyxar__col:hover .nn-themes-nyxar__media img,.nn-themes-nyxar__carte:hover .nn-themes-nyxar__media img{transform:scale(1.06)}
.nn-themes-nyxar__carrousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:10px;scrollbar-width:thin}
.nn-themes-nyxar__carte{flex:0 0 min(78%,280px);scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;padding:12px;transform-style:preserve-3d;transition:transform .2s,box-shadow .3s}
.nn-themes-nyxar__carte .nn-themes-nyxar__media{aspect-ratio:4/5}
.nn-themes-nyxar__prix{font-weight:700;color:var(--nn-accent)}
.nn-themes-nyxar__fleches{display:flex;gap:8px;margin-bottom:14px}
.nn-themes-nyxar__fleches button{width:44px;height:44px;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;font-size:18px;border-radius:50%}
.nn-themes-nyxar__histoire{display:grid;gap:28px;align-items:center}
.nn-themes-nyxar__histoire .nn-themes-nyxar__media{aspect-ratio:4/3}
.nn-themes-nyxar__chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin-top:20px}
.nn-themes-nyxar__chiffre b{display:block;font-family:var(--nn-font);font-size:clamp(36px,6vw,60px);line-height:1}
.nn-themes-nyxar__avis{padding:22px;display:flex;flex-direction:column;gap:12px}
.nn-themes-nyxar__avis blockquote{margin:0;font-size:17px}
.nn-themes-nyxar__faq details{border-bottom:1px solid color-mix(in srgb,var(--nn-texte) 20%,transparent);padding:16px 0}
.nn-themes-nyxar__faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.nn-themes-nyxar__faq summary::after{content:"+";transition:transform .3s}
.nn-themes-nyxar__faq details[open] summary::after{transform:rotate(45deg)}
.nn-themes-nyxar__pied{position:relative;z-index:1;padding:48px 16px 28px;border-top:1px solid color-mix(in srgb,var(--nn-texte) 15%,transparent)}
.nn-themes-nyxar__pied-grille{max-width:1200px;margin:0 auto;display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.nn-themes-nyxar__pied form{display:flex;flex-wrap:wrap;gap:8px}
.nn-themes-nyxar__pied input[type=email]{flex:1 1 180px;min-width:0;padding:12px 14px;border:1px solid color-mix(in srgb,var(--nn-texte) 30%,transparent);background:transparent;color:inherit;font:inherit}
.nn-themes-nyxar__pied button{padding:12px 18px;border:0;background:var(--nn-accent);color:var(--nn-fond);font:inherit;font-weight:700;cursor:pointer}
.nn-themes-nyxar__pied small{display:block;max-width:1200px;margin:28px auto 0;opacity:.6}
.nn-themes-nyxar [data-nn-apparition]{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.nn-themes-nyxar [data-nn-apparition].est-visible{opacity:1;transform:none}
@media (min-width:750px){.nn-themes-nyxar__heros{grid-template-columns:1.1fr .9fr;padding:72px 40px}.nn-themes-nyxar__bloc{padding:80px 40px}.nn-themes-nyxar__histoire{grid-template-columns:1fr 1fr}.nn-themes-nyxar__entete{padding:18px 40px}.nn-themes-nyxar__carte{flex-basis:300px}}
@media (hover:none){.nn-themes-nyxar__lueur{display:none}}
@media (prefers-reduced-motion: reduce){.nn-themes-nyxar *,.nn-themes-nyxar *::before,.nn-themes-nyxar *::after{animation:none!important;transition:none!important}.nn-themes-nyxar [data-nn-apparition]{opacity:1;transform:none}.nn-themes-nyxar__lueur{display:none}.nn-themes-nyxar__carrousel{scroll-behavior:auto}}
.nn-themes-nyxar::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);z-index:0}
.nn-themes-nyxar h1,.nn-themes-nyxar h2{font-family:var(--nn-font);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.nn-themes-nyxar h1{text-shadow:0 0 24px color-mix(in srgb,var(--nn-accent) 70%,transparent)}
.nn-themes-nyxar__entete{background:color-mix(in srgb,var(--nn-fond) 80%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--nn-accent)}
.nn-themes-nyxar__bouton{clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);border-radius:0;box-shadow:0 0 28px -4px var(--nn-accent)}
.nn-themes-nyxar__carte,.nn-themes-nyxar__col,.nn-themes-nyxar__avis{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));background:linear-gradient(160deg,color-mix(in srgb,var(--nn-accent) 16%,var(--nn-fond)),var(--nn-fond));border:0}
.nn-themes-nyxar__heros-visuel{clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}
.nn-themes-nyxar__ruban{background:var(--nn-accent);color:#fff;font-family:var(--nn-font);text-transform:uppercase;transform:skewY(-2deg)}
.nn-themes-nyxar__bulle{position:absolute;width:40px;height:40px;border:1px solid var(--nn-second);transform:rotate(45deg);opacity:.5}
.nn-themes-nyxar__chiffre b{color:var(--nn-second);text-shadow:0 0 18px var(--nn-second)}
{% endstylesheet %}
{% javascript %}
// NAHNAH AI · Thème Nyxar : effets du thème (aucun Liquid ici, tout passe par data-*)
(function () {
var calme = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
document.querySelectorAll('.nn-themes-nyxar').forEach(function (racine) {
// 1. Menu sticky : l'en-tête se compacte après un léger défilement
var entete = racine.querySelector('.nn-themes-nyxar__entete');
function surDefilement() {
if (entete) entete.classList.toggle('est-compact', window.scrollY > 40);
if (calme) return;
// 2. Parallaxe : chaque élément data-nn-parallaxe glisse selon sa vitesse
racine.querySelectorAll('[data-nn-parallaxe]').forEach(function (el) {
var r = el.getBoundingClientRect();
var vitesse = parseFloat(el.getAttribute('data-nn-parallaxe')) || 0.15;
var decalage = (r.top + r.height / 2 - window.innerHeight / 2) * vitesse;
el.style.transform = 'translate3d(0,' + (-decalage).toFixed(1) + 'px,0)';
});
}
window.addEventListener('scroll', surDefilement, { passive: true });
surDefilement();
// 3. Apparition au défilement + 4. compteurs déclenchés à l'apparition
function animerCompteur(el) {
var cible = parseFloat(el.getAttribute('data-nn-compteur')) || 0;
if (calme) { el.textContent = cible; return; }
var debut = null;
function pas(t) {
if (!debut) debut = t;
var p = Math.min((t - debut) / 1400, 1);
// Courbe douce en fin d'animation
el.textContent = Math.round(cible * (1 - Math.pow(1 - p, 3)));
if (p < 1) requestAnimationFrame(pas);
}
requestAnimationFrame(pas);
}
var cibles = racine.querySelectorAll('[data-nn-apparition],[data-nn-compteur]');
if ('IntersectionObserver' in window) {
var obs = new IntersectionObserver(function (entrees) {
entrees.forEach(function (e) {
if (!e.isIntersecting) return;
e.target.classList.add('est-visible');
if (e.target.hasAttribute('data-nn-compteur')) animerCompteur(e.target);
obs.unobserve(e.target);
});
}, { threshold: 0.2 });
cibles.forEach(function (el) { obs.observe(el); });
} else {
cibles.forEach(function (el) { el.classList.add('est-visible'); if (el.hasAttribute('data-nn-compteur')) animerCompteur(el); });
}
if (calme) return;
// 5. Spotlight : la lueur suit le pointeur
racine.addEventListener('pointermove', function (e) {
var r = racine.getBoundingClientRect();
racine.style.setProperty('--nn-x', (e.clientX - r.left) + 'px');
racine.style.setProperty('--nn-y', (e.clientY - r.top) + 'px');
});
// 6. Inclinaison 3D des cartes produits
racine.querySelectorAll('[data-nn-inclinaison]').forEach(function (carte) {
var force = parseFloat(carte.getAttribute('data-nn-inclinaison')) || 8;
carte.addEventListener('pointermove', function (e) {
var r = carte.getBoundingClientRect();
var x = (e.clientX - r.left) / r.width - 0.5;
var y = (e.clientY - r.top) / r.height - 0.5;
carte.style.transform = 'perspective(800px) rotateX(' + (-y * force) + 'deg) rotateY(' + (x * force) + 'deg)';
});
carte.addEventListener('pointerleave', function () { carte.style.transform = ''; });
});
});
// 7. Carrousel fluide : flèches qui font défiler d'une carte
document.querySelectorAll('.nn-themes-nyxar [data-nn-carrousel]').forEach(function (piste) {
var bloc = piste.parentNode;
bloc.querySelectorAll('[data-nn-sens]').forEach(function (b) {
b.addEventListener('click', function () {
var carte = piste.firstElementChild;
var pas = carte ? carte.getBoundingClientRect().width + 16 : 300;
piste.scrollBy({ left: pas * parseInt(b.getAttribute('data-nn-sens'), 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 Nyxar » (Thèmes complets)
Description : Thème complet gaming violet néon et noir profond, lignes de balayage, glow au curseur, cartes en relief 3D et bandeau défilant rapide.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/themes-nyxar
Fichier : nahnah-themes-nyxar.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-nyxar.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-nyxar ».
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-nyxar).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-nyxar ».
- 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-nyxar 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.