--- title: "Élément Produit en vente : mettre en avant un article" description: "Présentez un article ou un service de votre catalogue avec son image, son titre et son prix, et renvoyez le visiteur vers sa fiche complète." url: https://docs.vivlab.com/editor/menu/product --- # Produit en vente L'élément **Produit en vente** présente un article ou un service de votre catalogue avec son image, son titre et son prix. Cliquer dessus mène à la fiche complète du produit. ## Choisir le produit La rubrique principale propose un champ de recherche **Produit e-commerce** : tapez le nom du produit que vous souhaitez mettre en avant et sélectionnez-le dans la liste de suggestions. Le bloc affichera automatiquement les informations du produit choisi (image, titre et prix). Reportez-vous à la page [Produits](https://docs.vivlab.com/sections/products.md) pour créer ou modifier un produit du catalogue. ## Ratio de l'image L'option **Ratio de l'image** force un ratio fixe pour l'image du produit (par exemple **1/1** pour un format carré, **3/2** pour un format paysage, **16/9** pour un format large). Le ratio choisi est appliqué uniformément, ce qui permet d'aligner plusieurs blocs produits sur la même page. Désactivée, l'image conserve son ratio d'origine (celui défini dans la fiche du produit). ## Style du produit Le [panneau de style](https://docs.vivlab.com/editor/style/index.md) regroupe le [style du texte](https://docs.vivlab.com/editor/style/text.md) (titre et prix), l'[arrière-plan](https://docs.vivlab.com/editor/style/background.md), les [bordures](https://docs.vivlab.com/editor/style/border.md), l'[arrondi des angles](https://docs.vivlab.com/editor/style/border-radius.md), l'[ombre](https://docs.vivlab.com/editor/style/box-shadow.md), les [marges intérieures](https://docs.vivlab.com/editor/style/padding.md), l'[alignement vertical](https://docs.vivlab.com/editor/style/align.md) et les [transitions](https://docs.vivlab.com/editor/style/transition.md).