🎨 Thèmes completsGratuit · 0 NahnahPar NAHNAH
Thème Asphalte
Un thème brut noir et vert acide aux titres géants et aux cartes qui s'inclinent, taillé pour les drops streetwear.
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-asphalte.liquid (Liquid, CSS et JS inclus).
{%- comment -%} NAHNAH AI · Thème Asphalte {%- endcomment -%}
<div class="nn-themes-asphalte" 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: 'Archivo Black','Impact',sans-serif; --nn-font2: 'Space Grotesk',system-ui,sans-serif; --nn-vitesse: {{ section.settings.vitesse }}s;">
<header class="nn-themes-asphalte__entete">
<a class="nn-themes-asphalte__logo" href="{{ routes.root_url }}">{{ shop.name | escape }}</a>
<nav class="nn-themes-asphalte__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-asphalte__panier" href="{{ routes.cart_url }}">Panier ({{ cart.item_count }})</a>
</header>
<section class="nn-themes-asphalte__hero">
<div class="nn-themes-asphalte__spot" aria-hidden="true"></div>
<div class="nn-themes-asphalte__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-asphalte__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-asphalte__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-asphalte__bandeau" aria-label="{{ section.settings.bandeau | escape }}"><div class="nn-themes-asphalte__piste" aria-hidden="true">{%- for i in (1..4) -%}<span>{{ section.settings.bandeau | escape }}</span>{%- endfor -%}</div></div>
{%- endif -%}
<section class="nn-themes-asphalte__bloc">
<h2 class="nn-themes-asphalte__titre-section" data-nn-reveal>{{ section.settings.titre_collections | escape }}</h2>
<div class="nn-themes-asphalte__collections">
{%- for c in section.settings.collections -%}
<a class="nn-themes-asphalte__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-asphalte__collection" data-nn-reveal>{{ 'collection-' | append: i | placeholder_svg_tag }}<span>Choisis tes collections</span></div>{%- endfor -%}
{%- endfor -%}
</div>
</section>
<section class="nn-themes-asphalte__bloc">
<h2 class="nn-themes-asphalte__titre-section" data-nn-reveal>{{ section.settings.titre_produits | escape }}</h2>
<div class="nn-themes-asphalte__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-asphalte__carrousel">
{%- for p in section.settings.collection.products limit: section.settings.nb_produits -%}
<a class="nn-themes-asphalte__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-asphalte__carte-info"><span>{{ p.title | escape }}</span><strong>{{ p.price | money }}</strong></div></a>
{%- else -%}
{%- for i in (1..4) -%}<div class="nn-themes-asphalte__carte">{{ 'product-' | append: i | placeholder_svg_tag }}<div class="nn-themes-asphalte__carte-info"><span>Choisis une collection vedette</span></div></div>{%- endfor -%}
{%- endfor -%}
</div>
</section>
<section class="nn-themes-asphalte__bloc nn-themes-asphalte__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-asphalte__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-asphalte__bloc nn-themes-asphalte__histoire">
<div class="nn-themes-asphalte__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-asphalte__titre-section">{{ section.settings.titre_histoire | escape }}</h2><div class="rte">{{ section.settings.histoire }}</div></div>
</section>
<section class="nn-themes-asphalte__bloc">
<h2 class="nn-themes-asphalte__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-asphalte__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-asphalte__vide">Ajoute de vrais avis clients avec le bloc « Avis client ».</p>
{%- endif -%}
</section>
<section class="nn-themes-asphalte__bloc nn-themes-asphalte__faq">
<h2 class="nn-themes-asphalte__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-asphalte__pied">
<div class="nn-themes-asphalte__pied-in">
<div><p class="nn-themes-asphalte__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-asphalte__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 Asphalte","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":"#0B0B0C"},{"type":"color","id":"couleur_surface","label":"Surfaces","default":"#17171A"},{"type":"color","id":"couleur_texte","label":"Texte","default":"#F4F4F0"},{"type":"color","id":"couleur_accent","label":"Accent","default":"#C6FF3D"},{"type":"color","id":"couleur_accent2","label":"Accent secondaire","default":"#FF3D7F"},{"type":"header","content":"Héros"},{"type":"text","id":"titre","label":"Titre","default":"LE DROP EST LÀ"},{"type":"textarea","id":"texte","label":"Texte","default":"Pièces en série limitée, coupes amples et détails brodés. Quand c'est parti, c'est parti."},{"type":"text","id":"bouton","label":"Bouton","default":"Shop le drop"},{"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":"NOUVEAU DROP · SÉRIE LIMITÉE · LIVRAISON SUIVIE · RETOURS SIMPLES"},{"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":100},{"type":"text","id":"legende_1","label":"Légende 1","default":"pièces par modèle"},{"type":"number","id":"chiffre_2","label":"Chiffre 2","default":4},{"type":"text","id":"legende_2","label":"Légende 2","default":"coloris"},{"type":"number","id":"chiffre_3","label":"Chiffre 3","default":3},{"type":"text","id":"legende_3","label":"Légende 3","default":"tailles amples"},{"type":"header","content":"Histoire"},{"type":"text","id":"titre_histoire","label":"Titre","default":"La rue d'abord"},{"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 Asphalte","blocks":[{"type":"faq","settings":{"question":"Comment choisir ma taille ?","reponse":"<p>À remplacer : renvoie vers ton guide des tailles.</p>"}},{"type":"faq","settings":{"question":"Le drop sera-t-il réédité ?","reponse":"<p>À remplacer : explique ta politique de réassort.</p>"}}]}]}
{% endschema %}
{% stylesheet %}
/* NAHNAH AI · Thème Asphalte : direction artistique streetwear */
.nn-themes-asphalte{background:var(--nn-fond);color:var(--nn-texte);font-family:var(--nn-font2);overflow:hidden;position:relative}
.nn-themes-asphalte a{color:inherit;text-decoration:none}
.nn-themes-asphalte h1,.nn-themes-asphalte h2,.nn-themes-asphalte h3{font-family:var(--nn-font);margin:0}
.nn-themes-asphalte__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-asphalte__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-asphalte__logo{font-family:var(--nn-font);font-size:22px}
.nn-themes-asphalte__nav{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.nn-themes-asphalte__nav a{opacity:.75;transition:opacity .2s}.nn-themes-asphalte__nav a:hover{opacity:1}
.nn-themes-asphalte__panier{padding:8px 14px;border-radius:var(--nn-r);background:var(--nn-texte);color:var(--nn-fond)!important;font-size:14px}
.nn-themes-asphalte__hero{position:relative;min-height:88vh;display:grid;align-items:center;padding:40px 16px 60px}
.nn-themes-asphalte__hero-in{position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%;display:grid;gap:32px;align-items:center}
.nn-themes-asphalte h1{font-size:clamp(40px,8vw,96px);line-height:1}
.nn-themes-asphalte__hero p{max-width:48ch;line-height:1.7;opacity:.8;margin:20px 0 28px}
.nn-themes-asphalte__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-asphalte__hero-forme img,.nn-themes-asphalte__hero-forme svg{width:100%;height:100%;object-fit:cover}
.nn-themes-asphalte__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-asphalte__bouton{display:inline-block;padding:15px 28px;background:var(--nn-accent);color:#fff!important;font-weight:600;transition:transform .25s,background .25s}
.nn-themes-asphalte__bouton:hover{transform:translateY(-2px)}
.nn-themes-asphalte__bandeau{overflow:hidden;white-space:nowrap;padding:14px 0;font-size:18px}
.nn-themes-asphalte__piste{display:inline-flex;gap:48px;padding-right:48px;animation:nn-themes-asphalte-defile var(--nn-vitesse,30s) linear infinite}
@keyframes nn-themes-asphalte-defile{to{transform:translateX(-50%)}}
.nn-themes-asphalte__bloc{max-width:1200px;margin:0 auto;padding:72px 16px}
.nn-themes-asphalte__titre-section{font-size:clamp(28px,5vw,52px);margin-bottom:32px}
.nn-themes-asphalte__collections{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.nn-themes-asphalte__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-asphalte__collection img,.nn-themes-asphalte__collection svg{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.nn-themes-asphalte__collection:hover img{transform:scale(1.05)}
.nn-themes-asphalte__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-asphalte__carrousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:12px;scrollbar-width:thin}
.nn-themes-asphalte__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-asphalte__carte img,.nn-themes-asphalte__carte svg{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.nn-themes-asphalte__carte-info{display:flex;justify-content:space-between;gap:10px;padding:14px;font-size:15px}
.nn-themes-asphalte__fleches{display:flex;gap:8px;justify-content:flex-end;margin-bottom:16px}
.nn-themes-asphalte__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-asphalte__chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:24px;text-align:center}
.nn-themes-asphalte__chiffre strong{display:block;font-family:var(--nn-font);font-size:clamp(44px,7vw,80px);line-height:1}
.nn-themes-asphalte__chiffre span{opacity:.7;font-size:14px}
.nn-themes-asphalte__histoire{display:grid;gap:32px;align-items:center}
.nn-themes-asphalte__histoire-img{aspect-ratio:1;border-radius:var(--nn-r);overflow:hidden;background:linear-gradient(45deg,var(--nn-accent2),var(--nn-accent))}
.nn-themes-asphalte__histoire-img img,.nn-themes-asphalte__histoire-img svg{width:100%;height:100%;object-fit:cover}
.nn-themes-asphalte__histoire .rte{line-height:1.8;opacity:.85}
.nn-themes-asphalte__avis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.nn-themes-asphalte__avis figure{margin:0;padding:24px;background:var(--nn-surface);border-radius:var(--nn-r)}
.nn-themes-asphalte__avis blockquote{margin:0 0 14px;line-height:1.7}
.nn-themes-asphalte__vide{padding:24px;border:1px dashed currentColor;border-radius:var(--nn-r);opacity:.6;text-align:center}
.nn-themes-asphalte__faq details{border-bottom:1px solid color-mix(in srgb,var(--nn-texte) 18%,transparent);padding:18px 0}
.nn-themes-asphalte__faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.nn-themes-asphalte__faq summary::after{content:"+";transition:transform .3s}
.nn-themes-asphalte__faq details[open] summary::after{transform:rotate(45deg)}
.nn-themes-asphalte__faq p{margin:12px 0 0;line-height:1.7;opacity:.8}
.nn-themes-asphalte__pied{padding:48px 16px;border-top:1px solid color-mix(in srgb,var(--nn-texte) 14%,transparent)}
.nn-themes-asphalte__pied-in{max-width:1200px;margin:0 auto;display:grid;gap:24px}
.nn-themes-asphalte__pied form{display:flex;gap:8px;flex-wrap:wrap}
.nn-themes-asphalte__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-asphalte__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-asphalte [data-nn-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.nn-themes-asphalte [data-nn-reveal].est-visible{opacity:1;transform:none}
@media (min-width:750px){.nn-themes-asphalte__hero-in{grid-template-columns:1.2fr .8fr}.nn-themes-asphalte__histoire{grid-template-columns:1fr 1fr}.nn-themes-asphalte__pied-in{grid-template-columns:1fr 1fr;align-items:center}.nn-themes-asphalte__carte{flex-basis:calc(25% - 12px)}}
@media (prefers-reduced-motion: reduce){.nn-themes-asphalte [data-nn-reveal]{opacity:1;transform:none;transition:none}.nn-themes-asphalte__piste{animation:none}.nn-themes-asphalte__carte,.nn-themes-asphalte__collection img,.nn-themes-asphalte__hero-forme{transition:none;transform:none!important}.nn-themes-asphalte__carrousel{scroll-behavior:auto}}
.nn-themes-asphalte{--nn-r:0}
.nn-themes-asphalte__hero{background:linear-gradient(transparent 0 0),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 80px),var(--nn-fond)}
.nn-themes-asphalte h1,.nn-themes-asphalte h2{text-transform:uppercase;letter-spacing:-.01em;line-height:.9}
.nn-themes-asphalte h1{font-size:clamp(56px,13vw,180px)}
.nn-themes-asphalte__hero-forme{clip-path:polygon(10% 0,100% 0,90% 100%,0 100%)}
.nn-themes-asphalte__bouton{border-radius:0;color:#0B0B0C!important;text-transform:uppercase;font-weight:800}
.nn-themes-asphalte__bandeau{background:var(--nn-accent);color:#0B0B0C;font-family:var(--nn-font);text-transform:uppercase;transform:rotate(-2deg);margin:20px -10px}
.nn-themes-asphalte__carte{border:2px solid var(--nn-texte)}
.nn-themes-asphalte__carte:hover{box-shadow:8px 8px 0 var(--nn-accent2)}
{% endstylesheet %}
{% javascript %}
// NAHNAH AI · Thème Asphalte : effets (apparition, parallaxe, inclinaison 3D, spotlight, compteurs, carrousel, en-tête sticky)
(function () {
var racines = document.querySelectorAll('.nn-themes-asphalte');
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-asphalte__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-asphalte__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-asphalte__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-asphalte__carrousel');
if (!piste) return;
r.querySelectorAll('[data-nn-dir]').forEach(function (b) {
b.addEventListener('click', function () {
var carte = piste.querySelector('.nn-themes-asphalte__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 Asphalte » (Thèmes complets)
Description : Un thème brut noir et vert acide aux titres géants et aux cartes qui s'inclinent, taillé pour les drops streetwear.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/themes-asphalte
Fichier : nahnah-themes-asphalte.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-asphalte.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-asphalte ».
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-asphalte).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-asphalte ».
- 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-asphalte 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.