NAHNAH AI

🌅 HérosGratuit · 0 NahnahPar NAHNAH AI

Héros produit vedette

Met un produit choisi en avant : photo, prix (et prix barré), courte description et ajout au panier en un clic.

Voir le codeModifier avec l’IA · 1 Nahnah

Aperçu en direct

Données de démonstration (produits, menus, textes d’exemple) : dans ta boutique, ce sont les tiennes.

Code à copier

Fichier complet sections/nahnah-hero-produit-vedette.liquid (Liquid, CSS et JS inclus).

{%- comment -%} NAHNAH AI · Héros produit vedette (bibliothèque Sections & effets) {%- endcomment -%}
<div class="nn-hero-produit-vedette" 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-bouton: {{ section.settings.couleur_bouton }}; --nn-texte-bouton: {{ section.settings.couleur_texte_bouton }};">
  {%- assign produit = section.settings.produit -%}
  <div class="nn-hero-produit-vedette__grille">
    <div class="nn-hero-produit-vedette__media">
      <span class="nn-hero-produit-vedette__cercle" aria-hidden="true"></span>
      {%- if produit != blank and produit.featured_media -%}
        {{ produit.featured_media | image_url: width: 1200 | image_tag: class: 'nn-hero-produit-vedette__img', sizes: '(min-width: 750px) 45vw, 100vw', widths: '600, 900, 1200', loading: 'eager' }}
      {%- else -%}
        {{ 'product-1' | placeholder_svg_tag: 'nn-hero-produit-vedette__img nn-hero-produit-vedette__img--vide' }}
      {%- endif -%}
      {%- if produit.compare_at_price > produit.price -%}
        <span class="nn-hero-produit-vedette__badge">Promo</span>
      {%- endif -%}
    </div>
    <div class="nn-hero-produit-vedette__contenu">
      {%- if section.settings.surtitre != blank -%}
        <p class="nn-hero-produit-vedette__surtitre">{{ section.settings.surtitre | escape }}</p>
      {%- endif -%}
      {%- if produit != blank -%}
        <h2 class="nn-hero-produit-vedette__titre">{{ produit.title | escape }}</h2>
        <p class="nn-hero-produit-vedette__prix">
          {%- if produit.compare_at_price > produit.price -%}
            <span class="nn-hero-produit-vedette__vh">Prix promotionnel</span>
            <span class="nn-hero-produit-vedette__prix-actuel">{{ produit.price | money }}</span>
            <span class="nn-hero-produit-vedette__vh">Prix habituel</span>
            <s class="nn-hero-produit-vedette__prix-barre">{{ produit.compare_at_price | money }}</s>
          {%- else -%}
            <span class="nn-hero-produit-vedette__prix-actuel">{{ produit.price | money }}</span>
          {%- endif -%}
        </p>
        {%- if section.settings.description and produit.description != blank -%}
          <p class="nn-hero-produit-vedette__texte">{{ produit.description | strip_html | truncatewords: 32 }}</p>
        {%- endif -%}
        <div class="nn-hero-produit-vedette__boutons">
          {%- if section.settings.ajout_panier -%}
            {%- form 'product', produit, class: 'nn-hero-produit-vedette__form' -%}
              <input type="hidden" name="id" value="{{ produit.selected_or_first_available_variant.id }}">
              <button type="submit" name="add" class="nn-hero-produit-vedette__bouton"{% unless produit.available %} disabled{% endunless %}>
                {%- if produit.available -%}{{ section.settings.texte_ajout | escape }}{%- else -%}Épuisé{%- endif -%}
              </button>
            {%- endform -%}
          {%- endif -%}
          <a class="nn-hero-produit-vedette__bouton nn-hero-produit-vedette__bouton--second" href="{{ produit.url }}">{{ section.settings.texte_voir | escape }}</a>
        </div>
      {%- else -%}
        <h2 class="nn-hero-produit-vedette__titre">Ton produit vedette</h2>
        <p class="nn-hero-produit-vedette__texte">Choisis un produit dans l’éditeur de thème : sa photo, son prix et le bouton d’ajout au panier s’afficheront ici.</p>
      {%- endif -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Héros produit vedette",
  "tag": "section",
  "class": "nn-section-hero-produit-vedette",
  "settings": [
    {
      "type": "product",
      "id": "produit",
      "label": "Produit"
    },
    {
      "type": "text",
      "id": "surtitre",
      "label": "Sur-titre (vide : masqué)",
      "default": "Produit vedette"
    },
    {
      "type": "checkbox",
      "id": "description",
      "label": "Afficher un extrait de la description",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "ajout_panier",
      "label": "Bouton « Ajouter au panier »",
      "default": true
    },
    {
      "type": "text",
      "id": "texte_ajout",
      "label": "Texte du bouton d’ajout",
      "default": "Ajouter au panier"
    },
    {
      "type": "text",
      "id": "texte_voir",
      "label": "Texte du lien vers la fiche",
      "default": "Voir le produit"
    },
    {
      "type": "header",
      "content": "Couleurs"
    },
    {
      "type": "color",
      "id": "couleur_fond",
      "label": "Fond",
      "default": "#F3F7F5"
    },
    {
      "type": "color",
      "id": "couleur_texte",
      "label": "Texte",
      "default": "#10201A"
    },
    {
      "type": "color",
      "id": "couleur_accent",
      "label": "Accent",
      "default": "#2EE6A8"
    },
    {
      "type": "color",
      "id": "couleur_bouton",
      "label": "Bouton",
      "default": "#10201A"
    },
    {
      "type": "color",
      "id": "couleur_texte_bouton",
      "label": "Texte du bouton",
      "default": "#FFFFFF"
    },
    {
      "type": "header",
      "content": "Espacement"
    },
    {
      "type": "range",
      "id": "marge_haut",
      "label": "Marge haute",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "marge_bas",
      "label": "Marge basse",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 0
    }
  ],
  "presets": [
    {
      "name": "Héros produit vedette"
    }
  ]
}
{% endschema %}

