Créer Template Pages Produits - Tuto Webflow Ecommerce

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.

‍

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.

‍

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”.

‍

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”.

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).

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”

‍
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)

‍

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).

‍

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”.

‍

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

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).

‍

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.

‍

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.

‍

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.

‍‍‍

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.