Construire une page produit sur mesure avec les éléments indépendants
Déplacez et stylisez séparément image, prix, variantes ou avis, et passez une boutique existante à la nouvelle mise en page.
Écrit par Baptiste Lorreyte
Dernière mise à jour Il y a environ 4 heures
La page produit de votre boutique peut désormais être construite à partir d'éléments séparés plutôt que d'un seul bloc figé. Vous décidez où placer chaque information et vous réglez le style de chaque élément. Vous pouvez par exemple mettre le titre au-dessus de l'image, remonter les avis ou placer deux blocs côte à côte.
Pour créer votre boutique, consultez [GUIDE] Créer une boutique E-Commerce avec CrocoClick.
Ce que vous pouvez personnaliser
Les éléments déplaçables : images du produit, titre, avis, prix, variantes, quantité, Add to Cart Button et Buy Now Button (noms encore en anglais à l'écran), description et produits associés.
Le style de chaque élément : typographie, couleurs, espacements, alignement, arrière-plans, bordures, arrondis, ombres et visibilité selon l'appareil.
Passer une boutique existante à la nouvelle mise en page
Une boutique existante peut conserver la mise en page classique tant que vous ne décidez pas de changer. Lors du passage, votre style existant est repris lorsque c'est possible.
⚠️ Remarque : Le passage est à sens unique : le bouton ne permet pas de revenir en arrière. Si nécessaire, restaurez une version antérieure de la page depuis l'Historique des versions (icône Versions de la barre du haut du constructeur).
Ouvrez la page produit de votre boutique dans le constructeur.
Sélectionnez l'élément Product Detail (nom encore en anglais à l'écran).
En haut du panneau de droite, dans l'encadré Plus de contrôle sur la page produit, cliquez sur Passer à la nouvelle mise en page.
Une fenêtre en deux étapes présente la nouvelle mise en page : cliquez sur Suivant, puis sur Passer à la nouvelle mise en page. Annuler ferme la fenêtre sans rien changer. Cette fenêtre s'ouvre aussi d'elle-même à l'ouverture de la page produit.
Enregistrez la page. Tant qu'elle n'est pas enregistrée, quitter le constructeur sans enregistrer annule le passage.
🟢 Important : Les classes CSS personnalisées de la mise en page classique ne sont pas reprises. Vous pourrez les ajouter sur chaque élément après le passage.
Mettre à jour un modèle de boutique enregistré
Passez à la nouvelle mise en page la page produit de la boutique dont provient le modèle.
Actualisez le modèle enregistré depuis la bibliothèque de modèles.
Les nouvelles boutiques créées à partir de ce modèle utiliseront la nouvelle mise en page. Les boutiques déjà créées avec lui ne changent pas automatiquement : passez-les une par une.
Cela a-t-il été utile ?
Besoin d'aide supplémentaire ? Demander à l'équipe