Badge Webflow Award Winner 2023

Créer Template Pages Produits - Tuto Webflow Ecommerce

Découvrez dans cet article, les 10 étapes pour concevoir la page "Products Template" sur Webflow pour votre site E-commerce. Grâce à ce tutoriel, vos pages produits garderont la même structure pour une meilleure expérience utilisateur (UX). Quelques Tips SEO pour le E-commerce sont présent dans l'article 🕵️

Publié le 
16/12/2021
Modifié le 
27/3/2023
5 min
Ecran d'ordinateur avec une collection CMS webflow e-commerce

Dans ce tutoriel, nous allons voir comment concevoir ses pages produits pour son site e-commerce dans Webflow. Après avoir suivi ces quelques étapes, à chaque fois que vous ajouterez un nouveau produit dans votre boutique en ligne, il apparaîtra sur une nouvelle page qui sera similaire à celle de vos autres produits.

Pour commencer, allez directement dans votre projet Webflow ! Dans ce tuto, nous avons, au préalable, ajouté quelques produits dans Ecommerce - Products.

Petit disclaimer : Pour simplifier au maximum la compréhension et la réalisation de ce tutoriel, nous n'avons pas utilisé la méthodologie Client First by Finsweet. Ce tutoriel s'adresse plus particulièrement aux néophytes, mais peut aider tout le monde !

1 - Allez sur la page “Products Template”

Depuis l’interface développeur de votre projet, allez dans l’onglet “Page” (ou cliquez sur P) et dans “Ecommerce Pages”, sélectionnez “Products Template”. Ainsi, vous arrivez sur la page qui va définir toutes la conception des autres pages produits.

Accès à la Page "Products Template" dans Webflow Ecommerce


2 - Ajoutez les bases de votre site

Dans cet article, nous n’allons pas nous focaliser sur cette étape, mais (si vous arrivez sur une page blanche), commencez par ajouter votre navbar (navigation bar) et votre Fil d'Ariane (très important pour le SEO d’un site e-commerce). Vous pouvez également déjà (si vous le souhaitez) rajouter votre footer.

Insertion de la navbar et du fil d'ariane dans la Page "Products Template" dans Webflow Ecommerce


3 - Ajoutez une section puis display “Grid”

En dessous de votre Fil d’Ariane, vous allez pouvoir ajouter l’élément “Section”. Cliquez sur “Add Elements” (ou appuyez sur A) et glissez le sous le Fil d’Ariane. Ensuite, vous allez directement dans Style (S) > Layout > Display > Grid. Vous allez pouvoir supprimer une ligne (Rows) pour n’avoir qu’1 ligne et 2 colonnes. Créez une “class” pour la section que vous nommerez par exemple “Contenair Product”.

Ajout d'un section en display Grid dans la Page "Products Template" dans Webflow Ecommerce


4 - Insérez les images de vos produits

Pour ce faire, vous allez pouvoir glisser et déposer un “Div Block” dans la première colonne. Créez une “class” pour ce block que vous appellerez par exemple “Product Image”.

Insertion d'un div bloc dans la première colonne de la grid dans la Page "Products Template" dans Webflow Ecommerce

Ensuite, glisser et déposer un éléments “image” dans le “div block”. A la place de sélectionner une image depuis une gallerie, cliquez sur “Get image from” et dans “Select Field”, choisissez “Main Image” (Les cases violettes correspondent à l’ajout d’éléments dynamiques provenant soit des collections de votre CMS soit des “Products” dans la partie Webflow Ecommerce).

Insertion de l'image du produit de façon dynamique dans la Page "Products Template" dans Webflow Ecommerce

Vous avez l’image de vos produits, cependant, la taille de l’image ne convient pas. Ne vous inquiétez pas, nous allons régler ce problème. Tout d’abord, nous allons centrer l’image dans le div block, pour cela :

  • Sélectionnez le “Div Block” (Dans notre exemple, “Product Image”)
  • Allez dans style
  • Dans Grid Child, sélectionnez dans “Align” et “Center”, les cases “Center”
Center image du produit de façon dynamique dans la Page "Products Template" dans Webflow Ecommerce


Ensuite, nous allons définir une taille pour l’image. Pour ce faire :

  • Sélectionnez l’image
  • Créez une “class” (nous opterons pour “Image produit”)
  • Laissez Max W à 100%
  • Donnez une valeur en REM à Max H (Dans notre exemple nous voulons que l’image est un Max H de 400 pixel, pour passer en REM, nous divisons par 16, on inscrit donc dans Max H : 400/16rem)
