Aperçu du commerce électronique

À l’intérieur de ce guide, nous allons voir comment pouvoir réaliser un site web e-commerce à travers Framework360.

Tout d'abord étant opportun de distinguer si nous voulons créer un site web e-commerce avec un seul produit ou avec plusieurs produits. Dans le premier cas, c'est-à-dire, si nous voulions vendre un seul produit, il nous suffira d'aller dans la rubrique Checkout du menu principal de Framework360 pour configurer le checkout et insérer manuellement notre produit ; nous avons traité cela dans un guide spécifique que vous pourrez consulter en cliquant ici.

À l’intérieur de ce guide, en revanche, nous nous occuperons de comment réaliser un site web e-commerce pour la vente de plusieurs produits.

 

Étape 1 : Installons le plugin Ecommerce

Tout d'abord, nous devons installer le plugin Ecommerce, pour ce faire, rendons-nous dans la rubrique

Plugin du menu principal de Framework360 en suivant les étapes suivantes :

Personnalisation > Plugin

Une fois dans l'écran des plugins, recherchons, à travers la zone de recherche appropriée, le plugin Ecommerce et installons-le.

Une fois le plugin installé, dans le menu principal de Framework360 s'ouvrira une nouvelle section appelée, justement, Ecommerce à travers laquelle nous pourrons élargir notre site web avec toutes les fonctionnalités multiproduit.

 

Étape 2 : Configurons les préférences du plugin Ecommerce

Après avoir installé le plugin Ecommerce , nous devons nous rendre dans la section Préférences Plugin du menu principal de Framework360 et aller à l’intérieur de l’élément Préférences Ecommerce en suivant les étapes suivantes :

Personnalisation > Préférences Plugin > Ecommerce

Une fois à l’intérieur de la page de personnalisation des Préférences Ecommerce, via l’élément Système d'avis, nous pourrions décider d’activer ou non la possibilité de laisser des avis à nos clients.

Tandis qu’en allant sur l’élément Modérer les avis, nous pourrions approuver personnellement les avis laissés par les clients avant leur publication effective sur le site.

Enfin, à travers la voix Mise à jour automatique du stock, nous pourrions décider si le stock devra réduire automatiquement la quantité vendue au moment où le client passe commande ou au moment où la commande est considérée comme payée.

 

Étape 3 : Ajoutons un produit à notre E-commerce

Pour ajouter un produit à notre E-commerce, rendons-nous dans la section du menu principal de Framework360 Produits en suivant les étapes suivantes :

Ecommerce > Produits

Une fois dans l’écran Produits, cliquez sur le bouton vert en haut à droite Ajouter.

Dans l’écran de création du produit, nous avons plusieurs onglets qui nous permettent de personnaliser avec précision la création de notre produit.

 

ONGLET PRODUIT

Dans le tab Produit , nous pouvons ajouter :

• le nom du produit ;
• la catégorie de référence (dans un instant, nous nous occuperons également de l’aspect de la création de la catégorie) ;
• le prix ;
• l’éventuelle taxe à appliquer au prix ;
• Un éventuel rabais de l’article et la limite temporelle du rabais;
• la quantité de stock du produit;
• la quantité minimale de produit achetable (utile pour les sites qui s’occupent de vente en gros);
• la description courte et la description détaillée du produit;
• décider si mettre en avant le produit;
• le type de produit (standard, numérique ou bon cadeau);
• le code du produit;
• l’EAN;
• Le poids du produit.

 

TAB ATTRIBUTS ET VARIATIONS

Tandis qu'en nous déplaçant dans le onglet Attributs et Variations , nous pouvons sélectionner les éventuels attributs du produit si le produit présente des variations, par exemple, de taille ou de couleur.

Pour pouvoir ajouter des attributs à notre produit, il est nécessaire que ces attributs aient été créés au préalable dans la section dédiée du menu principal de Framework360 appelée Attributs. Pour accéder à la section Attributs , nous devons nous rendre dans le menu principal de Framework260 et suivre les étapes suivantes :

