🔘 BoutonsGratuit · 0 NahnahPar NAHNAH
Bouton cœur favori
Un cœur à cocher pour la liste d'envies : au clic il se remplit, grossit et projette une petite explosion de particules. Le choix est mémorisé sur l'appareil.
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/nahnah-bouton-coeur-favori.liquid (Liquid, CSS et JS inclus).
{%- comment -%} NAHNAH AI · Bouton cœur favori {%- endcomment -%}
<div class="nn-bouton-coeur-favori" style="--nn-coeur: {{ section.settings.couleur_coeur }}; --nn-texte: {{ section.settings.couleur_texte }};">
<button type="button" aria-pressed="false" data-nn-cle="{{ section.settings.produit.id | default: section.id }}">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.5-4.6-9.3-9.2C1.4 7.9 3.6 4.5 7 4.5c2 0 3.4 1.1 5 3 1.6-1.9 3-3 5-3 3.4 0 5.6 3.4 4.3 6.8-1.8 4.6-9.3 9.2-9.3 9.2z"/></svg>
<span class="nn-bouton-coeur-favori__eclats" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
</button>
<span class="nn-bouton-coeur-favori__libelle">{{ section.settings.texte | escape }}</span>
</div>
{% schema %}
{"name":"Bouton cœur favori","settings":[
{"type":"product","id":"produit","label":"Produit (pour mémoriser le favori)"},
{"type":"text","id":"texte","label":"Libellé","default":"Ajouter à mes envies"},
{"type":"color","id":"couleur_coeur","label":"Cœur","default":"#FF3B5C"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#222222"}],
"presets":[{"name":"Bouton cœur favori"}]}
{% endschema %}
{% stylesheet %}
/* Cœur qui se remplit avec explosion de particules */
.nn-bouton-coeur-favori{display:flex;align-items:center;justify-content:center;gap:12px;padding:24px 16px;font:600 15px system-ui,sans-serif;color:var(--nn-texte)}
.nn-bouton-coeur-favori button{position:relative;width:58px;height:58px;border-radius:50%;border:2px solid color-mix(in srgb,var(--nn-coeur) 35%,transparent);background:#fff;cursor:pointer;display:grid;place-items:center}
.nn-bouton-coeur-favori svg{width:28px;height:28px;fill:transparent;stroke:var(--nn-coeur);stroke-width:2;transition:fill .2s}
.nn-bouton-coeur-favori button[aria-pressed=true] svg{fill:var(--nn-coeur);animation:nn-bouton-coeur-favori-pop .45s cubic-bezier(.3,1.8,.5,1)}
.nn-bouton-coeur-favori__eclats{position:absolute;inset:0;pointer-events:none}
.nn-bouton-coeur-favori__eclats i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--nn-coeur);opacity:0}
.nn-bouton-coeur-favori--eclat .nn-bouton-coeur-favori__eclats i{animation:nn-bouton-coeur-favori-eclat .6s ease-out forwards}
.nn-bouton-coeur-favori__eclats i:nth-child(1){--nn-a:0deg}.nn-bouton-coeur-favori__eclats i:nth-child(2){--nn-a:45deg}.nn-bouton-coeur-favori__eclats i:nth-child(3){--nn-a:90deg}.nn-bouton-coeur-favori__eclats i:nth-child(4){--nn-a:135deg}.nn-bouton-coeur-favori__eclats i:nth-child(5){--nn-a:180deg}.nn-bouton-coeur-favori__eclats i:nth-child(6){--nn-a:225deg}.nn-bouton-coeur-favori__eclats i:nth-child(7){--nn-a:270deg}.nn-bouton-coeur-favori__eclats i:nth-child(8){--nn-a:315deg}
.nn-bouton-coeur-favori__eclats i:nth-child(even){background:#FFC93C}
@keyframes nn-bouton-coeur-favori-pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
@keyframes nn-bouton-coeur-favori-eclat{0%{opacity:1;transform:rotate(var(--nn-a)) translateY(0)}100%{opacity:0;transform:rotate(var(--nn-a)) translateY(-38px) scale(.3)}}
@media (prefers-reduced-motion: reduce){.nn-bouton-coeur-favori svg,.nn-bouton-coeur-favori__eclats i{animation:none!important}}
{% endstylesheet %}
{% javascript %}
// Bascule le favori et le mémorise dans le navigateur
(function () {
document.querySelectorAll('.nn-bouton-coeur-favori').forEach(function (bloc) {
var b = bloc.querySelector('button'), cle = 'nn-favori-' + b.getAttribute('data-nn-cle');
var lib = bloc.querySelector('.nn-bouton-coeur-favori__libelle'), base = lib.textContent;
function etat(on) { b.setAttribute('aria-pressed', on); lib.textContent = on ? 'Dans mes envies' : base; }
try { etat(localStorage.getItem(cle) === '1'); } catch (e) {}
b.addEventListener('click', function () {
var on = b.getAttribute('aria-pressed') !== 'true';
etat(on);
try { on ? localStorage.setItem(cle, '1') : localStorage.removeItem(cle); } catch (e) {}
if (on) { bloc.classList.remove('nn-bouton-coeur-favori--eclat'); void bloc.offsetWidth; bloc.classList.add('nn-bouton-coeur-favori--eclat'); }
});
});
})();
{% 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 : « Bouton cœur favori » (Boutons)
Description : Un cœur à cocher pour la liste d'envies : au clic il se remplit, grossit et projette une petite explosion de particules. Le choix est mémorisé sur l'appareil.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/bouton-coeur-favori
Fichier : nahnah-bouton-coeur-favori.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/nahnah-bouton-coeur-favori.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 « nahnah-bouton-coeur-favori ».
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 : bouton-coeur-favori).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 « nahnah-bouton-coeur-favori ».
- 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 bouton-coeur-favori 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