Horizon est la nouvelle plateforme de conception de Shopify. Elle remplace l'ère Dawn par un système plus flexible, basé sur les blocs, et ajoute la génération de blocs par IA pour vous permettre de créer des composants de marque sans toucher au code. Si vous concevez des boutiques pour gagner votre vie, cela change définitivement votre processus de création.
La génération de blocs par IA est intégrée à l'éditeur de thèmes. Vous décrivez un bloc, Shopify Magic l'écrit et vous le déposez dans une section compatible avec les blocs. Horizon intègre cette fonctionnalité par défaut, et elle est également disponible sur d'autres thèmes compatibles avec les blocs.
Vous trouverez ci-dessous une procédure pas à pas pratique et une bibliothèque d'invites que nous avons testées sur des versions réelles.
Ce que Horizon change pour les équipes
1) La structure d'abord, puis l'IA
Horizon est construit autour de blocs thématiques. Vous bénéficiez d'une plus grande liberté de mise en page au sein des sections, ce qui se traduit par une meilleure expérience utilisateur sans code personnalisé. Pensez « blocs dans les sections », et non « sections partout ».
2) Générer, puis affiner
Utilisez l'IA pour rédiger des blocs, puis modifiez le texte, l'espacement et le contenu afin qu'ils correspondent à votre marque. Vous restez maître des normes.
3) Prototypage plus rapide
Horizon vous permet de passer d'une maquette fonctionnelle à une interface utilisateur crédible en quelques minutes. Conçu pour être performant et mobile dès sa sortie, il est prêt à l'emploi.
Démarrage rapide : où générer des blocs d’IA
-
Dans l'administrateur Shopify, accédez à Boutique en ligne → votre thème Horizon → Personnaliser .
-
Ouvrez une section acceptant les blocs. Cliquez sur Ajouter un bloc → Générer .
-
Collez une invite. Insérez et modifiez.
Astuce : vous pouvez également ouvrir Sidekick dans l'éditeur et lui demander de créer un bloc qui vous relie en profondeur au générateur.
Recette rapide qui fonctionne
Lorsque vous y êtes invité, incluez cinq parties :
-
Objectif (ce que le bloc doit accomplir)
-
Mise en page (nombre de colonnes, ordre, comportement des médias)
-
Contenu (titres, limites de texte, sources dynamiques)
-
Style (ton, accents, bordures, ombres, espacement)
-
Comportement (collant, pliable, vitesse du curseur, règles mobiles)
Exemple de modèle :
« Créez un bloc [objectif] organisé selon [mise en page]. Extrayez [contenu]. Stylez avec [style]. Ajoutez [comportement]. »
40 invites éprouvées pour les blocs Horizon AI
Utilisez-les comme éléments de départ à copier-coller. Remplacez les parties entre crochets par votre marque.
A) Page globale et page d'accueil
-
Héros divisé
Créez une page d'accueil avec deux colonnes. À gauche, le titre, un sous-titre de 20 mots et un bouton principal. À droite, une image de produit avec une parallaxe subtile sur ordinateur et statique sur mobile. Bord à bord, marge intérieure généreuse et coins arrondis.
-
Bande d'avantages
« Créez une brochure sur les avantages sociaux en trois colonnes, avec des icônes centrées, des titres courts et une ligne de texte. Utilisez de petites cartes aux ombres douces et de hauteur égale. Superposez-les sur mobile. »
-
barre USP
« Créez une barre d'annonce pleine largeur présentant trois USP avec de petites icônes de coche. Elle s'étend automatiquement sur deux lignes sur mobile. Reliez le dernier USP à la politique de livraison. »
-
Chapiteau de preuve sociale
« Ajoutez un défilement horizontal pour les logos à cinq pressions. Défilement lent de 8 secondes, pause au survol, logos en niveaux de gris qui reviennent en couleur au survol. »
-
Fonctionnalité vidéo
Créez un bloc multimédia avec une vidéo en lecture automatique désactivée à gauche et une copie à droite. Ajoutez un petit avertissement « son activé ». Conservez le recadrage 16:9 et le chargement différé.
-
Grille de proposition de valeur
Quatre cartes identiques avec titre, description de 80 caractères et lien « En savoir plus ». Bordures souples, espacement de 24 px, remplissage symétrique.
-
Avant/après
« Ajoutez un curseur de comparaison d'images avec les libellés « Avant » et « Après ». Ajoutez une légende et une petite info-bulle qui ouvre une courte explication. »
-
Compte à rebours du lancement
« Créez une bande promotionnelle avec un grand compte à rebours, un titre et un bouton. Arrière-plan contrasté, contraste de couleurs accessible, alignement au centre. »
B) Collecte et navigation
-
Présentation de la collection
En-tête de collection sur deux colonnes. À gauche, le titre de la collection et un article de 30 mots. À droite, une image lifestyle aux coins arrondis. Ajoutez un fil d'Ariane au-dessus.
-
Explication du filtre
Sous la barre d'outils de la collection, ajoutez un accordéon compact « Comment filtrer » avec trois puces. Bordure claire, réduit par défaut.
-
Tuiles de catégorie
Grille de six tuiles de catégorie. Chaque carte utilise l'image de la collection, un titre en superposition et s'estompe légèrement au survol. Hauteur uniforme. Empilable sur deux colonnes sur mobile.
-
Achetez le look
Créez une image lifestyle avec trois épingles cliquables qui ouvrent des mini-fiches pour les produits liés. Ajoutez le prix, la vignette et le lien « Voir le produit ».
-
Tableau comparatif
« Ajoutez un tableau comparatif à quatre colonnes pour les principaux SKU, avec des graduations, des croix et une ligne « Meilleur pour ». En-tête accrocheur. Défilement horizontal sur les petits écrans. »
C) Page produit (PDP)
-
En-tête de l'offre
« En-tête PDP compact affichant le titre, les étoiles d'évaluation, le prix et une proposition de valeur sur une ligne sous le titre. Gardez ce groupe à proximité de la galerie. »
-
Ajouter au panier
Créez une barre d'ajout au panier fixe qui apparaît après 30 % de défilement. Incluez le titre, le prix, le sélecteur de variantes, la quantité et le bouton principal. Ombre légère.
-
Puces de fonctionnalités
« Ajoutez une liste de fonctionnalités à cinq puces avec de petites icônes. Chaque puce doit contenir sept mots maximum. Placez-la au-dessus de la ligne de flottaison, sous le prix. »
-
FAQ accordéon
FAQ PDP en accordéon avec cinq éléments. Chaque réponse prend en charge la mise en forme de base. Mémorisez le dernier état ouvert et fermez les autres à l'ouverture.
-
Panneau de confiance
« Créez une bande de confiance avec des badges pour un paiement sécurisé, des retours gratuits et une livraison rapide. Petites icônes, bordure subtile, contenu centré. »
-
Ingrédients ou spécifications
Bloc de données à deux colonnes avec un titre court et une liste claire. Réductible sur mobile. Jusqu'à 10 éléments pris en charge.
-
Guide des tailles modal
Ajoutez un lien « Guide des tailles » qui ouvre une fenêtre modale avec un tableau à deux colonnes et une image. N'oubliez pas la position de défilement à la fermeture.
-
Galerie UGC
Grille UGC extraite d'une liste d'images de métachamps. Quatre images sur ordinateur, deux sur mobile. Mise en page légère et agrandissement par simple pression.
-
Incitation dans le panier
Bannière PDP indiquant « Dépensez X £ pour bénéficier de la livraison gratuite » avec une barre de progression indiquant le montant total du panier. Animation fluide.
D) Panier, paiement et post-achat
-
Vente croisée de tiroirs de chariot
Créez un panier avec un produit de vente croisée dynamique, une petite vignette, un titre, un prix et un bouton « Ajouter ». Ne surchargez pas le panier.
-
Notes sur le panier
Ajoutez un simple module d'extension « Ajouter une note » avec un compteur de caractères. Gardez le tiroir compact une fois fermé.
-
Marqueur cadeau gratuit
« Barre de progression qui débloque un cadeau gratuit à Y £, avec une petite vignette de produit affichée uniquement une fois déverrouillé. Étiquettes aria incluses. »
-
Vente incitative au moment du paiement, merci
« Bloc de page d'état de commande qui affiche un produit recommandé avec une miniature, un prix et un bouton d'ajout au panier qui redirige vers PDP. »
E) Contenu et confiance
-
Résumé des avis
Bloc affichant la note moyenne, le nombre de commentaires et une courte citation. Le bouton permet d'accéder à la section complète des avis.
-
Citations de presse
« Trois fiches de citations avec noms d'éditeurs courts et liens. Bordures subtiles, titres avec empattements, alignement centré. »
-
Histoire du fondateur
« Un récit en deux colonnes avec un portrait à gauche et une histoire de 120 mots à droite. Une grande citation détachable au milieu. »
-
Durabilité
Liste d'icônes décrivant les matériaux, l'approvisionnement et le conditionnement. Trois éléments, une ligne par élément. Lien vers la page de la politique.
-
Détaillants
Grille de logos pour les revendeurs. Six logos, de même hauteur, en niveaux de gris par défaut et en couleur au survol.
F) Pré-lancement et génération de leads
-
À venir
« Inscription pleine largeur avec titre, sous-titre de 20 mots et capture d'adresse e-mail. Ajoutez un compte à rebours progressif indiquant uniquement les jours et les heures. »
-
Aimant principal
« Bloc à deux colonnes avec couverture du livre numérique à gauche et liste à puces à droite. Inclure une adresse e-mail et une case à cocher pour le consentement. »
-
Aperçu du quiz
Bannière invitant les visiteurs à "Trouvez le produit idéal" avec un bouton de démarrage. Ajoutez trois petits avantages sous le bouton.
G) Suppléments de détail ou multimarques
-
Annuaire des marques
Index alphabétique des marques avec rangée de lettres en haut. Cliquer sur une lettre permet d'accéder à la section correspondante. Séparateurs clairs.
-
Localisateur de magasins
Carte intégrée avec une liste consultable à droite. Les cartes indiquent le nom du magasin, son adresse et le lien « Itinéraire ».
H) International et B2B
-
Avis de change
Petite bannière qui détecte la devise et affiche « Prix en [devise]. Droits calculés au moment du paiement. » Désactivable.
-
Conseil pour le reçu de TVA
« Note de remerciement à la caisse avec un lien « Télécharger la facture avec TVA » et de brèves instructions. »
I) Aides à la performance et à l'accessibilité
-
Politique d'image
« Bloc de notes pour développeurs répertoriant les tailles et formats d'image recommandés pour les tuiles Hero, PDP Gallery et Collection. »
-
Liste de contrôle d'accessibilité
« Liste de contrôle en ligne rappelant aux éditeurs de définir un texte alternatif, de maintenir le contraste, de garder les titres dans l'ordre et d'éviter le texte sur les images. »
Flux de construction professionnel que nous utilisons chez Neat
-
IA d'abord
Cartographiez les menus, les collections, les filtres et les éléments essentiels du PDP avant de vous attaquer à la conception visuelle. Horizon brille lorsque la structure est adéquate.
-
Générer des blocs de brouillon
Utilisez les instructions ci-dessus pour créer des espaces réservés fonctionnels pour chaque zone clé. Remplacez le contenu Lorem par du texte original dès que possible.
-
Resserrer la copie et l'espacement
Utilisez des titres courts. Utilisez un travail par bloc. Évitez les mots décoratifs qui nuisent à la lisibilité.
-
Ajouter des applications après la conception
N'introduisez les avis, la capture, les ventes incitatives et les fenêtres contextuelles qu'une fois que le flux est fluide. Shopify recommande cette méthode pour garantir la cohérence de l'expérience utilisateur.
-
Valider les performances et le suivi
Vérifiez d'abord les appareils mobiles, chargez les ressources lourdes en différé et vérifiez les événements GA4 et Pixel.
Pièges et astuces
-
Vous ne pouvez générer des blocs que dans les sections acceptant les blocs thématiques. Si une section n'accepte pas les blocs, le générateur n'apparaîtra pas. Choisissez une autre section ou ajoutez-en une qui les accepte.
-
Horizon est une base, et non un thème unique. Il existe plusieurs thèmes et préréglages Horizon basés sur le même système de blocs. Commencez par un préréglage, puis personnalisez-le en profondeur.
-
Sidekick vous permet d'accéder directement à une invite de génération. Utile lorsque vous naviguez rapidement dans l'administration.
-
Gardez le contenu accessible. Maintenez le contraste, ajoutez du texte alternatif et gardez les états de focus visibles.
-
Évitez les invites trop nombreuses. Définissez des styles globaux dans le thème, puis concentrez-vous sur la mise en page et le comportement afin que tout reflète parfaitement votre marque.
Pourquoi cela est important en ce moment
Shopify a fait d'Horizon la pièce maîtresse des éditions Été 2025, ainsi que des fonctionnalités d'IA sur l'ensemble de la plateforme. Ce flux de travail n'est donc pas une version bêta. Il s'agit de la nouvelle norme pour les boutiques modernes.
Si vous souhaitez que nous transformions ces invites en un starter Horizon prêt à l'emploi pour votre marque, nous pouvons créer une base propre et vous remettre un court métier à tisser montrant à votre équipe exactement comment itérer.
Références
Page des éditions officielles et aperçu d'Horizon.
Article sur la vision de conception de Shopify sur Horizon.
Annonce du générateur de blocs de thèmes AI.
Documentation du développeur pour les blocs de thèmes générés par l'IA.
Notes de la communauté sur les liens profonds Sidekick pour les invites de blocage.
Si vous le souhaitez, je peux personnaliser un « kit d’invite Horizon » pour trois de vos projets actuels avec un libellé et des ensembles de blocs spécifiques à la marque.
