🎨 Thèmes completsGratuit · 0 NahnahPar NAHNAH
Thème Crema
Un thème doux couleur crème et expresso, aux formes arrondies et au rythme tranquille, idéal pour un coffee shop ou un torréfacteur.
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-crema.liquid (Liquid, CSS et JS inclus).
{%- comment -%} NAHNAH AI · Thème Crema {%- endcomment -%}
<div class="nn-themes-crema" 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: 'DM Serif Display','Georgia',serif; --nn-font2: 'DM Sans',system-ui,sans-serif; --nn-vitesse: {{ section.settings.vitesse }}s;">
<header class="nn-themes-crema__entete">
<a class="nn-themes-crema__logo" href="{{ routes.root_url }}">{{ shop.name | escape }}</a>
<nav class="nn-themes-crema__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-crema__panier" href="{{ routes.cart_url }}">Panier ({{ cart.item_count }})</a>
</header>
<section class="nn-themes-crema__hero">
<div class="nn-themes-crema__spot" aria-hidden="true"></div>
<div class="nn-themes-crema__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-crema__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-crema__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-crema__bandeau" aria-label="{{ section.settings.bandeau | escape }}"><div class="nn-themes-crema__piste" aria-hidden="true">{%- for i in (1..4) -%}<span>{{ section.settings.bandeau | escape }}</span>{%- endfor -%}</div></div>
{%- endif -%}
<section class="nn-themes-crema__bloc">
<h2 class="nn-themes-crema__titre-section" data-nn-reveal>{{ section.settings.titre_collections | escape }}</h2>
<div class="nn-themes-crema__collections">
{%- for c in section.settings.collections -%}
<a class="nn-themes-crema__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-crema__collection" data-nn-reveal>{{ 'collection-' | append: i | placeholder_svg_tag }}<span>Choisis tes collections</span></div>{%- endfor -%}
{%- endfor -%}
</div>
</section>
<section class="nn-themes-crema__bloc">
<h2 class="nn-themes-crema__titre-section" data-nn-reveal>{{ section.settings.titre_produits | escape }}</h2>
<div class="nn-themes-crema__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-crema__carrousel">
{%- for p in section.settings.collection.products limit: section.settings.nb_produits -%}
<a class="nn-themes-crema__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-crema__carte-info"><span>{{ p.title | escape }}</span><strong>{{ p.price | money }}</strong></div></a>
{%- else -%}
{%- for i in (1..4) -%}<div class="nn-themes-crema__carte">{{ 'product-' | append: i | placeholder_svg_tag }}<div class="nn-themes-crema__carte-info"><span>Choisis une collection vedette</span></div></div>{%- endfor -%}
{%- endfor -%}
</div>
</section>
<section class="nn-themes-crema__bloc nn-themes-crema__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-crema__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-crema__bloc nn-themes-crema__histoire">
<div class="nn-themes-crema__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-crema__titre-section">{{ section.settings.titre_histoire | escape }}</h2><div class="rte">{{ section.settings.histoire }}</div></div>
</section>
<section class="nn-themes-crema__bloc">
<h2 class="nn-themes-crema__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-crema__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-crema__vide">Ajoute de vrais avis clients avec le bloc « Avis client ».</p>
{%- endif -%}
</section>
<section class="nn-themes-crema__bloc nn-themes-crema__faq">
<h2 class="nn-themes-crema__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-crema__pied">
<div class="nn-themes-crema__pied-in">
<div><p class="nn-themes-crema__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-crema__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 Crema","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":"#F6EFE6"},{"type":"color","id":"couleur_surface","label":"Surfaces","default":"#FFFFFF"},{"type":"color","id":"couleur_texte","label":"Texte","default":"#2B1D14"},{"type":"color","id":"couleur_accent","label":"Accent","default":"#8A5A3B"},{"type":"color","id":"couleur_accent2","label":"Accent secondaire","default":"#D9B98F"},{"type":"header","content":"Héros"},{"type":"text","id":"titre","label":"Titre","default":"Une tasse, un instant, ton rituel"},{"type":"textarea","id":"texte","label":"Texte","default":"Grains sélectionnés, extraction soignée et pâtisseries maison pour accompagner chaque gorgée."},{"type":"text","id":"bouton","label":"Bouton","default":"Découvrir nos cafés"},{"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":"Espresso · Filtre · Latte · Grains en vrac · Pâtisseries maison"},{"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":6},{"type":"text","id":"legende_1","label":"Légende 1","default":"origines de grains"},{"type":"number","id":"chiffre_2","label":"Chiffre 2","default":3},{"type":"text","id":"legende_2","label":"Légende 2","default":"méthodes d'extraction"},{"type":"number","id":"chiffre_3","label":"Chiffre 3","default":18},{"type":"text","id":"legende_3","label":"Légende 3","default":"boissons au menu"},{"type":"header","content":"Histoire"},{"type":"text","id":"titre_histoire","label":"Titre","default":"Du grain à la tasse"},{"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 Crema","blocks":[{"type":"faq","settings":{"question":"Vendez-vous vos grains ?","reponse":"<p>À remplacer : indique les formats et la mouture proposés.</p>"}},{"type":"faq","settings":{"question":"Avez-vous des laits végétaux ?","reponse":"<p>À remplacer : liste tes alternatives.</p>"}}]}]}
{% endschema %}
{% stylesheet %}
/* NAHNAH AI · Thème Crema : direction artistique café */
.nn-themes-crema{background:var(--nn-fond);color:var(--nn-texte);font-family:var(--nn-font2);overflow:hidden;position:relative}
.nn-themes-crema a{color:inherit;text-decoration:none}
.nn-themes-crema h1,.nn-themes-crema h2,.nn-themes-crema h3{font-family:var(--nn-font);margin:0}
.nn-themes-crema__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-crema__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-crema__logo{font-family:var(--nn-font);font-size:22px}
.nn-themes-crema__nav{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.nn-themes-crema__nav a{opacity:.75;transition:opacity .2s}.nn-themes-crema__nav a:hover{opacity:1}
.nn-themes-crema__panier{padding:8px 14px;border-radius:var(--nn-r);background:var(--nn-texte);color:var(--nn-fond)!important;font-size:14px}
.nn-themes-crema__hero{position:relative;min-height:88vh;display:grid;align-items:center;padding:40px 16px 60px}
.nn-themes-crema__hero-in{position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%;display:grid;gap:32px;align-items:center}
.nn-themes-crema h1{font-size:clamp(40px,8vw,96px);line-height:1}
.nn-themes-crema__hero p{max-width:48ch;line-height:1.7;opacity:.8;margin:20px 0 28px}
.nn-themes-crema__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-crema__hero-forme img,.nn-themes-crema__hero-forme svg{width:100%;height:100%;object-fit:cover}
.nn-themes-crema__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-crema__bouton{display:inline-block;padding:15px 28px;background:var(--nn-accent);color:#fff!important;font-weight:600;transition:transform .25s,background .25s}
.nn-themes-crema__bouton:hover{transform:translateY(-2px)}
.nn-themes-crema__bandeau{overflow:hidden;white-space:nowrap;padding:14px 0;font-size:18px}
.nn-themes-crema__piste{display:inline-flex;gap:48px;padding-right:48px;animation:nn-themes-crema-defile var(--nn-vitesse,30s) linear infinite}
@keyframes nn-themes-crema-defile{to{transform:translateX(-50%)}}
.nn-themes-crema__bloc{max-width:1200px;margin:0 auto;padding:72px 16px}
.nn-themes-crema__titre-section{font-size:clamp(28px,5vw,52px);margin-bottom:32px}
.nn-themes-crema__collections{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.nn-themes-crema__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-crema__collection img,.nn-themes-crema__collection svg{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.nn-themes-crema__collection:hover img{transform:scale(1.05)}
.nn-themes-crema__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-crema__carrousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:12px;scrollbar-width:thin}
.nn-themes-crema__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-crema__carte img,.nn-themes-crema__carte svg{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.nn-themes-crema__carte-info{display:flex;justify-content:space-between;gap:10px;padding:14px;font-size:15px}
.nn-themes-crema__fleches{display:flex;gap:8px;justify-content:flex-end;margin-bottom:16px}
.nn-themes-crema__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-crema__chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:24px;text-align:center}
.nn-themes-crema__chiffre strong{display:block;font-family:var(--nn-font);font-size:clamp(44px,7vw,80px);line-height:1}
.nn-themes-crema__chiffre span{opacity:.7;font-size:14px}
.nn-themes-crema__histoire{display:grid;gap:32px;align-items:center}
.nn-themes-crema__histoire-img{aspect-ratio:1;border-radius:var(--nn-r);overflow:hidden;background:linear-gradient(45deg,var(--nn-accent2),var(--nn-accent))}
.nn-themes-crema__histoire-img img,.nn-themes-crema__histoire-img svg{width:100%;height:100%;object-fit:cover}
.nn-themes-crema__histoire .rte{line-height:1.8;opacity:.85}
.nn-themes-crema__avis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.nn-themes-crema__avis figure{margin:0;padding:24px;background:var(--nn-surface);border-radius:var(--nn-r)}
.nn-themes-crema__avis blockquote{margin:0 0 14px;line-height:1.7}
.nn-themes-crema__vide{padding:24px;border:1px dashed currentColor;border-radius:var(--nn-r);opacity:.6;text-align:center}
.nn-themes-crema__faq details{border-bottom:1px solid color-mix(in srgb,var(--nn-texte) 18%,transparent);padding:18px 0}
.nn-themes-crema__faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.nn-themes-crema__faq summary::after{content:"+";transition:transform .3s}
.nn-themes-crema__faq details[open] summary::after{transform:rotate(45deg)}
.nn-themes-crema__faq p{margin:12px 0 0;line-height:1.7;opacity:.8}
.nn-themes-crema__pied{padding:48px 16px;border-top:1px solid color-mix(in srgb,var(--nn-texte) 14%,transparent)}
.nn-themes-crema__pied-in{max-width:1200px;margin:0 auto;display:grid;gap:24px}
.nn-themes-crema__pied form{display:flex;gap:8px;flex-wrap:wrap}
.nn-themes-crema__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-crema__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-crema [data-nn-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.nn-themes-crema [data-nn-reveal].est-visible{opacity:1;transform:none}
@media (min-width:750px){.nn-themes-crema__hero-in{grid-template-columns:1.2fr .8fr}.nn-themes-crema__histoire{grid-template-columns:1fr 1fr}.nn-themes-crema__pied-in{grid-template-columns:1fr 1fr;align-items:center}.nn-themes-crema__carte{flex-basis:calc(25% - 12px)}}
@media (prefers-reduced-motion: reduce){.nn-themes-crema [data-nn-reveal]{opacity:1;transform:none;transition:none}.nn-themes-crema__piste{animation:none}.nn-themes-crema__carte,.nn-themes-crema__collection img,.nn-themes-crema__hero-forme{transition:none;transform:none!important}.nn-themes-crema__carrousel{scroll-behavior:auto}}
.nn-themes-crema{--nn-r:28px}
.nn-themes-crema__hero{background:radial-gradient(70% 70% at 85% 30%,var(--nn-accent2),transparent 65%),var(--nn-fond)}
.nn-themes-crema__hero-forme{border-radius:50% 50% 46% 54%/60% 44% 56% 40%}
.nn-themes-crema__bouton{border-radius:999px}
.nn-themes-crema__bandeau{background:var(--nn-texte);color:var(--nn-fond);font-family:var(--nn-font)}
.nn-themes-crema__carte{box-shadow:0 20px 40px -24px rgba(43,29,20,.35)}
.nn-themes-crema__chiffre strong{color:var(--nn-accent)}
{% endstylesheet %}
{% javascript %}
// NAHNAH AI · Thème Crema : effets (apparition, parallaxe, inclinaison 3D, spotlight, compteurs, carrousel, en-tête sticky)
(function () {
var racines = document.querySelectorAll('.nn-themes-crema');
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-crema__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-crema__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-crema__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-crema__carrousel');
if (!piste) return;
r.querySelectorAll('[data-nn-dir]').forEach(function (b) {
b.addEventListener('click', function () {
var carte = piste.querySelector('.nn-themes-crema__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 Crema » (Thèmes complets)
Description : Un thème doux couleur crème et expresso, aux formes arrondies et au rythme tranquille, idéal pour un coffee shop ou un torréfacteur.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/themes-crema
Fichier : nahnah-themes-crema.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-crema.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-crema ».
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-crema).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-crema ».
- 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-crema 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.