Générateur de code Shopify par IA
Générateur de code Liquid Shopify
Dites à Klorr ce que la section doit faire. Il écrit le Liquid, le CSS et le JavaScript isolés, et un schema qui transforme chaque texte, couleur et image en paramètre modifiable dans l’éditeur de thème. Vous collez un seul fichier dans votre thème : pas d’application, pas d’abonnement mensuel, pas de script chargé sur chaque page.
“Une barre d’annonce avec un compte à rebours jusqu’à la fin des soldes, un court message et un bouton. Le marchand choisit les couleurs et la date de fin.”
<div class="acd-{{ section.id }}" data-ends="{{ section.settings.ends_at }}">
<p class="acd__msg">{{ section.settings.message | escape }}</p>
<div class="acd__clock" aria-live="polite">
<span data-unit="d">00</span>d <span data-unit="h">00</span>h
<span data-unit="m">00</span>m <span data-unit="s">00</span>s
</div>
{% if section.settings.button_label != blank %}
<a class="acd__btn" href="{{ section.settings.button_link }}">
{{ section.settings.button_label | escape }}
</a>
{% endif %}
</div>
{% style %}
.acd-{{ section.id }} {
background: {{ section.settings.background }};
color: {{ section.settings.text_color }};
}
{% endstyle %}
{% schema %}
{
"name": "Countdown bar",
"tag": "section",
"settings": [
{ "type": "text", "id": "message", "label": "Message", "default": "Summer sale ends in" },
{ "type": "text", "id": "ends_at", "label": "Ends at (YYYY-MM-DD HH:MM)", "default": "2026-10-31 23:59" },
{ "type": "text", "id": "button_label", "label": "Button label", "default": "Shop the sale" },
{ "type": "url", "id": "button_link", "label": "Button link" },
{ "type": "color", "id": "background", "label": "Background", "default": "#1c1230" },
{ "type": "color", "id": "text_color", "label": "Text", "default": "#ffffff" }
],
"presets": [{ "name": "Countdown bar" }]
}
{% endschema %}Ce que le générateur écrit
Du Liquid qui existe
De vrais objets, filtres et tags — section.settings, image_url, block.shopify_attributes — dans la structure de sections et de blocs attendue par Online Store 2.0. Rien d’inventé que l’éditeur de thème refuserait à l’enregistrement.
Un schema complet
Chaque titre, couleur, image, lien et interrupteur devient un paramètre avec une valeur par défaut pertinente : la section se modifie dans l’éditeur de thème, pas dans le code. Blocs, limites et preset inclus.
CSS et JavaScript isolés
Les styles sont préfixés par l’identifiant propre à la section : deux exemplaires sur une même page ne se gênent jamais, ni entre eux ni avec votre thème. Les scripts sont légers, en JavaScript natif, et ne s’exécutent que là où se trouve la section.
Un code qui vous appartient
C’est un seul fichier .liquid dans le dossier sections de votre thème. Pas de runtime, pas de filigrane, aucun enfermement : résiliez Klorr et la section continue de fonctionner exactement comme avant.
D’une phrase à une section en ligne
Décrivez-la
Écrivez avec vos propres mots ce que la section doit afficher et faire. Ajoutez les couleurs de votre marque et une capture d’écran si vous en avez une.
Affinez-la
Lisez le code, prévisualisez-le et demandez des modifications en langage courant — « mets le bouton en pleine largeur sur mobile » — jusqu’à ce que tout soit juste.
Collez-la dans votre thème
Copiez le fichier dans le dossier sections de votre thème, puis ajoutez la section depuis l’éditeur de thème comme n’importe quelle autre.
Pas à pas : comment ajouter une section personnalisée sur Shopify →
Klorr face aux alternatives
Il existe plus d’une façon d’ajouter une section personnalisée à une boutique Shopify. Voici la version honnête.
| Klorr | Le générateur de blocs IA de Shopify | Applications de création de pages | Faire appel à un développeur | |
|---|---|---|---|---|
| Ce que vous obtenez | Une section complète avec ses propres paramètres et blocs | Un seul bloc de thème | Des pages créées dans l’éditeur de l’application | Ce que vous définissez et payez |
| Compatible avec | Tout thème Online Store 2.0 | Les thèmes conçus pour les blocs de thème, comme Horizon | Les boutiques où l’application est installée | Tout thème |
| Coût récurrent | Votre forfait Klorr pendant que vous créez ; le code continue de fonctionner sans | Inclus dans Shopify | Un abonnement mensuel tant que les pages sont en ligne | À chaque modification, à chaque facture |
| Le code | Du Liquid lisible dans votre thème, à vous pour le garder et le modifier | Généré dans l’éditeur de thème | Rendu par l’application | À vous, une fois livré |
| Délai | Quelques secondes, puis autant d’allers-retours que vous voulez | Quelques secondes | Des heures de glisser-déposer | De quelques jours à quelques semaines |
Les sections les plus générées
Quelques-unes des sections que les marchands demandent le plus souvent à Klorr. Chacune renvoie à des versions prêtes à l’emploi sur la marketplace Klorr, si vous préférez partir de l’une d’elles.
Section compte à rebours
Fins de soldes, lancements et dates limites d’expédition.
Section FAQ en accordéon
Des questions et réponses qui se déplient sur place.
Carrousel de témoignages
Avis et citations avec photos et notes.
Section caractéristiques produit
Avantages, fiches techniques et comparatifs à côté du produit.
Section bannière hero
Image ou vidéo pleine largeur avec titre et boutons.
Galerie lookbook
Grilles d’images shoppables et curseurs avant/après.
Vos questions, nos réponses
Qu’est-ce qu’un générateur de code Liquid Shopify ?
C’est un outil qui écrit du Liquid — le langage de templates dont sont faits les thèmes Shopify — à partir d’une description. Klorr va plus loin que les extraits de code : il écrit un fichier de section complet avec le balisage, le CSS, le JavaScript et le schema, prêt à coller dans votre thème.
Avec quels thèmes le code fonctionne-t-il ?
Avec tout thème Online Store 2.0, dont Dawn, Horizon et les thèmes du Shopify Theme Store basés sur la 2.0. Sur un ancien thème (vintage), les sections ne peuvent être ajoutées qu’à la page d’accueil, depuis l’éditeur de thème.
Faut-il savoir coder ?
Non. Vous décrivez la section, puis vous la modifiez dans l’éditeur de thème. Si vous codez, le résultat est du Liquid simple et lisible, que vous pouvez modifier comme n’importe quel autre fichier de votre thème.
Est-ce une application Shopify ?
Non. Klorr est l’endroit où vous écrivez et affinez la section ; le résultat est un fichier dans votre thème. Rien n’est installé dans votre boutique et rien ne s’exécute depuis les serveurs de Klorr quand un client la visite.
La section continue-t-elle de fonctionner si j’arrête d’utiliser Klorr ?
Oui. Le code vit dans votre thème, pas chez nous. Il n’y a ni runtime, ni vérification de licence, ni filigrane à retirer.
Quelle différence avec du code Liquid écrit par ChatGPT ?
Un chatbot généraliste invente souvent des filtres et des paramètres que Shopify refuse, et vous laisse écrire le schema. Klorr est entraîné sur la façon dont les vraies sections Shopify sont construites, vérifie le résultat au regard des règles de schema imposées par l’éditeur de thème et garde chaque contenu modifiable sous forme de paramètre.