🛍️ Fiches produitGratuit · 0 NahnahPar NAHNAH
Composer son plateau
Fiche restaurant : le client ajoute des pièces (maki, sashimi, nigiri…), elles se posent sur un plateau en bois, le total et le nombre de pièces se mettent à jour.
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/fiche-plateau-sushis.liquid (Liquid, CSS et JS inclus).
<section class="nn-ps">
<div class="nn-ps__plateau"><div class="nn-ps__pieces"></div><small class="nn-ps__vide">Ton plateau est vide</small></div>
<div class="nn-ps__infos"><h2>{{ section.settings.titre | default: "Compose ton plateau" }}</h2>
<div class="nn-ps__choix"><button data-e="🍣" data-p="2.2">Nigiri saumon <span>2,20 €</span></button><button data-e="🍙" data-p="1.8">Onigiri <span>1,80 €</span></button><button data-e="🍤" data-p="2.6">Tempura crevette <span>2,60 €</span></button><button data-e="🥟" data-p="1.5">Gyoza <span>1,50 €</span></button></div>
<p class="nn-ps__total"><b class="n">0</b> pièces · <b class="t">0,00 €</b></p><button class="nn-ps__reset">Vider</button><a class="nn-ps__btn">Commander ce plateau</a></div>
</section>
{% schema %}{"name":"Composer son plateau","settings":[{"type":"text","id":"titre","label":"Titre","default":"Compose ton plateau"}],"presets":[{"name":"Composer son plateau"}]}{% endschema %}
{% stylesheet %}
.nn-ps{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:72px 7%;background:#fff;color:#1a1a1a;font-family:"Inter",sans-serif}
.nn-ps__plateau{position:relative;aspect-ratio:1.4;border-radius:18px;background:#c89b6d repeating-linear-gradient(90deg,transparent 0 22px,rgba(0,0,0,.05) 22px 24px);box-shadow:inset 0 0 0 10px #a97b4f,0 24px 40px rgba(0,0,0,.15);display:grid;place-items:center;padding:30px}
.nn-ps__pieces{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:40px}
.nn-ps__pieces i{font-style:normal;animation:nnPsPose .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes nnPsPose{from{transform:translateY(-60px) scale(.5);opacity:0}}
.nn-ps__vide{position:absolute;color:#6b4a2b}
.nn-ps h2{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(28px,4vw,42px);margin:0 0 18px}
.nn-ps__choix{display:grid;gap:8px}
.nn-ps__choix button{display:flex;justify-content:space-between;border:1px solid #e5e0d8;background:#faf8f4;padding:14px 16px;border-radius:12px;font-size:15px;cursor:pointer;transition:transform .15s,border-color .2s}
.nn-ps__choix button:active{transform:scale(.97)}.nn-ps__choix button:hover{border-color:#c8102e}
.nn-ps__total{font-size:18px;margin:20px 0 8px}.nn-ps__total .t{color:#c8102e;font-size:26px}
.nn-ps__reset{background:none;border:0;text-decoration:underline;cursor:pointer;padding:0;margin-bottom:12px}
.nn-ps__btn{display:block;text-align:center;background:#1a1a1a;color:#fff;padding:16px;border-radius:999px;font-weight:700;cursor:pointer}
@media(max-width:760px){.nn-ps{grid-template-columns:1fr}}
{% endstylesheet %}
{% javascript %}
document.querySelectorAll('.nn-ps').forEach(function(s){var n=0,t=0,p=s.querySelector('.nn-ps__pieces'),v=s.querySelector('.nn-ps__vide');function aff(){s.querySelector('.n').textContent=n;s.querySelector('.t').textContent=t.toFixed(2).replace('.',',')+' €';v.style.display=n?'none':'';}s.querySelectorAll('[data-e]').forEach(function(b){b.addEventListener('click',function(){if(n>=24)return;var i=document.createElement('i');i.textContent=b.dataset.e;p.appendChild(i);n++;t+=+b.dataset.p;aff();});});s.querySelector('.nn-ps__reset').addEventListener('click',function(){p.innerHTML='';n=0;t=0;aff();});aff();});
{% 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 : « Composer son plateau » (Fiches produit)
Description : Fiche restaurant : le client ajoute des pièces (maki, sashimi, nigiri…), elles se posent sur un plateau en bois, le total et le nombre de pièces se mettent à jour.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/fiche-plateau-sushis
Fichier : nahnah-fiche-plateau-sushis.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/fiche-plateau-sushis.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 « fiche-plateau-sushis ».
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 : fiche-plateau-sushis).Installer dans ma boutique
En un clic, la section est ajoutée à un thème de ta boutique Shopify connectée (un thème non publié par défaut).
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 « fiche-plateau-sushis ».
- 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 fiche-plateau-sushis 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).
Connecter le MCP