🎨 Thèmes completsGratuit · 0 NahnahPar NAHNAH
Thème Sport turquoise
Dynamique et frais : héros chrono sprint, guide des tailles interactif, carrousel produits snap, compte à rebours barre, footer magnétique.
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-sport-turquoise.liquid (Liquid, CSS et JS inclus).
<div class="nn-theme-compose" data-theme="theme-sport-turquoise">
<!-- 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-chrono-sprint -->
<section class="nn-cs">
<div class="nn-cs__texte">
<span class="nn-cs__chrono">00:00.<b class="nn-cs__ms">00</b></span>
<h1><span>{{ section.settings.titre1 | default: "Bouge plus," }}</span><span>{{ section.settings.titre2 | default: "vis mieux." }}</span></h1>
<div class="nn-cs__stats"><div><b data-cible="12">0</b><small>km/semaine en moyenne</small></div><div><b data-cible="98">0</b><small>% de clients satisfaits</small></div><div><b data-cible="48">0</b><small>h pour te livrer</small></div></div>
<a class="nn-cs__btn" href="{{ section.settings.lien | default: '/collections/all' }}">{{ section.settings.bouton | default: "Je m'équipe" }} →</a>
</div>
<div class="nn-cs__photo"><img src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=1000&q=80" alt="Chaussure de running" loading="lazy"><span class="nn-cs__trainee"></span></div>
</section>
<!-- Section : carrousel-produits-snap -->
<section class="nn-cs"><div class="nn-cs__tete"><h2>{{ section.settings.titre }}</h2><div><button class="nn-cs__fl" data-dir="-1" aria-label="Précédent">←</button><button class="nn-cs__fl" data-dir="1" aria-label="Suivant">→</button></div></div>
<div class="nn-cs__piste">{% for product in section.settings.collection.products limit: 12 %}<a class="nn-cs__carte" href="{{ product.url }}">{% if product.featured_image %}{{ product.featured_image | image_url: width: 600 | image_tag: loading: 'lazy' }}{% else %}{{ 'product-1' | placeholder_svg_tag }}{% endif %}<b>{{ product.title }}</b><span>{{ product.price | money }}</span></a>{% else %}{% for i in (1..6) %}<div class="nn-cs__carte">{{ 'product-1' | placeholder_svg_tag }}<b>Produit exemple</b><span>29,00 €</span></div>{% endfor %}{% endfor %}</div>
<div class="nn-cs__barre"><i></i></div></section>
<!-- Section : fiche-guide-taille-interactif -->
<section class="nn-gt">
<div class="nn-gt__carte">
<h2>{{ section.settings.titre | default: "Trouve ta taille en 10 secondes" }}</h2>
<label>Ta pointure habituelle : <b class="nn-gt__val">42</b><input type="range" min="36" max="47" value="42" class="nn-gt__pointure"></label>
<div class="nn-gt__foulee"><span>Ton pied :</span><button data-ajust="-0.5">Fin</button><button data-ajust="0" class="est-actif">Normal</button><button data-ajust="0.5">Large</button></div>
<div class="nn-gt__resultat"><small>Taille conseillée</small><strong class="nn-gt__taille">42</strong><div class="nn-gt__jauge"><span></span></div><small class="nn-gt__conf">94 % des clients avec ce profil l'ont gardée</small></div>
</div>
</section>
<!-- Section : compte-a-rebours-barre -->
<section class="nn-cd nn-cd--barre" 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-magnetique -->
<footer class="nn-fm nn-fm--magnetique" style="--a:{{ section.settings.accent }}">
<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 Sport turquoise","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-chrono-sprint */
.nn-cs{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:64px 6%;background:#fff;color:#0d1b2a;font-family:Inter,sans-serif;overflow:hidden}
.nn-cs__chrono{display:inline-block;font-family:"Barlow Condensed",monospace;font-size:22px;font-weight:700;background:#0d1b2a;color:#00b8a9;padding:6px 14px;border-radius:8px;margin-bottom:16px;font-variant-numeric:tabular-nums}
.nn-cs h1{font-family:"Barlow Condensed",sans-serif;font-style:italic;text-transform:uppercase;font-size:clamp(46px,7vw,96px);line-height:.9;margin:0 0 26px}
.nn-cs h1 span{display:block;animation:nnCsEntre .7s cubic-bezier(.2,.9,.3,1.2) both}
.nn-cs h1 span:nth-child(2){color:#00b8a9;animation-delay:.18s}
@keyframes nnCsEntre{from{transform:translateX(-120%) skewX(-20deg);opacity:0;text-shadow:-40px 0 0 rgba(0,184,169,.3)}to{transform:none;opacity:1}}
.nn-cs__stats{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.nn-cs__stats b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:40px;color:#ff6b6b}
.nn-cs__stats small{font-size:13px;opacity:.7}
.nn-cs__btn{display:inline-block;background:#00b8a9;color:#fff;padding:16px 30px;border-radius:14px;font-weight:800;text-decoration:none;transform:skewX(-8deg);transition:transform .2s}
.nn-cs__btn:hover{transform:skewX(-8deg) translateX(6px)}
.nn-cs__photo{position:relative}
.nn-cs__photo img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:28px;transform:rotate(-6deg);box-shadow:0 30px 60px rgba(13,27,42,.2)}
.nn-cs__trainee{position:absolute;top:40%;left:-30%;width:60%;height:14px;border-radius:999px;background:linear-gradient(90deg,transparent,#00b8a9);animation:nnCsTrainee 1.6s ease-in-out infinite}
@keyframes nnCsTrainee{0%{transform:translateX(-40px);opacity:0}50%{opacity:1}100%{transform:translateX(60px);opacity:0}}
@media(max-width:760px){.nn-cs{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.nn-cs *{animation:none!important}}
/* carrousel-produits-snap */
.nn-cs{padding:50px 5vw;background:#ffffff}
.nn-cs__tete{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.nn-cs__tete h2{margin:0;font-size:clamp(26px,3.5vw,40px);color:#111111}
.nn-cs__fl{width:46px;height:46px;border-radius:50%;border:1px solid #e4e4e7;background:#ffffff;color:#111111;font-size:18px;cursor:pointer;margin-left:8px;transition:background .2s,color .2s}
.nn-cs__fl:hover{background:#111111;color:#ffffff}
.nn-cs__piste{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:6px 0 14px}
.nn-cs__piste::-webkit-scrollbar{display:none}
.nn-cs__carte{flex:0 0 260px;scroll-snap-align:start;text-decoration:none;color:#111111;transition:transform .3s}
.nn-cs__carte:hover{transform:translateY(-6px)}
.nn-cs__carte img,.nn-cs__carte svg{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;background:#f4f4f5}
.nn-cs__carte b{display:block;margin-top:10px}.nn-cs__carte span{color:#52525b}
.nn-cs__barre{height:3px;background:#f4f4f5;border-radius:9px;overflow:hidden}
.nn-cs__barre i{display:block;height:100%;width:20%;background:#111111;transition:width .2s}
/* fiche-guide-taille-interactif */
.nn-gt{padding:64px 6%;background:#f1f7f8;font-family:Inter,sans-serif;color:#0d1b2a}
.nn-gt__carte{max-width:620px;margin:0 auto;background:#fff;border-radius:22px;padding:34px;box-shadow:0 20px 50px rgba(13,27,42,.08)}
.nn-gt h2{font-family:"Barlow Condensed",sans-serif;font-size:34px;text-transform:uppercase;font-style:italic;margin:0 0 24px}
.nn-gt label{display:block;font-weight:600;margin-bottom:20px}
.nn-gt input[type=range]{width:100%;margin-top:12px;accent-color:#00b8a9}
.nn-gt__foulee{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:24px;font-weight:600}
.nn-gt__foulee button{border:2px solid #d9e8ea;background:#fff;padding:9px 16px;border-radius:999px;cursor:pointer;font-weight:700}
.nn-gt__foulee button.est-actif{border-color:#00b8a9;background:#00b8a9;color:#fff}
.nn-gt__resultat{text-align:center;background:#0d1b2a;color:#fff;border-radius:18px;padding:22px}
.nn-gt__taille{display:block;font-family:"Barlow Condensed",sans-serif;font-size:64px;color:#00b8a9;line-height:1;margin:6px 0;transition:transform .25s}
.nn-gt__taille.pop{transform:scale(1.2)}
.nn-gt__jauge{height:8px;background:rgba(255,255,255,.15);border-radius:999px;margin:10px auto;max-width:260px;overflow:hidden}
.nn-gt__jauge span{display:block;height:100%;width:94%;background:#00b8a9;transition:width .4s}
/* compte-a-rebours-barre */
.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--barre{padding:14px 5vw}.nn-cd--barre .nn-cd__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;max-width:none}
.nn-cd--barre h2{font-size:16px;margin:0}.nn-cd--barre .nn-cd__sur,.nn-cd--barre .nn-cd__note{display:none}
.nn-cd--barre .nn-cd__compteur{margin:0;gap:6px}.nn-cd--barre .nn-cd__compteur div{min-width:0;flex-direction:row;gap:2px}.nn-cd--barre .nn-cd__compteur b{font-size:18px}.nn-cd--barre .nn-cd__compteur span{font-size:11px;margin:0}
.nn-cd--barre .nn-cd__btn{padding:8px 16px;font-size:14px}
.nn-cd--barre::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:calc(var(--prog,1)*100%);background:var(--a);transition:width 1s linear}
/* footer-magnetique */
.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--magnetique{background:#fafaf9;color:#1c1917}.nn-fm--magnetique .nn-fm__liens a{display:inline-block;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
{% endstylesheet %}
{% javascript %}
/* header-mega-menu */
// CSS seul (survol + focus clavier)
/* heros-chrono-sprint */
document.querySelectorAll('.nn-cs').forEach(function(s){var ms=s.querySelector('.nn-cs__ms'),c=s.querySelector('.nn-cs__chrono'),d=Date.now();setInterval(function(){var t=(Date.now()-d)/1000;c.firstChild.nodeValue=String(Math.floor(t/60)).padStart(2,'0')+':'+String(Math.floor(t%60)).padStart(2,'0')+'.';ms.textContent=String(Math.floor((t*100)%100)).padStart(2,'0');},50);s.querySelectorAll('[data-cible]').forEach(function(b){var cible=+b.dataset.cible,n=0,i=setInterval(function(){n++;b.textContent=n;if(n>=cible)clearInterval(i);},1400/cible);});});
/* carrousel-produits-snap */
// Carrousel : flèches et barre de progression
document.querySelectorAll('.nn-cs').forEach(function(s){var p=s.querySelector('.nn-cs__piste'),b=s.querySelector('.nn-cs__barre i');
s.querySelectorAll('.nn-cs__fl').forEach(function(f){f.onclick=function(){p.scrollBy({left:+f.dataset.dir*p.clientWidth*.8});};});
function maj(){var m=p.scrollWidth-p.clientWidth;b.style.width=(m>0?20+80*p.scrollLeft/m:100)+'%';}p.addEventListener('scroll',maj,{passive:true});maj();});
/* fiche-guide-taille-interactif */
document.querySelectorAll('.nn-gt').forEach(function(s){var r=s.querySelector('.nn-gt__pointure'),v=s.querySelector('.nn-gt__val'),t=s.querySelector('.nn-gt__taille'),j=s.querySelector('.nn-gt__jauge span'),c=s.querySelector('.nn-gt__conf'),a=0;function maj(){var p=+r.value;v.textContent=p;var tl=p+a;t.textContent=String(tl).replace('.',',');var conf=a===0?94:88;j.style.width=conf+'%';c.textContent=conf+' % des clients avec ce profil l\'ont gardée';t.classList.add('pop');setTimeout(function(){t.classList.remove('pop')},250);}r.addEventListener('input',maj);s.querySelectorAll('[data-ajust]').forEach(function(b){b.addEventListener('click',function(){s.querySelectorAll('[data-ajust]').forEach(function(x){x.classList.remove('est-actif')});b.classList.add('est-actif');a=+b.dataset.ajust;maj();});});});
/* compte-a-rebours-barre */
// 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-magnetique */
// Liens magnétiques : suivent légèrement le curseur
document.querySelectorAll('.nn-fm--magnetique .nn-fm__liens a').forEach(function(a){a.addEventListener('mousemove',function(e){var r=a.getBoundingClientRect();a.style.transform='translate('+(e.clientX-r.left-r.width/2)*.35+'px,'+(e.clientY-r.top-r.height/2)*.5+'px)';});a.addEventListener('mouseleave',function(){a.style.transform='';});});
{% 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 Sport turquoise » (Thèmes complets)
Description : Dynamique et frais : héros chrono sprint, guide des tailles interactif, carrousel produits snap, compte à rebours barre, footer magnétique.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/theme-sport-turquoise
Fichier : nahnah-theme-sport-turquoise.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-sport-turquoise.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-sport-turquoise ».
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-sport-turquoise).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-sport-turquoise ».
- 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-sport-turquoise 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.