Créer un site e-commerce peut sembler inaccessible pour toutes les personnes qui ne s'y connaissent ni en web, ni en développement. De nombreuses entreprises passent par des agences pour cette étape de création de sites et de développement web. Pourtant, aujourd'hui de nombreux outils permettent à chacun de mener à bien son projet e-commerce sans avoir à maîtriser une seule ligne de code. C'est le cas des outils CMS (content management system) no-code.
Dans cet article, nous allons vous apprendre à créer votre site e-commerce étape par étape avec notre CMS favori, Webflow.
L'avantage de Webflow par rapport à ses concurrents et qu'il convient à la fois aux novices et aux experts en design ou développement. C'est donc une excellente base pour construire un site e-commerce solide. Ne vous laissez pas décourager par la première impression d'usine à gaz de l'outil — Une fois que vous y aurez passé un moment, on est certain que vous en tomberez également amoureux !
Préparer les éléments clés pour créer son commerce en ligne
Vous vous demandez comment créer un site e-commerce sur Webflow ?
Avant de se lancer dans la création de votre commerce en ligne, on vous conseille de prendre du temps pour structurer vos idées et préparer le terrain. On vous épargne de longs paragraphes sur tout l'aspect juridique pour la création d'entreprise, mais n'oubliez pas de prendre du temps pour cet aspect afin de ne pas le regretter par la suite. Si vous êtes intéressé par le fait de savoir comment créer son entreprise facilement et sans trop de budget, on vous laisse lire notre article sur comment créer une entreprise sans argent.
Déterminez votre charte graphique, votre identité pour votre futur e commerce
Vous savez que vous voulez créer un site e-commerce, vous avez trouvé votre nom de marque et vos fournisseurs produits, mais ce n'est pas fini. Vous allez devoir penser à toute votre identité visuelle, vos valeurs. Tout ce qui rendra que votre marque unique et facilement identifiable parmi la concurrence.
On se doute que vous avez une idée dernière la tête, cependant il est nécessaire de poser sur papier l'image que vous avez de votre boutique en ligne.
Un conseil, commencez par écrire ce que vous souhaitez transmettre à travers votre marque. Quelles sont vos valeurs et écrivez pourquoi vous avez décidé de vous lancer. À quel besoin répondez-vous ?
En détaillant ce qu'est votre marque, vous allez être inspiré et comprendre plus facilement ce que vous voulez faire comprendre à vos consommateurs.
Il sera plus simple pour vous d'établir un logo qui reflète votre identité, ainsi que des couleurs, des mots marquants, un message.
Vous avez tout le nécessaire pour créer une identité forte à votre marque, il n'y a plus qu'à le mettre en place sur un site internet.
Préparez vos photos et éditez-les
Vous avez votre stock de produits, c'est très bien, mais pour pouvoir les mettre en ligne, il vous faut des photos de chacun d'eux et sous tous les angles.
C'est une étape longue, mais elle est indispensable. On ne peut pas vendre un produit sans l'avoir vu. Prenez du temps pour photographier vos articles. Mettez-les en scène dans leur environnement habituel, trouvez un joli fond qui vous représente. Retenez que vos clients doivent retrouver en vos photos votre identité, alors lâchez-vous.
Une fois que les photos sont toutes prises, sélectionnez les meilleures. Une étape tout aussi longue que la précédente, mais qui à le pouvoir de faire grimper les ventes. Parfois, un produit ne se vend pas pas parce qu'il n'est pas beau ou inutile, il ne se vend pas, car il n'est pas mis en valeur.
Une fois les meilleures photos sélectionnées, éditez-les. Une touche de couleur, de la netteté, etc. En éditant vos images, vous allez pouvoir vous créer un joli album de produits selon votre charte graphique en vous amusant avec la balance des couleurs.
Préparez vos descriptions produits
Pour gagner du temps, vous pouvez vous créer un dossier Notion, ou Excel pour les amoureux d'office. Ajoutez-y dans 3 colonnes différentes, le nom du produit, les images et dans une autre colonne la description de ce produit.
Rédigez la fiche produit de chacun de vos articles peut paraître fastidieux et pourtant ce n'est pas à négliger. C'est un métier à part entière où l'art de convaincre est le mot d'ordre.
Décrivez vos articles en y ajoutant les formes. Ne parlez pas simplement des fonctionnalités, mais des bienfaits, du problème ou du besoin réglé.
Pensez à vos mots, ils doivent représenter votre marque. Pensez également au ton. Choisissez en fonction de votre cible et de votre identité, de tutoyer ou de vous-voyez vos clients.
Préparez vos textes
Vous l'avez fait pour vos fiches produits, c'est bien, désormais faites de même pour votre page d'accueil, votre page à propos et les différents onglets que vous aurez. Vous allez gagner un temps fou lors de la construction de votre site. Vous n'aurez plus qu'à copier et coller votre texte.
Préparez une maquette de votre futur site web
On ne vous demande pas d'être compétent en UI design, mais il est toujours bon d'avoir une vision sur votre futur site. Réfléchissez aux différents éléments dont vous aurez besoin sur votre site. Quels CTA ? Quelles pages ? Quelles images sur la page d'accueil ? À quel endroit va tel produit.
Vous devez savoir an maximum ce à quoi doit ressembler votre e commerce pour pouvoir perdre le moins de temps possible par la suite.
Comment créer son site web avec Webflow simplement ?
Ça y est, nous y sommes. Dans cette partie vous allez découvrir un guide pas à pas qui va vous expliquer comment créer votre site e-commerce à l'aide de Webflow. Alors laissez tomber Wordpress et lancez-vous pas à pas avec cette solution clé en main de création de site internet. Pas convaincu ? Jetez un oeil à notre comparatif Wordpress vs. Webflow
Étape 1 : choisissez votre template e-commerce sur Webflow
On pourrait vous dire de commencer à partir de zéro et vous faire un guide complet sur chacune des fonctionnalités du CMS Webflow, mais ce n'est pas sur cet aspect que nous allons nous concentrer.
L'objectif, c'est de pouvoir créer en un rien de temps et facilement un site e-commerce complet qui fonctionne et visuellement beau. Nous vous conseillons donc de commencer depuis un template spécialement conçu pour le e-commerce. Cela vous simplifiera la vie.
En effet, en sélectionnant un template webflow gratuit ou payant, l'espace e-commerce est déjà créé. Cela se fait automatiquement. C'est-à-dire que vous avez toutes les fonctionnalités nécessaires pour vendre vos articles. Le panier est déjà présent, deux collections "produits" et "catégories" le sont aussi ainsi que vos pages de paiement et email de confirmation de commande.
Étape 2 : modifiez votre template
Ce n'est pas parce que vous choisissez un template que vous devez respecter tout ce qui a été préconçu. Vous avez la possibilité de modifier un tas de choses grâce à la feuille de style de Webflow disponible. Modifiez la police, le style d'écriture, changez les couleurs, les images, modifiez vos CTA, votre panier. Vous êtes libre de faire ce que vous souhaitez.
Faites toujours attention de créer du contenu responsive sur les différents formats d'écrans. De manière générale, les templates sont très bien structurés pour être responsives, néanmoins, si vous y ajoutez quelques éléments à la main, vérifiez toujours ce que ça donne sur toutes les dimensions d'écran.
Mais alors à quoi vous servent les ecommerce website design templates sur Webflow ? Ils vous permettent de partir sur de bonnes bases. Avec votre modèle, les éléments sont déjà créés, les pages aussi et vous avez une proposition d'UX et UI design.
Découvrez ci-dessous, le large choix de templates que Webflow met à votre disposition. Il y a de quoi trouver votre bonheur. Conseil, avant de faire votre choix, assurez vous de regarder et choisir le template qui aura le meilleur design de page produit ecommerce - c'est ça qui vous permettra de vendre, pas la couleur du bouton du menu.
Etape 3 : ajoutez les produits sur votre site internet Webflow
Dans cet article, nous partons du principe que vous n'aviez pas de site e-commerce au préalable, que rien n'existe. Vous devez donc ajouter vos produits manuellement. Courage, nous espérons que vous n'en avez pas plus d'une cinquantaine. Mais pas d'inquiétude, avec Webflow, ça ne vous prendra que quelques secondes pour créer un seul produit.
Découvrez comment faire :
Cliquez sur le panier à gauche, sur "products" puis sur "new product".
Remplissez les différents champs produits.
Étape 4 : Créez une nouvelle catégorie de produits
N'oubliez pas d'ajouter vos produits dans des catégories de produits. Pour créer une catégorie, voici comment faire :
Cliquez sur le "+" pour ajouter une nouvelle catégorie, ou sélectionnez "categories" dans le menu à gauche.
Remplissez les champs de votre catégorie (son nom).
Étape 5 : Les collections
Ce qui est pratique avec Webflow, c'est ses collections. En créant des collections, vous pouvez facilement faire apparaître en un clic, l'image, la description ou encore le prix de votre produit que vous avez préalablement renseigné dans sa fiche.
Voici comment faire :
Cliquez sur la roue dentée en haut à droite et sélectionnez l'élément de votre choix à faire apparaître depuis votre fiche produit.
Si dans votre template vous n'avez pas de collections produits créées, ajoutez une "collection list" à votre template.
Étape 6 : Ajoutez un suivi de stock
On vous recommande fortement d'ajouter un suivi de votre stock de produits. Tout d'abord, ça ne vous prend que quelques minutes, même quelques secondes pour le mettre en place. Aussi, avoir un suivi de stock, c'est utile pour éviter de vendre des produits que vous n'avez même plus en stock. Pour éviter les frustrations du côté de vos clients et de votre côté également, mettez-le en place.
Comme nous le disions, avec Webflow c'est très simple, voici comment procéder :
Dans votre page produit, appuyez sur le bouton "track inentory" pour l'actuver. Ajoutez la quantité de stock du produit.
Vous vous posez la question sur la mise à jour des stocks ? Détendez-vous, elle se fait automatiquement dès lorsqu'un client aura acheté ce même produit, votre stock se mettra à jour. Vous pourrez dormir sur vos deux oreilles.
Etape 7 : Configurez votre boutique
Vous avez designé votre site web Webflow, ajouté vos produits et configuré votre gestion des stocks, c'est très bien, mais encore il reste encore une petite étape. Vous devez configurer différentes choses telles que les moyens de paiement, l'expédition et vos emails de confirmation de commande.
Voyons comment faire :
Allez dans les paramètres puis dans "e-commerce". Remplissez tous les onglets et vérifiez-les.
Dans l'onglet checkout, activez le bouton "enable checkout" et créez-vous un plan de site en cliquant sur "add hosting".
Étape 8 : Personnalisez vos emails de confirmation de commande
N'oubliez pas d'ajouter la petite touche de votre marque dans vos emails de confirmation de commande pour qu'il soit plus agréable à lire.
Dans les paramètres, cliquez sur "email". Modifiez votre email de commande à votre image (couleur et champs personnalisés).
Étape 9 : Votre site ecommerce Webflow est en ligne !
Vous avez appuyé sur le fameux bouton "publish", on vous félicite. Le travail n'est pas terminé, car ça ne suffira pas pour générer des ventes. Améliorez constamment votre site e-commerce et alimentez-le. Il doit vivre. Ne le laissez pas mourir.
Pensez à toute votre stratégie marketing et de communication, qu'allez-vous faire pour promouvoir vos produits désormais ? Allez-vous vous créer un compte sur les réseaux et utiliser l'Instagram Shopping et les UGC ? Ou bien allez-vous faire du référencement payant ou gratuit ? Allez vous rester dans les tendances du e-commerce ? Une stratégie marketing de conversion ça se travaille.
On a écrit un article sur les AARRR framework, ça devrait vous intéresser pour votre stratégie marketing.
Webflow e commerce, combien ça coute ?
Webflow vous a intrigué pour de la vente en ligne ? Vous voulez en savoir plus et vous lancer dans la création de site e-commerce ou tout simplement vous souhaitez migrer vers ce CMS no-code ?
Découvrez ci-dessous les tarifications de l'outil, 3 versions s'offrent à vous pour créer votre e commerce :
L'offre Standard : pour 42 $/mois. Idéal si vous avez 50 000 $ de chiffre d'affaires annuel. Vous avez 3 comptes de personnel, la possibilité de personnaliser votre panier d'achat, votre page de paiement et vos champs de produits. Vous avez seulement 2% de frais de transaction. Vous avez accès à Apple Pay et la possibilité de faire des paiements en ligne et par Stripe.
L'offre Plus : pour 84 $/mois. La différence est qu'elle concerne les entreprises faisant un chiffre d'affaires de 200 000 $ annuel. Vous avez 10 comptes de personnel et 0% de frais de transaction. Cette offre propose en plus l'envoi d'emails automatiques sans la présence du logo Webflow.
L'offre Advanced : pour 235 $/mois. Aucune limite pour le chiffre d'affaires annuel. Elle concernera les grandes entreprises. En plus de toutes les fonctionnalités basiques, vous avez la possibilité d'avoir 15 comptes de personnel.
Pourquoi choisir Webflow ?
Vous venez de le voir, Webflow n'est pas si compliqué à utiliser. Une fois que l'on sait où chercher, vous pouvez vous y retrouver facilement.
Webflow, c'est une solution e commerce extrêmement performante et rapide. Tout se fait en un clic. Lorsque vous ajoutez des éléments sur vos pages, le code se crée de manière très propre et automatiquement. Ce qui permet à de futurs développeurs de pouvoir s'y retrouver.
Pas besoin d'ajouter plusieurs plugins pour le SEO de Webflow, l'outil intègre déjà des fonctionnalités de référencement pour vous aider à améliorer votre présence sur les SERPs.
Si vous êtes perdu, une montagne de ressource est disponible en anglais que vous pouvez traduire simplement. Vous avez accès à la Webflow University qui vous propose de nombreux cours sur le sujet. Vous êtes obligé de trouver votre bonheur sur ce site, aucune question reste sans réponse.
Comment trouver un expert Webflow pour concevoir vos sites web e commerce ?
Vous avez envie d'un site fiable sur lequel vous pouvez compter pour vous suivre dans l'essort de votre e-commerce ? Vous voulez avoir aucune limite pour le design ? Aucun souci, Petit Hack à l'avantage d'être expert Webflow. On vous propose de créer votre site sur Webflow ou de le migrer sur cette plateforme en fonction de vos envies. Si ça vous tente n'hésitez pas à regarder nos offres.
David Voge
.webp)
