🎨 Thèmes completsGratuit · 0 NahnahPar NAHNAH
Thème Poke Hawaï
Healthy frais et lumineux : héros bol qui se remplit et vagues, poke composé avec anneaux nutritionnels, carrousel catégories rondes, avis cercle portraits, footer aurore.
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/theme-poke-hawai.liquid (Liquid, CSS et JS inclus).
<div class="nn-theme-compose" data-theme="theme-poke-hawai">
<!-- Section : header-ilot-flottant -->
<header class="nn-hi"><a class="nn-hi__logo" href="/">{{ shop.name }}</a><nav>{% for l in linklists[section.settings.menu].links %}<a href="{{ l.url }}">{{ l.title }}</a>{% endfor %}</nav><a class="nn-hi__cta" href="{{ section.settings.lien }}">{{ section.settings.bouton }}</a></header>
<!-- Section : heros-poke-vagues -->
<section class="nn-pk">
<div class="nn-pk__texte"><span>{{ section.settings.sur | default: "Healthy · Frais · Hawaïen" }}</span><h1>{{ section.settings.titre | default: "Ton bol de soleil" }}</h1><a href="{{ section.settings.lien | default: '/collections/all' }}" class="nn-pk__btn">{{ section.settings.bouton | default: "Composer mon poke" }}</a></div>
<div class="nn-pk__bol"><i style="--a:0deg;--c:#ff7f50">●</i><i style="--a:60deg;--c:#2ec4b6">●</i><i style="--a:120deg;--c:#ffd166">●</i><i style="--a:180deg;--c:#8ac926">●</i><i style="--a:240deg;--c:#e63946">●</i><i style="--a:300deg;--c:#3a2d5c">●</i><b></b></div>
<svg class="nn-pk__vagues" viewBox="0 0 1440 120" preserveAspectRatio="none"><path d="M0 60 Q180 10 360 60 T720 60 T1080 60 T1440 60 V120 H0Z"/><path class="v2" d="M0 80 Q180 40 360 80 T720 80 T1080 80 T1440 80 V120 H0Z"/></svg>
</section>
<!-- Section : fiche-poke-nutrition -->
<section class="nn-pn">
<div class="nn-pn__anneaux"><div class="nn-pn__anneau" data-k="kcal"><svg viewBox="0 0 120 120"><circle cx="60" cy="60" r="50"/><circle class="v" cx="60" cy="60" r="50"/></svg><b>0</b><small>kcal</small></div><div class="nn-pn__anneau" data-k="prot"><svg viewBox="0 0 120 120"><circle cx="60" cy="60" r="50"/><circle class="v" cx="60" cy="60" r="50"/></svg><b>0</b><small>g protéines</small></div></div>
<div class="nn-pn__infos"><h2>{{ section.settings.titre | default: "Compose ton poke" }}</h2>
<p>Base</p><div class="nn-pn__opts" data-g="base" data-unique><button data-k="200" data-pr="4" data-p="0" class="est-actif">Riz vinaigré</button><button data-k="120" data-pr="5" data-p="0">Quinoa</button><button data-k="30" data-pr="2" data-p="0">Salade</button></div>
<p>Protéine</p><div class="nn-pn__opts" data-g="prot" data-unique><button data-k="180" data-pr="22" data-p="11" class="est-actif">Saumon</button><button data-k="150" data-pr="26" data-p="12">Thon</button><button data-k="140" data-pr="15" data-p="10">Tofu</button></div>
<p>Toppings</p><div class="nn-pn__opts" data-g="top"><button data-k="80" data-pr="1" data-p="1">Avocat</button><button data-k="20" data-pr="1" data-p="0.5">Edamame</button><button data-k="15" data-pr="0" data-p="0.5">Mangue</button><button data-k="60" data-pr="0" data-p="0.5">Sauce sésame</button></div>
<p class="nn-pn__prix">Total : <b>11,00 €</b></p><a class="nn-pn__btn">Ajouter à ma commande</a></div>
</section>
<!-- Section : carrousel-categories-rondes -->
<section class="nn-bul"><div class="nn-bul__liste">{% for block in section.blocks %}<a class="nn-bul__item" href="{{ block.settings.lien }}"><span class="nn-bul__anneau"><span class="nn-bul__img">{% if block.settings.image %}{{ block.settings.image | image_url: width: 200 | image_tag: loading: 'lazy' }}{% else %}{{ 'collection-1' | placeholder_svg_tag }}{% endif %}</span></span><b>{{ block.settings.nom }}</b></a>{% endfor %}</div></section>
<!-- Section : avis-cercle-portraits -->
<section class="nn-cer"><div class="nn-cer__zone">{% for block in section.blocks limit: 8 %}<div class="nn-cer__port" data-texte="{{ block.settings.texte | escape }}" data-nom="{{ block.settings.nom | escape }}">{% if block.settings.photo %}{{ block.settings.photo | image_url: width: 160 | image_tag }}{% else %}<span>{{ block.settings.nom | slice: 0 }}</span>{% endif %}</div>{% endfor %}
<div class="nn-cer__centre"><p>★★★★★</p><blockquote></blockquote><b></b></div></div></section>
<!-- Section : footer-aurore -->
<footer class="nn-fm nn-fm--aurore" style="--a:{{ section.settings.accent }}"><div class="nn-fm__aur"><i></i><i></i><i></i></div>
<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 Poke Hawaï","settings":[]}{% endschema %}
{% stylesheet %}
/* header-ilot-flottant */
.nn-hi{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:26px;padding:10px 12px 10px 22px;border-radius:999px;background:rgba(255,255,255,.7);backdrop-filter:blur(14px);border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 30px rgba(0,0,0,.08);transition:padding .3s,top .3s}
.nn-hi.petit{top:6px;padding:6px 8px 6px 18px}
.nn-hi__logo{font-weight:900;color:#111;text-decoration:none}
.nn-hi nav{display:flex;gap:20px}.nn-hi nav a{color:#3f3f46;text-decoration:none;font-size:14px}.nn-hi nav a:hover{color:#111}
.nn-hi__cta{background:#111;color:#fff;padding:9px 18px;border-radius:999px;text-decoration:none;font-size:14px}
@media(max-width:749px){.nn-hi nav{display:none}}
/* heros-poke-vagues */
.nn-pk{position:relative;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:40px;min-height:580px;padding:60px 7% 140px;background:#e8fbf7;color:#0b3b3c;font-family:"Outfit","Inter",sans-serif;overflow:hidden}
.nn-pk__texte span{font-size:13px;letter-spacing:.25em;text-transform:uppercase;color:#ff7f50}
.nn-pk h1{font-size:clamp(46px,7vw,100px);font-weight:700;line-height:.95;margin:14px 0 30px}
.nn-pk__btn{display:inline-block;background:#0b3b3c;color:#e8fbf7;padding:16px 34px;border-radius:999px;font-weight:700;text-decoration:none;transition:transform .2s}
.nn-pk__btn:hover{transform:scale(1.05)}
.nn-pk__bol{position:relative;width:min(340px,80vw);aspect-ratio:1;justify-self:center;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 18px #f4efe6,0 30px 50px rgba(11,59,60,.2)}
.nn-pk__bol i{position:absolute;left:50%;top:50%;width:34%;height:34%;margin:-17%;border-radius:50%;background:var(--c);color:transparent;transform:rotate(var(--a)) translateY(-52%) scale(0);animation:nnPkRemplit .6s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:calc(var(--a) / 60deg * .2s)}
@keyframes nnPkRemplit{to{transform:rotate(var(--a)) translateY(-52%) scale(1)}}
.nn-pk__bol b{position:absolute;inset:36%;border-radius:50%;background:#fff;box-shadow:0 0 0 6px #f4efe6}
.nn-pk__vagues{position:absolute;left:0;bottom:0;width:200%;height:120px;fill:#2ec4b6;opacity:.6;animation:nnPkVague 9s linear infinite}
.nn-pk__vagues .v2{fill:#0b3b3c;opacity:.5}
@keyframes nnPkVague{to{transform:translateX(-50%)}}
@media(max-width:760px){.nn-pk{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.nn-pk *{animation:none!important}.nn-pk__bol i{transform:rotate(var(--a)) translateY(-52%)}}
/* fiche-poke-nutrition */
.nn-pn{display:grid;grid-template-columns:1fr 1.3fr;gap:44px;align-items:center;padding:72px 7%;background:#fff;color:#0b3b3c;font-family:"Outfit","Inter",sans-serif}
.nn-pn__anneaux{display:flex;gap:24px;justify-content:center;flex-wrap:wrap}
.nn-pn__anneau{position:relative;width:150px;text-align:center}
.nn-pn__anneau svg{width:150px;transform:rotate(-90deg)}
.nn-pn__anneau circle{fill:none;stroke:#e8fbf7;stroke-width:12}
.nn-pn__anneau .v{stroke:#ff7f50;stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:var(--o,314);transition:stroke-dashoffset .8s cubic-bezier(.3,1.2,.5,1)}
.nn-pn__anneau[data-k="prot"] .v{stroke:#2ec4b6}
.nn-pn__anneau b{position:absolute;top:52px;left:0;right:0;font-size:30px}
.nn-pn__anneau small{display:block;margin-top:4px}
.nn-pn h2{font-size:clamp(28px,4vw,44px);margin:0}
.nn-pn p{margin:16px 0 8px;font-weight:700}
.nn-pn__opts{display:flex;flex-wrap:wrap;gap:8px}
.nn-pn__opts button{border:1.5px solid #bfe9e2;background:#fff;padding:10px 16px;border-radius:999px;cursor:pointer;font-weight:600}
.nn-pn__opts button.est-actif{background:#0b3b3c;color:#fff;border-color:#0b3b3c}
.nn-pn__prix b{font-size:30px;color:#ff7f50}
.nn-pn__btn{display:block;text-align:center;margin-top:14px;background:#ff7f50;color:#fff;padding:16px;border-radius:999px;font-weight:700;cursor:pointer}
@media(max-width:760px){.nn-pn{grid-template-columns:1fr}}
/* carrousel-categories-rondes */
.nn-bul{padding:30px 5vw;background:#ffffff}
.nn-bul__liste{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;justify-content:safe center}
.nn-bul__item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:#111111;font-size:14px}
.nn-bul__anneau{position:relative;width:86px;height:86px;border-radius:50%;padding:3px;overflow:hidden;transition:transform .25s}
.nn-bul__anneau::before{content:"";position:absolute;inset:-50%;background:conic-gradient(#f59e0b,#ec4899,#8b5cf6,#f59e0b);animation:nnBul 4s linear infinite}
.nn-bul__img{position:relative;display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;border:3px solid #ffffff;background:#f4f4f5}
.nn-bul__img img,.nn-bul__img svg{width:100%;height:100%;object-fit:cover}
.nn-bul__item:hover .nn-bul__anneau{transform:scale(1.08)}
@keyframes nnBul{to{transform:rotate(360deg)}}
/* avis-cercle-portraits */
.nn-cer{padding:60px 5vw;background:#0f172a;display:flex;justify-content:center;overflow:hidden}
.nn-cer__zone{position:relative;width:min(460px,90vw);aspect-ratio:1}
.nn-cer__port{position:absolute;left:50%;top:50%;width:70px;height:70px;margin:-35px;border-radius:50%;overflow:hidden;border:3px solid #334155;transition:transform .9s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s;display:flex;align-items:center;justify-content:center;background:#1e293b;color:#ffffff;font-weight:700}
.nn-cer__port img{width:100%;height:100%;object-fit:cover}
.nn-cer__port.actif{border-color:#facc15;box-shadow:0 0 24px rgba(250,204,21,.6)}
.nn-cer__centre{position:absolute;inset:24%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#ffffff;transition:opacity .4s}
.nn-cer__centre p{color:#facc15;margin:0}.nn-cer__centre blockquote{margin:10px 0;font-size:clamp(14px,2vw,18px);line-height:1.4}
.nn-cer__centre.change{opacity:0}
/* footer-aurore */
.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--aurore{background:#030712;color:#f9fafb}.nn-fm__aur i{position:absolute;width:60vw;height:60vw;border-radius:50%;filter:blur(90px);opacity:.45;animation:nnAur 18s ease-in-out infinite alternate}
.nn-fm__aur i:nth-child(1){background:#8b5cf6;left:-20%;top:-40%}.nn-fm__aur i:nth-child(2){background:#06b6d4;right:-20%;top:-30%;animation-delay:-6s}.nn-fm__aur i:nth-child(3){background:#ec4899;left:30%;top:20%;animation-delay:-12s}
@keyframes nnAur{to{transform:translate(15%,20%) scale(1.3)}}
{% endstylesheet %}
{% javascript %}
/* header-ilot-flottant */
// Rétrécit le header au scroll
document.querySelectorAll('.nn-hi').forEach(function(h){addEventListener('scroll',function(){h.classList.toggle('petit',scrollY>40)},{passive:true})});
// Aperçu seulement (html[data-nn-demo], jamais posé en boutique) : l'îlot se resserre puis s'élargit comme au défilement
if(document.documentElement.hasAttribute('data-nn-demo'))setInterval(function(){document.querySelectorAll('.nn-hi').forEach(function(h){h.classList.toggle('petit');});},1800);
/* heros-poke-vagues */
/* Aucun script requis */
/* fiche-poke-nutrition */
document.querySelectorAll('.nn-pn').forEach(function(s){function maj(){var k=0,pr=0,p=0;s.querySelectorAll('.nn-pn__opts .est-actif').forEach(function(b){k+=+b.dataset.k;pr+=+b.dataset.pr;p+=+b.dataset.p;});var a=s.querySelector('[data-k="kcal"]'),q=s.querySelector('[data-k="prot"]');a.querySelector('b').textContent=k;q.querySelector('b').textContent=pr;a.style.setProperty('--o',314-314*Math.min(1,k/800));q.style.setProperty('--o',314-314*Math.min(1,pr/40));s.querySelector('.nn-pn__prix b').textContent=p.toFixed(2).replace('.',',')+' €';}s.querySelectorAll('.nn-pn__opts').forEach(function(g){g.querySelectorAll('button').forEach(function(b){b.addEventListener('click',function(){if(g.hasAttribute('data-unique'))g.querySelectorAll('button').forEach(function(x){x.classList.toggle('est-actif',x===b)});else b.classList.toggle('est-actif');maj();});});});maj();});
/* carrousel-categories-rondes */
// Bulles : CSS seul
/* avis-cercle-portraits */
// Cercle : les portraits tournent, l'avis actif s'affiche au centre
document.querySelectorAll('.nn-cer__zone').forEach(function(z){var p=[].slice.call(z.querySelectorAll('.nn-cer__port')),c=z.querySelector('.nn-cer__centre'),n=p.length,a=0;
function tour(){var R=z.offsetWidth/2-40;p.forEach(function(e,i){var ang=((i-a)/n)*6.283-1.571;e.style.transform='translate('+Math.cos(ang)*R+'px,'+Math.sin(ang)*R+'px)';e.classList.toggle('actif',i===a);});
c.classList.add('change');setTimeout(function(){c.querySelector('blockquote').textContent=p[a].dataset.texte;c.querySelector('b').textContent=p[a].dataset.nom;c.classList.remove('change');},400);}
p.forEach(function(e,i){e.onclick=function(){a=i;tour();};});tour();setInterval(function(){a=(a+1)%n;tour();},4500);});
/* footer-aurore */
// CSS seul
{% 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 Poke Hawaï » (Thèmes complets)
Description : Healthy frais et lumineux : héros bol qui se remplit et vagues, poke composé avec anneaux nutritionnels, carrousel catégories rondes, avis cercle portraits, footer aurore.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/theme-poke-hawai
Fichier : nahnah-theme-poke-hawai.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/theme-poke-hawai.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 « theme-poke-hawai ».
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-poke-hawai).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 « theme-poke-hawai ».
- 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-poke-hawai 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.