🎨 Thèmes completsGratuit · 0 NahnahPar NAHNAH

Thème Risographie

Thème imprimé en risographie : deux encres fluo superposées en mode multiplication, léger décalage de calage, grain de papier, photos en bichromie. Pour illustrateurs, affiches, fanzines, librairies indépendantes et marques créatives.

Voir le code Modifier 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/nn-th-risographie.liquid (Liquid, CSS et JS inclus).

{%- comment -%} NAHNAH AI · Thème Risographie {%- endcomment -%}
<div class="nn-themes-risographie" style="--nn-papier: {{ section.settings.couleur_papier }}; --nn-encre1: {{ section.settings.couleur_encre1 }}; --nn-encre2: {{ section.settings.couleur_encre2 }}; --nn-texte: {{ section.settings.couleur_texte }};">
  <header class="nn-themes-risographie__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 }}">Panier ({{ cart.item_count }})</a></header>
  <section class="nn-themes-risographie__heros">
    <h1><span>{{ section.settings.titre | escape }}</span><span aria-hidden="true">{{ section.settings.titre | escape }}</span></h1>
    <div class="nn-themes-risographie__visuel">{%- if section.settings.image != blank -%}{{ section.settings.image | image_url: width: 900 | image_tag: alt: section.settings.titre }}{%- else -%}{{ 'lifestyle-1' | placeholder_svg_tag }}{%- endif -%}<i aria-hidden="true"></i></div>
    {%- if section.settings.texte != blank -%}<p>{{ section.settings.texte | escape }}</p>{%- endif -%}
    <a class="nn-themes-risographie__bouton" href="{{ section.settings.collection.url | default: '/collections/all' }}">{{ section.settings.bouton | escape }}</a>
  </section>
  <section class="nn-themes-risographie__produits">
    {%- for p in section.settings.collection.products limit: 4 -%}<a href="{{ p.url }}"><span class="nn-themes-risographie__tirage">{%- if p.featured_image -%}{{ p.featured_image | image_url: width: 500 | 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-themes-risographie__tirage">{{ 'product-6' | placeholder_svg_tag }}</span><span>Choisis une collection</span></div>{%- endfor -%}{%- endfor -%}
  </section>
  <footer class="nn-themes-risographie__pied">{%- form 'customer' -%}<input type="hidden" name="contact[tags]" value="newsletter"><input type="email" name="contact[email]" placeholder="Ton e-mail" required aria-label="E-mail"><button type="submit">Recevoir les tirages</button>{%- endform -%}<small>Imprimé avec amour · © {{ 'now' | date: '%Y' }} {{ shop.name | escape }}</small></footer>
</div>
{% schema %}
{"name":"Thème Risographie","settings":[
{"type":"link_list","id":"menu","label":"Menu","default":"main-menu"},
{"type":"text","id":"titre","label":"Titre","default":"Tirages limités, encre vivante"},
{"type":"textarea","id":"texte","label":"Texte"},
{"type":"text","id":"bouton","label":"Bouton","default":"Voir les tirages"},
{"type":"image_picker","id":"image","label":"Visuel"},
{"type":"collection","id":"collection","label":"Collection"},
{"type":"color","id":"couleur_papier","label":"Papier","default":"#F5F0E4"},
{"type":"color","id":"couleur_encre1","label":"Encre 1","default":"#FF48B0"},
{"type":"color","id":"couleur_encre2","label":"Encre 2","default":"#0078BF"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#1F1A3A"}],
"presets":[{"name":"Thème Risographie"}]}
{% endschema %}

{% stylesheet %}
/* NAHNAH AI · Thème Risographie : deux encres, décalage de calage et grain */
.nn-themes-risographie{position:relative;isolation:isolate;background:var(--nn-papier);color:var(--nn-texte);font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;overflow:hidden}
.nn-themes-risographie::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.35;mix-blend-mode:multiply;background-image:radial-gradient(rgba(0,0,0,.25) 1px,transparent 1px);background-size:3px 3px}
.nn-themes-risographie a{color:inherit;text-decoration:none}
.nn-themes-risographie__entete{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px;font-weight:700;color:var(--nn-encre2)}
.nn-themes-risographie__entete>a:first-child{font-size:22px;color:var(--nn-encre1)}
.nn-themes-risographie__entete nav{display:flex;gap:16px;flex-wrap:wrap}
.nn-themes-risographie__heros{display:grid;gap:22px;padding:20px 16px 40px;max-width:1150px;margin:0 auto}
.nn-themes-risographie h1{position:relative;margin:0;font-size:clamp(44px,10vw,120px);line-height:.9;font-weight:800;letter-spacing:-.04em;text-transform:uppercase}
.nn-themes-risographie h1 span{display:block;color:var(--nn-encre2);mix-blend-mode:multiply}
.nn-themes-risographie h1 span+span{position:absolute;inset:0;color:var(--nn-encre1);transform:translate(4px,-3px);animation:nn-themes-risographie-calage 6s ease-in-out infinite alternate}
.nn-themes-risographie__visuel{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--nn-encre1)}
.nn-themes-risographie__visuel img,.nn-themes-risographie__visuel svg{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.3);mix-blend-mode:multiply}
.nn-themes-risographie__visuel i{position:absolute;inset:0;background:var(--nn-encre2);mix-blend-mode:screen;opacity:.55;transform:translate(6px,4px)}
.nn-themes-risographie__heros p{margin:0;max-width:52ch;font-size:18px;line-height:1.6}
.nn-themes-risographie__bouton{justify-self:start;padding:14px 26px;background:var(--nn-encre1);color:var(--nn-papier)!important;font-weight:800;text-transform:uppercase;box-shadow:4px 4px 0 var(--nn-encre2);mix-blend-mode:multiply;transition:box-shadow .2s,transform .2s}
.nn-themes-risographie__bouton:hover{transform:translate(4px,4px);box-shadow:0 0 0 var(--nn-encre2)}
.nn-themes-risographie__produits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:10px 16px 50px;max-width:1150px;margin:0 auto}
.nn-themes-risographie__produits>*{display:flex;flex-direction:column;gap:6px;font-weight:700}
.nn-themes-risographie__produits strong{color:var(--nn-encre1)}
.nn-themes-risographie__tirage{aspect-ratio:4/5;overflow:hidden;background:color-mix(in srgb,var(--nn-encre2) 70%,var(--nn-papier))}
.nn-themes-risographie__tirage img,.nn-themes-risographie__tirage svg{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2);mix-blend-mode:multiply;transition:transform .5s}
.nn-themes-risographie__produits>*:nth-child(even) .nn-themes-risographie__tirage{background:color-mix(in srgb,var(--nn-encre1) 70%,var(--nn-papier))}
.nn-themes-risographie__produits>*:hover img{transform:scale(1.05) rotate(-1deg)}
.nn-themes-risographie__pied{text-align:center;padding:34px 16px;background:var(--nn-encre2);color:var(--nn-papier)}
.nn-themes-risographie__pied form{display:flex;gap:8px;max-width:460px;margin:0 auto 14px;flex-wrap:wrap}
.nn-themes-risographie__pied input[type=email]{flex:1 1 200px;min-width:0;padding:12px 14px;border:0;background:var(--nn-papier);font:inherit}
.nn-themes-risographie__pied button{padding:12px 18px;border:0;background:var(--nn-encre1);color:var(--nn-papier);font:inherit;font-weight:800;cursor:pointer}
@keyframes nn-themes-risographie-calage{to{transform:translate(-3px,2px)}}
@media (min-width:750px){.nn-themes-risographie__heros{grid-template-columns:1.2fr 1fr;align-items:end}.nn-themes-risographie h1{grid-column:1/-1}.nn-themes-risographie__produits{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion: reduce){.nn-themes-risographie h1 span+span{animation:none}.nn-themes-risographie__bouton,.nn-themes-risographie__tirage img{transition:none}}
{% 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 : « Thème Risographie » (Thèmes complets)
Description : Thème imprimé en risographie : deux encres fluo superposées en mode multiplication, léger décalage de calage, grain de papier, photos en bichromie. Pour illustrateurs, affiches, fanzines, librairies indépendantes et marques créatives.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/themes-risographie
Fichier : nahnah-themes-risographie.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-risographie.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-risographie ».
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 : themes-risographie).

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-risographie ».
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 themes-risographie 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