🎨 Thèmes completsGratuit · 0 NahnahPar NAHNAH
Thème Corail plage
Solaire et décontracté : héros vague et plage, indice UV conseillé, carrousel polaroïds, compte à rebours, footer vagues.
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-corail-plage.liquid (Liquid, CSS et JS inclus).
<div class="nn-theme-compose" data-theme="theme-corail-plage">
<!-- 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-vague-plage -->
<section class="nn-vg">
<span class="nn-vg__soleil"></span>
<div class="nn-vg__texte"><h1>{{ section.settings.titre | default: "L'été commence ici" }}</h1><p>{{ section.settings.texte | default: "Maillots, serviettes et accessoires pour des journées sans fin." }}</p><a href="{{ section.settings.lien | default: '/collections/all' }}" class="nn-vg__btn">{{ section.settings.bouton | default: "Direction la plage" }} 🌊</a></div>
<div class="nn-vg__mer"><svg viewBox="0 0 1440 160" preserveAspectRatio="none" class="v1"><path d="M0 80 Q 180 20 360 80 T 720 80 T 1080 80 T 1440 80 V160 H0Z"/></svg><svg viewBox="0 0 1440 160" preserveAspectRatio="none" class="v2"><path d="M0 90 Q 180 140 360 90 T 720 90 T 1080 90 T 1440 90 V160 H0Z"/></svg><div class="nn-vg__sable">🐚 ⭐ 🐚</div></div>
</section>
<!-- Section : fiche-indice-uv -->
<section class="nn-uv">
<div class="nn-uv__ciel"><span class="nn-uv__astre"></span><b class="nn-uv__spf">SPF 30</b></div>
<div class="nn-uv__infos"><h2>{{ section.settings.titre | default: "Quel indice pour toi ?" }}</h2>
<p>Ta peau</p><div class="nn-uv__opts" data-k="peau"><button data-v="2">Très claire</button><button data-v="1" class="est-actif">Claire</button><button data-v="0">Mate à foncée</button></div>
<p>Le soleil</p><div class="nn-uv__opts" data-k="soleil"><button data-v="0">Ville</button><button data-v="1" class="est-actif">Plage</button><button data-v="2">Montagne / tropiques</button></div>
<a class="nn-uv__btn">Voir la crème SPF <span class="nn-uv__n">30</span></a></div>
</section>
<!-- Section : carrousel-polaroids -->
{%- comment -%} NAHNAH AI · Carrousel pile de polaroïds (bibliothèque Sections & effets) {%- endcomment -%}
<div class="nn-carrousel-polaroids" 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 }};" data-nn-invitation="{{ section.settings.invitation }}">
<div class="nn-carrousel-polaroids__mise">
<div class="nn-carrousel-polaroids__texte">
{%- if section.settings.titre != blank -%}<h2 class="nn-carrousel-polaroids__titre">{{ section.settings.titre | escape }}</h2>{%- endif -%}
{%- if section.settings.texte != blank -%}<p>{{ section.settings.texte | escape }}</p>{%- endif -%}
<div class="nn-carrousel-polaroids__commandes">
<button type="button" class="nn-carrousel-polaroids__btn" data-nn-prec aria-label="Photo précédente">←</button>
<span class="nn-carrousel-polaroids__compte" aria-live="polite"><span data-nn-pos>1</span> / {{ section.blocks.size }}</span>
<button type="button" class="nn-carrousel-polaroids__btn" data-nn-suiv aria-label="Photo suivante">→</button>
</div>
</div>
<ul class="nn-carrousel-polaroids__pile" role="list" tabindex="0" aria-label="Photos" data-nn-pile>
{%- for block in section.blocks -%}
<li class="nn-carrousel-polaroids__polaroid" style="--nn-i: {{ forloop.index0 }};" {{ block.shopify_attributes }}>
<span class="nn-carrousel-polaroids__cliche">{%- if block.settings.image != blank -%}{{ block.settings.image | image_url: width: 700 | image_tag: loading: 'lazy', alt: block.settings.legende }}{%- endif -%}</span>
<span class="nn-carrousel-polaroids__legende">{{ block.settings.legende | escape }}</span>
</li>
{%- endfor -%}
</ul>
</div>
</div>
<!-- Section : compte-a-rebours-neon -->
<section class="nn-cd nn-cd--neon" 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-vagues-animees -->
{%- comment -%} NAHNAH AI · Pied de page à vagues animées (bibliothèque Sections & effets) {%- endcomment -%}
<footer class="nn-footer-vagues-animees" 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-vague: {{ section.settings.couleur_vague }};">
<div class="nn-footer-vagues-animees__vagues"><svg class="nn-footer-vagues-animees__vague nn-footer-vagues-animees__vague--1" viewBox="0 0 1440 120" preserveAspectRatio="none" aria-hidden="true" focusable="false"><path d="M0 60c120 30 240 30 360 0s240-30 360 0 240 30 360 0 240-30 360 0v60H0Z" fill-opacity="0.35"/><path d="M1440 60c120 30 240 30 360 0s240-30 360 0 240 30 360 0 240-30 360 0v60h-1440Z" fill-opacity="0.35"/></svg><svg class="nn-footer-vagues-animees__vague nn-footer-vagues-animees__vague--2" viewBox="0 0 1440 120" preserveAspectRatio="none" aria-hidden="true" focusable="false"><path d="M0 60c120 30 240 30 360 0s240-30 360 0 240 30 360 0 240-30 360 0v60H0Z" fill-opacity="0.6"/><path d="M1440 60c120 30 240 30 360 0s240-30 360 0 240 30 360 0 240-30 360 0v60h-1440Z" fill-opacity="0.6"/></svg><svg class="nn-footer-vagues-animees__vague nn-footer-vagues-animees__vague--3" viewBox="0 0 1440 120" preserveAspectRatio="none" aria-hidden="true" focusable="false"><path d="M0 60c120 30 240 30 360 0s240-30 360 0 240 30 360 0 240-30 360 0v60H0Z" fill-opacity="1"/><path d="M1440 60c120 30 240 30 360 0s240-30 360 0 240 30 360 0 240-30 360 0v60h-1440Z" fill-opacity="1"/></svg></div>
<div class="nn-footer-vagues-animees__corps">
<div class="nn-footer-vagues-animees__marque">
<p class="nn-footer-vagues-animees__nom">{{ shop.name | escape }}</p>
{%- if section.settings.texte != blank -%}<p class="nn-footer-vagues-animees__texte">{{ section.settings.texte | escape }}</p>{%- endif -%}
{%- assign nn_mail = section.settings.email | default: shop.email -%}
{%- if nn_mail != blank -%}<a class="nn-footer-vagues-animees__mail" href="mailto:{{ nn_mail }}">{{ nn_mail | escape }}</a>{%- endif -%}
</div>
{%- for nn_menu in (1..2) -%}
{%- if forloop.index == 1 -%}{%- assign nn_l = section.settings.menu_1 -%}{%- else -%}{%- assign nn_l = section.settings.menu_2 -%}{%- endif -%}
{%- if nn_l.links.size > 0 -%}
<nav class="nn-footer-vagues-animees__menu" aria-label="{{ nn_l.title | escape }}">
<p class="nn-footer-vagues-animees__etiquette">{{ nn_l.title | escape }}</p>
<ul role="list">{%- for link in nn_l.links -%}<li><a href="{{ link.url }}">{{ link.title | escape }}</a></li>{%- endfor -%}</ul>
</nav>
{%- endif -%}
{%- endfor -%}
</div>
<div class="nn-footer-vagues-animees__bas">
<p>© {{ 'now' | date: '%Y' }} {{ shop.name | escape }}</p>
<button type="button" class="nn-footer-vagues-animees__haut" data-nn-haut>↑ {{ section.settings.haut | escape }}</button>
</div>
</footer>
</div>
{% schema %}{"name":"Thème Corail plage","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-vague-plage */
.nn-vg{position:relative;min-height:580px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(#ffe2c6,#ffb59a 60%);color:#7a2e1f;font-family:"Poppins",sans-serif;overflow:hidden}
.nn-vg__soleil{position:absolute;top:60px;right:12%;width:120px;height:120px;border-radius:50%;background:#ffd65c;box-shadow:0 0 0 20px rgba(255,214,92,.3),0 0 80px #ffb347;animation:nnVgPulse 4s ease-in-out infinite}
@keyframes nnVgPulse{50%{box-shadow:0 0 0 34px rgba(255,214,92,.15),0 0 120px #ffb347}}
.nn-vg__texte{position:relative;z-index:2;padding:0 7% 160px}
.nn-vg h1{font-size:clamp(40px,6.5vw,86px);font-weight:800;line-height:.95;margin:0 0 16px;color:#ff6f61}
.nn-vg p{font-size:18px;margin:0 0 26px;max-width:440px}
.nn-vg__btn{display:inline-block;background:#ff6f61;color:#fff;padding:16px 30px;border-radius:999px;font-weight:800;text-decoration:none;transition:transform .2s}
.nn-vg__btn:hover{transform:rotate(-3deg) scale(1.05)}
.nn-vg__mer{position:absolute;left:0;right:0;bottom:0;height:200px}
.nn-vg__mer svg{position:absolute;bottom:50px;left:0;width:200%;height:140px}
.v1{fill:#4fc3c9;opacity:.85;animation:nnVgVague 8s linear infinite}.v2{fill:#2a9fa8;animation:nnVgVague 5s linear infinite reverse}
@keyframes nnVgVague{to{transform:translateX(-50%)}}
.nn-vg__sable{position:absolute;bottom:0;left:0;right:0;height:60px;background:#f6d7a7;text-align:center;font-size:24px;line-height:60px}
@media(prefers-reduced-motion:reduce){.nn-vg *{animation:none!important}}
/* fiche-indice-uv */
.nn-uv{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:72px 7%;background:#fff6ee;color:#7a2e1f;font-family:"Poppins",sans-serif}
.nn-uv__ciel{position:relative;aspect-ratio:1;border-radius:28px;background:linear-gradient(#8fd8ff,#ffe2c6);display:grid;place-items:center;overflow:hidden}
.nn-uv__astre{width:var(--t,140px);height:var(--t,140px);border-radius:50%;background:#ffd65c;box-shadow:0 0 60px 20px rgba(255,180,71,.6);transition:width .5s,height .5s}
.nn-uv__spf{position:absolute;bottom:22px;background:#fff;padding:8px 18px;border-radius:999px;font-size:22px}
.nn-uv h2{font-size:clamp(28px,4vw,40px);margin:0 0 10px;color:#ff6f61}
.nn-uv p{margin:16px 0 8px;font-weight:700}
.nn-uv__opts{display:flex;gap:8px;flex-wrap:wrap}
.nn-uv__opts button{border:2px solid #ffc9b5;background:#fff;padding:9px 14px;border-radius:999px;font-weight:600;cursor:pointer}
.nn-uv__opts button.est-actif{background:#ff6f61;border-color:#ff6f61;color:#fff}
.nn-uv__btn{display:block;text-align:center;margin-top:26px;background:#2a9fa8;color:#fff;padding:16px;border-radius:999px;font-weight:800;cursor:pointer}
@media(max-width:760px){.nn-uv{grid-template-columns:1fr}}
/* carrousel-polaroids */
.nn-carrousel-polaroids { padding: var(--nn-mh) 16px var(--nn-mb); background: var(--nn-fond); color: var(--nn-texte); overflow: hidden; }
.nn-carrousel-polaroids__mise { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; max-width: 1100px; margin: 0 auto; }
.nn-carrousel-polaroids__titre { margin: 0 0 10px; font-size: clamp(24px, 3.4vw, 40px); }
.nn-carrousel-polaroids__texte p { margin: 0; opacity: 0.8; }
.nn-carrousel-polaroids__commandes { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.nn-carrousel-polaroids__btn { width: 48px; height: 48px; border: 2px solid var(--nn-texte); border-radius: 50%; background: none; color: inherit; font-size: 18px; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.nn-carrousel-polaroids__btn:hover { background: var(--nn-texte); color: var(--nn-fond); }
.nn-carrousel-polaroids__btn:focus-visible, .nn-carrousel-polaroids__pile:focus-visible { outline: 2px solid var(--nn-accent); outline-offset: 3px; }
.nn-carrousel-polaroids__compte { font-variant-numeric: tabular-nums; font-weight: 700; }
.nn-carrousel-polaroids__pile { position: relative; height: 430px; margin: 0; padding: 0; list-style: none; touch-action: pan-y; }
.nn-carrousel-polaroids__polaroid { --nn-r: calc((var(--nn-o, 0) - 1.5) * 3.5deg); position: absolute; left: 50%; top: 50%; width: min(300px, 78vw); padding: 12px 12px 0; background: #FFFFFF; box-shadow: 0 18px 40px -18px rgba(43, 38, 32, 0.55); transform: translate(-50%, -50%) translate(calc(var(--nn-o, 0) * 6px), calc(var(--nn-o, 0) * -4px)) rotate(var(--nn-r)); z-index: calc(20 - var(--nn-o, 0)); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.nn-carrousel-polaroids__polaroid--envol { transform: translate(-50%, -50%) translate(115%, -10%) rotate(18deg); }
.nn-carrousel-polaroids__cliche { display: block; aspect-ratio: 1; overflow: hidden; background: linear-gradient(135deg, #D9CBB5, #8C7B66); }
.nn-carrousel-polaroids__cliche img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nn-carrousel-polaroids__legende { display: block; padding: 12px 4px 16px; font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-size: 17px; text-align: center; color: #2B2620; }
@media (max-width: 749px) { .nn-carrousel-polaroids__mise { grid-template-columns: 1fr; gap: 10px; } .nn-carrousel-polaroids__pile { height: 380px; order: -1; } }
@media (prefers-reduced-motion: reduce) {
.nn-carrousel-polaroids *, .nn-carrousel-polaroids *::before, .nn-carrousel-polaroids *::after { animation: none !important; transition: none !important; }
}
/* compte-a-rebours-neon */
.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--neon .nn-cd__compteur b{color:#4ade80;text-shadow:0 0 8px #22c55e,0 0 24px #22c55e;animation:nnNeon 4s infinite}
@keyframes nnNeon{0%,92%,100%{opacity:1}94%{opacity:.4}96%{opacity:1}97%{opacity:.6}}
/* footer-vagues-animees */
.nn-footer-vagues-animees { position: relative; display: block; padding: 0 16px var(--nn-mb); background: var(--nn-fond); color: var(--nn-texte); }
.nn-footer-vagues-animees__vagues { position: relative; height: 90px; margin: 0 -16px; overflow: hidden; background: transparent; transform: translateY(-89px); margin-bottom: -89px; }
.nn-footer-vagues-animees__vague { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; fill: var(--nn-vague); }
.nn-footer-vagues-animees__vague--1 { height: 90%; animation: nn-footer-vagues-animees-houle 16s linear infinite; }
.nn-footer-vagues-animees__vague--2 { height: 75%; animation: nn-footer-vagues-animees-houle 11s linear -4s infinite reverse; }
.nn-footer-vagues-animees__vague--3 { height: 60%; animation: nn-footer-vagues-animees-houle 8s linear -2s infinite; }
.nn-footer-vagues-animees__corps { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; max-width: 1200px; margin: 0 auto; padding-top: var(--nn-mh); }
.nn-footer-vagues-animees__nom { margin: 0 0 8px; font-size: 22px; font-weight: 800; }
.nn-footer-vagues-animees__texte { margin: 0 0 10px; opacity: 0.8; max-width: 360px; }
.nn-footer-vagues-animees__etiquette { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nn-accent); }
.nn-footer-vagues-animees ul { margin: 0; padding: 0; list-style: none; }
.nn-footer-vagues-animees li + li { margin-top: 6px; }
.nn-footer-vagues-animees a { color: inherit; text-decoration: none; }
.nn-footer-vagues-animees a:hover { color: var(--nn-accent); }
.nn-footer-vagues-animees a:focus-visible, .nn-footer-vagues-animees__haut:focus-visible { outline: 2px solid var(--nn-accent); outline-offset: 2px; }
.nn-footer-vagues-animees__mail { overflow-wrap: anywhere; }
.nn-footer-vagues-animees__bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; max-width: 1200px; margin: 28px auto 0; padding-top: 16px; border-top: 1px solid rgba(232, 246, 243, 0.2); font-size: 13px; }
.nn-footer-vagues-animees__bas p { margin: 0; opacity: 0.75; }
.nn-footer-vagues-animees__haut { min-height: 44px; padding: 0 16px; border: 1px solid rgba(232, 246, 243, 0.35); border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.nn-footer-vagues-animees__haut--envol { animation: nn-footer-vagues-animees-envol 0.8s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes nn-footer-vagues-animees-envol { 40% { transform: translateY(-8px); } }
.nn-footer-vagues-animees__haut:hover { background: var(--nn-accent); color: var(--nn-fond); border-color: var(--nn-accent); }
@keyframes nn-footer-vagues-animees-houle { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 749px) { .nn-footer-vagues-animees__corps { grid-template-columns: 1fr 1fr; } .nn-footer-vagues-animees__marque { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) {
.nn-footer-vagues-animees *, .nn-footer-vagues-animees *::before, .nn-footer-vagues-animees *::after { animation: none !important; transition: none !important; }
}
{% endstylesheet %}
{% javascript %}
/* header-annonce-defilante */
// Animation CSS seule
/* heros-vague-plage */
/* Aucun script requis */
/* fiche-indice-uv */
document.querySelectorAll('.nn-uv').forEach(function(s){var v={peau:1,soleil:1};function maj(){var sc=v.peau+v.soleil,spf=[15,30,30,50,50][sc];s.querySelector('.nn-uv__spf').textContent='SPF '+spf;s.querySelector('.nn-uv__n').textContent=spf;s.style.setProperty('--t',(100+sc*35)+'px');}s.querySelectorAll('.nn-uv__opts').forEach(function(g){g.querySelectorAll('button').forEach(function(b){b.addEventListener('click',function(){g.querySelectorAll('button').forEach(function(x){x.classList.toggle('est-actif',x===b)});v[g.dataset.k]=+b.dataset.v;maj();});});});maj();});
/* carrousel-polaroids */
(function () {
var reduit = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
function brancher(racine) {
if (racine.dataset.nnPret) return;
racine.dataset.nnPret = "1";
var pile = racine.querySelector("[data-nn-pile]");
var cartes = [].slice.call(racine.querySelectorAll(".nn-carrousel-polaroids__polaroid"));
if (!pile || !cartes.length) return;
var ordre = cartes.map(function (_, i) { return i; }), occupe = false, pos = racine.querySelector("[data-nn-pos]");
function placer() { ordre.forEach(function (i, o) { cartes[i].style.setProperty("--nn-o", o); }); if (pos) pos.textContent = ordre[0] + 1; }
function suivant() {
if (occupe || cartes.length < 2) return; occupe = true;
var dessus = cartes[ordre[0]];
dessus.classList.add("nn-carrousel-polaroids__polaroid--envol");
setTimeout(function () { dessus.classList.remove("nn-carrousel-polaroids__polaroid--envol"); ordre.push(ordre.shift()); placer(); occupe = false; }, reduit ? 0 : 420);
}
function precedent() { if (occupe || cartes.length < 2) return; ordre.unshift(ordre.pop()); placer(); }
placer();
var auto = null;
function stop() { if (auto) { clearInterval(auto); auto = null; } }
racine.querySelector("[data-nn-suiv]").addEventListener("click", function () { stop(); suivant(); });
racine.querySelector("[data-nn-prec]").addEventListener("click", function () { stop(); precedent(); });
pile.addEventListener("keydown", function (e) { if (e.key === "ArrowRight") { e.preventDefault(); stop(); suivant(); } if (e.key === "ArrowLeft") { e.preventDefault(); stop(); precedent(); } });
var x0 = null;
pile.addEventListener("pointerdown", function (e) { x0 = e.clientX; });
pile.addEventListener("pointerup", function (e) { if (x0 === null) return; var d = e.clientX - x0; x0 = null; if (Math.abs(d) > 30) { stop(); if (d < 0) suivant(); else precedent(); } });
if (racine.getAttribute("data-nn-invitation") === "true" && !reduit) auto = setInterval(suivant, 2200);
}
function tout() { document.querySelectorAll(".nn-carrousel-polaroids").forEach(brancher); }
tout();
document.addEventListener("shopify:section:load", tout);
})();
/* compte-a-rebours-neon */
// 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-vagues-animees */
(function () {
var reduit = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
function brancher(racine) {
if (racine.dataset.nnPret) return;
racine.dataset.nnPret = "1";
var b = racine.querySelector("[data-nn-haut]");
if (b) b.addEventListener("click", function () {
window.scrollTo({ top: 0, behavior: reduit ? "auto" : "smooth" });
b.classList.remove("nn-footer-vagues-animees__haut--envol"); void b.offsetWidth; b.classList.add("nn-footer-vagues-animees__haut--envol");
setTimeout(function () { b.classList.remove("nn-footer-vagues-animees__haut--envol"); }, 900);
});
}
function tout() { document.querySelectorAll(".nn-footer-vagues-animees").forEach(brancher); }
tout();
document.addEventListener("shopify:section:load", tout);
})();
{% 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 Corail plage » (Thèmes complets)
Description : Solaire et décontracté : héros vague et plage, indice UV conseillé, carrousel polaroïds, compte à rebours, footer vagues.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/theme-corail-plage
Fichier : nahnah-theme-corail-plage.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-corail-plage.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-corail-plage ».
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-corail-plage).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-corail-plage ».
- 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-corail-plage 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.