Ecommerce > Attributs

Une fois dans la section Attributs , pour ajouter un nouvel attribut, cliquez sur le bouton vert en haut à droite Ajouter. À ce stade, l'écran de création de l'attribut s'ouvrira, où nous pouvons réaliser et définir la variation souhaitée.

Après avoir créé notre attribut, nous pouvons retourner dans l'onglet Attributs et variations, présent dans l'écran de création de produit où nous étions précédemment, et sélectionner l'attribut créé. Dans la figure suivante, nous voyons un exemple où nous allons sélectionner l'attribut couleur de notre produit :

Une fois l’attribut souhaité sélectionné, en continuant à faire défiler l’onglet Attributs et Variations , nous pourrions insérer une image, le code, la quantité et le prix de chaque variante de notre attribut. Dans l’exemple présenté, nous avons la possibilité d’insérer l’image du produit de couleur rouge, l’image du produit de couleur verte, ainsi que les codes, quantités et prix correspondants, si ces derniers devaient varier par rapport à ce qui a été saisi dans l’onglet Produit vu précédemment.

 

ONGLET ARTICLES LIÉS

À l’intérieur de l’onglet Articles Liés , nous avons la possibilité d’ajouter des articles liés à :

• Up-Sell, c’est-à-dire, insérer une mise à niveau du produit (par exemple, si le produit en question est un modèle de chaussure, l’up-sell pourrait être un modèle de chaussure similaire mais plus coûteux), il sera proposé au client d’acheter la mise à niveau au lieu du produit qu’il regarde ;
• Cross-Sell, c’est-à-dire, insérer un produit lié à celui que le client regarde (par exemple, si le produit en question est un modèle de chaussure, le cross-sell pourrait être une paire de chaussettes), il sera proposé au client la combinaison d’achat des deux produits.

 

TAB IMAGES

Dans le tab images nous avons la possibilité de télécharger différentes images du produit. Rappelons que pour insérer des images différentes en fonction d'un attribut donné, comme vu précédemment, nous devrions aller dans l'onglet Attributs et Variations.

 

TAB SEO

Dans cet onglet SEO nous avons la possibilité d'insérer un TAG Title et une TAG Description pour décider comment le produit apparaîtra sur le moteur de recherche.

 

TAB SOCIAL

Social nous pouvons décider comment notre produit apparaîtra sur les réseaux sociaux, donc, même principe que nous avons vu pour l'onglet dédié au SEO mais pour les Réseaux Sociaux.

 

Étape 3 : Créons les catégories et sous-catégories de nos produits

Concernant la création des catégories et sous-catégories de nos produits, nous avons rédigé un article spécifique que je t'invite à consulter en cliquant ici.

 

Étape 4 : Ajoutons les produits sur le site pour les rendre achetables

Une fois les produits créés, il ne nous reste plus qu'à les insérer sur le site web pour les rendre achetables.

Tout d'abord, nous devons nous rendre sur la page du site web où nous voulons faire apparaître nos produits qui, par exemple, pourrait être la page d'accueil du site. Pour ce faire, dirigeons-nous vers l'élément Pages du menu principal de Framework360 en suivant les étapes suivantes :

Site Web > Pages

Une fois dans l'écran récapitulatif de toutes les pages du site web, cliquons sur la page dans laquelle nous voulons insérer nos produits pour la modifier.

Bien à ce stade, nous sommes à l’intérieur de l’écran de modification de la page que nous avons sélectionnée, allons maintenant ajouter une ligne et, à travers le visual builder de Framework360, insérons à l’intérieur de la ligne le bloc Liste Produits (présent à l’intérieur de l’onglet Ecommerce) comme montré dans les figures suivantes :

