Créer une boutique en ligne

FromScratch construit deux types de projets : des sites et applications, et de vraies boutiques en ligne. Une boutique n'est pas une maquette avec un faux bouton « Acheter » : elle fait tourner un moteur e-commerce complet, avec catalogue, panier, paiement, comptes clients, commandes et sa propre administration. Ce guide explique comment en créer une et quoi faire dans les premières minutes.

Ce que vous obtenez

À la création d'une boutique, FromScratch met en place deux parties qui travaillent ensemble :

• La vitrine — le site que voient vos clients : accueil, fiches produit, collections, panier, paiement et espace client.
• Le moteur de commerce et son admin — là où vivent les produits, les prix, les commandes, les clients et les réglages. Vous le pilotez depuis le chat, ou à la main dans l'admin de la boutique.

Les prix sont en euros par défaut. Vous pourrez changer de devise plus tard (voir Devise et livraison).

Créer la boutique, pas à pas

1. Sur la page d'accueil, descendez jusqu'à Ou partez d'un modèle.
2. Choisissez le Thème du site : Clair ou Sombre. La boutique garde ce mode sur toutes ses pages.
3. Cliquez sur la carte Site e-commerce. La fenêtre Choisissez le design de votre boutique s'ouvre.
4. Choisissez l'un des quatre designs. Chacun arrive avec ses produits de démonstration, en clair et en sombre :
   • MAISON — Mode & vêtements : sérif éditorial, grande photo de campagne, fiches produit en portrait avec les tailles.
   • Oaklane — Maison & déco : ambiance scandinave apaisée, accueil en deux colonnes, entrée par pièce, accent sauge.
   • Velour — Beauté & cosmétiques : palette rose poudré, titres sérif, entrée par besoin de peau.
   • Kinetic — Tech & gadgets : mise en page nette, accent bleu électrique, caractéristiques sur chaque fiche.
5. Décrivez votre boutique dans le champ en haut (Que voulez-vous créer ?) et envoyez.

Votre espace de travail démarre et l'aperçu apparaît à droite. Le tout premier démarrage d'une boutique prend un peu plus de temps que celui d'un simple site : le moteur de commerce, sa base de données et la vitrine démarrent ensemble.

Astuce

choisissez le design le plus proche de ce que vous vendez, pas celui dont les photos vous plaisent le plus. Les produits de démonstration seront remplacés en une minute ; la mise en page (grille de tailles, entrée par pièce, lignes de caractéristiques…) est ce que vous gardez.

Votre premier message

Donnez à l'agent ce qu'il ne peut pas deviner : le nom de la boutique, ce que vous vendez, à qui, le ton et les couleurs. Il répond avec un court plan que vous validez étape par étape (voir Valider le plan, étape par étape).

Une boutique « Atelier Nour » qui vend des tasses et des bols en céramique faits main à Marseille. Garde la mise en page Oaklane, remplace le vert sauge par un terracotta chaleureux, tous les textes en français, et remplace les produits de démo par 6 des miens : je te donne les noms et les prix.

Je vends déjà sur Shopify à atelier-nour.com. Refais ma boutique ici avec le design Velour et importe mes produits, mes photos et mes collections.

Remplacer les produits de démonstration

Le catalogue de démonstration sert à ce que la boutique ait l'air finie dès la première seconde. Demandez à l'agent de le vider et d'ajouter vos produits, ou d'importer votre catalogue existant depuis Shopify ou WooCommerce. Tout est expliqué dans Ajouter des produits ou importer votre catalogue.

Tester un achat complet dans l'aperçu

L'aperçu est une boutique qui fonctionne. Ajoutez un produit au panier, passez au paiement, saisissez une adresse et validez la commande. Au départ, le paiement n'accepte que des commandes sans paiement (l'option « Manual Payment ») : personne n'est débité. Quand vous voulez encaisser par carte, connectez Stripe depuis le bouton Paiements — voir Encaisser dans votre boutique.

Note

dans l'aperçu, chaque page d'une boutique toute neuve est préparée la première fois que vous l'ouvrez, ce qui peut prendre jusqu'à une trentaine de secondes. Ensuite, elle s'ouvre rapidement.

Changer le style

Tout le design se modifie en le demandant : couleurs, polices, sections de l'accueil, menu, cartes produit, pied de page. Décrivez le résultat voulu, pas la technique :

Raccourcis la grande image de l'accueil, mets la collection « Nouveautés » juste en dessous et utilise une police à empattements pour les noms de produits.

Quand elle est prête

La publication demande une offre Starter ou Pro. Publier met votre boutique en ligne à sa propre adresse, en HTTPS, et vous donne les identifiants de l'admin de la boutique en ligne. Lisez Publier et mettre à jour une boutique avant votre premier lancement : quelques points diffèrent d'un site classique.

Questions fréquentes

Pour aller plus loin

• Ajouter des produits ou importer votre catalogue
• Encaisser dans votre boutique
• L'admin de la boutique
• Ce que vous pouvez créer