🎨 Thèmes completsGratuit · 0 NahnahPar NAHNAH
Thème Patte animalerie
Joyeux et chaleureux : héros traces de pattes, calculateur de portion, icônes animalerie, avis capsules, footer magasin ouvert.
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-patte-animalerie.liquid (Liquid, CSS et JS inclus).
<div class="nn-theme-compose" data-theme="theme-patte-animalerie">
<!-- 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-traces-pattes -->
<section class="nn-tp">
<div class="nn-tp__pattes">{% for i in (1..9) %}<i style="--i:{{ i }}">🐾</i>{% endfor %}</div>
<span class="nn-tp__balle">🎾</span>
<div class="nn-tp__texte"><h1>{{ section.settings.titre | default: "Pour ceux qui ont quatre pattes" }}</h1><p>{{ section.settings.texte | default: "Jouets, croquettes et câlins garantis pour chiens et chats." }}</p><a href="{{ section.settings.lien | default: '/collections/all' }}" class="nn-tp__btn"><span class="nn-tp__chien">🐶</span>{{ section.settings.bouton | default: "Gâter mon animal" }}</a></div>
</section>
<!-- Section : fiche-portion-gamelle -->
<section class="nn-pg">
<div class="nn-pg__gamelle"><span class="nn-pg__croq"></span><b class="nn-pg__g">120 g</b></div>
<div class="nn-pg__infos"><h2>{{ section.settings.titre | default: "Croquettes Saumon Bio" }}</h2><p class="nn-pg__prix">{{ section.settings.prix | default: "34,90 € · sac de 4 kg" }}</p>
<div class="nn-pg__type"><button data-t="chien" class="est-actif">🐶 Chien</button><button data-t="chat">🐱 Chat</button></div>
<label>Poids de ton animal : <b class="nn-pg__kg">10 kg</b><input type="range" min="2" max="40" value="10" class="nn-pg__curseur"></label>
<p class="nn-pg__duree">Le sac dure environ <b>33 jours</b></p><a class="nn-pg__btn">Ajouter au panier</a></div>
</section>
<!-- Section : icones-animalerie -->
{%- comment -%} NAHNAH AI · Icônes animalerie qui remuent (bibliothèque Sections & effets) {%- endcomment -%}
<div class="nn-icones-animalerie" 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-bulle: {{ section.settings.couleur_bulle }};" data-nn-invitation="{{ section.settings.invitation }}">
{%- if section.settings.titre != blank -%}<h2 class="nn-icones-animalerie__titre">{{ section.settings.titre | escape }}</h2>{%- endif -%}
<ul class="nn-icones-animalerie__liste" role="list">
{%- for block in section.blocks -%}
<li class="nn-icones-animalerie__item" style="--nn-i: {{ forloop.index0 }};" {{ block.shopify_attributes }}>
{%- if block.settings.lien != blank -%}<a class="nn-icones-animalerie__bulle" href="{{ block.settings.lien }}">{%- else -%}<div class="nn-icones-animalerie__bulle">{%- endif -%}
{%- case block.settings.icone -%}{%- when 'patte' -%}<svg class="nn-icones-animalerie__svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><ellipse cx="12" cy="16" rx="4.2" ry="3.6"/><circle cx="6.5" cy="10.5" r="1.8"/><circle cx="10" cy="7" r="1.8"/><circle cx="14" cy="7" r="1.8"/><circle cx="17.5" cy="10.5" r="1.8"/></svg>{%- when 'os' -%}<svg class="nn-icones-animalerie__svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M7.5 9.5 14.5 16.5"/><path d="M8.6 10.6a2.5 2.5 0 1 1-3-3 2.5 2.5 0 1 1 3-3 2.5 2.5 0 1 1 0 6ZM15.4 13.4a2.5 2.5 0 1 1 3 3 2.5 2.5 0 1 1-3 3 2.5 2.5 0 1 1 0-6Z"/></svg>{%- when 'gamelle' -%}<svg class="nn-icones-animalerie__svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 13h18l-2 6H5Z"/><path d="M8 13c0-2 1.8-3.5 4-3.5s4 1.5 4 3.5"/></svg>{%- when 'chat' -%}<svg class="nn-icones-animalerie__svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 20v-8l-1-7 4.5 3.5h7L20 5l-1 7v8"/><path d="M5 20h14"/><circle cx="9.5" cy="13" r=".8"/><circle cx="14.5" cy="13" r=".8"/><path d="M11 16h2"/></svg>{%- when 'chien' -%}<svg class="nn-icones-animalerie__svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M7 9 4 7.5 3.5 13l2.5.5M17 9l3-1.5.5 5.5-2.5.5"/><path d="M6 9.5C6 6.5 8.5 5 12 5s6 1.5 6 4.5V15a6 5 0 0 1-12 0Z"/><circle cx="10" cy="11" r=".8"/><circle cx="14" cy="11" r=".8"/><path d="M11 15h2l-1 1.3Z"/></svg>{%- when 'poisson' -%}<svg class="nn-icones-animalerie__svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 12c3-4.5 9-5.5 14-1.5l4-2.5v8l-4-2.5C12 17.5 6 16.5 3 12Z"/><circle cx="8" cy="11.2" r=".8"/></svg>{%- when 'oiseau' -%}<svg class="nn-icones-animalerie__svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 15c2 3 7 4 10 1l6-6-3-1c-1-3-5-3-6 0L4 15Z"/><path d="M9 13c2 0 3.5-1 4.5-3"/><circle cx="14.5" cy="8.6" r=".7"/></svg>{%- when 'balle' -%}<svg class="nn-icones-animalerie__svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="8"/><path d="M5.5 7.5c3 1.5 4.5 5 3.5 9.5M18.5 16.5c-3-1.5-4.5-5-3.5-9.5"/></svg>{%- endcase -%}
{%- if block.settings.lien != blank -%}</a>{%- else -%}</div>{%- endif -%}
{%- if section.settings.legendes and block.settings.legende != blank -%}<span class="nn-icones-animalerie__legende">{{ block.settings.legende | escape }}</span>{%- endif -%}
</li>
{%- endfor -%}
</ul>
</div>
<!-- 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-magasin-ouvert -->
{%- comment -%} NAHNAH AI · Pied de page magasin « ouvert maintenant » (bibliothèque Sections & effets) {%- endcomment -%}
<footer class="nn-footer-magasin-ouvert" 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-j0="{{ section.settings.h_lundi | escape }}" data-j1="{{ section.settings.h_mardi | escape }}" data-j2="{{ section.settings.h_mercredi | escape }}" data-j3="{{ section.settings.h_jeudi | escape }}" data-j4="{{ section.settings.h_vendredi | escape }}" data-j5="{{ section.settings.h_samedi | escape }}" data-j6="{{ section.settings.h_dimanche | escape }}">
<div class="nn-footer-magasin-ouvert__grille">
<div class="nn-footer-magasin-ouvert__photo">{%- if section.settings.photo != blank -%}{{ section.settings.photo | image_url: width: 900 | image_tag: loading: 'lazy', alt: shop.name }}{%- endif -%}<span class="nn-footer-magasin-ouvert__etat" data-nn-etat hidden><i aria-hidden="true"></i><span data-nn-etat-texte></span></span></div>
<div class="nn-footer-magasin-ouvert__infos">
<p class="nn-footer-magasin-ouvert__nom">{{ shop.name | escape }}</p>
<p class="nn-footer-magasin-ouvert__adresse">{{ section.settings.adresse | escape }}</p>
<p class="nn-footer-magasin-ouvert__liens">
{%- if section.settings.itineraire != blank -%}<a href="{{ section.settings.itineraire }}">Itinéraire →</a>{%- endif -%}
{%- if section.settings.telephone != blank -%}<a href="tel:{{ section.settings.telephone | remove: ' ' }}">{{ section.settings.telephone | escape }}</a>{%- endif -%}
</p>
<dl class="nn-footer-magasin-ouvert__horaires">
<div data-nn-jour="0"><dt>Lundi</dt><dd>{%- if section.settings.h_lundi != blank -%}{{ section.settings.h_lundi | replace: ',', ' · ' | replace: '-', ' – ' | escape }}{%- else -%}Fermé{%- endif -%}</dd></div>
<div data-nn-jour="1"><dt>Mardi</dt><dd>{%- if section.settings.h_mardi != blank -%}{{ section.settings.h_mardi | replace: ',', ' · ' | replace: '-', ' – ' | escape }}{%- else -%}Fermé{%- endif -%}</dd></div>
<div data-nn-jour="2"><dt>Mercredi</dt><dd>{%- if section.settings.h_mercredi != blank -%}{{ section.settings.h_mercredi | replace: ',', ' · ' | replace: '-', ' – ' | escape }}{%- else -%}Fermé{%- endif -%}</dd></div>
<div data-nn-jour="3"><dt>Jeudi</dt><dd>{%- if section.settings.h_jeudi != blank -%}{{ section.settings.h_jeudi | replace: ',', ' · ' | replace: '-', ' – ' | escape }}{%- else -%}Fermé{%- endif -%}</dd></div>
<div data-nn-jour="4"><dt>Vendredi</dt><dd>{%- if section.settings.h_vendredi != blank -%}{{ section.settings.h_vendredi | replace: ',', ' · ' | replace: '-', ' – ' | escape }}{%- else -%}Fermé{%- endif -%}</dd></div>
<div data-nn-jour="5"><dt>Samedi</dt><dd>{%- if section.settings.h_samedi != blank -%}{{ section.settings.h_samedi | replace: ',', ' · ' | replace: '-', ' – ' | escape }}{%- else -%}Fermé{%- endif -%}</dd></div>
<div data-nn-jour="6"><dt>Dimanche</dt><dd>{%- if section.settings.h_dimanche != blank -%}{{ section.settings.h_dimanche | replace: ',', ' · ' | replace: '-', ' – ' | escape }}{%- else -%}Fermé{%- endif -%}</dd></div>
</dl>
</div>
<nav class="nn-footer-magasin-ouvert__menu" aria-label="{{ section.settings.menu.title | default: 'Pied de page' | escape }}"><ul role="list">{%- for link in section.settings.menu.links -%}<li><a href="{{ link.url }}">{{ link.title | escape }}</a></li>{%- endfor -%}</ul></nav>
</div>
<p class="nn-footer-magasin-ouvert__copy">© {{ 'now' | date: '%Y' }} {{ shop.name | escape }}</p>
</footer>
</div>
{% schema %}{"name":"Thème Patte animalerie","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-traces-pattes */
.nn-tp{position:relative;min-height:540px;display:grid;place-items:center;text-align:center;background:#ffe9d6;color:#4a2c1a;font-family:"Nunito",sans-serif;overflow:hidden}
.nn-tp__pattes i{position:absolute;left:calc(var(--i)*10% - 5%);top:calc(70% - var(--i)*6% + (var(--i) - (var(--i)/2)*2)*4%);font-style:normal;font-size:30px;opacity:0;transform:rotate(70deg);animation:nnTpPas 9s calc(var(--i)*.5s) infinite}
@keyframes nnTpPas{0%{opacity:0}5%,60%{opacity:.55}75%,100%{opacity:0}}
.nn-tp__balle{position:absolute;bottom:12%;left:8%;font-size:46px;animation:nnTpRebond 1.2s cubic-bezier(.5,0,.5,1) infinite alternate}
@keyframes nnTpRebond{from{transform:translateY(0) rotate(0)}to{transform:translateY(-120px) rotate(180deg)}}
.nn-tp__texte{position:relative;z-index:2;padding:0 6%}
.nn-tp h1{font-size:clamp(38px,6vw,78px);font-weight:900;line-height:1.05;margin:0 0 14px}
.nn-tp p{font-size:18px;margin:0 0 28px}
.nn-tp__btn{display:inline-flex;align-items:center;gap:10px;background:#ff7a3d;color:#fff;padding:15px 30px;border-radius:999px;font-weight:800;text-decoration:none;box-shadow:0 8px 0 #c95522;transition:transform .15s,box-shadow .15s}
.nn-tp__btn:hover{transform:translateY(4px);box-shadow:0 4px 0 #c95522}
.nn-tp__chien{display:inline-block;font-size:26px}
.nn-tp__btn:hover .nn-tp__chien{animation:nnTpRemue .25s ease-in-out infinite alternate}
@keyframes nnTpRemue{from{transform:rotate(-15deg)}to{transform:rotate(15deg)}}
@media(prefers-reduced-motion:reduce){.nn-tp *{animation:none!important}.nn-tp__pattes i{opacity:.4}}
/* fiche-portion-gamelle */
.nn-pg{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:72px 7%;background:#fff7ef;color:#4a2c1a;font-family:"Nunito",sans-serif}
.nn-pg__gamelle{position:relative;width:260px;height:120px;margin:0 auto;background:#ff7a3d;border-radius:0 0 130px 130px/0 0 100px 100px;display:grid;place-items:center;overflow:visible}
.nn-pg__croq{position:absolute;left:12%;right:12%;bottom:70%;height:var(--h,40px);background:radial-gradient(circle,#b0723f 35%,transparent 36%) 0 0/18px 16px,radial-gradient(circle,#8c5328 35%,transparent 36%) 9px 8px/18px 16px;border-radius:50% 50% 0 0;transition:height .5s cubic-bezier(.3,1.5,.5,1)}
.nn-pg__g{position:relative;color:#fff;font-size:26px}
.nn-pg h2{font-size:clamp(28px,4vw,42px);font-weight:900;margin:0}
.nn-pg__prix{font-size:20px;margin:6px 0 18px}
.nn-pg__type{display:flex;gap:8px;margin-bottom:18px}
.nn-pg__type button{border:2px solid #ffd2b8;background:#fff;padding:10px 18px;border-radius:999px;font-weight:800;cursor:pointer}
.nn-pg__type button.est-actif{background:#ff7a3d;border-color:#ff7a3d;color:#fff}
.nn-pg label{display:block;font-weight:700}
.nn-pg__curseur{display:block;width:100%;margin-top:10px;accent-color:#ff7a3d}
.nn-pg__duree{margin:20px 0}.nn-pg__duree b{font-size:22px;color:#ff7a3d}
.nn-pg__btn{display:block;text-align:center;background:#4a2c1a;color:#fff;padding:16px;border-radius:999px;font-weight:800;cursor:pointer}
@media(max-width:760px){.nn-pg{grid-template-columns:1fr}}
/* icones-animalerie */
.nn-icones-animalerie { padding: var(--nn-mh) 16px var(--nn-mb); background: var(--nn-fond); color: var(--nn-texte); }
.nn-icones-animalerie__titre { margin: 0 0 26px; text-align: center; font-size: clamp(22px, 3.2vw, 34px); }
.nn-icones-animalerie__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 22px; margin: 0; padding: 0; list-style: none; }
.nn-icones-animalerie__item { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 92px; }
.nn-icones-animalerie__bulle { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; background: var(--nn-bulle); color: var(--nn-texte); text-decoration: none; box-shadow: 0 8px 0 -2px rgba(58, 36, 20, 0.12); transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1), background-color 0.3s; }
.nn-icones-animalerie__bulle:hover { transform: translateY(-6px) scale(1.06); background: var(--nn-accent); }
.nn-icones-animalerie__bulle:focus-visible { outline: 2px solid var(--nn-accent); outline-offset: 4px; }
.nn-icones-animalerie__svg { width: 36px; height: 36px; transform-origin: 50% 80%; }
.nn-icones-animalerie__bulle:hover .nn-icones-animalerie__svg, .nn-icones-animalerie__item--remue .nn-icones-animalerie__svg { animation: nn-icones-animalerie-remue 0.9s ease-in-out; }
.nn-icones-animalerie__legende { font-size: 14px; font-weight: 700; text-align: center; }
@keyframes nn-icones-animalerie-remue { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) {
.nn-icones-animalerie *, .nn-icones-animalerie *::before, .nn-icones-animalerie *::after { animation: none !important; transition: none !important; }
}
/* 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-magasin-ouvert */
.nn-footer-magasin-ouvert { display: block; padding: var(--nn-mh) 16px var(--nn-mb); background: var(--nn-fond); color: var(--nn-texte); }
.nn-footer-magasin-ouvert__grille { display: grid; grid-template-columns: 1.1fr 1.2fr 0.7fr; gap: 28px; max-width: 1200px; margin: 0 auto; align-items: start; }
.nn-footer-magasin-ouvert__photo { position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 4 / 3; background: linear-gradient(140deg, #3D5A3D, #1F2A1F); }
.nn-footer-magasin-ouvert__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nn-footer-magasin-ouvert__etat { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(15, 20, 15, 0.75); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #FFFFFF; font-size: 13px; font-weight: 700; }
.nn-footer-magasin-ouvert__etat i { width: 10px; height: 10px; border-radius: 50%; background: #F87171; }
.nn-footer-magasin-ouvert--ouvert .nn-footer-magasin-ouvert__etat i { background: var(--nn-accent); box-shadow: 0 0 0 0 var(--nn-accent); animation: nn-footer-magasin-ouvert-pouls 1.8s ease-out infinite; }
.nn-footer-magasin-ouvert__nom { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.nn-footer-magasin-ouvert__adresse { margin: 0 0 6px; opacity: 0.85; }
.nn-footer-magasin-ouvert__liens { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 14px; }
.nn-footer-magasin-ouvert a { color: inherit; text-decoration: none; }
.nn-footer-magasin-ouvert__liens a { color: var(--nn-accent); font-weight: 700; }
.nn-footer-magasin-ouvert a:focus-visible { outline: 2px solid var(--nn-accent); outline-offset: 2px; }
.nn-footer-magasin-ouvert__horaires { margin: 0; font-size: 14px; }
.nn-footer-magasin-ouvert__horaires div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 8px; border-radius: 8px; transition: background-color 0.4s; }
.nn-footer-magasin-ouvert__horaires dt { font-weight: 600; }
.nn-footer-magasin-ouvert__horaires dd { margin: 0; opacity: 0.8; text-align: right; }
.nn-footer-magasin-ouvert__horaires div[data-nn-aujourdhui] { background: rgba(155, 225, 93, 0.14); }
.nn-footer-magasin-ouvert__horaires div[data-nn-aujourdhui] dt::after { content: " · aujourd’hui"; color: var(--nn-accent); font-weight: 400; }
.nn-footer-magasin-ouvert__menu ul { margin: 0; padding: 0; list-style: none; }
.nn-footer-magasin-ouvert__menu li + li { margin-top: 8px; }
.nn-footer-magasin-ouvert__menu a:hover { color: var(--nn-accent); }
.nn-footer-magasin-ouvert__copy { max-width: 1200px; margin: 28px auto 0; padding-top: 14px; border-top: 1px solid rgba(238, 243, 232, 0.15); font-size: 12px; opacity: 0.6; }
@keyframes nn-footer-magasin-ouvert-pouls { 0% { box-shadow: 0 0 0 0 rgba(155, 225, 93, 0.7); } 100% { box-shadow: 0 0 0 10px rgba(155, 225, 93, 0); } }
@media (max-width: 860px) { .nn-footer-magasin-ouvert__grille { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
.nn-footer-magasin-ouvert *, .nn-footer-magasin-ouvert *::before, .nn-footer-magasin-ouvert *::after { animation: none !important; transition: none !important; }
}
{% endstylesheet %}
{% javascript %}
/* header-annonce-defilante */
// Animation CSS seule
/* heros-traces-pattes */
/* Aucun script requis */
/* fiche-portion-gamelle */
document.querySelectorAll('.nn-pg').forEach(function(s){var c=s.querySelector('.nn-pg__curseur'),type='chien';function maj(){var kg=+c.value,g=Math.round(type==='chien'?kg*12:kg*15);if(type==='chat')g=Math.min(g,110);s.querySelector('.nn-pg__kg').textContent=kg+' kg';s.querySelector('.nn-pg__g').textContent=g+' g';s.style.setProperty('--h',Math.min(90,20+g/5)+'px');s.querySelector('.nn-pg__duree b').textContent=Math.floor(4000/g)+' jours';}s.querySelectorAll('[data-t]').forEach(function(b){b.addEventListener('click',function(){s.querySelectorAll('[data-t]').forEach(function(x){x.classList.toggle('est-actif',x===b)});type=b.dataset.t;c.max=type==='chat'?10:40;if(+c.value>+c.max)c.value=c.max;maj();});});c.addEventListener('input',maj);maj();});
/* icones-animalerie */
(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 items = [].slice.call(racine.querySelectorAll(".nn-icones-animalerie__item"));
if (reduit || !items.length || racine.getAttribute("data-nn-invitation") !== "true") return;
var k = 0;
setInterval(function () { var li = items[k % items.length]; k++; li.classList.remove("nn-icones-animalerie__item--remue"); void li.offsetWidth; li.classList.add("nn-icones-animalerie__item--remue"); }, 650);
}
function tout() { document.querySelectorAll(".nn-icones-animalerie").forEach(brancher); }
tout();
document.addEventListener("shopify:section:load", tout);
})();
/* 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-magasin-ouvert */
(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 etat = racine.querySelector("[data-nn-etat]"), texte = racine.querySelector("[data-nn-etat-texte]");
function minutes(h) { var m = /^(\d{1,2})[:h](\d{2})$/.exec(h.trim()); return m ? +m[1] * 60 + +m[2] : NaN; }
function maj() {
var d = new Date(), j = (d.getDay() + 6) % 7, maintenant = d.getHours() * 60 + d.getMinutes();
racine.querySelectorAll("[data-nn-jour]").forEach(function (x) { if (+x.getAttribute("data-nn-jour") === j) x.setAttribute("data-nn-aujourdhui", ""); else x.removeAttribute("data-nn-aujourdhui"); });
var plages = (racine.getAttribute("data-j" + j) || "").split(",").map(function (p) { var b = p.split("-"); return [minutes(b[0] || ""), minutes(b[1] || "")]; }).filter(function (p) { return !isNaN(p[0]) && !isNaN(p[1]); });
var ouvert = plages.some(function (p) { return maintenant >= p[0] && maintenant < p[1]; });
var valides = [0, 1, 2, 3, 4, 5, 6].some(function (k) { return /\d/.test(racine.getAttribute("data-j" + k) || ""); });
if (!valides || !etat) return;
racine.classList.toggle("nn-footer-magasin-ouvert--ouvert", ouvert);
texte.textContent = ouvert ? "Ouvert maintenant" : "Fermé pour le moment";
etat.hidden = false;
}
maj();
setInterval(maj, 60000);
}
function tout() { document.querySelectorAll(".nn-footer-magasin-ouvert").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 Patte animalerie » (Thèmes complets)
Description : Joyeux et chaleureux : héros traces de pattes, calculateur de portion, icônes animalerie, avis capsules, footer magasin ouvert.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/theme-patte-animalerie
Fichier : nahnah-theme-patte-animalerie.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-patte-animalerie.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-patte-animalerie ».
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-patte-animalerie).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-patte-animalerie ».
- 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-patte-animalerie 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.