À ce stade, Framework360 nous dira qu’il est nécessaire de créer une structure du bloc, pour ce faire, rendons-nous à l’intérieur de l’onglet Structure pour créer une nouvelle structure ou importer une structure précédemment créée comme montré dans la figure suivante :

Une fois notre structure définie, si nous voulions modifier son affichage (par exemple, définir si nous voulons que les produits apparaissent dans une grille ou un carrousel et combien de produits doivent être affichés dans la grille ou le carrousel aux différents emplacements mobile, tablette et pc) nous devrions nous rendre dans l’onglet Général à la section Affichage.

 

Étape 5 : Modifions la page du produit

Une fois le produit Framework360 créé, il nous créera automatiquement la page où le produit sera affiché. Si nous souhaitons modifier cette page, il nous suffira d'aller à l'onglet Pages présent dans le menu principal de Framework360 en suivant les étapes suivantes :

Site Web > Pages

Une fois dans l'onglet Pages , recherchons la page de notre produit et en cliquant dessus, nous pourrons la modifier via le visual builder de Framework360.

Ou bien, si nous ne souhaitons pas modifier manuellement les graphiques de nos pages produits, nous pourrions installer l'un des nombreux templates dédiés au e-commerce que Framework360 met à notre disposition. Pour changer le template, nous devrions aller dans l'onglet Thèmes du menu principal de Framework360 en suivant les étapes suivantes :

Personnalisation > Thèmes

 

Étape 6 : Ajoutons le panier dans le menu principal

Voyons maintenant comment ajouter à l’intérieur du menu de notre site, c’est-à-dire dans l’en-tête du site, le panier. Pour ce faire, allons dans la section Blocs Globaux du menu principal de Framework360 en suivant les étapes suivantes :

Site Web > Blocs Globaux

Une fois dans l’écran des Blocs Globaux , cliquons sur le bloc Menu Principal pour le modifier. À ce stade, insérons à l’intérieur de notre menu une nouvelle colonne et déplaçons-nous à l’intérieur, via le constructeur visuel de Framework360, le bloc Panier comme montré dans la figure suivante. Le bloc panier se trouve dans l’onglet Paiements du visual builder. 

Après avoir inséré le bloc Panier , nous allons le configurer à notre goût, toujours via le visual builder, et le tour est joué !

Si vous voulez découvrir comment réaliser l’header de votre site web avec Framework360, nous avons réalisé un guide spécifique que vous pouvez consulter en cliquant ici.

 

Étape 7 : Configurons le Checkout

Il est temps de configurer le Checkout. Un checkout est la dernière partie d'un site web e-commerce qui permet au client d'acheter les produits qu'il a précédemment ajoutés au panier ou qu'il a l'intention d'acheter.

Concernant la façon de configurer correctement le Checkout , nous avons réalisé un guide spécifique que je vous invite à consulter en cliquant ici.

 

Étape 8 : Connectons les méthodes de paiement PayPal et Stripe

Bien, nous sommes arrivés à la dernière étape du processus d'achat, à savoir, le paiement. Pour permettre au client d'effectuer le paiement, nous devons connecter à notre site web e-commerce une méthode de paiement ; les méthodes les plus couramment utilisées sont PayPal et Stripe. Nous avons créé deux guides spécifiques dans lesquelles nous expliquons comment relier ces deux méthodes de paiement à Framework360, pour les consulter, cliquez sur les liens ci-dessous :

• Comment relier PayPal à notre site web réalisé sur Framework360
• Comment relier Stripe à notre site web réalisé sur Framework360

 

Étape 9 : Créons un coupon de réduction

Enfin, il est approprié de préciser que Framework360 nous donne également la possibilité de créer un coupon de réduction que les clients peuvent utiliser lors de l'achat sur notre e-commerce. Sur ce sujet également, pour plus de clarté, nous avons jugé opportun de réaliser un guide spécifique que vous pourrez consulter en cliquant ici.