Comment démarrer un commerce électronique sur Webflow ?

Comment démarrer un commerce électronique sur Webflow ?
Published
May 24, 2023

Les gens entretiennent une relation de longue date avec le commerce, la consommation et l'achat. Tout au long de l'histoire, les humains ont fait du commerce pour acquérir les biens et services dont ils ont besoin et qu'ils désirent. Qu'il s'agisse du troc de biens contre d'autres biens, du développement de systèmes monétaires ou de l'essor des achats en ligne aujourd'hui, la façon dont les gens interagissent avec le commerce a évolué au fil du temps.

Statistiques publiées par Forbes démontrer clairement la croissance substantielle des ventes en ligne. Rien qu'en 2023, les ventes devraient augmenter de 10,4 %, pour atteindre le chiffre impressionnant de 6,3 billions de dollars. Pour ce qui est de l'avenir, le rapport prévoit qu'en seulement trois ans d'ici 2026, les ventes en ligne atteindront le chiffre impressionnant de 8,1 billions de dollars.

Dans un monde où tout évolue à un rythme effréné, ces chiffres soulignent l'importance de créer rapidement une présence en ligne dans le commerce électronique.

Commerce électronique sur Webflow

Webflow change la donne pour le commerce électronique. Il s'agit d'une plateforme conviviale qui permet aux entreprises de créer de superbes boutiques en ligne sans aucune compétence en matière de codage. Avec Webflow, vous pouvez concevoir votre site Web, gérer les produits, traiter les paiements en toute sécurité et suivre les commandes de manière fluide. Tout est optimisé pour tous les appareils, garantissant ainsi une expérience d'achat fluide aux clients.

De plus, Webflow s'intègre facilement à d'autres outils pour rationaliser vos opérations de commerce électronique. Grâce à Webflow, vous pouvez créer une boutique en ligne professionnelle, atteindre davantage de clients et augmenter votre potentiel de vente.

Une chose que nous devons mentionner est que Webflow ne propose pas de plans de commerce électronique gratuits. Vous devez choisir l'un des plans de site ci-dessous qui convient à votre entreprise, puis commencer à créer votre boutique Webflow !

Webflow Ecommerce Site Plans Pricing
Le site de commerce électronique Webflow propose des plans et des tarifs

Comment configurer la boutique en ligne Webflow ?

Lors de la configuration de votre boutique en ligne, vous pouvez choisir d'utiliser un outil préfabriqué modèle de site Web de commerce électronique ou concevez vous-même votre site à partir de zéro.

Après avoir choisi le plan de votre site de commerce électronique, la première étape à suivre lors de la configuration de votre boutique de commerce électronique Webflow consiste à activer la fonctionnalité de commerce électronique.

Si vous sélectionnez un modèle de commerce électronique Webflow prédéfini, les fonctions de commerce électronique seront automatiquement activées pour vous. — Sur cette note, voici quelques modèles de commerce électronique Webflow que vous pouvez utiliser pour mode, technologie, publiant et d'autres industries ! — Dans le cas contraire, si vous choisissez de design vous-même à partir de zéro, vous devez alors activer le commerce électronique manuellement, alors suivez les étapes ci-dessous !

Accédez d'abord au panneau latéral et choisissez le commerce électronique bouton de stockage comme on peut le voir ci-dessous.

A picture of webflow visual canvas highlighting the ecommerce button
Toile visuelle Webflow

Ensuite, après avoir cliqué dessus, un message s'affichera pour confirmer votre choix ; il vous suffit de sélectionner »Faisons-le» et poursuivez la configuration.

Une fois que vous avez fait cela, le guide de configuration Une fenêtre s'ouvrira vous montrant 3 étapes avec les étapes à suivre, afin de créer votre boutique en ligne.

Compléter le guide de configuration du commerce électronique Webflow

Passons à la première étape du processus que nous avons quittée, le guide de configuration la fenêtre s'ouvrira comme indiqué ci-dessous.

Webflow ecommerce setup guide picture
Guide de configuration du commerce électronique Webflow

Il y a 12 étapes ou moins, selon que vous avez déjà renseigné ces informations dans les paramètres du site Webflow. Vous pouvez les remplir dans l'ordre ou ajouter d'abord les produits et compléter ensuite ce que vous avez oublié.

Nous avons choisi de les afficher tels qu'ils figurent dans l'ordre dans la liste, afin de ne pas vous y tromper.

1. Ajouter une adresse professionnelle

La première étape de la première étape (Configuration de votre boutique) consiste à ajouter une adresse professionnelle.

Dans le guide de configuration illustré ci-dessus, cliquez sur Ajouter une adresse professionnelle et une autre fenêtre s'ouvrira.

Adding a business address and other details on webflow ecommerce settings
Ajouter votre adresse commerciale de commerce électronique

Écrivez le nom de votre entreprise et continuez à remplir les autres champs obligatoires, puis passez à l'étape suivante.

2. Révision des paramètres de devise

Faites de même ici en sélectionnant Vérifiez les paramètres de devise sur le guide de configuration et choisissez la devise de votre boutique ainsi que votre langue et d'autres informations obligatoires.

