Dans cette vidéo, je vous montre comment fixer la colonne de gauche comportant les images produits sur une page produit PrestaShop, de sorte qu'elle reste visible lorsque l'on fait défiler la page vers le bas. Cette astuce est particulièrement utile pour améliorer l'expérience utilisateur et permettre aux visiteurs de garder un œil sur les images des produits tout en lisant les descriptions ou les avis.
Dans un premier temps, je vous explique comment accéder au code de votre page produit et où insérer le code CSS nécessaire à la fixation de la colonne de gauche. Ensuite, je vous montre comment personnaliser ce code en fonction de vos besoins, par exemple en ajustant la position ou la largeur de la colonne fixe.
En suivant les étapes que je vous présente dans cette vidéo, vous pourrez facilement fixer la colonne de gauche sur votre page produit PrestaShop et offrir une expérience utilisateur plus agréable à vos visiteurs.
N'hésitez pas à me laisser un commentaire si vous avez des questions ou des suggestions d'amélioration !
CSS Ajouté :
@media screen and (min-width: 900px) {
#product .product-container {
display: flex;
}
#product #content {
position: sticky;
top: 40px;
}
}
Retrouvez-moi aussi sur mon site :
https://www.bi-web.fr
#prestashop #tutorial #tutoriel #symphony #php #cms #ecommerce #website
Dans un premier temps, je vous explique comment accéder au code de votre page produit et où insérer le code CSS nécessaire à la fixation de la colonne de gauche. Ensuite, je vous montre comment personnaliser ce code en fonction de vos besoins, par exemple en ajustant la position ou la largeur de la colonne fixe.
En suivant les étapes que je vous présente dans cette vidéo, vous pourrez facilement fixer la colonne de gauche sur votre page produit PrestaShop et offrir une expérience utilisateur plus agréable à vos visiteurs.
N'hésitez pas à me laisser un commentaire si vous avez des questions ou des suggestions d'amélioration !
CSS Ajouté :
@media screen and (min-width: 900px) {
#product .product-container {
display: flex;
}
#product #content {
position: sticky;
top: 40px;
}
}
Retrouvez-moi aussi sur mon site :
https://www.bi-web.fr
#prestashop #tutorial #tutoriel #symphony #php #cms #ecommerce #website
- Catégories
- E commerce Divers
Commentaires