Le bloc de thème donne à une publication Intégré un emplacement visible sur la page produit Shopify. Vous configurez ce qu’il affiche dans Composerie, et vous contrôlez son ordre dans le modèle de page produit depuis Shopify.
Choisir la mise en page Intégré
Pour une première publication, sélectionnez Intégré dans l’écran Publier du produit. Cet écran utilise les valeurs par défaut du mode ; l’ancienne étape Configurer et le sélecteur de préréglages n’en font pas partie. Vérifiez les contrôles d’affichage détaillés dans les réglages de boutique du produit.
Les contrôles avancés peuvent remplacer l’interface de variantes du thème, afficher l’aperçu en direct, remplacer le titre et le prix, ajouter des éléments de conversion et laisser Composerie gérer l’action d’ajout au panier. N’activez que les contrôles que vous avez testés avec le thème.
Placer le bloc Shopify
Utilisez la boîte de dialogue de configuration de Composerie pour ouvrir le modèle de page produit de Shopify. Gardez le bloc dans le formulaire produit principal, près des contrôles d’achat, puis enregistrez.
Personnaliser l’apparence du customizer dans Composerie
Ouvrez Vitrine dans le dashboard pour définir le thème, les couleurs de marque, la police, les boutons, la mise en page et les options avancées. Le côté droit propose un aperçu en direct sur ordinateur et sur mobile.
Utiliser du CSS personnalisé
Dans Vitrine, ouvrez Avancé et utilisez CSS personnalisé pour de petites retouches d’apparence. Le CSS reste limité à la racine du customizer et plafonné à 4000 caractères.
Utilisez ces classes stables plutôt que les classes utilitaires générées :
| Sélecteur | Élément |
|---|---|
.composerie-input | Champs de texte et autres champs de saisie |
.composerie-label | Libellés des champs |
.composerie-textarea | Champs de texte multiligne |
.composerie-select | Listes déroulantes |
.composerie-dropzone | Zones d’import de photos |
.composerie-variant | Contrôles de variantes et de matériaux |
.composerie-addon | Contrôles d’options supplémentaires |
Par exemple, pour changer la couleur de bordure des champs de texte :
.composerie-input {
border-color: #2563eb;
}Les sélecteurs de l’ajout au panier et du prix, les sélecteurs de boutons trop larges et le CSS dangereux sont filtrés. Utilisez les réglages d’apparence pour les boutons d’achat et les prix. Conservez vos sélecteurs existants quand vous mettez à jour votre CSS, et testez les contrôles concernés dans l’aperçu en direct et sur la boutique, en tailles ordinateur et mobile, avant de publier.
Où changer la mise en page intégrée ?
Choisissez Intégré dans Publier pour une première publication. Vérifiez les contrôles d’affichage détaillés dans les réglages de boutique du produit, puis contrôlez la publication concernée sur la boutique.
Où changer les couleurs et les polices ?
Ouvrez Vitrine dans la barre latérale de Composerie et utilisez Thème et Image de marque.
Dois-je activer tous les contrôles avancés ?
Non. N’activez que les contrôles nécessaires à votre thème et vérifiez chacun d’eux lors d’un test sur la boutique.
Étape suivante
Suivez la liste de contrôle de l’aperçu avant de publier.