ConseilsCréation d'une boutique en ligne avec Ecwid et WebAcappella

Création d’une boutique en ligne avec Ecwid et WebAcappella

Ecwid est une solution de création de boutique en ligne simple à configurer vous permettant de vendre sur différents canaux.

Une version gratuite à vie est disponible. Vous pouvez créer un compte facilement sans aucune carte de crédit ou coordonnées bancaire. La création d’un compte se fait en quelques secondes. Pour vous inscrire, cliquez ici.

Dans sa version gratuite, Ecwid permet de créer jusqu’à 10 produits physiques et jusqu’à 2 catégories produits. Il est très facile de personnaliser l’affichage des produits même si les fonctionnalités sont assez limités en version gratuite. Tout est très intuitif il suffit de lire les anotations, tout est écrit en français.

 

Vendre en ligne avec Ecwid et WebAcappella

Pour intégrer votre boutique en ligne à votre site WebAcappella (Grid ou FX) il vous suffit de copier un code disponible dans la section

Tous les canaux de vente” => “Vendre sur votre site en ligne

Il y a deux boutons : “Autres plateformes et constructeurs de site web” et “Site web personnalisé

C’EST EXACTEMENT LA MÊME CHOSE !!!!!

Je ne sais pour quelle raison étrange, il y a deux boutons pour accéder au même endroit. Vous y trouverez les mêmes codes. Donc pas de panique, cliquez sur l’un ou l’autre vous arriverez sur la même page 😉

Création d'une boutique en ligne avec Ecwid et WebAcappella

 

Je vous invite également à renseigner l’adresse web de votre site internet dans la section juste en dessous.

Création d'une boutique en ligne avec Ecwid et WebAcappella

 

Enfin vous pouvez copier des petits bouts de code que vous insérerez dans des éléments code html dans WebAcappella pour afficher le bouton panier ou un barre de recherche.

Création d'une boutique en ligne avec Ecwid et WebAcappella

 

Ajout du code Ecwid dans WebAcappella

Dans WebAcappella Grid (Responsive), cliquez sur le petit bouton “cadis” dans l’inspecteur des éléments du site à gauche de votre espace de travail. Lorsque vous cliquez dessus, cela ajoute une nouvelle page à votre site web, une page boutique. Dans la barre des paramètres à droite, cliquez sur “Edition du code html” puis collez le code fourni par Ecwid.

Création d'une boutique en ligne avec Ecwid et WebAcappella

 

Dans WebAcappella FX, ajoutez une nouvelle page, cliquez sur les trois points blanc horizontaux à coté de la roue crantée pour afficher les composants de WA FX. Sélectionné “boutique en ligne” tout en bas. Un élément apparait sur la page:

Création d'une boutique en ligne avec Ecwid et WebAcappella

Vous pouvez placer cet élément horizontalement où vous le souhaitez sur la page. Ce qui aura pour effet de placer le catalogue produit de votre boutique où vous voulez.

En selectionnant le composant “boutique en ligne”, dans la barre des paramètres à droite, cliquez sur “Edition du code html” puis collez le code fourni par Ecwid.

Création d'une boutique en ligne avec Ecwid et WebAcappella

 

Une fois vos codes copiés au bon endroit dans WebAcappella, vous verrez apparaitre votre catalogue de produit sur la page web.

Création d'une boutique en ligne avec Ecwid et WebAcappella

 

Il ne vous reste plus qu’à personnaliser votre e-commerce à l’aide des options d’Ecwid.

Si vous souhaitez personnaliser d’avantage votre boutique en ligne, et si vous n’avez pas peur de faire un peu de css, voici un tutoriel qui pourrait vous plaire !

Personnalisation css d'une boutique en ligne Ecwid

Personnalisation css d’une boutique en ligne Ecwid

Bisous les neveux.

2 commentaires

  1. Bonjour,
    J’ai bien suivi toute la procédure et je m’arrache la tête depuis 3 jours.
    Impossible d’afficher la boutique dans le mode tester de WA FX. Même en publiant je me retrouve avec une page blanche.
    J’ai essayé de changer de navigateur mais rien ni fait.
    Apparemment aucun code HTML ne fonctionne sur mon site.
    Si quelqu’un pouvait s’arracher la tête avec moi je serai ravie.
    D’avance merci.
    Valérie Lejeune

    • Bonjour, c’est un grand classique. Pas d’inquiétude, le problème peut être réglé en 1 seul clic !
      Allez dans les propriétés génrales du site (roue crantée en haut à coté du choix des écrans). Rendez vous dans la dernière section : Fonction de débogage puis décochez la case “Activer le mode débogage”.

      A bientôt

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée Champs requis marqués avec *

Publier un commentaire