🎨 Thèmes completsGratuit · 0 NahnahPar NAHNAH
Thème Streetwear béton
Urbain et brut : bandeau défilant, héros graffiti glitch, grille drop à stock limité, tampon rotatif, footer géant.
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-streetwear-beton.liquid (Liquid, CSS et JS inclus).
<div class="nn-theme-compose" data-theme="theme-streetwear-beton">
<!-- Section : header-annonce-defilante -->
<div class="nn-hb"><div class="nn-hb__band"><div class="nn-hb__piste">{% for i in (1..4) %}<span>{{ section.settings.annonce }}</span>{% endfor %}</div></div><header class="nn-hb__bar"><nav class="nn-hb__g">{% for l in linklists[section.settings.menu].links limit:3 %}<a href="{{ l.url }}">{{ l.title }}</a>{% endfor %}</nav><a class="nn-hb__logo" href="/">{{ shop.name }}</a><div class="nn-hb__d"><a href="/search">Rechercher</a><a href="/cart">Panier ({{ cart.item_count }})</a></div></header></div>
<!-- Section : heros-graffiti-glitch -->
<section class="nn-gg" style="--nn-gg-photo:url('{{ section.settings.photo | default: "https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=1600&q=80" }}')">
<div class="nn-gg__scotch">{{ section.settings.scotch | default: "DROP 07 · ÉDITION LIMITÉE · DROP 07 · ÉDITION LIMITÉE ·" }}</div>
<div class="nn-gg__contenu">
<h1 class="nn-gg__titre" data-texte="{{ section.settings.titre | default: 'LA RUE EST À NOUS' }}">{{ section.settings.titre | default: "LA RUE EST À NOUS" }}</h1>
<p>{{ section.settings.texte | default: "Pièces brodées en séries limitées. Quand c'est parti, c'est parti." }}</p>
<a class="nn-gg__btn" href="{{ section.settings.lien | default: '/collections/all' }}">{{ section.settings.bouton | default: "Voir le drop" }}</a>
</div>
</section>
<!-- Section : fiche-drop-stock-limite -->
<section class="nn-drop">
<div class="nn-drop__tete"><h2>{{ section.settings.titre | default: "Le drop du moment" }}</h2><span class="nn-drop__live"><i></i> <b class="nn-drop__vues">37</b> personnes regardent</span></div>
<div class="nn-drop__grille">
<article class="nn-drop__carte"><img src="https://images.unsplash.com/photo-1560769629-975ec94e6a86?w=700&q=80" alt="Sneaker Blok" loading="lazy"><h3>Sneaker Blok</h3><strong>109,00 €</strong><div class="nn-drop__jauge"><span style="--stock:18%"></span></div><small>Plus que 4 paires</small></article>
<article class="nn-drop__carte nn-drop__carte--epuise"><img src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=700&q=80" alt="Sneaker Gravier" loading="lazy"><h3>Sneaker Gravier</h3><strong>119,00 €</strong><div class="nn-drop__jauge"><span style="--stock:0%"></span></div><small>Revient bientôt</small><em class="nn-drop__tampon">Épuisé</em></article>
<article class="nn-drop__carte"><img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=700&q=80" alt="Lunettes Asphalte" loading="lazy"><h3>Lunettes Asphalte</h3><strong>39,00 €</strong><div class="nn-drop__jauge"><span style="--stock:46%"></span></div><small>Plus que 11 pièces</small></article>
</div>
</section>
<!-- Section : badges-tampon-rotatif -->
{%- comment -%} NAHNAH AI · Tampon à texte circulaire (bibliothèque Sections & effets) {%- endcomment -%}
<div class="nn-badges-tampon-rotatif" style="--nn-mh: {{ section.settings.marge_haut }}px; --nn-mb: {{ section.settings.marge_bas }}px; --nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }}; --nn-d: {{ section.settings.diametre }}px; --nn-duree: {{ section.settings.vitesse }}s; --nn-pos: {{ section.settings.position }};">
<div class="nn-badges-tampon-rotatif__zone">
{%- if section.settings.lien != blank -%}<a class="nn-badges-tampon-rotatif__tampon" href="{{ section.settings.lien }}" aria-label="{{ section.settings.cercle | strip | escape }}" data-nn-demo>{%- else -%}<div class="nn-badges-tampon-rotatif__tampon" role="img" aria-label="{{ section.settings.cercle | strip | escape }}" data-nn-demo>{%- endif -%}
<svg class="nn-badges-tampon-rotatif__svg" viewBox="0 0 200 200" aria-hidden="true" focusable="false">
<defs><path id="nn-cercle-{{ section.id }}" d="M100 100m-76 0a76 76 0 1 1 152 0a76 76 0 1 1-152 0"/></defs>
<circle cx="100" cy="100" r="96" class="nn-badges-tampon-rotatif__fond"/>
<text class="nn-badges-tampon-rotatif__lettres"><textPath href="#nn-cercle-{{ section.id }}" textLength="470">{{ section.settings.cercle | escape }}</textPath></text>
</svg>
<span class="nn-badges-tampon-rotatif__centre" aria-hidden="true">{{ section.settings.centre | escape }}</span>
{%- if section.settings.lien != blank -%}</a>{%- else -%}</div>{%- endif -%}
</div>
</div>
<!-- Section : footer-geant-wordmark -->
<footer class="nn-fg"><div class="nn-fg__haut"><div><h3>{{ section.settings.accroche }}</h3><form class="nn-fg__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" required><button type="submit">→</button></form></div>
{% for block in section.blocks %}<div class="nn-fg__col"><b>{{ block.settings.titre }}</b>{% for l in block.settings.menu.links %}<a href="{{ l.url }}">{{ l.title }}</a>{% endfor %}</div>{% endfor %}</div>
<div class="nn-fg__nom">{{ section.settings.nom | default: shop.name }}</div><p class="nn-fg__bas">© {{ 'now' | date: '%Y' }} {{ shop.name }}</p></footer>
</div>
{% schema %}{"name":"Thème Streetwear béton","settings":[]}{% endschema %}
{% stylesheet %}
/* header-annonce-defilante */
.nn-hb__band{background:#a3e635;color:#111;overflow:hidden;font-size:13px;font-weight:700}
.nn-hb__piste{display:flex;gap:40px;width:max-content;padding:8px 0;animation:nnHb 20s linear infinite}
@keyframes nnHb{to{transform:translateX(-50%)}}
.nn-hb__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:#0a0a0a;color:#fff;padding:18px 5vw}
.nn-hb__bar a{color:#fff;text-decoration:none;font-size:14px}
.nn-hb__g,.nn-hb__d{display:flex;gap:20px}.nn-hb__d{justify-content:flex-end}
.nn-hb__logo{font-size:22px;font-weight:900;letter-spacing:3px;text-transform:uppercase}
@media(max-width:749px){.nn-hb__g{display:none}.nn-hb__bar{grid-template-columns:auto 1fr}}
/* heros-graffiti-glitch */
.nn-gg{position:relative;min-height:560px;display:flex;align-items:flex-end;background:#111 var(--nn-gg-photo) center/cover;color:#fff;overflow:hidden;font-family:Inter,sans-serif}
.nn-gg::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.15))}
.nn-gg__scotch{position:absolute;top:44px;left:-5%;width:110%;background:#ffe11a;color:#111;font-weight:900;letter-spacing:.12em;padding:10px 0;white-space:nowrap;transform:rotate(-3deg);box-shadow:0 6px 18px rgba(0,0,0,.4);animation:nnGgScotch 14s linear infinite;z-index:2}
@keyframes nnGgScotch{to{text-indent:-600px}}
.nn-gg__contenu{position:relative;z-index:1;padding:64px 6%;max-width:900px}
.nn-gg__titre{position:relative;font-family:"Anton",Impact,sans-serif;font-size:clamp(48px,9vw,120px);line-height:.9;margin:0 0 18px;text-transform:uppercase}
.nn-gg__titre::before,.nn-gg__titre::after{content:attr(data-texte);position:absolute;inset:0}
.nn-gg__titre::before{color:#ff2a6d;animation:nnGgGlitch 2.6s infinite steps(2);clip-path:inset(0 0 60% 0)}
.nn-gg__titre::after{color:#00e5ff;animation:nnGgGlitch 3.1s infinite reverse steps(2);clip-path:inset(55% 0 0 0)}
@keyframes nnGgGlitch{0%,88%,100%{transform:none}90%{transform:translate(-4px,2px)}94%{transform:translate(4px,-2px)}}
.nn-gg__contenu p{font-size:18px;opacity:.9;max-width:520px;margin:0 0 26px}
.nn-gg__btn{display:inline-block;background:#fff;color:#111;font-weight:900;text-transform:uppercase;padding:16px 30px;text-decoration:none;transform:rotate(-1.5deg);border:3px solid #111;box-shadow:6px 6px 0 #ffe11a;transition:transform .2s,box-shadow .2s}
.nn-gg__btn:hover{transform:rotate(0) translate(-3px,-3px);box-shadow:10px 10px 0 #ffe11a}
@media(prefers-reduced-motion:reduce){.nn-gg__titre::before,.nn-gg__titre::after,.nn-gg__scotch{animation:none}}
/* fiche-drop-stock-limite */
.nn-drop{background:#d9d9d6;color:#111;padding:64px 6%;font-family:Inter,sans-serif}
.nn-drop__tete{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.nn-drop__tete h2{font-family:"Anton",Impact,sans-serif;font-size:clamp(30px,5vw,52px);text-transform:uppercase;margin:0}
.nn-drop__live{display:flex;align-items:center;gap:8px;font-weight:700;background:#111;color:#fff;padding:8px 14px}
.nn-drop__live i{width:9px;height:9px;border-radius:50%;background:#ff3b30;animation:nnDropPulse 1.2s infinite}
@keyframes nnDropPulse{50%{opacity:.25}}
.nn-drop__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.nn-drop__carte{position:relative;background:#fff;padding:14px;border:3px solid #111;transition:transform .2s,box-shadow .2s}
.nn-drop__carte:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 #111}
.nn-drop__carte img{width:100%;aspect-ratio:1;object-fit:cover;display:block;margin-bottom:12px}
.nn-drop__carte h3{margin:0 0 4px;font-size:17px;text-transform:uppercase}
.nn-drop__jauge{height:8px;background:#e5e5e5;margin:10px 0 6px;overflow:hidden}
.nn-drop__jauge span{display:block;height:100%;width:var(--stock);background:#ff5a1f;animation:nnDropJauge 1.4s ease-out}
@keyframes nnDropJauge{from{width:100%}}
.nn-drop__carte small{font-weight:700;color:#ff5a1f}
.nn-drop__carte--epuise img{filter:grayscale(1);opacity:.6}
.nn-drop__tampon{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%) rotate(-14deg);border:4px solid #ff3b30;color:#ff3b30;font-style:normal;font-weight:900;font-size:30px;text-transform:uppercase;padding:6px 18px;background:rgba(255,255,255,.85)}
@media(max-width:760px){.nn-drop__grille{grid-template-columns:1fr 1fr}}
/* badges-tampon-rotatif */
.nn-badges-tampon-rotatif { padding: var(--nn-mh) 16px var(--nn-mb); background: var(--nn-fond); color: var(--nn-texte); }
.nn-badges-tampon-rotatif__zone { display: flex; justify-content: var(--nn-pos); max-width: 1200px; margin: 0 auto; }
.nn-badges-tampon-rotatif__tampon { position: relative; display: grid; place-items: center; width: var(--nn-d); height: var(--nn-d); color: inherit; text-decoration: none; border-radius: 50%; }
.nn-badges-tampon-rotatif__svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: nn-badges-tampon-rotatif-tourne var(--nn-duree) linear infinite; }
.nn-badges-tampon-rotatif__fond { fill: var(--nn-accent); }
.nn-badges-tampon-rotatif__lettres { fill: var(--nn-texte); font-size: 19px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.nn-badges-tampon-rotatif__centre { position: relative; font-size: calc(var(--nn-d) * 0.28); line-height: 1; transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.nn-badges-tampon-rotatif__tampon:hover .nn-badges-tampon-rotatif__svg { animation-duration: calc(var(--nn-duree) / 3); }
.nn-badges-tampon-rotatif__tampon:hover .nn-badges-tampon-rotatif__centre { transform: scale(1.2) rotate(-12deg); }
.nn-badges-tampon-rotatif__tampon:focus-visible { outline: 2px solid var(--nn-texte); outline-offset: 4px; }
@keyframes nn-badges-tampon-rotatif-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.nn-badges-tampon-rotatif *, .nn-badges-tampon-rotatif *::before, .nn-badges-tampon-rotatif *::after { animation: none !important; transition: none !important; }
}
/* footer-geant-wordmark */
.nn-fg{background:#0a0a0a;color:#ffffff;padding:60px 5vw 20px;overflow:hidden}
.nn-fg__haut{display:grid;grid-template-columns:2fr repeat(auto-fit,minmax(140px,1fr));gap:40px}
.nn-fg h3{font-size:24px;margin:0 0 16px;max-width:380px}
.nn-fg__nl{display:flex;max-width:380px;border-bottom:1px solid #3f3f46}
.nn-fg__nl input{flex:1;background:transparent;border:0;color:#ffffff;padding:12px 0;font-size:16px;outline:none}
.nn-fg__nl button{background:none;border:0;color:#ffffff;font-size:22px;cursor:pointer;transition:transform .2s}
.nn-fg__nl button:hover{transform:translateX(6px)}
.nn-fg__col{display:flex;flex-direction:column;gap:10px}
.nn-fg__col b{color:#a1a1aa;font-size:13px;text-transform:uppercase;letter-spacing:1px}
.nn-fg__col a{color:#ffffff;text-decoration:none;opacity:.85;transition:opacity .2s}.nn-fg__col a:hover{opacity:1}
.nn-fg__nom{font-size:clamp(70px,19vw,300px);font-weight:900;line-height:.85;letter-spacing:-.04em;margin-top:60px;text-align:center;background:linear-gradient(180deg,#ffffff,#3f3f46);-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateY(40%);opacity:0;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity 1.2s}
.nn-fg__nom.vu{transform:none;opacity:1}
.nn-fg__bas{color:#71717a;font-size:13px;text-align:center;margin-top:20px}
{% endstylesheet %}
{% javascript %}
/* header-annonce-defilante */
// Animation CSS seule
/* heros-graffiti-glitch */
/* Aucun script requis */
/* fiche-drop-stock-limite */
document.querySelectorAll('.nn-drop__vues').forEach(function(el){setInterval(function(){var n=parseInt(el.textContent,10)+Math.round(Math.random()*4-2);el.textContent=Math.max(12,Math.min(60,n));},2500);});
/* badges-tampon-rotatif */
/* footer-geant-wordmark */
// Nom géant : se révèle quand il arrive à l'écran
document.querySelectorAll('.nn-fg__nom').forEach(function(n){new IntersectionObserver(function(e,o){if(e[0].isIntersecting){n.classList.add('vu');o.disconnect();}}).observe(n);});
{% 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 Streetwear béton » (Thèmes complets)
Description : Urbain et brut : bandeau défilant, héros graffiti glitch, grille drop à stock limité, tampon rotatif, footer géant.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/theme-streetwear-beton
Fichier : nahnah-theme-streetwear-beton.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-streetwear-beton.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-streetwear-beton ».
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-streetwear-beton).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-streetwear-beton ».
- 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-streetwear-beton 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.