🎨 Thèmes completsGratuit · 0 NahnahPar NAHNAH
Thème Brunch latte
Coffee shop moderne en bento : héros latte art, réservation de table, carrousel cartes empilées, avis capsules, footer bento verre.
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-brunch-latte.liquid (Liquid, CSS et JS inclus).
<div class="nn-theme-compose" data-theme="theme-brunch-latte">
<!-- 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-latte-art -->
<section class="nn-la">
<div class="nn-la__texte"><span>{{ section.settings.sur | default: "Coffee shop & brunch" }}</span><h1>{{ section.settings.titre | default: "Le dimanche, toute la semaine" }}</h1><a href="{{ section.settings.lien | default: '/collections/all' }}" class="nn-la__btn">{{ section.settings.bouton | default: "Réserver un brunch" }}</a></div>
<div class="nn-la__bento">
<div class="nn-la__tasse"><svg viewBox="0 0 200 200"><circle cx="100" cy="100" r="92" fill="#f4ede4"/><circle cx="100" cy="100" r="76" fill="#7a4a2a"/><path class="coeur" d="M100 150 C40 105 60 55 100 85 C140 55 160 105 100 150Z"/></svg><i></i><i></i></div>
<img src="https://images.unsplash.com/photo-1533089860892-a7c6f0a88666?w=600&q=80" alt="Brunch" loading="lazy" style="--d:.3s">
<img src="https://images.unsplash.com/photo-1484723091739-30a097e8f929?w=600&q=80" alt="Pancakes" loading="lazy" style="--d:.5s">
<img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=600&q=80" alt="Café" loading="lazy" style="--d:.7s">
</div>
</section>
<!-- Section : fiche-reservation-table -->
<section class="nn-rt">
<div class="nn-rt__salle"><div class="nn-rt__table"><span class="nn-rt__nb">2</span></div></div>
<div class="nn-rt__infos"><h2>{{ section.settings.titre | default: "Réserve ta table" }}</h2>
<p>Jour</p><div class="nn-rt__jours"></div>
<p>Créneau</p><div class="nn-rt__creneaux"><button>10:00</button><button class="est-actif">11:30</button><button>13:00</button><button>14:30</button></div>
<p>Couverts</p><div class="nn-rt__couverts"><button data-n="-1">−</button><b>2</b><button data-n="1">+</button></div>
<p class="nn-rt__recap"></p><a href="{{ section.settings.lien | default: '#' }}" class="nn-rt__btn">Confirmer la réservation</a></div>
</section>
<!-- Section : carrousel-cartes-empilees -->
<section class="nn-pile"><h2>{{ section.settings.titre }}</h2><div class="nn-pile__zone">{% for block in section.blocks %}<div class="nn-pile__carte">{% if block.settings.image %}{{ block.settings.image | image_url: width: 700 | image_tag }}{% else %}{{ 'product-2' | placeholder_svg_tag }}{% endif %}<div class="nn-pile__legende">{{ block.settings.legende }}</div></div>{% endfor %}</div><p class="nn-pile__aide">Fais glisser la carte →</p></section>
<!-- Section : avis-capsules-modale -->
<section class="nn-cap"><h2>{{ section.settings.titre }}</h2><div class="nn-cap__rang"><div class="nn-cap__piste">{% for i in (1..2) %}{% for block in section.blocks %}<button class="nn-cap__pill" data-texte="{{ block.settings.texte | escape }}" data-nom="{{ block.settings.nom | escape }}">{% if block.settings.photo %}{{ block.settings.photo | image_url: width: 80 | image_tag }}{% else %}<span class="nn-cap__ini">{{ block.settings.nom | slice: 0 }}</span>{% endif %}{{ block.settings.nom }} ★★★★★</button>{% endfor %}{% endfor %}</div></div>
<div class="nn-cap__modale" hidden><div class="nn-cap__fond" data-fermer></div><div class="nn-cap__boite"><button class="nn-cap__x" data-fermer>×</button><p class="nn-cap__etoiles">★★★★★</p><blockquote></blockquote><b></b></div></div></section>
<!-- Section : footer-bento-verre -->
{%- comment -%} NAHNAH AI · Pied de page bento en verre (bibliothèque Sections & effets) {%- endcomment -%}
<footer class="nn-footer-bento-verre" 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-h1: {{ section.settings.halo_1 }}; --nn-h2: {{ section.settings.halo_2 }};">
<span class="nn-footer-bento-verre__halo nn-footer-bento-verre__halo--1" aria-hidden="true"></span><span class="nn-footer-bento-verre__halo nn-footer-bento-verre__halo--2" aria-hidden="true"></span>
<div class="nn-footer-bento-verre__grille">
<div class="nn-footer-bento-verre__tuile nn-footer-bento-verre__tuile--marque">
<p class="nn-footer-bento-verre__nom">{{ shop.name | escape }}</p>
{%- if section.settings.accroche != blank -%}<p class="nn-footer-bento-verre__accroche">{{ section.settings.accroche | escape }}</p>{%- endif -%}
{%- if section.settings.texte != blank -%}<p class="nn-footer-bento-verre__petit">{{ section.settings.texte | escape }}</p>{%- endif -%}
</div>
<nav class="nn-footer-bento-verre__tuile nn-footer-bento-verre__tuile--menu" aria-label="{{ section.settings.menu.title | default: 'Pied de page' | escape }}">
<p class="nn-footer-bento-verre__etiquette">{{ section.settings.menu.title | escape }}</p>
<ul role="list">
{%- for link in section.settings.menu.links -%}<li><a href="{{ link.url }}">{{ link.title | escape }}</a></li>{%- endfor -%}
</ul>
</nav>
<div class="nn-footer-bento-verre__tuile nn-footer-bento-verre__tuile--contact">
<p class="nn-footer-bento-verre__etiquette">Contact</p>
{%- assign nn_mail = section.settings.email | default: shop.email -%}
{%- if nn_mail != blank -%}<a href="mailto:{{ nn_mail }}">{{ nn_mail | escape }}</a>{%- endif -%}
{%- if section.settings.telephone != blank -%}<a href="tel:{{ section.settings.telephone | remove: ' ' }}">{{ section.settings.telephone | escape }}</a>{%- endif -%}
{%- if section.settings.instagram != blank or section.settings.tiktok != blank or section.settings.pinterest != blank or section.settings.youtube != blank -%}
<ul class="nn-footer-bento-verre__reseaux" role="list">
{%- if section.settings.instagram != blank -%}<li><a href="{{ section.settings.instagram }}">Instagram</a></li>{%- endif -%}
{%- if section.settings.tiktok != blank -%}<li><a href="{{ section.settings.tiktok }}">TikTok</a></li>{%- endif -%}
{%- if section.settings.pinterest != blank -%}<li><a href="{{ section.settings.pinterest }}">Pinterest</a></li>{%- endif -%}
{%- if section.settings.youtube != blank -%}<li><a href="{{ section.settings.youtube }}">YouTube</a></li>{%- endif -%}
</ul>
{%- endif -%}
</div>
<div class="nn-footer-bento-verre__tuile nn-footer-bento-verre__tuile--news">
<p class="nn-footer-bento-verre__etiquette">{{ section.settings.titre_newsletter | escape }}</p>
{%- form 'customer', class: 'nn-footer-bento-verre__form' -%}
<input type="hidden" name="contact[tags]" value="newsletter">
<div class="nn-footer-bento-verre__champs">
<label class="nn-footer-bento-verre__sr" for="nn-email-{{ section.id }}">Adresse e-mail</label>
<input id="nn-email-{{ section.id }}" type="email" name="contact[email]" required autocomplete="email" placeholder="ton@email.fr">
<button type="submit">OK</button>
</div>
{%- endform -%}
</div>
<p class="nn-footer-bento-verre__tuile nn-footer-bento-verre__tuile--bas">© {{ 'now' | date: '%Y' }} {{ shop.name | escape }}</p>
</div>
</footer>
</div>
{% schema %}{"name":"Thème Brunch latte","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-latte-art */
.nn-la{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;align-items:center;min-height:580px;padding:60px 7%;background:#f4ede4;color:#3b2416;font-family:"Instrument Sans","Inter",sans-serif}
.nn-la__texte span{display:inline-block;background:#3b2416;color:#f4ede4;padding:6px 14px;border-radius:999px;font-size:13px}
.nn-la h1{font-family:"Instrument Serif","Georgia",serif;font-weight:400;font-size:clamp(44px,6.5vw,92px);line-height:.98;margin:18px 0 30px}
.nn-la__btn{display:inline-block;background:#c8553d;color:#fff;padding:16px 34px;border-radius:999px;font-weight:700;text-decoration:none;transition:transform .2s}
.nn-la__btn:hover{transform:translateY(-3px)}
.nn-la__bento{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:200px 200px;gap:14px}
.nn-la__bento>*{border-radius:22px;overflow:hidden;opacity:0;transform:translateY(30px) scale(.96);animation:nnLaEntre .8s var(--d,0s) cubic-bezier(.2,.9,.3,1.2) forwards}
.nn-la__bento img{width:100%;height:100%;object-fit:cover}
.nn-la__bento img:nth-child(4){grid-column:2;grid-row:1 / 3}
.nn-la__tasse{position:relative;background:#e3d5c3;display:grid;place-items:center}
.nn-la__tasse svg{width:78%}
.nn-la .coeur{fill:#f4ede4;stroke:#f4ede4;stroke-width:2;transform-origin:100px 110px;transform:scale(0);animation:nnLaCoeur 1.6s .8s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes nnLaCoeur{to{transform:scale(1)}}
.nn-la__tasse i{position:absolute;top:8%;left:44%;width:10px;height:40px;border-radius:10px;background:rgba(255,255,255,.7);filter:blur(5px);animation:nnLaVapeur 3s ease-out infinite}
.nn-la__tasse i+i{left:54%;animation-delay:1.5s}
@keyframes nnLaVapeur{0%{opacity:0;transform:translateY(20px)}40%{opacity:.8}100%{opacity:0;transform:translateY(-30px) scaleX(1.6)}}
@keyframes nnLaEntre{to{opacity:1;transform:none}}
@media(max-width:760px){.nn-la{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.nn-la *{animation:none!important;opacity:1!important;transform:none!important}}
/* fiche-reservation-table */
.nn-rt{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:72px 7%;background:#fffaf4;color:#3b2416;font-family:"Instrument Sans","Inter",sans-serif}
.nn-rt__salle{position:relative;width:300px;height:300px;margin:0 auto;border-radius:30px;background:#f4ede4}
.nn-rt__table{position:absolute;inset:30%;border-radius:50%;background:#c8553d;display:grid;place-items:center;color:#fff;font-size:34px;font-weight:800;box-shadow:0 12px 24px rgba(200,85,61,.35)}
.nn-rt__chaise{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px;border-radius:12px;background:#3b2416;transform:rotate(var(--a)) translateY(-112px);animation:nnRtChaise .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes nnRtChaise{from{transform:rotate(var(--a)) translateY(-40px) scale(0)}}
.nn-rt h2{font-family:"Instrument Serif",serif;font-weight:400;font-size:clamp(32px,4.5vw,52px);margin:0}
.nn-rt p{margin:16px 0 8px;font-weight:700}
.nn-rt__jours,.nn-rt__creneaux{display:flex;gap:8px;flex-wrap:wrap}
.nn-rt__jours button,.nn-rt__creneaux button{border:1px solid #e3d5c3;background:#fff;padding:10px 14px;border-radius:14px;cursor:pointer;font-weight:600}
.nn-rt .est-actif{background:#3b2416!important;color:#fff;border-color:#3b2416}
.nn-rt__couverts{display:flex;align-items:center;gap:18px}
.nn-rt__couverts button{width:42px;height:42px;border-radius:50%;border:none;background:#3b2416;color:#fff;font-size:20px;cursor:pointer}
.nn-rt__couverts b{font-size:26px;min-width:30px;text-align:center}
.nn-rt__recap{font-weight:400!important;background:#f4ede4;padding:12px 16px;border-radius:14px}
.nn-rt__btn{display:block;text-align:center;background:#c8553d;color:#fff;padding:16px;border-radius:999px;font-weight:700;text-decoration:none}
@media(max-width:760px){.nn-rt{grid-template-columns:1fr}}
/* carrousel-cartes-empilees */
.nn-pile{padding:60px 5vw;text-align:center;background:#f5f5f4;overflow:hidden}
.nn-pile h2{margin:0 0 30px;font-size:clamp(26px,3.5vw,40px);color:#111111}
.nn-pile__zone{position:relative;width:280px;height:380px;margin:0 auto}
.nn-pile__carte{position:absolute;inset:0;border-radius:22px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.18);cursor:grab;touch-action:none;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s;background:#ffffff}
.nn-pile__carte img,.nn-pile__carte svg{width:100%;height:100%;object-fit:cover}
.nn-pile__legende{position:absolute;left:14px;bottom:14px;background:#ffffff;color:#111111;padding:6px 14px;border-radius:99px;font-weight:700}
.nn-pile__aide{color:#78716c;margin-top:20px}
/* avis-capsules-modale */
.nn-cap{padding:60px 0;text-align:center;background:#ffffff;overflow:hidden}
.nn-cap h2{font-size:clamp(28px,4vw,44px);margin:0 0 26px;color:#111111}
.nn-cap__rang{mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.nn-cap__piste{display:flex;gap:12px;width:max-content;animation:nnCap 35s linear infinite}
.nn-cap__rang:hover .nn-cap__piste{animation-play-state:paused}
.nn-cap__pill{display:flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border:1px solid #e4e4e7;border-radius:99px;background:#ffffff;color:#111111;font-weight:600;cursor:pointer;white-space:nowrap;transition:transform .2s,box-shadow .2s}
.nn-cap__pill:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.08)}
.nn-cap__pill img,.nn-cap__ini{width:36px;height:36px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;background:#ede9fe;color:#6d28d9}
.nn-cap__modale{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}.nn-cap__modale[hidden]{display:none}
.nn-cap__fond{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px)}
.nn-cap__boite{position:relative;max-width:440px;margin:20px;padding:34px;border-radius:24px;background:#ffffff;animation:nnCapIn .4s cubic-bezier(.2,1.3,.4,1)}
.nn-cap__x{position:absolute;top:10px;right:16px;border:0;background:none;font-size:26px;cursor:pointer}
.nn-cap__etoiles{color:#f59e0b;font-size:22px;margin:0}.nn-cap__boite blockquote{margin:14px 0;font-size:18px;line-height:1.5;color:#27272a}
@keyframes nnCap{to{transform:translateX(-50%)}}@keyframes nnCapIn{from{opacity:0;transform:scale(.85)}}
/* footer-bento-verre */
.nn-footer-bento-verre { position: relative; display: block; overflow: hidden; padding: var(--nn-mh) 16px var(--nn-mb); background: var(--nn-fond); color: var(--nn-texte); isolation: isolate; }
.nn-footer-bento-verre__halo { position: absolute; z-index: -1; width: 46vw; max-width: 560px; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: 0.55; pointer-events: none; }
.nn-footer-bento-verre__halo--1 { left: -8%; top: -20%; background: var(--nn-h1); animation: nn-footer-bento-verre-derive 14s ease-in-out infinite alternate; }
.nn-footer-bento-verre__halo--2 { right: -10%; bottom: -30%; background: var(--nn-h2); animation: nn-footer-bento-verre-derive 18s ease-in-out -6s infinite alternate-reverse; }
.nn-footer-bento-verre__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1200px; margin: 0 auto; }
.nn-footer-bento-verre__tuile { margin: 0; padding: 22px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s; }
.nn-footer-bento-verre__tuile:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.28); }
.nn-footer-bento-verre__tuile--marque { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px; }
.nn-footer-bento-verre__tuile--news { grid-column: span 2; }
.nn-footer-bento-verre__tuile--bas { grid-column: 1 / -1; padding: 14px 22px; font-size: 13px; opacity: 0.7; }
.nn-footer-bento-verre__nom { margin: 0 0 auto; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.nn-footer-bento-verre__accroche { margin: 30px 0 8px; font-size: clamp(24px, 3vw, 38px); font-weight: 700; line-height: 1.1; }
.nn-footer-bento-verre__petit { margin: 0; opacity: 0.7; font-size: 14px; }
.nn-footer-bento-verre__etiquette { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nn-accent); }
.nn-footer-bento-verre ul { margin: 0; padding: 0; list-style: none; }
.nn-footer-bento-verre__tuile--menu li + li { margin-top: 6px; }
.nn-footer-bento-verre a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.3s; }
.nn-footer-bento-verre a:hover, .nn-footer-bento-verre a:focus-visible { background-size: 100% 1px; }
.nn-footer-bento-verre a:focus-visible { outline: 2px solid var(--nn-accent); outline-offset: 2px; }
.nn-footer-bento-verre__tuile--contact { display: flex; flex-direction: column; gap: 6px; overflow-wrap: anywhere; }
.nn-footer-bento-verre__reseaux { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px !important; font-size: 14px; }
.nn-footer-bento-verre__champs { display: flex; gap: 8px; }
.nn-footer-bento-verre__champs input[type="email"] { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 14px; background: rgba(0, 0, 0, 0.25); color: inherit; font: inherit; }
.nn-footer-bento-verre__champs input:focus-visible { outline: 2px solid var(--nn-accent); }
.nn-footer-bento-verre__champs button { min-height: 46px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--nn-accent); color: #0C0D14; font: inherit; font-weight: 700; cursor: pointer; }
.nn-footer-bento-verre__merci { margin: 8px 0 0; font-size: 13px; }
.nn-footer-bento-verre__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes nn-footer-bento-verre-derive { from { transform: translate(0, 0) scale(1); } to { transform: translate(12%, 18%) scale(1.15); } }
@media (max-width: 749px) {
.nn-footer-bento-verre__grille { grid-template-columns: 1fr 1fr; }
.nn-footer-bento-verre__tuile--marque, .nn-footer-bento-verre__tuile--news { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
.nn-footer-bento-verre *, .nn-footer-bento-verre *::before, .nn-footer-bento-verre *::after { animation: none !important; transition: none !important; }
}
{% 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-latte-art */
/* Aucun script requis */
/* fiche-reservation-table */
document.querySelectorAll('.nn-rt').forEach(function(s){var n=2,j=s.querySelector('.nn-rt__jours'),noms=['dim.','lun.','mar.','mer.','jeu.','ven.','sam.'];for(var k=0;k<5;k++){var d=new Date();d.setDate(d.getDate()+k);var b=document.createElement('button');b.textContent=(k===0?"Aujourd'hui":noms[d.getDay()]+' '+d.getDate());if(k===0)b.className='est-actif';j.appendChild(b);}function groupe(sel){s.querySelectorAll(sel+' button').forEach(function(b){b.addEventListener('click',function(){s.querySelectorAll(sel+' button').forEach(function(x){x.classList.toggle('est-actif',x===b)});recap();});});}function chaises(){s.querySelectorAll('.nn-rt__chaise').forEach(function(c){c.remove()});for(var i=0;i<n;i++){var c=document.createElement('i');c.className='nn-rt__chaise';c.style.setProperty('--a',(360/n*i)+'deg');s.querySelector('.nn-rt__salle').appendChild(c);}s.querySelector('.nn-rt__nb').textContent=n;s.querySelector('.nn-rt__couverts b').textContent=n;}function recap(){s.querySelector('.nn-rt__recap').textContent='Table pour '+n+' · '+s.querySelector('.nn-rt__jours .est-actif').textContent+' à '+s.querySelector('.nn-rt__creneaux .est-actif').textContent;}groupe('.nn-rt__jours');groupe('.nn-rt__creneaux');s.querySelectorAll('[data-n]').forEach(function(b){b.addEventListener('click',function(){n=Math.max(1,Math.min(10,n+parseInt(b.dataset.n)));chaises();recap();});});chaises();recap();});
/* carrousel-cartes-empilees */
// Cartes empilées : glisser la carte du dessus pour passer à la suivante
document.querySelectorAll('.nn-pile__zone').forEach(function(z){var cartes=[].slice.call(z.children);
function ranger(){cartes.forEach(function(c,i){c.style.zIndex=cartes.length-i;c.style.transform='translateY('+i*12+'px) scale('+(1-i*.05)+')';c.style.opacity=i>3?0:1;});}
cartes.forEach(function(c){var x0=null;
c.onpointerdown=function(e){if(c!==cartes[0])return;x0=e.clientX;c.setPointerCapture(e.pointerId);c.style.transition='none';};
c.onpointermove=function(e){if(x0===null)return;var dx=e.clientX-x0;c.style.transform='translateX('+dx+'px) rotate('+dx/12+'deg)';};
c.onpointerup=function(e){if(x0===null)return;var dx=e.clientX-x0;x0=null;c.style.transition='';if(Math.abs(dx)>80){cartes.push(cartes.shift());}ranger();};});
ranger();});
/* avis-capsules-modale */
// Capsules : un clic ouvre l'avis complet
document.querySelectorAll('.nn-cap').forEach(function(s){var m=s.querySelector('.nn-cap__modale');
s.querySelectorAll('.nn-cap__pill').forEach(function(p){p.onclick=function(){m.querySelector('blockquote').textContent=p.dataset.texte;m.querySelector('b').textContent=p.dataset.nom;m.hidden=false;};});
m.querySelectorAll('[data-fermer]').forEach(function(f){f.onclick=function(){m.hidden=true;};});});
/* footer-bento-verre */
{% 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 Brunch latte » (Thèmes complets)
Description : Coffee shop moderne en bento : héros latte art, réservation de table, carrousel cartes empilées, avis capsules, footer bento verre.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/theme-brunch-latte
Fichier : nahnah-theme-brunch-latte.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-brunch-latte.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-brunch-latte ».
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-brunch-latte).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-brunch-latte ».
- 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-brunch-latte 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.