Currency settings on webflow ecommerce setup guide
Paramètres de devise du commerce électronique Webflow

3. Ajouter un produit

La troisième étape, et l'une des plus importantes, lors de la création de votre boutique consiste à ajouter vos produits.

Les produits sont ce qui fait vivre le magasin ; sans eux, comme le dit un proverbe, vous n'auriez qu'à « mettre la clé dedans et fermer votre entreprise ».

Pour ajouter un produit, cliquez simplement sur Ajouter un produit texte du lien hypertexte, et il vous redirigera vers les fenêtres ci-dessous.

Adding a product Page on webflow ecommerce settings
Ajouter vos produits sur le commerce électronique Webflow

Ici, vous pouvez ajouter un exemple d'article si vous souhaitez le consulter à l'avance, ou vous pouvez cliquer sur Nouveau produit cliquez sur le bouton et remplissez les informations requises, comme le montre l'image suivante.

A picture of the product info you need to write on webflow ecommerce
Nouveaux paramètres du produit dans le guide de configuration du commerce électronique Webflow

4. Ajouter un mode de livraison

Comme pour les autres, il vous suffit de cliquer sur Ajouter un mode d'expédition lien hypertexte puis cliquez Ajouter une zone de livraison.

A picture of shipping settings in webflow ecommerce setup guide
Paramètres de la zone d'expédition

Les zones d'expédition vous permettent de choisir entre différentes méthodes d'expédition, telles que le prix, le poids, le forfait, etc., en fonction de vos préférences.

Après avoir sélectionné Ajouter une zone de livraison, la fenêtre suivante apparaît dans laquelle vous pouvez choisir méthodes d'expédition et remplissez les autres champs nécessaires.

Shipping zone settings on webflow ecommerce
Configuration des méthodes d'expédition

5. Révision des paramètres fiscaux

Il s'agit de la dernière étape avant de commencer à concevoir votre boutique. Pour ce faire, cliquez sur paramètres de révision lien hypertexte sur le guide de configuration, et continuez à sélectionner la catégorie de taxe de votre choix, ou vous pouvez également configurer la version de calcul automatique des taxes.

taxes settings in webflow ecommerce
Paramètres fiscaux sur le guide de configuration du commerce électronique Webflow

Conception de votre boutique

Après avoir terminé la première étape du guide de configuration, il est temps de commencer à concevoir votre boutique. Voici les 4 étapes à suivre dans cette partie :

A picture of the step you need to take to design your store on Webflow ecommerce setup guide
Deuxième étape du guide de configuration - Conception de votre boutique

1. Ajoutez et concevez votre panier

Accédez d'abord à la partie Designing Store du guide de configuration et sélectionnez la première tâche qui consiste à ajouter et à concevoir votre panier.

Cliquez Ajouter un panier texte de lien hypertexte, et il ouvrira la fenêtre de conception principale. Faites défiler la page vers le bas jusqu'à la partie Commerce électronique, puis sélectionnez chariot icône.

A picture showing how to add a cart on webflow canvas
Ajouter un panier pour la conception de votre boutique en ligne

Après cela, une autre fenêtre apparaîtra avec le paramètres du panier, vous pouvez y modifier les paramètres, ou le fermer et le vérifier ultérieurement dans le panneau latéral droit du canevas visuel.

Cart settings image on Webflow ecommerce
Paramètres du panier de commerce électronique Webflow

2. Concevez la page produit du commerce électronique

La deuxième étape après l'ajout de votre panier consiste à concevoir la page du produit.

Cliquez simplement sur le bouton Ajouter des éléments et poursuivez la conception. Concevoir une page de produit, c'est comme créer n'importe quelle autre page dans Webflow, alors continuez et faites preuve de créativité.

3. Concevez la page de paiement du commerce électronique

Encore une fois, comme à l'étape précédente, la conception de la page de paiement est identique à la conception de n'importe quelle autre page dans Webflow.

La seule différence est qu'après avoir activé la fonctionnalité de commerce électronique, une page de paiement est automatiquement créée avec les informations obligatoires qui doivent être renseignées avant l'expédition.

La seule chose que vous devez faire est d'ajouter des couleurs et d'autres éléments de design que vous aimez, pour que la page de paiement corresponde à vos préférences esthétiques.

Il vous suffit de cliquer sur Accéder à la page de paiement le texte du lien hypertexte et la fenêtre de la page de paiement apparaîtront immédiatement sur le canevas de conception, où vous pourrez ajouter des couleurs et d'autres éléments en fonction de vos choix.

4. Créez des e-mails de commerce électronique

Les e-mails de commerce électronique constituent la dernière étape de la deuxième étape de la configuration de votre site Web de commerce électronique Webflow.

Il s'agit de la section dans laquelle vous concevez e-mails de commande, si la commande est confirmé, expédié, reçu ou remboursé. Chaque page d'e-mail nécessite quelques modifications, afin que le design soit cohérent avec le reste de la page.

