🎨 Thèmes completsGratuit · 0 NahnahPar NAHNAH
Thème Marché aux épices
Thème cuisine chaleureux : ardoise de marché pour le titre écrit à la craie, papier kraft, produits présentés en bocaux étiquetés avec leurs vrais prix. Pour épiceries fines et produits du terroir.
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-marche-epices.liquid (Liquid, CSS et JS inclus).
{%- comment -%} NAHNAH AI · Thème Marché aux épices {%- endcomment -%}
<div class="nn-theme-marche-epices" style="--nn-kraft: {{ section.settings.couleur_kraft }}; --nn-ardoise: {{ section.settings.couleur_ardoise }}; --nn-accent: {{ section.settings.couleur_accent }};">
<header class="nn-theme-marche-epices__entete"><a href="/" class="nn-theme-marche-epices__logo">{{ shop.name | escape }}</a><nav>{%- for l in linklists[section.settings.menu].links limit: 4 -%}<a href="{{ l.url }}">{{ l.title | escape }}</a>{%- endfor -%}</nav><a href="{{ routes.cart_url }}">Panier ({{ cart.item_count }})</a></header>
<section class="nn-theme-marche-epices__heros">
<div class="nn-theme-marche-epices__ardoise"><small>{{ section.settings.sur_titre | escape }}</small><h1>{{ section.settings.titre | escape }}</h1><a href="{{ section.settings.collection.url | default: '/collections/all' }}">{{ section.settings.bouton | escape }} →</a></div>
<div class="nn-theme-marche-epices__photo">{%- if section.settings.image != blank -%}{{ section.settings.image | image_url: width: 900 | image_tag: alt: section.settings.titre }}{%- else -%}{{ 'product-6' | placeholder_svg_tag }}{%- endif -%}</div>
</section>
<section class="nn-theme-marche-epices__etal">
{%- for p in section.settings.collection.products limit: 4 -%}<a href="{{ p.url }}" class="nn-theme-marche-epices__bocal"><span class="nn-theme-marche-epices__couvercle"></span><span class="nn-theme-marche-epices__verre">{%- if p.featured_image -%}{{ p.featured_image | image_url: width: 400 | image_tag: loading: 'lazy', alt: p.title }}{%- endif -%}</span><span class="nn-theme-marche-epices__etiquette">{{ p.title | escape }}<b>{{ p.price | money }}</b></span></a>{%- else -%}{%- for i in (1..4) -%}<div class="nn-theme-marche-epices__bocal"><span class="nn-theme-marche-epices__couvercle"></span><span class="nn-theme-marche-epices__verre">{{ 'product-6' | placeholder_svg_tag }}</span><span class="nn-theme-marche-epices__etiquette">Choisis une collection</span></div>{%- endfor -%}{%- endfor -%}
</section>
<footer class="nn-theme-marche-epices__pied"><p>Recettes et arrivages du marché</p>{%- 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">Je goûte</button>{%- endform -%}<small>© {{ 'now' | date: '%Y' }} {{ shop.name | escape }}</small></footer>
</div>
{% schema %}
{"name":"Thème Marché aux épices","settings":[
{"type":"link_list","id":"menu","label":"Menu","default":"main-menu"},
{"type":"text","id":"sur_titre","label":"Sur-titre","default":"Arrivage de la semaine"},
{"type":"text","id":"titre","label":"Titre","default":"Saveurs d'ici et d'ailleurs"},
{"type":"text","id":"bouton","label":"Bouton","default":"Faire son marché"},
{"type":"image_picker","id":"image","label":"Photo du héros"},
{"type":"collection","id":"collection","label":"Collection"},
{"type":"color","id":"couleur_kraft","label":"Kraft","default":"#D9B98C"},
{"type":"color","id":"couleur_ardoise","label":"Ardoise","default":"#2A2D2C"},
{"type":"color","id":"couleur_accent","label":"Accent","default":"#C2410C"}],
"presets":[{"name":"Thème Marché aux épices"}]}
{% endschema %}
{% stylesheet %}
/* Thème Marché : kraft, ardoise craie, bocaux */
.nn-theme-marche-epices{background:var(--nn-kraft) radial-gradient(rgba(0,0,0,.06) 1px,transparent 1px) 0 0/6px 6px;color:#2a1d10;font-family:Georgia,serif;overflow:hidden}
.nn-theme-marche-epices a{color:inherit;text-decoration:none}
.nn-theme-marche-epices__entete{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;font-size:15px}
.nn-theme-marche-epices__logo{font-size:24px;font-style:italic;color:var(--nn-accent)!important}
.nn-theme-marche-epices__entete nav{display:flex;gap:14px;flex-wrap:wrap}
.nn-theme-marche-epices__heros{display:grid;gap:20px;padding:20px 16px 36px;align-items:center}
.nn-theme-marche-epices__ardoise{background:var(--nn-ardoise);color:#f4f1ea;padding:28px 24px;border:10px solid #8b5a2b;border-radius:6px;box-shadow:0 14px 30px rgba(0,0,0,.25);font-family:"Segoe Print","Bradley Hand",cursive;transform:rotate(-1deg)}
.nn-theme-marche-epices__ardoise small{opacity:.75;font-size:14px}
.nn-theme-marche-epices h1{margin:8px 0 14px;font-size:clamp(30px,6vw,56px);font-weight:400;line-height:1.1;text-shadow:0 0 1px rgba(255,255,255,.6);animation:nn-theme-marche-epices-craie 2s steps(18) both}
.nn-theme-marche-epices__ardoise a{color:#FFD58A;font-size:18px;border-bottom:2px dashed}
.nn-theme-marche-epices__photo{border-radius:8px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 10px 24px rgba(0,0,0,.2);background:#c9a676}
.nn-theme-marche-epices__photo img,.nn-theme-marche-epices__photo svg{width:100%;height:100%;object-fit:cover}
.nn-theme-marche-epices__etal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding:20px 16px 40px;background:linear-gradient(transparent 85%,#8b5a2b 85% 90%,transparent 90%)}
.nn-theme-marche-epices__bocal{display:flex;flex-direction:column;align-items:center;transition:transform .3s}
.nn-theme-marche-epices__bocal:hover{transform:translateY(-6px) rotate(-2deg)}
.nn-theme-marche-epices__couvercle{width:60%;height:16px;border-radius:4px 4px 0 0;background:var(--nn-accent);background-image:repeating-linear-gradient(90deg,transparent 0 6px,rgba(0,0,0,.15) 6px 8px)}
.nn-theme-marche-epices__verre{width:84%;aspect-ratio:3/4;border-radius:12px 12px 20px 20px;overflow:hidden;background:rgba(255,255,255,.35);border:2px solid rgba(255,255,255,.7);box-shadow:inset 8px 0 14px rgba(255,255,255,.35)}
.nn-theme-marche-epices__verre img,.nn-theme-marche-epices__verre svg{width:100%;height:100%;object-fit:cover;opacity:.92}
.nn-theme-marche-epices__etiquette{margin-top:-60px;position:relative;background:#fffaf0;padding:8px 10px;border:1px solid #c8b08a;text-align:center;font-size:13px;display:flex;flex-direction:column;max-width:80%}
.nn-theme-marche-epices__etiquette b{color:var(--nn-accent)}
.nn-theme-marche-epices__pied{background:var(--nn-ardoise);color:#f4f1ea;text-align:center;padding:30px 16px}
.nn-theme-marche-epices__pied form{display:flex;gap:8px;max-width:420px;margin:12px auto 16px;flex-wrap:wrap}
.nn-theme-marche-epices__pied input[type=email]{flex:1 1 180px;min-width:0;padding:12px;border:0;border-radius:4px}
.nn-theme-marche-epices__pied button{padding:12px 18px;border:0;border-radius:4px;background:var(--nn-accent);color:#fff;cursor:pointer}
@keyframes nn-theme-marche-epices-craie{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@media (min-width:750px){.nn-theme-marche-epices__heros{grid-template-columns:1fr 1fr;padding:40px}.nn-theme-marche-epices__etal{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion: reduce){.nn-theme-marche-epices h1{animation:none}.nn-theme-marche-epices__bocal{transition:none}}
{% endstylesheet %}
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 Marché aux épices » (Thèmes complets)
Description : Thème cuisine chaleureux : ardoise de marché pour le titre écrit à la craie, papier kraft, produits présentés en bocaux étiquetés avec leurs vrais prix. Pour épiceries fines et produits du terroir.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/theme-marche-epices
Fichier : nahnah-theme-marche-epices.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-marche-epices.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-marche-epices ».
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-marche-epices).Ajouter à ma boutique
En un clic, le thème arrive dans ta boutique Shopify connectée, en non publié : tu le publies quand tu veux.
Chargement de tes boutiques…
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-marche-epices ».
- 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-marche-epices 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.
Boutique connectée à NAHNAH AI : l’assistant peut aussi l’installer directement (outil installer_element, ou appliquer_theme pour un thème).
Connecter le MCP