🎨 Thèmes completsGratuit · 0 NahnahPar NAHNAH
Thème Crayons de couleur
Thème enfants façon dessin : bordures tremblées comme tracées au crayon, couleurs vives, titre qui se colorie lettre par lettre, produits sur des feuilles de papier punaisées. Pour jouets 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-crayons-couleur.liquid (Liquid, CSS et JS inclus).
{%- comment -%} NAHNAH AI · Thème Crayons de couleur {%- endcomment -%}
{%- assign lettres = section.settings.titre | split: '' -%}
<div class="nn-theme-crayons-couleur" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }};">
<header class="nn-theme-crayons-couleur__entete"><a href="/" class="nn-theme-crayons-couleur__logo">{{ 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 }}">🎒 {{ cart.item_count }}</a></header>
<section class="nn-theme-crayons-couleur__heros">
<h1 aria-label="{{ section.settings.titre | escape }}">{%- for l in lettres -%}<span aria-hidden="true" style="--i: {{ forloop.index0 }};">{%- if l == ' ' -%} {%- else -%}{{ l | escape }}{%- endif -%}</span>{%- endfor -%}</h1>
<div class="nn-theme-crayons-couleur__cadre">{%- if section.settings.image != blank -%}{{ section.settings.image | image_url: width: 900 | image_tag: alt: section.settings.titre }}{%- else -%}{{ 'lifestyle-2' | placeholder_svg_tag }}{%- endif -%}</div>
<a class="nn-theme-crayons-couleur__bouton" href="{{ section.settings.collection.url | default: '/collections/all' }}">{{ section.settings.bouton | escape }}</a>
</section>
<section class="nn-theme-crayons-couleur__produits">
{%- for p in section.settings.collection.products limit: 4 -%}<a href="{{ p.url }}" style="--r: {{ forloop.index | modulo: 3 | minus: 1 }};">{%- if p.featured_image -%}{{ p.featured_image | image_url: width: 500 | image_tag: loading: 'lazy', alt: p.title }}{%- endif -%}<span>{{ p.title | escape }}</span><strong>{{ p.price | money }}</strong></a>{%- else -%}{%- for i in (1..4) -%}<div style="--r: {{ i | modulo: 3 | minus: 1 }};">{{ 'product-1' | placeholder_svg_tag }}<span>Choisis une collection</span></div>{%- endfor -%}{%- endfor -%}
</section>
<footer class="nn-theme-crayons-couleur__pied"><p>Des idées pour les petits, chaque mois ✏️</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">C'est parti</button>{%- endform -%}<small>© {{ 'now' | date: '%Y' }} {{ shop.name | escape }}</small></footer>
</div>
{% schema %}
{"name":"Thème Crayons de couleur","settings":[
{"type":"link_list","id":"menu","label":"Menu","default":"main-menu"},
{"type":"text","id":"titre","label":"Titre (court)","default":"On joue ?"},
{"type":"text","id":"bouton","label":"Bouton","default":"Voir les jouets"},
{"type":"image_picker","id":"image","label":"Photo du héros"},
{"type":"collection","id":"collection","label":"Collection"},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#FFFDF5"},
{"type":"color","id":"couleur_texte","label":"Texte et traits","default":"#2B2D42"}],
"presets":[{"name":"Thème Crayons de couleur"}]}
{% endschema %}
{% stylesheet %}
/* Thème Crayons : traits tremblés, lettres qui se colorient */
.nn-theme-crayons-couleur{background:var(--nn-fond) linear-gradient(color-mix(in srgb,#3A86FF 10%,transparent) 1px,transparent 1px) 0 0/100% 30px;color:var(--nn-texte);font-family:"Comic Sans MS","Chalkboard SE",system-ui,sans-serif;overflow:hidden}
.nn-theme-crayons-couleur a{color:inherit;text-decoration:none}
.nn-theme-crayons-couleur__entete{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;font-weight:700}
.nn-theme-crayons-couleur__logo{font-size:22px;color:#FF006E!important}
.nn-theme-crayons-couleur__entete nav{display:flex;gap:14px;flex-wrap:wrap}
.nn-theme-crayons-couleur__heros{display:grid;justify-items:center;gap:18px;padding:30px 16px;text-align:center}
.nn-theme-crayons-couleur h1{margin:0;font-size:clamp(46px,12vw,130px);font-weight:900;display:flex;flex-wrap:wrap;justify-content:center}
.nn-theme-crayons-couleur h1 span{color:transparent;-webkit-text-stroke:2px var(--nn-texte);animation:nn-theme-crayons-couleur-colorie .5s forwards;animation-delay:calc(var(--i) * .15s + .3s)}
.nn-theme-crayons-couleur h1 span:nth-child(4n+1){--c:#FF006E}.nn-theme-crayons-couleur h1 span:nth-child(4n+2){--c:#FB5607}.nn-theme-crayons-couleur h1 span:nth-child(4n+3){--c:#3A86FF}.nn-theme-crayons-couleur h1 span:nth-child(4n){--c:#8AC926}
.nn-theme-crayons-couleur__cadre{width:min(460px,88vw);aspect-ratio:4/3;overflow:hidden;border:4px solid var(--nn-texte);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;transform:rotate(-1.5deg)}
.nn-theme-crayons-couleur__cadre img,.nn-theme-crayons-couleur__cadre svg{width:100%;height:100%;object-fit:cover;background:#e9f5ff}
.nn-theme-crayons-couleur__bouton{display:inline-block;padding:14px 28px;background:#FFBE0B;border:3px solid var(--nn-texte);border-radius:15px 225px 15px 255px/255px 15px 225px 15px;font-weight:900;font-size:18px;transition:transform .2s}
.nn-theme-crayons-couleur__bouton:hover{transform:rotate(-3deg) scale(1.05)}
.nn-theme-crayons-couleur__produits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding:30px 16px}
.nn-theme-crayons-couleur__produits>*{position:relative;display:flex;flex-direction:column;gap:4px;padding:10px 10px 14px;background:#fff;box-shadow:2px 4px 10px rgba(0,0,0,.1);transform:rotate(calc(var(--r) * 2deg));transition:transform .3s}
.nn-theme-crayons-couleur__produits>*::before{content:"";position:absolute;top:-8px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#FF006E;box-shadow:inset -3px -3px 0 rgba(0,0,0,.2)}
.nn-theme-crayons-couleur__produits>*:hover{transform:rotate(0) scale(1.03)}
.nn-theme-crayons-couleur__produits img,.nn-theme-crayons-couleur__produits svg{width:100%;aspect-ratio:1;object-fit:cover;background:#f2f2f2}
.nn-theme-crayons-couleur__pied{text-align:center;padding:30px 16px;border-top:4px dashed var(--nn-texte)}
.nn-theme-crayons-couleur__pied p{font-size:20px;font-weight:700;margin:0}
.nn-theme-crayons-couleur__pied form{display:flex;gap:8px;max-width:420px;margin:12px auto 16px;flex-wrap:wrap}
.nn-theme-crayons-couleur__pied input[type=email]{flex:1 1 180px;min-width:0;padding:12px;border:3px solid var(--nn-texte);border-radius:12px;font:inherit}
.nn-theme-crayons-couleur__pied button{padding:12px 18px;border:3px solid var(--nn-texte);border-radius:12px;background:#8AC926;font:inherit;font-weight:900;cursor:pointer}
@keyframes nn-theme-crayons-couleur-colorie{to{color:var(--c);-webkit-text-stroke-color:transparent}}
@media (min-width:750px){.nn-theme-crayons-couleur__produits{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion: reduce){.nn-theme-crayons-couleur h1 span{animation:none;color:var(--c)}.nn-theme-crayons-couleur__produits>*,.nn-theme-crayons-couleur__bouton{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 Crayons de couleur » (Thèmes complets)
Description : Thème enfants façon dessin : bordures tremblées comme tracées au crayon, couleurs vives, titre qui se colorie lettre par lettre, produits sur des feuilles de papier punaisées. Pour jouets et vêtements enfants.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/theme-crayons-couleur
Fichier : nahnah-theme-crayons-couleur.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-crayons-couleur.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-crayons-couleur ».
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-crayons-couleur).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-crayons-couleur ».
- 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-crayons-couleur 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