Aller au contenu

🌅 HérosGratuit · 0 NahnahPar NAHNAH AI

Héros lancement produit

Lancement d’un nouveau produit : photo sur un halo animé, étiquette « Nouveau », atouts numérotés en blocs, prix lu dans Shopify et ajout au panier.

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.

Photos : Unsplash / Pexels (exemples de l’aperçu, jamais inclus dans le code).

Code à copier

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

{%- comment -%} NAHNAH AI · Héros lancement produit (bibliothèque Sections & effets) {%- endcomment -%}
<div class="nn-hero-lancement-produit" 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-lancement-produit__grille">
    <div class="nn-hero-lancement-produit__media">
      <span class="nn-hero-lancement-produit__halo" aria-hidden="true"></span>
      {%- if produit != blank and produit.featured_media -%}
        {{ produit.featured_media | image_url: width: 1200 | image_tag: class: 'nn-hero-lancement-produit__img', sizes: '(min-width: 900px) 45vw, 90vw', widths: '500, 800, 1200', loading: 'eager' }}
      {%- else -%}
        {{ 'product-3' | placeholder_svg_tag: 'nn-hero-lancement-produit__img nn-hero-lancement-produit__img--vide' }}
      {%- endif -%}
      {%- if section.settings.etiquette != blank -%}<span class="nn-hero-lancement-produit__etiquette">{{ section.settings.etiquette | escape }}</span>{%- endif -%}
    </div>
    <div class="nn-hero-lancement-produit__contenu">
      <h2 class="nn-hero-lancement-produit__titre">
        {%- if section.settings.titre_produit and produit != blank -%}{{ produit.title | escape }}{%- elsif section.settings.titre != blank -%}{{ section.settings.titre | escape }}{%- else -%}Ton nouveau produit{%- endif -%}
      </h2>
      {%- if section.settings.prix and produit != blank -%}
        <p class="nn-hero-lancement-produit__prix">
          {%- if produit.compare_at_price > produit.price -%}
            <span class="nn-hero-lancement-produit__vh">Prix promotionnel</span>
            <span class="nn-hero-lancement-produit__prix-actuel">{{ produit.price | money }}</span>
            <span class="nn-hero-lancement-produit__vh">Prix habituel</span>
            <s class="nn-hero-lancement-produit__prix-barre">{{ produit.compare_at_price | money }}</s>
          {%- else -%}
            <span class="nn-hero-lancement-produit__prix-actuel">{{ produit.price | money }}</span>
          {%- endif -%}
        </p>
      {%- endif -%}
      {%- if section.settings.texte != blank -%}<div class="nn-hero-lancement-produit__texte">{{ section.settings.texte }}</div>{%- endif -%}
      {%- if section.blocks.size > 0 -%}
        <ol class="nn-hero-lancement-produit__atouts">
          {%- for block in section.blocks -%}
            <li class="nn-hero-lancement-produit__atout" {{ block.shopify_attributes }}>
              <span class="nn-hero-lancement-produit__numero" aria-hidden="true">{{ forloop.index | prepend: '0' | slice: -2, 2 }}</span>
              <span class="nn-hero-lancement-produit__atout-textes">
                <span class="nn-hero-lancement-produit__atout-titre">{{ block.settings.titre | escape }}</span>
                {%- if block.settings.texte != blank -%}<span class="nn-hero-lancement-produit__atout-texte">{{ block.settings.texte | escape }}</span>{%- endif -%}
              </span>
            </li>
          {%- endfor -%}
        </ol>
      {%- endif -%}
      {%- if produit != blank -%}
        <div class="nn-hero-lancement-produit__boutons">
          {%- if section.settings.texte_ajout != blank -%}
            {%- form 'product', produit, class: 'nn-hero-lancement-produit__form' -%}
              <input type="hidden" name="id" value="{{ produit.selected_or_first_available_variant.id }}">
              <button type="submit" name="add" class="nn-hero-lancement-produit__bouton"{% unless produit.available %} disabled{% endunless %}>
                {%- if produit.available -%}{{ section.settings.texte_ajout | escape }}{%- else -%}Épuisé{%- endif -%}
              </button>
            {%- endform -%}
          {%- endif -%}
          {%- if section.settings.texte_voir != blank -%}
            <a class="nn-hero-lancement-produit__bouton nn-hero-lancement-produit__bouton--second" href="{{ produit.url }}">{{ section.settings.texte_voir | escape }}</a>
          {%- endif -%}
        </div>
      {%- else -%}
        <p class="nn-hero-lancement-produit__texte">Choisis le produit lancé 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 lancement produit",
  "tag": "section",
  "class": "nn-section-hero-lancement-produit",
  "max_blocks": 4,
  "settings": [
    {
      "type": "product",
      "id": "produit",
      "label": "Produit lancé"
    },
    {
      "type": "text",
      "id": "etiquette",
      "label": "Étiquette (vide : masquée)",
      "default": "Nouveau"
    },
    {
      "type": "checkbox",
      "id": "titre_produit",
      "label": "Titre : nom du produit",
      "default": true
    },
    {
      "type": "text",
      "id": "titre",
      "label": "Titre personnalisé (case décochée)",
      "default": "Le nouveau venu"
    },
    {
      "type": "richtext",
      "id": "texte",
      "label": "Accroche",
      "default": "<p>Pensé dans les moindres détails pour te simplifier la vie, dès le premier jour.</p>"
    },
    {
      "type": "checkbox",
      "id": "prix",
      "label": "Afficher le prix",
      "default": true
    },
    {
      "type": "text",
      "id": "texte_ajout",
      "label": "Texte du bouton d’ajout (vide : masqué)",
      "default": "Ajouter au panier"
    },
    {
      "type": "text",
      "id": "texte_voir",
      "label": "Texte du lien vers la fiche (vide : masqué)",
      "default": "Tout savoir"
    },
    {
      "type": "header",
      "content": "Couleurs"
    },
    {
      "type": "color",
      "id": "couleur_fond",
      "label": "Fond",
      "default": "#F5F7FA"
    },
    {
      "type": "color",
      "id": "couleur_texte",
      "label": "Texte",
      "default": "#0D1321"
    },
    {
      "type": "color",
      "id": "couleur_accent",
      "label": "Accent",
      "default": "#5B5BF7"
    },
    {
      "type": "color",
      "id": "couleur_bouton",
      "label": "Bouton",
      "default": "#0D1321"
    },
    {
      "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
    }
  ],
  "blocks": [
    {
      "type": "atout",
      "name": "Atout",
      "settings": [
        {
          "type": "text",
          "id": "titre",
          "label": "Titre",
          "default": "Atout du produit"
        },
        {
          "type": "text",
          "id": "texte",
          "label": "Précision (vide : masquée)",
          "default": "Explique en une phrase ce que ça change."
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Héros lancement produit",
      "blocks": [
        {
          "type": "atout",
          "settings": {
            "titre": "Simple à utiliser",
            "texte": "Prêt à l’emploi, sans réglage compliqué."
          }
        },
        {
          "type": "atout",
          "settings": {
            "titre": "Conçu pour durer",
            "texte": "Des matériaux choisis pour un usage quotidien."
          }
        },
        {
          "type": "atout",
          "settings": {
            "titre": "Facile à emporter",
            "texte": "Compact, il te suit partout."
          }
        }
      ]
    }
  ]
}
{% endschema %}

{% stylesheet %}
.nn-hero-lancement-produit {
  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-lancement-produit *, .nn-hero-lancement-produit *::before, .nn-hero-lancement-produit *::after { box-sizing: border-box; }
.nn-hero-lancement-produit :where(a, button):focus-visible { outline: 3px solid var(--nn-accent); outline-offset: 3px; }
.nn-hero-lancement-produit__surtitre { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nn-accent); }
.nn-hero-lancement-produit__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-lancement-produit__texte { margin: 0 0 28px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; opacity: 0.88; max-width: 560px; }
.nn-hero-lancement-produit__texte p { margin: 0 0 0.6em; }
.nn-hero-lancement-produit__boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.nn-hero-lancement-produit__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-lancement-produit__bouton--second { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
@media (hover: hover) {
  .nn-hero-lancement-produit__bouton:hover { transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--nn-bouton) 35%, transparent); }
  .nn-hero-lancement-produit__bouton--second:hover { box-shadow: inset 0 0 0 2px currentColor, 0 12px 26px rgba(0, 0, 0, 0.12); }
}
.nn-hero-lancement-produit__vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nn-hero-lancement-produit__grille { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; max-width: 1200px; margin: 0 auto; padding: clamp(40px, 7vw, 100px) 16px; }
@media (min-width: 900px) { .nn-hero-lancement-produit__grille { grid-template-columns: 1fr 1fr; padding-inline: 32px; } }
.nn-hero-lancement-produit__media { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 560px; width: 100%; margin: 0 auto; }
.nn-hero-lancement-produit__halo { position: absolute; inset: 6%; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; background: linear-gradient(135deg, var(--nn-accent), color-mix(in srgb, var(--nn-accent) 30%, var(--nn-fond))); opacity: 0.55; animation: nn-hero-lancement-produit-forme 12s ease-in-out infinite alternate; }
@keyframes nn-hero-lancement-produit-forme { 50% { transform: rotate(12deg) scale(1.04); } 100% { transform: rotate(-8deg) scale(0.98); } }
.nn-hero-lancement-produit__img { position: relative; display: block; width: 80%; height: 80%; object-fit: cover; border-radius: 28px; box-shadow: 0 36px 70px -30px rgba(0, 0, 0, 0.45); animation: nn-hero-lancement-produit-entree 1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes nn-hero-lancement-produit-entree { from { transform: translateY(30px) scale(0.96); opacity: 0; } }
.nn-hero-lancement-produit__etiquette { position: absolute; top: 8%; right: 8%; padding: 8px 16px; border-radius: 999px; background: var(--nn-texte); color: var(--nn-fond); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(6deg); }
.nn-hero-lancement-produit__titre { font-size: clamp(32px, 5.5vw, 60px); }
.nn-hero-lancement-produit__prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 0 0 16px; }
.nn-hero-lancement-produit__prix-actuel { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--nn-accent); }
.nn-hero-lancement-produit__prix-barre { font-size: 18px; opacity: 0.6; }
.nn-hero-lancement-produit__atouts { display: grid; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.nn-hero-lancement-produit__atout { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--nn-texte) 12%, transparent); }
.nn-hero-lancement-produit__numero { flex: none; min-width: 36px; font-size: 14px; font-weight: 800; color: var(--nn-accent); font-variant-numeric: tabular-nums; }
.nn-hero-lancement-produit__atout-textes { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nn-hero-lancement-produit__atout-titre { font-weight: 700; }
.nn-hero-lancement-produit__atout-texte { font-size: 14px; opacity: 0.75; }
.nn-hero-lancement-produit__form { margin: 0; }
.nn-hero-lancement-produit__bouton { border: 0; border-radius: 999px; font-family: inherit; cursor: pointer; }
.nn-hero-lancement-produit__bouton[disabled] { opacity: 0.5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .nn-hero-lancement-produit, .nn-hero-lancement-produit *, .nn-hero-lancement-produit *::before, .nn-hero-lancement-produit *::after {
    animation: none !important;
    transition: none !important;
  }
}
{% endstylesheet %}
Télécharger le fichier .liquid

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 : « Héros lancement produit » (Héros)
Description : Lancement d’un nouveau produit : photo sur un halo animé, étiquette « Nouveau », atouts numérotés en blocs, prix lu dans Shopify et ajout au panier.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/hero-lancement-produit
Fichier : nahnah-hero-lancement-produit.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-hero-lancement-produit.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-hero-lancement-produit ».
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 : hero-lancement-produit).

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-lancement-produit ».
  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-lancement-produit 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