Résumé
‍Accédez à notre communauté privée d'apprenants qui suivent actuellement nos formations. Vous pourrez ainsi poser vos questions librement aux mentors et échanger avec vos camarades de "classe" !

Objectif
‍Dans cette partie nous allons mettre en place les bases de nos boutiques afin de travailler plus efficacement par la suite. Nous aborderons les variables (couleurs, typo, etc..), et la méthodologie de conception.

• Installation de la méthodologie Client First

• Nettoyage du projet pour construire un site propre

• Préparation et organisation des variables de couleurs

• Ajout des typographies personnalisées dans notre projet Webflow

• Configuration des emails pour notre boutiques e-commerce

• Configuration de l'expédition (Création de zone d'expédition, ajout des prix, etc...)

Objectif
‍Dans cette seconde partie nous allons ajouter nos différents produits dans nos bases de données pour pouvoir les ajouter sur notre site afin que le client puisse les acheter.

• Comprendre le fonctionnement des bases de données e-commerce

• Apprendre à ajouter un produit dans sa base de données

• Apprendre à exporter et importer une base de données

• Maîtrisez les différents types de champs personnalisés pour booster ses fiches produits

• Créer des variantes d'un produit avec un système d'option

• Création d'une base de données de catégories de produit

• Création d'une base de données de produits physiques et numériques

Objectif
‍Ici nous entrons dans le vif du sujet car nous allons intégrer l'intégralité de notre boutique en ligne, page après page. L'objectif est de maîtriser une grande majorité des éléments HTML et des propriétés CSS proposés par Webflow.

• Réalisation d'une bannière avec image

• Réalisation d'un header en 2 blocs pour pousser à l'achat

• Création d'une section de nouveaux produits

• Utilisation d'une liste de collection pour afficher du contenus dynamiques (nos produits)

• Création d'une section de catégorie de produits moderne

• Réalisation d'une section de type slider pour afficher des offres exclusives

• Gestion du responsive de chaque section du site

• Création d'un bandeau de type "marquee" avec défilement automatique

• Réalisation de 3 types de navigation différentes sur nos boutiques et conversion en composant

• Réalisation de 3 types de footer différents sur nos boutique et conversions en composant

• Réalisation d'un méga menu vertical à 2 niveaux, inspiré de Louis Vuitton

• Réalisation d'un méga menu de type "Dropdown"

• Réalisation et personnalisation d'un moteur de recherche interne dans sa boutique

• Utilisation et personnalisation de 3 "Mini-cart" dans Webflow pour créer des paniers sur-mesure

• Création d'un bandeau d'informations en haut de son site

• Création d'une section pour intégrer son feed Instagram et conversion en composant

• Ajout et personnalisation d'une liste de collection

• Utiliser les filtres et le tri pour l'affichage dynamique des items dans ses listes de collection

• Création d'une card produit

• Personnalisation d'un bouton d'ajout au panier

• Bonus : Création de 2 systèmes de filtre complexes différents pour augmenter les conversions

• Bonus : Création d'un système de tri par ordre croissant, décroissant ou par ajout récent

• Conseil et astuces sur la structure d'une fiche produit qui convertit

• Comprendre le fonctionnement des "Pages template" dans Webflow pour créer des modèles de pages uniques

• Affichage de données dynamique pour créer de l'urgence et rassurer le client (Stock du produit, livraison estimée)

• Création d'un guide des tailles sur-mesure

• Affichage de la description et des caractéristiques des produits dans une tabs

• Savoir connecter des éléments de la page à des données dynamiques associées aux produits

• Réalisation d'une section "Plus de produit"

• Créer un fil d'ariane

• Créer un bloc de produit complémentaire pour faire du cross-selling

• Adapter une fiche produit en tablette et mobile

• Créer un beandeau sticky avec un appel à l'action pour augmenter le taux de conversion

• Réaliser une popin avec un formulaire pour demander des informations sur le produit

• Bonus : Personnaliser le bouton de quantité

• Bonus : Ajouter des avis clients et la notation

• Bonus : Ajouter des boutons pour sauvegarder ses produits dans une wishlist

• Bonus : Création et personnalisation de boutons de partage de la fiche produit sur les réseaux sociaux

• Réalisation d'une page personnalisée pour hébergé sa wishlist

• Personnalisation d'une wishlist complète avec Jetboost

• Affichage des articles sauvegardé en temps réel

• Possibilité de supprimer les articles de sa wishlist

• Personnalisation de A à Z de 3 bons de commande différents

• Conseil et astuces pour optimiser son bon de commande pour augmenter ses conversions

• Bonus : Ajout d'un bouton retour en arrière pour revenir sur le dernier produit consulté

• Création d'un formulaire entièrement personnalisé pour une prise de contact

• Ajout des réseaux sociaux

• Création d'une page pour les conditions générales de vente

• Création d'une page pour la politique de confidentialité

• Création d'une page pour les politiques de retours et de remboursement

Objectif
‍Maîtriser les animations CSS et le panneau d'animation de Webflow en créant une expérience optimale pour les utilisateurs.

• Créer des effets de survol sur les boutons d'appel à l'action

• Créer des états de focus sur ses champs de formulaire pour favoriser l'accessibilité de son site

• Créer des effets de "pression" sur le clic de bouton pour obtenir un rendu naturel et satisfaisant

• Définir des états actifs et inactif en jouant sur la couleur des liens de sa boutique

• Maîtrisez les déclencheurs les plus utiles pour un sites e-commerce (Mouse Hover, Mouse click, Scroll into view, etc..)

• Faire des apparitions modernes au survol d'élément sur les card de produit

• Rendre un méga menu à 2 niveaux fonctionnel et moderne grâce aux animation de clics

• Faire des apparitions progressives au scroll dans les sections

• Créer des FAQ dynamiques sur sa boutiques e-commerce

• Animer un bandeau d'informations pour qu'il défile en continu

Objectif
‍Bien travailler sa boutique pour référencer chacune des pages et l'optimiser pour améliorer son temps de chargement.

• Optimiser ses ressources visuelles avec l'outil interne de Webflow pour les alléger au maximum

• Bien remplir la balise "alt" pour être référencé dans les banques d'images des moteurs de recherche

• Hiérarchiser et travailler ses titres H1, H2, H3, H4 pour optimiser le référencement

• Bien choisir les bonnes balises de textes pour prioriser le contenu important

• Ajouter les bons tags aux élément de son site pour permettre aux moteurs de recherches de les comprendre

• Structurer correctement ses pages avec la structure Client First

• Remplir les champs méta de la bonne manière

• Ajouter des champs méta dynamiques

• Ajouter des données structurées sur ses pages pour augmenter les chances d'être en première place

• Apprendre à différer les codes tiers pour ne pas impacter le chargement de son site

Objectif
‍Votre site est pour un client ? Cette dernière partie vous apprends à livrer un site dans les meilleures conditions puis à le mettre en ligne depuis l'espace de votre client.

• Conseils est astuces avant le transfert d'un site pour protéger sa prestation

• Transférer un site en quelque clic sur le compte Webflow d'un client

• Les différentes méthodes de maintenance et celle qu'on vous conseil

• Apprendre à connecter un nom de domaine rapidement à un site Webflow, peu importe l'hébergeur

• Publier son site pour la mise en ligne finale