🎨 Thèmes completsGratuit · 0 NahnahPar NAHNAH
Thème Espace fusée
Thème enfants spatial : fusée qui décolle avec sa flamme, planètes en orbite, étoiles, compte de lancement et produits dans des hublots de station. Pour jouets, déco de chambre et vêtements enfants.
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-espace-fusee.liquid (Liquid, CSS et JS inclus).
{%- comment -%} NAHNAH AI · Thème Espace fusée {%- endcomment -%}
<div class="nn-theme-espace-fusee" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-a: {{ section.settings.couleur_a }}; --nn-b: {{ section.settings.couleur_b }};">
<header class="nn-theme-espace-fusee__entete"><a href="/">🚀 {{ 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 }}">Soute {{ cart.item_count }}</a></header>
<section class="nn-theme-espace-fusee__heros">
<div class="nn-theme-espace-fusee__orbite" aria-hidden="true"><span class="nn-theme-espace-fusee__soleil"></span><i class="nn-theme-espace-fusee__planete"></i></div>
<svg class="nn-theme-espace-fusee__fusee" viewBox="0 0 60 120" aria-hidden="true"><path class="nn-theme-espace-fusee__flamme" d="M22 92 L30 120 L38 92Z"/><path d="M30 0 C46 18 48 60 42 90 H18 C12 60 14 18 30 0Z" class="nn-theme-espace-fusee__coque"/><circle cx="30" cy="40" r="8" class="nn-theme-espace-fusee__hublot"/><path d="M18 70 L4 96 L18 90Z M42 70 L56 96 L42 90Z" class="nn-theme-espace-fusee__ailes"/></svg>
<h1>{{ section.settings.titre | escape }}</h1>
<a href="{{ section.settings.collection.url | default: '/collections/all' }}">{{ section.settings.bouton | escape }}</a>
</section>
<section class="nn-theme-espace-fusee__produits">
{%- for p in section.settings.collection.products limit: 4 -%}<a href="{{ p.url }}"><span class="nn-theme-espace-fusee__hublot-produit">{%- if p.featured_image -%}{{ p.featured_image | image_url: width: 400 | image_tag: loading: 'lazy', alt: p.title }}{%- endif -%}</span><span>{{ p.title | escape }}</span><strong>{{ p.price | money }}</strong></a>{%- else -%}{%- for i in (1..4) -%}<div><span class="nn-theme-espace-fusee__hublot-produit">{{ 'product-3' | placeholder_svg_tag }}</span><span>Choisis une collection</span></div>{%- endfor -%}{%- endfor -%}
</section>
<footer class="nn-theme-espace-fusee__pied"><p>Rejoins l'équipage des petits astronautes</p>{%- form 'customer' -%}<input type="hidden" name="contact[tags]" value="newsletter"><input type="email" name="contact[email]" placeholder="E-mail des parents" required aria-label="E-mail"><button type="submit">3, 2, 1… Go !</button>{%- endform -%}<small>© {{ 'now' | date: '%Y' }} {{ shop.name | escape }}</small></footer>
</div>
{% schema %}
{"name":"Thème Espace fusée","settings":[
{"type":"link_list","id":"menu","label":"Menu","default":"main-menu"},
{"type":"text","id":"titre","label":"Titre","default":"Destination les étoiles"},
{"type":"text","id":"bouton","label":"Bouton","default":"Décoller"},
{"type":"collection","id":"collection","label":"Collection"},
{"type":"color","id":"couleur_fond","label":"Ciel","default":"#141B4D"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#FFFFFF"},
{"type":"color","id":"couleur_a","label":"Fusée","default":"#FF5A5F"},
{"type":"color","id":"couleur_b","label":"Planète","default":"#FFC93C"}],
"presets":[{"name":"Thème Espace fusée"}]}
{% endschema %}
{% stylesheet %}
/* Thème Espace : fusée qui décolle, orbite, hublots */
.nn-theme-espace-fusee{background:var(--nn-fond) radial-gradient(1.5px 1.5px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 30% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 60% 30%,#fff,transparent),radial-gradient(1px 1px at 85% 55%,#fff,transparent),radial-gradient(1.5px 1.5px at 75% 85%,#fff,transparent);color:var(--nn-texte);font-family:"Trebuchet MS",system-ui,sans-serif;overflow:hidden}
.nn-theme-espace-fusee a{color:inherit;text-decoration:none}
.nn-theme-espace-fusee__entete{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;font-weight:700;font-size:14px}
.nn-theme-espace-fusee__entete nav{display:flex;gap:14px;flex-wrap:wrap}
.nn-theme-espace-fusee__heros{position:relative;display:grid;justify-items:center;gap:16px;padding:30px 16px 50px;text-align:center}
.nn-theme-espace-fusee__orbite{position:absolute;top:30px;right:6%;width:150px;height:150px;border:1px dashed rgba(255,255,255,.3);border-radius:50%;animation:nn-theme-espace-fusee-orbite 12s linear infinite}
.nn-theme-espace-fusee__soleil{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px;border-radius:50%;background:radial-gradient(circle,#fff6c0,#ffb300);box-shadow:0 0 20px #ffb300}
.nn-theme-espace-fusee__planete{position:absolute;top:-12px;left:50%;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:var(--nn-b);box-shadow:inset -5px -5px 0 rgba(0,0,0,.2)}
.nn-theme-espace-fusee__fusee{width:90px;height:180px;animation:nn-theme-espace-fusee-decolle 3s ease-in-out infinite alternate}
.nn-theme-espace-fusee__coque{fill:#F5F5F5}
.nn-theme-espace-fusee__hublot{fill:#5BC0EB;stroke:#3A3A3A;stroke-width:3}
.nn-theme-espace-fusee__ailes{fill:var(--nn-a)}
.nn-theme-espace-fusee__flamme{fill:#FFB703;transform-origin:30px 92px;animation:nn-theme-espace-fusee-flamme .15s ease-in-out infinite alternate}
.nn-theme-espace-fusee h1{margin:0;font-size:clamp(34px,8vw,80px);font-weight:900}
.nn-theme-espace-fusee__heros>a{padding:14px 30px;border-radius:999px;background:var(--nn-a);color:#fff;font-weight:900;box-shadow:0 6px 0 color-mix(in srgb,var(--nn-a) 60%,#000)}
.nn-theme-espace-fusee__produits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:20px 16px 40px;text-align:center}
.nn-theme-espace-fusee__produits>*{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;font-weight:700}
.nn-theme-espace-fusee__hublot-produit{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:8px solid #C9D2E3;box-shadow:inset 0 0 0 3px #7B88A3,0 0 0 4px #4A5570;transition:transform .5s}
.nn-theme-espace-fusee__produits>*:hover .nn-theme-espace-fusee__hublot-produit{transform:rotate(12deg) scale(1.05)}
.nn-theme-espace-fusee__hublot-produit img,.nn-theme-espace-fusee__hublot-produit svg{width:100%;height:100%;object-fit:cover;background:#22306b}
.nn-theme-espace-fusee__produits strong{color:var(--nn-b)}
.nn-theme-espace-fusee__pied{text-align:center;padding:30px 16px;background:rgba(0,0,0,.25)}
.nn-theme-espace-fusee__pied p{font-weight:900;font-size:20px;margin:0}
.nn-theme-espace-fusee__pied form{display:flex;gap:8px;max-width:420px;margin:12px auto 16px;flex-wrap:wrap}
.nn-theme-espace-fusee__pied input[type=email]{flex:1 1 180px;min-width:0;padding:12px 16px;border-radius:999px;border:0}
.nn-theme-espace-fusee__pied button{padding:12px 18px;border-radius:999px;border:0;background:var(--nn-b);color:#1a1a1a;font-weight:900;cursor:pointer}
@keyframes nn-theme-espace-fusee-decolle{from{transform:translateY(10px)}to{transform:translateY(-14px)}}
@keyframes nn-theme-espace-fusee-flamme{from{transform:scaleY(.8)}to{transform:scaleY(1.25)}}
@keyframes nn-theme-espace-fusee-orbite{to{transform:rotate(360deg)}}
@media (min-width:750px){.nn-theme-espace-fusee__produits{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion: reduce){.nn-theme-espace-fusee__fusee,.nn-theme-espace-fusee__flamme,.nn-theme-espace-fusee__orbite{animation:none}.nn-theme-espace-fusee__hublot-produit{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 Espace fusée » (Thèmes complets)
Description : Thème enfants spatial : fusée qui décolle avec sa flamme, planètes en orbite, étoiles, compte de lancement et produits dans des hublots de station. Pour jouets, déco de chambre et vêtements enfants.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/theme-espace-fusee
Fichier : nahnah-theme-espace-fusee.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-espace-fusee.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-espace-fusee ».
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-espace-fusee).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-espace-fusee ».
- 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-espace-fusee 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