{% stylesheet %}
.nn-hero-produit-vedette {
  position: relative;
  display: block;
  padding: var(--nn-mh) 0 var(--nn-mb);
  background: var(--nn-fond);
  color: var(--nn-texte);
  overflow-x: clip;
}
.nn-hero-produit-vedette *, .nn-hero-produit-vedette *::before, .nn-hero-produit-vedette *::after { box-sizing: border-box; }
.nn-hero-produit-vedette :where(a, button):focus-visible { outline: 3px solid var(--nn-accent); outline-offset: 3px; }
.nn-hero-produit-vedette__surtitre { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nn-accent); }
.nn-hero-produit-vedette__titre { margin: 0 0 16px; font-size: clamp(32px, 6vw, 60px); line-height: 1.08; letter-spacing: -0.02em; overflow-wrap: anywhere; color: inherit; }
.nn-hero-produit-vedette__texte { margin: 0 0 28px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; opacity: 0.88; max-width: 560px; }
.nn-hero-produit-vedette__texte p { margin: 0 0 0.6em; }
.nn-hero-produit-vedette__boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.nn-hero-produit-vedette__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  max-width: 100%;
  padding: 14px 28px;
  border-radius: var(--nn-arrondi-bouton, 8px);
  background: var(--nn-bouton);
  color: var(--nn-texte-bouton);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nn-hero-produit-vedette__bouton--second { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
@media (hover: hover) {
  .nn-hero-produit-vedette__bouton:hover { transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--nn-bouton) 35%, transparent); }
  .nn-hero-produit-vedette__bouton--second:hover { box-shadow: inset 0 0 0 2px currentColor, 0 12px 26px rgba(0, 0, 0, 0.12); }
}
.nn-hero-produit-vedette__vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nn-hero-produit-vedette__grille { display: grid; gap: clamp(24px, 5vw, 72px); align-items: center; max-width: 1180px; margin: 0 auto; padding: clamp(32px, 6vw, 88px) 16px; }
@media (min-width: 750px) { .nn-hero-produit-vedette__grille { grid-template-columns: 1fr 1fr; padding-inline: 32px; } }
.nn-hero-produit-vedette__media { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.nn-hero-produit-vedette__cercle { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--nn-accent) 70%, #fff), var(--nn-accent)); opacity: 0.5; animation: nn-hero-produit-vedette-respire 6s ease-in-out infinite; }
@keyframes nn-hero-produit-vedette-respire { 50% { transform: scale(1.05); } }
.nn-hero-produit-vedette__img { position: relative; display: block; width: 84%; height: 84%; object-fit: cover; border-radius: 24px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35); animation: nn-hero-produit-vedette-flotte 5s ease-in-out infinite; }
@keyframes nn-hero-produit-vedette-flotte { 50% { transform: translateY(-10px); } }
.nn-hero-produit-vedette__badge { position: absolute; top: 12%; left: 12%; padding: 6px 14px; border-radius: 999px; background: var(--nn-texte); color: var(--nn-fond); font-size: 13px; font-weight: 700; }
.nn-hero-produit-vedette__titre { font-size: clamp(30px, 5vw, 52px); }
.nn-hero-produit-vedette__prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 0 0 18px; }
.nn-hero-produit-vedette__prix-actuel { font-size: clamp(22px, 3vw, 30px); font-weight: 800; }
.nn-hero-produit-vedette__prix-barre { font-size: 18px; opacity: 0.6; }
.nn-hero-produit-vedette__form { margin: 0; }
.nn-hero-produit-vedette__bouton { border: 0; font-family: inherit; cursor: pointer; border-radius: 999px; }
.nn-hero-produit-vedette__bouton[disabled] { opacity: 0.5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .nn-hero-produit-vedette, .nn-hero-produit-vedette *, .nn-hero-produit-vedette *::before, .nn-hero-produit-vedette *::after {
    animation: none !important;
    transition: none !important;
  }
}
{% endstylesheet %}

Licence NAHNAH AI : utilisation libre dans tes boutiques (y compris commerciales), modification permise, revente de l’élément seul interdite.

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

  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-hero-produit-vedette ».
  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.

Installer via le MCP

Depuis Claude, Claude Code ou ChatGPT connecté à NAHNAH AI, demande : « Donne-moi le code de l’élément hero-produit-vedette 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

Dans la même catégorie