Pour ce faire, cliquez sur Accédez aux paramètres de messagerie hyperlien et téléchargez le logo de votre marque dans la fenêtre qui s'ouvre, et continuez avec les autres détails, les couleurs et le texte des e-mails, si vous souhaitez les rendre plus uniques et plus distincts par rapport à la concurrence.

Email settings on Webflow ecommerce setup guide
Configuration de vos e-mails dans les paramètres de votre boutique en ligne

Lancement de votre boutique

La troisième et dernière étape de la création de votre boutique en ligne Webflow consiste à lancer votre site Web auprès du public.

Pour ce faire, vous devez suivre ces 4 étapes supplémentaires avant la version finale de votre site :

An image of steps to take to launch your store on Webflow ecommerce
Troisième étape du guide de configuration : lancement de votre boutique

1. Ajouter un fournisseur de paiement

Comme le dit le proverbe « Rien n'est gratuit », avant de lancer votre site Web, vous devez ajouter un fournisseur qui accepte les paiements via votre boutique.

Pour terminer cette tâche, cliquez sur Ajouter un fournisseur de paiement texte du lien hypertexte, puis connectez l'un des fournisseurs de paiement affichés dans la fenêtre suivante : Stripe ou Paypal.

An image on how to add payment providers on Webflow ecommerce setup guide
Ajouter des fournisseurs de paiement dans les paramètres de commerce électronique de Webflow

Webflow accepte les modes de paiement par carte de crédit ou de débit (Visa, Mastercard, American Express, Discover, Diners Club, JCB) via Stripe et PayPal, ainsi que

Paiements en ligne (tels qu'Apple Pay et Google Pay) via Stripe.

2. Ajouter un hébergement

Comme nous l'avons mentionné au début de cet article, Webflow n'offre pas d'option gratuite en ce qui concerne les boutiques de commerce électronique.

Bien que vous puissiez créer votre site, sans plan de site, vous ne pouvez pas le publier si vous n'êtes pas abonné à l'un des plans de site de commerce électronique premium.

Si vous n'avez pas encore ajouté de plan de site de commerce électronique, rendez-vous sur Ajouter un hébergement lien hypertexte dans la dernière étape du guide de configuration, et sélectionnez l'un des plans, comme indiqué précédemment sur l'image des plans du site ci-dessus.

De plus, il est important de savoir que si vous avez déjà un autre plan d'hébergement, vous devez le mettre à niveau vers un plan de commerce électronique, pour pouvoir publier un site de commerce électronique.

3. Activer le protocole SSL

Pour garantir la sécurité du traitement de vos paiements, vous devez activer le protocole SSL (Secure Sockets Layer)

Il vous suffit de cliquer sur Activer le protocole SSL lien hypertexte sur votre guide de configuration, et il vous redirigera directement vers Onglet Publication de Paramètres du site.

Ensuite, il vous suffit de faire défiler la page jusqu'à Options de publication avancées et définissez le Activer le protocole SSL basculez sur Activé.

A picture showing how to enable SSL on Webflow
Activation du protocole SSL dans les paramètres du site Webflow

4. Activer le paiement

La dernière et dernière étape avant la publication de votre site consiste à activer le bouton de paiement. Aucun utilisateur ne peut passer de commande sur votre boutique si vous ne passez pas par cette étape.

Cliquez sur Activer le paiement lien hypertexte et activez le bouton dans la fenêtre de destination du lien hypertexte, cliquez sur sauver et vous avez terminé !

An image on how to enable checkout on webflow ecommerce settings
Activer le paiement pour votre boutique en ligne

En direct

La dernière étape, et la plus simple, est la publication de votre site. Il suffit de sélectionner le publier bouton comme lorsque vous publiez n'importe quelle autre page Webflow sur vos domaines et le tour est joué !

A picture showing the Webflow publish window and button
Publier votre site sur vos domaines
Conclusion

Se lancer dans la création d'une boutique de commerce électronique en ligne sur Webflow ouvre un monde d'opportunités passionnantes pour les entreprises qui souhaitent prospérer sur un marché numérique en constante expansion.

À une époque où la prise de décision visuelle règne en maître, Webflow apparaît comme un qui change la donne, permettant aux entrepreneurs de créer des boutiques en ligne captivantes sans avoir besoin de compétences complexes en matière de codage. En quelques clics et avec une pointe de créativité, les entreprises peuvent laisser libre cours à leur imagination en concevant des sites Web de commerce électronique visuellement époustouflants qui captiveront les clients.

Si vous souhaitez consulter d'étonnants exemples de modèles de sites Web de commerce électronique et pas seulement, consultez nos modèles sur le Boutique Webflow. Enfin, en prime, vous pouvez consulter cette page utile Liste de lecture YouTube de Charli Marie, qui vous aidera encore plus et à clarifier tout malentendu sur votre processus de création d'une boutique en ligne pour vous-même !

Most read articles:
Sites Web populaires créés avec Webflow
Exemples de sites Web premium d'une page
Thank you! Your submission has been received!
Check your inbox and confirm your email!
Oops! Something went wrong while submitting the form.
Share This

Other Insights

Amazing Webflow
templates 🤩