Resize de la Max H en REM de l'image produit dans la Page "Products Template" dans Webflow Ecommerce


Vous pouvez voir l’aperçu de vos autres produits en cliquant sur la flèche du bas “Product” dans la barre horizontale du haut et en sélectionnant votre produit (vous pouvez aussi défiler avec la combinaison de touches : Shift + Alt (ou option) + Flèche (droite ou gauche).

Mise à jour de l'image produit dans les autres pages products de façon dynamique dans la Page "Products Template" dans Webflow Ecommerce


5 - Insérez le nom du produit

Tout d’abord, insérez un “Div Block” dans la colonne de Gauche (nous l’appellerons “Content Product”).

Pour ajouter le nom, rien de bien compliqué :

  • Insérez un Div Block dans la colonne de droite
  • Créez une classe et donnez lui un nom (Dans cet exemple, on optera pour “Product Info”)
  • Insérez un Heading dans le block
  • Laissez le Heading en H1 (c’est une bonne pratique SEO pour le E-commerce)
  • En cliquant sur le Heading, cochez “Get Text From” et sélectionnez “Name”

Bien évidemment, c’est ici un exemple, le nom de votre produit doit être optimisé pour le SEO (Modification dans ECommerce - Products sur Webflow). Vous pouvez également modifier la typographie, la taille du H1 dans le Style Guide également ou en utilisant la méthodoligie “Client First”.

Insertion du nom du produit de façon dynamique avec un heading H1 dans la Page "Products Template" dans Webflow Ecommerce


6 - Insérez le prix du produit

Là encore, rien d’insurmontable, il vous suffit de :

  • Glissez et déposez un text block en dessous du nom du produit (H1), toujours dans le div block “Product Info”
  • Sélectionnez le texte, cochez “Get text from” et choisissez “Price”
  • Modifier l’apparence / le design selon votre convenance
Insertion du prix du produit de façon dynamique avec un block texte dans la Page "Products Template" dans Webflow Ecommerce

7 - Insérez la description du produit

Il est recommandé pour le référencement naturel de mettre un court descriptif du produit en H2, cependant si vous souhaitez le mettre sous forme de paragraphe, la méthode reste la même :

  • Insérez un block Heading - H2 (ou “Paragraph”)
  • Sélectionnez “Get text from”, puis choisissez “Description” dans “Basic Info”
  • Personnalisez selon vos envies

Vous pouvez ensuite rajouter des informations sur le produit de la même façon, mais en insérant des paragraphes et en sélectionnant le texte dynamique approprié (il faudra au préalable ajouter des customs fields dans les paramètres produits).

Insertion de la description du produit de façon dynamique avec un heading H2 dans la Page "Products Template" dans Webflow Ecommerce


8 - Ajoutez un block E-commerce “Add to Cart”

Cet élément va permettre à vos clients de mettre un produit dans leur panier. Pour l’ajouter, il vous suffit de glisser et déposer l’élément “Add to Cart” sous la description de votre produit (dans la colonne de droite). Vous pouvez changer les éléments du bloc 1 par 1 pour les personnaliser.

Insertion du block "add to cart" dans la Page "Products Template" dans Webflow Ecommerce


9 - Ajoutez le panier dans la NavBar

Pour ajouter le panier dans la NavBar, il suffit de glisser-déposer l’élément “Cart” dans votre NavBar.

Ajout de l'élement Cart dans la navbar dans la page "Products Template" dans Webflow Ecommerce


10 - Le résultat

Voici notre résultat de la conception de la page “Template Product”, bien évidemment ces étapes sont des bases. Vous pouvez aller beaucoup plus loin grâce à Webflow et personnalisez entièrement et à votre image ces pages produits.

Résultat de l'exemple du template d'une première page produit conçue avec Webflow Ecommerce
Test de l'ajout au panier d'un produit grâce au template products de webflow ecommerce
Résultat de l'exemple du template d'une deuxième page produit conçue avec Webflow Ecommerce


Si vous avez besoin d’aide dans la réalisation de votre site e-commerce, Digidop peut personnaliser complétement votre boutique en ligne pour le rendre unique et pour qu’elle réponde aux meilleures pratiques SEO.

Prêt(e) à avoir un site qui convertit ?

Améliorer votre visibilité en ligne grâce à l’experience, l’excellence et la réactivité de Digidop !

Restez informés de l’actu Digidop !