Revue : Commerce électronique Webflow et Snipcart (avec tutoriel vidéo)
Vous êtes pressé? Accédez au tutoriel vidéo ou au TL;DR.
Choisir une solution de commerce électronique pour votre boutique en ligne peut être un véritable casse-tête de nos jours.
Il existe de nombreuses options différentes, chacune répondant à des besoins spécifiques. Ces dernières années, nous avons assisté à l'émergence d'un nouveau type d'outils : les solutions sans code.
Webflow est l'un des pionniers dans ce domaine.
Il s'agit d'un constructeur de sites web axé sur les designers. Les gens l'utilisent pour créer de magnifiques sites web sans écrire une seule ligne de code.
Il y a quelque temps, nous avons publié un tutoriel d'intégration de Snipcart avec Webflow pour donner suite à une demande croissante de la communauté. Cependant, les deux plateformes sont à des kilomètres de ce qu'elles étaient à l'époque.
L'année dernière, pour commencer, Webflow a publié une fonction de commerce électronique pour sa plateforme.
D'une certaine manière, Webflow chevauche maintenant la fonctionnalité de Snipcart.
Cet article couvrira :
Une vue d'ensemble du commerce électronique Webflow et de Snipcart
Leurs caractéristiques et leurs prix
Ce qui les rend uniques
Un tutoriel vidéo sur Snipcart + Webflow
Nous espérons qu'il vous aidera à décider lequel est le meilleur pour votre prochain projet de commerce électronique.
Vous pouvez trouver d'autres comparaisons de solutions de commerce électronique ici.
Un grand merci à notre ami Pixel Geek, qui a réalisé le tutoriel vidéo. Il s'agit de la meilleure ressource existante montrant comment intégrer facilement notre panier d'achat dans votre projet Webflow.
Allons-y!
Qu'est-ce que le commerce électronique Webflow?
À la base, Webflow est une plateforme de construction web tout-en-une. En ce sens, il fournit un outil de construction de sites web sans code orienté vers les designers web.
Il offre un éditeur visuel pour créer des pages web personnalisées à partir de zéro (ou de thèmes). Il peut également faire office de CMS et de fournisseur d'hébergement. Le code est généré automatiquement lors de la conception de votre site. Vous pouvez également exporter le code HTML, CSS et JavaScript rendu si vous souhaitez utiliser votre propre CMS et hébergement.
Récemment, ils ont sorti une nouvelle fonctionnalité : le commerce électronique Webflow, le constructeur de site de commerce électronique sans code et avec une approche orientée design. Cela vous permet de construire un site de commerce électronique en utilisant entièrement la plateforme Webflow. Leur offre est plus proche de celle de Shopify dans la mesure où elle propose un forfait tout-en-un. Gestion du contenu, conception, fonctions d'administration et fonctions de commerce électronique; tout est géré à l'intérieur de Webflow.
La principale différence entre les autres solutions de commerce électronique monolithiques est qu'ils offrent une véritable personnalisation. Vous pouvez véritablement créer un site web unique, contrairement aux modèles rigides proposés par les plateformes de commerce électronique traditionnelles.
Tout, des pages de produits au panier d'achat, peut être conçu pour correspondre à votre marque. Vous pouvez également personnaliser l'expérience de paiement afin de l'harmoniser avec l'ensemble de votre site web.
Le processus est relativement simple :
Créez un compte sur Webflow
Choisissez un modèle OU partez de zéro
Créez vos produits dans l'interface utilisateur de la plateforme
Qu'est-ce que Snipcart?
Snipcart est un panier d'achat flexible que les développeurs peuvent facilement intégrer à tout site web en quelques minutes.
Vous ajoutez le panier de Snipcart à un site comme vous le feriez avec Google Analytics : en copiant-collant quelques lignes d’extraits de code.
Les produits sont ajoutés à peu près de la même manière!
Toute votre logique de commerce électronique peut effectivement être gérée côté client, ce qui facilite son intégration dans les applications web, les sites statiques ou même les CMS traditionnels.
Avec des connaissances de base en CSS, vous pouvez modifier l'aspect et la convivialité de l'ensemble de votre processus de paiement sans trop de restrictions. Snipcart offre une expérience de développement particulièrement flexible, d'où la partie "centrée sur les développeurs" de cette description.
Maintenant, pour les personnes qui ne sont pas férues de technologie et qui essaient de comprendre ce qu'elles viennent de lire, voici comment j'explique ce que nous faisons à ma mère (salut Carole!) : Snipcart vous permet de vendre à peu près tout sur votre site web tout en gardant votre marque personnalisée.
Si vous décidez d'opter pour une combinaison de Webflow et Snipcart, vous n'aurez besoin que de connaissances de base en HTML et de solides compétences en Ctrl + C / Ctrl + V. Le tutoriel ci-dessous met ceci en évidence.
"Orienté vers les développeurs" ne signifie pas que les commerçants sont laissés pour compte. Snipcart offre aux commerçants une gestion administrative conviviale pour gérer toutes vos opérations de commerce électronique : commandes, rabais, paniers abandonnés, livraison, etc.
Tarifs de Snipcart et Webflow
Tous les prix sont en dollars américains. Les frais de passerelle de paiement peuvent varier en fonction des solutions choisies.
Tout d'abord, il est important de noter que Snipcart et Webflow sont gratuits pour les tests. Vous ne commencez à payer que lorsque vous mettez le site en ligne et commencez à accepter des commandes. Le commerce électronique de Webflow ne vous permet cependant pas de tester les transactions avant de les mettre en ligne.
Comparons le coût des deux solutions pour deux boutiques différentes.
Disons que la "boutique A" et la "boutique B" vendent toutes deux des bonbons en ligne.
La boutique A vend ses bonbons en utilisant Snipcart. Nous l'appellerons : Candy Factory. La boutique B vend ses bonbons en utilisant le commerce électronique de Webflow. Nous l'appellerons : Lollishop.
Nous n'avons pas inclus les frais de passerelle de paiement puisque vous les paierez avec les deux solutions.
Comme vous pouvez le voir dans le graphique ci-dessus, si nous nous concentrons uniquement sur le prix, Snipcart est une bonne option si vous n'avez pas un énorme volume de ventes mensuel.
D'autre part, si vous vendez des volumes de marchandises plus importants chaque mois, l'utilisation de l'un des plans de forfaits de commerce électronique de Webflow pourrait être moins chère que le tarif standard de Snipcart.
Il est important de noter que Snipcart propose un plan personnalisé si vous avez un volume de vente élevé, si vous faites du financement collectif ou si vous êtes un organisme à but non lucratif ou une école.
Quelles sont les caractéristiques qu'ils peuvent tous deux gérer?
Les commerces électroniques de Webflow et de Snipcart partagent de nombreuses caractéristiques. Comme indiqué précédemment, ils offrent tous deux un panier d'achat et une expérience de paiement entièrement personnalisés. Avec l'un ou l'autre, vous pouvez :
Personnaliser le processus de paiement pour l'adapter à l'ensemble de votre site et à votre marque
Offrir des rabais
Avoir un processus de paiement sur votre site
Vendre des biens physiques et numériques
Gérer les taxes
Automatiser le calcul des frais de livraison
Gérer votre inventaire
Supporter plusieurs langues
Ajouter des options de produits à votre panier
Traiter les transactions en ligne sécurisées
Disposer d'un tableau de bord du commerçant hébergé pour gérer les opérations de commerce électronique
Mettre en place une boutique personnalisée en toute simplicité
Intégrer des webhooks et des API
Ces fonctions partagées sont assez courantes dans le domaine du commerce électronique.
Maintenant, pour vraiment explorer les deux options, examinons leurs différences!
Quelles sont leurs distinctions?
Avantages du commerce électronique de Webflow
Le commerce électronique de Webflow possède quelques fonctionnalités qui ne sont pas offertes d'emblée par Snipcart :
👉 Il vous donne accès à des canaux de vente "cool" : Instagram et Facebook.
C'est quelque chose que Snipcart ne supporte pas pour le moment. Ce n'est pas quelque chose qui a été beaucoup demandé par nos utilisateurs, donc nous préférons travailler sur des choses que nous faisons déjà bien pour le moment.
👉 Apple Pay et Google Pay sont intégrés dans les options de paiement disponibles. (Vous pourriez les ajouter à Snipcart via notre fonctionnalité de passerelle de paiement personnalisée).
👉 Il offre une intégration prête à l'emploi avec les logiciels d'expédition pour l'automatisation. Cela signifie que vous pouvez synchroniser vos commandes avec un logiciel d'expédition pour créer les étiquettes d'expédition et automatiser le suivi.
Tableau de bord de Webflow.
C'est quelque chose de prévu pour Snipcart, à travers une intégration Shippo. Vous pouvez cependant déjà intégrer une solution d'expédition en utilisant des webhooks.
Certains d'entre vous pourraient penser que j'ai oublié d'ajouter un élément important à la liste : la construction de site web sans code orienté vers le design. Comme vous le verrez plus tard, vous pouvez également y parvenir en combinant Webflow et Snipcart.
Avantages de Snipcart
Une chose dont nous sommes fiers chez Snipcart est l'ensemble des fonctions intégrées que nous offrons.
👉 Par exemple, nous proposons un tableau de bord client unique où vos clients peuvent créer un compte pour accéder à l'historique de leurs commandes. Il peut être utilisé sur votre site pour obtenir toutes les informations sur vos clients pour vos futurs besoins de marketing.
👉 Nous disposons également d'une fonctionnalité de paniers abandonnés dans laquelle vous pouvez définir des campagnes de courriel de récupération personnalisées et obtenir une liste complète de tous les paniers abandonnés par les visiteurs de votre site.
👉 Vous avez besoin de plans de paiement et d'abonnements récurrents? Nous avons tout ce qu'il faut.
Cette fonctionnalité n'est disponible que dans la version 2 pour le moment (avec Stripe), mais nous travaillons d'arrache-pied à la publication d'une version bêta pour la version 3 très prochainement.
👉 Nous prenons également en charge le multidevise. Après tout, l'un des principaux avantages du commerce électronique est la possibilité de vendre ses produits dans le monde entier; il serait un peu contre-intuitif de ne pas pouvoir s'adapter aux différents marchés.
👉 Snipcart prend également en charge un plus large éventail de passerelles de paiement :
Stripe (également offert par Webflow)
PayPal (également offert par Webflow)
Authorize.Net
Braintree Payments
Mollie
Square
Tableau de bord de Snipcart
Enfin et surtout, Snipcart adopte le paradigme Jamstack. Voyons ce que ça implique.
Snipcart : Compatible à Jamstack
Snipcart, par définition, est vraiment compatible à Jamstack.
Le "pourquoi" de ces avantages est expliqué en détail dans cet article.
N'hésitez pas à sauter cette partie si ce n'est pas votre truc. Comme je l'ai dit précédemment, Snipcart est étroitement lié à ce paradigme de développement web moderne. Pourquoi est-ce important? Voici les principaux avantages de la Jamstack :
Meilleure performance
Coûts de développement moins élevés
Sécurité accrue
La couche à faible empreinte de notre panier d'achat, que vous pouvez ajouter à n'importe quel site web, en fait un élément naturel de cet écosystème axé sur les API.
Étant donné que notre panier et notre processus de paiement se trouvent directement du côté client de votre site, vous pouvez facilement migrer votre site web existant vers un autre CMS sans avoir à reconstruire tout votre site et les fonctionnalités de commerce électronique qui l'accompagnent.
Vous pouvez l'intégrer dans n'importe quelle installation que vous avez déjà. Il vous permet d'utiliser les outils dont vous avez besoin sans être prisonnier d'un CMS monolithique restrictif. Cela signifie également que vous pouvez sélectionner les fonctionnalités que vous souhaitez ajouter à votre projet.
Les côtés client et serveur de votre site sont entièrement indépendants. Bienvenue dans le monde sans tête, mes amis!
Il est impossible d'utiliser les fonctionnalités de commerce électronique natives de Webflow d'une manière Jamstack.
Si vous voulez suivre la voie Jamstack en utilisant Webflow et Snipcart ensemble, vous pourriez utiliser un nouvel outil développé par Udesly. Grâce à leur adaptateur et à la fonction d'exportation HTML de Webflow, vous serez en mesure d'importer le site que vous avez construit vers un CMS sans tête tout en intégrant Snipcart pour vos besoins de commerce électronique.
Tutoriel d'intégration de Snipcart avec Webflow
Si vous décidez d'opter pour Webflow, c’est bien pour vous. Si vous décidez également d'utiliser Snipcart pour la partie commerce électronique, tant mieux! Cette section pourrait être utile.
Notre ami Pixel Geek a réalisé cet excellent tutoriel sur la façon d'intégrer Snipcart dans votre site web Webflow. Nous avons été impressionnés de voir à quel point il est facile d'intégrer notre panier d'achat dans Webflow avec peu ou pas de code.
Il couvre :
Comment installer Snipcart dans votre projet Webflow
Comment créer un bouton d'achat et définir les produits dans la plateforme Webflow
Comment gérer les produits de manière dynamique en utilisant les collections Webflow
Comment ajouter des variantes de produits
Comment insérer un lien "Ouvrir le panier" et un résumé du panier en haut de la page
Comment activer le tableau de bord client de Snipcart
Si vous appréciez cette vidéo, n'hésitez pas à aimer, partager et vous abonner à sa chaîne! :)
Le commerce électronique de Webflow ou Snipcart?
Alors, laquelle de ces solutions de commerce électronique est la meilleure?
La réponse courte est : Ça dépend de vos besoins. La solution idéale dépend de l'utilisateur que vous êtes et des fonctionnalités que vous recherchez dans un panier d'achat. Il n'y a pas de solution magique. Sauf si vous êtes un magicien. Si c'est le cas, envoyez-nous quelques potions!
Ceci étant dit, qu'avons-nous appris ici?
Webflow est un constructeur de sites web sans code et orienté vers le design, qui comprend des fonctions de commerce électronique. Tout est géré sur leur plateforme. Il s'agit d'une solution tout-en-un pour les personnes qui cherchent à créer un site web unique et personnalisé pour vendre en ligne.
Snipcart est un panier d'achat que vous intégrez à votre site web existant en copiant-collant quelques lignes de code. Il ajoute des fonctionnalités de commerce électronique à tout site web. Vous pouvez le personnaliser entièrement pour l'adapter à votre marque.
Le commerce électronique de Webflow offre ces fonctionnalités que Snipcart n'offre pas :
Automatisation de l'expédition
Vente sociale
Multivendeur
Snipcart offre ces fonctionnalités exclusives :
Support multidevise
Compte et tableau de bord client
Plus de passerelles de paiement personnalisées
Plans de paiement et abonnements récurrents
Récupération des paniers abandonnés
Si vous n'êtes pas un développeur (et ne pouvez pas travailler avec un développeur), une solution plus conviviale telle que Webflow pourrait être votre meilleure option. Vous obtiendrez une personnalisation sans entrer dans le domaine du code, mais vous devrez peut-être renoncer à la flexibilité. Webflow se concentre vraiment sur la conception et peut prendre beaucoup de temps. Si vous recherchez quelque chose de rapide et facile, je vous suggère de chercher ailleurs, comme les thèmes Shopify.
Si vous êtes un développeur à la recherche de puissance de personnalisation et de flexibilité, vous voudrez probablement écarter le commerce électronique de Webflow.
Heureusement, les solutions de commerce électronique sans tête, plus axées sur les développeurs, pourraient être plus accessibles que jamais aux non-développeurs. Comme nous l'avons vu dans le tutoriel vidéo, vous pouvez en effet intégrer Snipcart à votre site web hébergé par Webflow pour activer les fonctions de commerce électronique.
À ce stade, tout dépend de vous!
Que pensez-vous du commerce électronique de Webflow? Est-ce que nous l’avons bien compris? Nous serons heureux d'en discuter dans les commentaires!
Si vous avez apprécié cet article, prenez une seconde pour le partager sur Twitter.
