Application Site Web / E-Commerce v16

Gérér son site web et son e-commerce

Présentation générale de l'application e-Commerce

Présentation générale de l'application e-Commerce

Prérequis

L’application e-Commerce permet de gérer une page “Boutique” sur le front-end et d’y vendre des articles.

 

Installation

Pour installer l'application, allez dans le menu Application et installez l'application eCommerce (website_sale).

ecommerce_app.png

L’application possède des dépendances sur les modules suivants :

Présentation générale de l'application e-Commerce

Gérer le site web

L'application "site web"

Cette application vous permet d’avoir une interface web configurable et liée votre outil de gestion Odoo.

L’option langue permet de paramétrer les langues dans lequel est disponible le site

image-1613480516341.png

L’option compte client permet de paramétrer les comptes utilisateurs créés pour les clients (voir point sur les utilisateurs). 

Enfin l’option captcha permet de protéger vos formulaires via un captcha.

image-1613480487720.png

Un CAPTCHA est un test qu’on vous demande quand vous voulez vous enregistrer sur un site ou laisser un commentaire afin de prouver que vous êtes humain. 

 

Processus de vente en ligne

Processus de vente en ligne

Boutique en ligne

La boutique en ligne présente une vue des articles disponibles en vignettes avec un outil de recherche.

boutique.png

 

Les articles peuvent être sélectionnés et placés dans le panier avant de valider la commande et de passer au paiement. Il suffit alors au client de compléter ses coordonnées puis de sélectionner un mode de paiement et de valider.

coord.png

 

Processus de vente en ligne

Mettre des articles en vente en ligne

Accéder aux articles de manière habituelle ou dans le module Site Web via le nouvel onglet Articles.

articles.png

 

Créer un nouvel article ou modifier un article existant. Dans l’onglet “eCommerce”, choisir éventuellement une catégorie de l’e-Commerce (voir-ci après) et sélectionner un type de disponibilité.

création article.png

 

Pour mettre l’article en vente sur la boutique en ligne, cliquer sur le smart button “Non publié". Cliquer sur le switch rouge (en haut à droite de la page) pour marquer l’article “publié”.

publier article.png

 

L’article est maintenant visible sur la boutique en ligne. En fonction du stock et de la règle de disponibilité choisie, l’article apparaîtra comme disponible à la vente ou non.

Catégorie de l'E-commerce

Les catégories de l'E-commerce sont configurables dans l'onglet 'Configuration>Articles>Catégories d'e-commerce'.

image-1676452927368.png

Il faut ensuite les afficher dans le Shop, dans l'onglet Personnaliser.

image-1676969795577.png

Le rendu final :

image-1676969871489.png

Configuration de l'application e-Commerce

Configuration de l'application e-Commerce

Menu des configurations

Après l’installation de l’application eCommerce, dans le module Site Web, l’onglet Configuration reprend les configurations de l’e-Commerce.

menu-config.png

 

eCommerce > Intermédiaires de paiement

Permet d’installer et de configurer les moyens de paiement pour les achats via le site web. Le paiement par virement bancaire est le plus utilisé car il ne nécessite pas de recourir à un service de paiement en ligne.

paiment.png

Pour configurer un intermédiaire de paiement comme Mollie, consulter cette page.

Articles > Catégories d’e-commerce

Permet de créer des catégories spécifiques pour les articles vendus sur la boutique en ligne.

article à vendre.png

 

 

 

Pour les configurations suivantes, il est nécessaire d’activer le mode développeur dans le tableau de bord du module Configuration (voir tuto).

eCommerce > Sauvez les données de paiement

A documenter

 

eCommerce > Icônes de paiement

A documenter

 

eCommerce > Transactions de paiement

Reprend toutes les commandes réalisées sur la boutique en ligne. Lorsqu’une personne qui n’est pas connectée à Odoo commande en ligne, une fiche contact est créée automatiquement avec les coordonnées fournies dans le formulaire de commande ainsi qu’une transaction. Ces données sont aussi présentes dans le module Comptabilité via Configuration > Paiement > Transactions de paiement.

Une transaction de paiement associée au profil client (si la personne est connectée) ou au "public user" (sinon) est initiée à l'état de brouillon lorsque la personne ajoute des articles dans son panier et passe à l'étape paiement. La transaction de paiement est confirmée lorsque le paiement est validé.

Configuration de l'application e-Commerce

Utiliser le paiement par Mollie

Configurer Mollie comme intermédiaire de paiement

1. Dans Applications, installer l'application Mollie payment_mollie_official

app mollie.png

2. Dans Facturation (ou Comptabilité), activer Mollie. Par défaut, Mollie est désactivé et disponible sur l'environnement de tests.

activer mollie.png configurer mollie 1.png

L'identifiant Profile ID et les clés API (de test et de production) sont à copier depuis son compte Mollie. Tant que le smart button est "environnement de test", c'est la clé de test qui sera utiliser pour simuler des paiements etc.

mollie interface.png

Configuration des moyens de paiement Mollie dans l'onglet "Mollie Payment Methods"

Cliquer sur "Sync payment methods" pour synchroniser les moyens de paiement configurés sur votre compte Mollie avec Odoo.

image-1643708985056.png

Configuration

Dans l'onglet Configuration, choisir un journal qui sera utilisé pour enregistrer les paiements lorsque des clients paient en ligne (voir étapes ci-dessous) :

image-1643709058609.png

Étapes d'un paiement Mollie

Vente via la boutique en ligne

Lors d'un achat sur la boutique en ligne, le client peut choisir parmi les méthodes de paiement disponibles. Les méthodes ajoutées via Mollie sont ici marquées "Test Mode" lorsqu'elle sont réalisées dans l'environnement de test (pour modifier cela, voir plus haut).

mollie moyens de paiement.png

Lorsque le client clique sur "Payer maintenant", une proposition de devis (SO) est créée par le système dans le back-end. Une transaction Mollie est initiée. Une fenêtre externe Mollie s'ouvre pour valider le paiement.

 

Enregistrement automatique du paiement dans le back-end

Si le paiement est effectué, la proposition de devis est confirmée en bon de commande de vente. La transaction Mollie est confirmée et un paiement (CUST.IN) est automatiquement créé dans le back-end au statut "comptabilisé" dans le module Facturation/Comptabilité (dans l'onglet Vente > Paiements). Une transaction de paiement y est associée (Comptabilité > Configuration > Paiements > Transactions de paiement).

mollie paiement.png

Deux écritures comptables correspondant au paiement sont créées, la première au crédit du compte comptable Clients, la seconde au débit du compte Mollie.

mollie ecritures paiement.png

Créer manuellement la facture client

Une fois la commande passée, il faut manuellement créer une facture depuis le bon de commande. Des écritures comptables correspondant aux articles facturés et à la TVA sont alors générées, ainsi qu'au débit du compte Clients :

mollie ecritures facture.png

Comme le paiement Client a déjà été enregistré, le système lettre automatiquement les deux écritures et la facture est marquée directement "payée".

mollie lettrage client.png
Réconciliation (lettrage)

Après l'import des relevés bancaires, la ligne correspondant à un paiement de Mollie regroupe habituellement plusieurs transactions pour différents clients. Pour réaliser la réconciliation, on lettrera d'un coup les différents paiements Mollie correspondant au relevé. Le solde correspond aux frais prélevés par Mollie, qu'on peut comptabiliser en ajoutant depuis l'interface de lettrage une écriture sur le compte comptable adéquat (à valider avec le ou la comptable).

mollie lettrage.png

Cas de figure : lorsque le paiement mollie n'est pas validé

Le paiement est annulé

Lorsque le paiement est annulé, le devis (SO) reste à l'état de proposition.

La transaction de paiement, elle, passe en statut "annulé".

 

Configuration de l'application e-Commerce

Gérer les connexions des client·es pour les commandes en ligne

Par défaut, les internautes sur la boutique en ligne peuvent uniquement commander en s'identifiant au moment de passer au paiement. Seule une fiche contact est créée pour les client·es. Si une personne se connecte à deux reprises pour faire des achats, elle devra s'identifier deux fois, et il y aura deux fiches contact dans odoo à son nom. Il n'y a pas de limite au nombre de fiches contact au nom d'une personne, et cela peut très rapidement polluer la liste des contacts.

Permettre aux clients et clientes de créer un profil utilisateur.

Dans la configuration du Site Web, l'option "Compte client" permet aux internautes de se créer un profil utilisateur·rice et d'accéder à un mini "espace personnel" où consulter leurs documents éventuels (bons de commande, etc.). Le profil utilisateur·rice ainsi créé est de type "utilisateur portail".

Pour cela, cocher l'option "Inscription libre". Cela n'empêchera pas la majorité des clientes et clients de remblir plutôt leurs coordonnées lors de l'achat sans s'identifier et de créer de multiples fiches contact.

e-commerce_login.png

A la création de leur profil, les utilisatrices et utilisateurs recevront automatiquement un email leur demandant de définir un mot de passe. Pour leur permettre de demander la réinitialisation de leur mot de passe en cas d'oubli (via un nouveau mail automatique), permettre la réinitialisation du mot de passe.

e-commerce_login_or.png

 

Suggérer aux internautes de s'identifier (ou se créer un profil) plutôt que de s'indentifier directement

Le module website_sale_suggest_create_account permet d'inciter les internautes à se créer un compte (ou s'identifier, s'ils ont déjà un profil utilisateur·rice), en affichant d'emblée la page de connexion au moment de finaliser la commande avant de passer à l'étape du paiement. Il est toujours possible pour l'internaute de commander sans se créer un profil utilisateur·rice, mais cela limite les doublons de contacts.

 

Forcer les clients à s'identifier (ou se créer un profil) pour commander

Le module website_sale_require_login oblige les internautes à créer un profil utilisateur pour finaliser leur commande.

Cette option est nécessaire si l'on désire éliminer le doublons dans la base de donnée. Dans ce cas, les client·es ne pourront pas créer un nouveau profil avec la même adresse email, et devront s'identifier avec leur mot de passe pour finaliser leur commande.

Configuration de l'application e-Commerce

Publier et dépublier des produits

Pour facilement publier et dépublier des produits, ouvrir l'appli Paramètres et cliquer sur Technique > Actions-serveur :

website_sale-server-actions.png

Ajouter une action-serveur, sélectionner le modèle "Article". Ajouter une ligne avec le champ "Est Publié", le type "Expression Python" et la valeur "True", comme illustré ci-dessous :

website_sale-publish.png

Enfin cliquer sur "ajouter une action contextuelle", ce qui ajoutera l'option dans le menu "Actions" depuis les produits.

website_sale-actions.png

 

On peut de la même manière ajouter une action "Dépublier les articles" en remplçant "True" par "False" :

website_sale-unpublish.png

Modules complémentaires pour l'e-Commerce

Modules complémentaires pour l'e-Commerce

Afficher les frais de livraison avec ou sans TVA

Le module fait par Coop IT Easy "website_sale_delivery_vat_label" permet d'afficher sur la boutique en ligne les frais de livraison avec la mention HTVA ou TVAC, selon la configuration de chaque frais de livraison.

 

Par exemple, 3 modes de livraisons ont été configurés :

Modules complémentaires pour l'e-Commerce

Forcer les utilisateurs à se connecter avant d'acheter sur le SiteWeb

Le module website_sale_require_login permet de forcer les utilisateurs à se connecter afin de pouvoir effectuer des achats depuis votre site web et ainsi de vous débarrasser de ces entrées dupliquées d'utilisateurs non authentifiés.

image-1616595367671.png

Ce module possède une dépendance sur les modules ; web_tour, website_sale_suggest_create_account

Modules complémentaires pour l'e-Commerce

Suggérez à l'acheteur de se connecter ou de créer un compte

Le module website_sale_suggest_create_account permet de suggérez à l'acheteur de se connecter ou de créer un compte mais sans l'obliger de le faire.

image-1616595823165.png

Ce module possède une dépendance sur le module ; webiste_sale

 

Modules complémentaires pour l'e-Commerce

Publier automatiquement un article en fonction du stock

Les modules website_sale_stock_autopublish et website_autopublish doivent être installés.

Ces modules ajoutent un champ "Publication gérée automatiquement" de type case à cocher sur la fiche article.

Si la case est cochée, le champ "availability" (onglet eCommerce) est obligatoire et le système automatique doit contrôler la valeur du champ Availability et agir en fonction :

1.png

Lorsque le champ quantity on hand (stock réel (champ stock) - toutes les quantités réservées) est =<0 => le produit n'est plus visible sur l'eCommerce.

Lorsque le champ quantity on hand (stock réel (champ stock) - toutes les quantités réservées) est =<seuil => le produit n'est plus visible sur l'eCommerce.

Modules complémentaires pour l'e-Commerce

Extension du portail empêchant la modification des données sensibles par les utilisateurs

Le module website_portal_restrict_modification permet d'empêcher un utilisateur portail de modifier les champs "Votre Nom", "Courriel", "Nom de la société"et "Numéro de TVA intracommunautaire".

image-1616596338523.png

Les champs ville, pays, téléphone, rue, code postal sont obligatoires.

Ce module possède une dépendance sur les modules ; portal, website

Modules complémentaires pour l'e-Commerce

Permettre le tri des articles par date d'arrivée

Les modules website_sale_product_sort_recent_arrival et website_sale_product_sort  doivent être installés.

Le module website_sale_product_sort permet de définir un critère de tri par défaut sur les articles dans le e-commerce.

Le module website_sale_product_sort_recent_arrival permet de définir une date d'arrivée sur les produits et ajoute la possibilité de faire un tri sur ce champs depuis la liste des produits de l'e-commerce.

Configurer la date d'arrivée du produit

Allez sur une fiche produit, dans l'onglet e-commerce et adapter le champ "recent arrival date".

Par défaut,

- à l'installation du module, la date est mise à la date d'installation du module

- par la suite, c'est la date de création de l'article qui est reprise

110403.png

Définir un critère de tri par défaut

Allez sur la configuration du site web et sélectionnez le site à configurer.

13.png

Dans la section "articles", sélectionnez le critère à mettre par défaut.

105633.png

 

Modules complémentaires pour l'e-Commerce

Afficher le menu de connexion (login)

Pour permettre aux utilisateurs de se connecter depuis le site web Odoo, il suffit de cliquer sur "Personnaliser" < "Show Sign In".

image-1628518028854.png

 

Dans la barre de menu, l'option pour Se connecter est affichée en haut à droite :

image-1628518100103.png

Modules complémentaires pour l'e-Commerce

Afficher le poids sur la page e-commerce d'un produit

Le module website_sale_product_weigh doit être installé.

Ce module ajoute les informations de poids des produits sur le site de vente en ligne.

Capture du 2022-06-22 15-13-23.png

Modules complémentaires pour l'e-Commerce

Afficher les unité sur la vue kanban du webshop

Le module website_sale_product_display_unit permet de faire  apparaitre les unités à coté du prix sur la vue kanban du webshop.

Capture du 2022-06-22 15-26-15.png

Modules complémentaires pour l'e-Commerce

Afficher par défaut les variants qui ont du stock

Sur le webshop, par défaut, les variants d'un produit s'affichent s'affichent dans l'ordre de création.

Le module website_sale_sort_variants_by_availability permet de changer l'affichage pour que les variants ayant du stock soient affichés en premiers. 

Modules complémentaires pour l'e-Commerce

Afficher les unités sur la vue kanban du webshop

Le module website_sale_product_display_unit permet d'afficher les unités sur la vue Kanban.

113901.png

Modules complémentaires pour l'e-Commerce

Passer l'étape de paiement des commandes en ligne

Le module website_sale_checkout_skip_payment permet de ne pas afficher l'étape du paiement lors d'une commande en ligne et de sauter directement à l'écran de confirmation de paiement (dont les textes peuvent être modifiés via les traductions).

Une fois le module installé, cette fonctionnalité se configure sur la fiche contact des clients et clientes individuellement, dans l'onglet Ventes et Achats.

image-1661753094180.png

 

Activer cette configuration pour tous les clients et clientes existantes

Il est possible d'utiliser le module d'édition en lot pour modifier d'un coup toutes les fiches contact.

Activer cette configuration par défaut pour les futurs clients et clients

Ce qu'il faut faire dépend de votre gestion des connexions pour les commandes en ligne.

Pour que les nouveaux contacts soient créés avec cette configuration, il est nécessaire d'ajouter un paramètre par défaut pour les contacts :

skip_defaut.png

 

Pour que les contacts liés aux profils utilisteur ou utilisatrice soient créés avec cette configuration, il faut modifier le contact lié au modèle d'utilisateur portail, souvent appelé "Portal Template User" (c'est un utilisateur inactif)

Rechercher les utilisateurs inactifs :

skip_defaut_user.png

Ouvrir le contact lié :

skip_defaut_user_contact.png

Et, dans l'onglet Ventes et Achats, activer la configuration "Passer l'étape de paiement des commandes du site web" comme illustré plus haut.

Modules complémentaires pour l'e-Commerce

Générer des URL privées pour certains produits

Le module website_sale_private_product_page permet de générer des URL privés pour un article et ses variantes. Cet URL permet que les détenteurs de l'URL puisse consulter l'article en ligne, sans qu'il soit visible pour les clients qui naviguent sur la boutique en ligne.

Sur la fiche produit , un nouveau champ est ajouté dans l'onglet ecommerce. Si ce champ est vide, un bouton "Générer URL" est affiché et permet de générer un URL. L'utilisateur peut copier/coller cet URL et l'envoyer aux clients "VIP" (il ne peut pas modifier son contenu).

3.png

Si l'URL doit être désactivé, un bouton "Clear" est affiché (affiché uniquement si le champ est non vide).

Les clients qui suivent ce lien après qu'il soit désactivé auront une page "404 page not found". Ils devront naviguer sur la boutique normale pour retrouver le produit s'il a été publié "publiquement" entre temps.

L'URL est différent de celui de l'ecommerce et n'est pas devinable, mais permet de voir le produit et de le mettre dans son panier

- si le stock n'est pas à 0
- si le bouton add to cart est bien activé.

 

Modules complémentaires pour l'e-Commerce

Afficher un texte descriptif par produit

Le module website_sale_product_description ajoute un champ "Description pour l'e-Commerce" sur la fiche article, dans l'onglet "e-Commerce". Se rendre dans l'application Site web et le menu Produits, cliquer sur Produits et sur un article :

ecommerce_product_description.png

 

Ce texte apparaîtra sur la vue du produit dans la boutique en ligne :

ecommerce_website_product_description.png

Modules complémentaires pour l'e-Commerce

Affichage de la quantité disponible en stock sur les différentes vues du webshop

Le module website_sale_product_availability permet d'afficher la quantité disponible déjà visible dans la fiche produit dans la vue kanban.

Lorsque la configuration est mise sur "vendre sans tenir compte du stock", rien ne s'affiche sur cette vue.

Dans le cas de variant, c'est  la somme de tous les variants en stock qui est reprise.

Modules complémentaires pour l'e-Commerce

Rediriger vers la page du magasin lors de la selection d'un produit

Quand on choisit un produit dans le magasin et qu'on l'ajoute au panier, le module website_sale_redirect_to_shop redirige directement vers la page du magasin plutôt que celle du panier.

Ce module existe uniquement sur Odoo v11.

Modules complémentaires pour l'e-Commerce

Fermer et ouvrir le eCommerce (le rendre disponible ou indisponible aux clients)

Certains magasins en ligne travaillent par cycle de commande. Les clients et clientes peuvent commander sur la boutique en ligne du vendredi 15h au lundi 9h. Après 9h, la boutique doit être indisponible : les clients ne peuvent plus faire leurs achats en ligne.

Cette fonctionnalité est rendue possible grâce au module website_sale_close.

Prérequis

Installer le module website_sale_close sur la base de données.

Configuration

Dans le menu Site web > Configuration > Configuration, vous accédez à toutes les configurations du site web. Dans la zone "Fonctionnalités", en bas de page, une case indique "Is e-commerce open" :

image-1684319623548.png

Décocher la case pour pouvoir configurer le texte à afficher en cas de fermeture de la boutique en ligne :

image-1684319721597.png

Cliquer sur le texte bleu, puis sur la ligne du site web à configurer (en principe, vous n'avez qu'une seule ligne dans cet écran) :

image-1684319775588.png

Cliquer sur le bouton Modifier pour entrer en mode d'édition et indiquer le texte à afficher dans le champ "Text closed e-commerce". Si vous avez plusieurs langues sur votre site web, cliquez sur l'icône de traduction dans la zone à droite, en haut de l'éditeur de texte.

image-1684319806004.png

Sauvegarder la configuration.

Utilisation

Pour ouvrir la boutique en ligne, cocher cette case.

Pour la fermer, décocher la case. Le message configuré apparaitra quand on se rend sur la boutique :

image-1684320079191.png

Modules complémentaires pour l'e-Commerce

Carte Cadeau dans le e-commerce

Voir la documentation à ce sujet ici

Modules complémentaires pour l'e-Commerce

Fermer l'e-commerce : mode "browse only"

Le module website_sale_browse_only permet d'empêcher les visiteurs de faire des achats sur le site. Ils peuvent toujours voir les articles publiés, mais ils ne peuvent pas les acheter. 

Le module contient un bug actuellement, lorsque le site est fermé, le boutton en bas du site qui sert à changer la langue du site ne s'affiche plus.

On active l'interdiction via Configuration>Site Web puis on coche Browse Only.

image.png

On peut également activer/désactiver sur la configuration du site web : Site Web>Configuration>Site Web, puis cliquer sur le site web choisi et cocher la case "Browse Only".

Un bandeau va s'afficher sur tout le site pour prévenir les visiteurs que les achats ne sont pas possible. Le bandeau est traduisible.

image.png

Les boutons "ajouter aux paniers" ne s'affichent plus,  en vue grille/liste, et en vue produit.

image.png

De même le panier ne s'affiche plus, même s'il avait déjà été rempli. 

image.png

Le panier n'est pas perdu cependant, il réparaitra quand le mode "browse only" sera désactivé. 

Configurations

Configurations

Ajouter et utiliser des fontes - v14

Il est possible dans Odoo v14 de télécharger et d'utiliser d'autres polices de caractères (fontes) que celles présentes nativement dans l'outil.

En effet, pour cela, il faut

1.png

2.pngCapture d’écran du 2022-11-29 11-56-37.png

 

3.png

Dans l'url, vous pouvez voir l'identifiant de la font qui vient d'être créée. Il est très important de pouvoir s'en rappeler pour l'utiliser par la suite (en effet, c'est comme ça qu'elle sera nommée).
Dans l'exemple ci-dessous, l'ID = 1027Capture d’écran du 2022-11-29 11-56-37.png

Vous pouvez créer ainsi vos différentes fonts.

Pour les utiliser :

5.png

6.png

Exemple :

@font-face {
    font-family: "Albula Pro";
    //font-weight: bold;
    src: url(/web/content/1057);
}
body {
    font-family: "Albula Pro";
}

 

Le numéro 1057 est l'id de la pièce jointe dans odoo ("ir.attachment").

 

 

 

 

Configurations

Personnaliser le look&feel du site web (couleurs, menu, ...)

En version 16, Odoo Community propose de nombreuses options de personnalisations (couleurs, fonte, taille de police), comme illustré ci-dessous (panel de droite).

Voir un exemple concret de customization ici 

image-1693314648929.png

Pour aller plus loin, l’application d’une feuille de style CSS est également possible (et pérenne en cas de mise à jour du site web en version 16).

Attention, il faut choisir "SCCS" et non pas "HTML" : tout changement fait au code HTML disparaitra à la prochaine mise à jour du code (effectué minimum une fois par mois chez Coop IT Easy).image-1693314683734.png

Configurations

Customization du site web : un exemple

Odoo permet de créer un site web et un e-commerce avec de grandes possibilités de customizations. 

Voici un premier aperçu webshop, dans lequel on a mis beaucoup de fonctionalité de filtre et de tri. Notamment

image.png

Cela donne une interface très chargée. On va essayer de créer une interface plus minimaliste, en se basant sur le modèle suivant :

image.png

Pour modifier les fonctionalités de présentation du webshop (filtres, preview, etc), il faut cliquer sur Edit, puis sur Customize dans la barre latérale.

image.pngimage.png

Dans cette barre latérale nous avons plusieurs configurations :

image.png

Layout : Grille d'icône vs liste. Ici on va choisir la grille d'icône pour mettre en valeur les images

Size : on affiche 3 produits par ligne plutôt que 4, ici aussi pour mettre en valeur les images. On peut aussi définir la taille des images (Images size), et le Style de la grille. 

On n'affiche pas les descriptions des produits dans la vue grille (Prod. Desc.)

On n'affiche pas non plus de filtre par catégorie (Categories), ni par attributs (Attributes) pour épurer l'interface. 

Enfin, on peut choisir l'ordre de tri par défaut entre "Featured", par ordre alphabétique , par ordre d'arrivé ou par prix. 

 

Note : l'ordre "Featured correspond" à l'ordre des produits dans la vue liste 

image.png

 

 

On obtient alors une interface plus épurée, qui laisse la place aux images des produits. 

image.png

On va changer aussi les couleurs pour privilégier des couleurs neutres. On selectionne une palette en nuance de gris, que l'on modifie pour pas que la bannière du haut soit trop foncée.

Il y a de grandes possibilité de customizations du thème.

 

En plus des couleurs, on peut aussi customiser les fonts (taille et police), le padding, la taille des bordures, l'affichage des bouttons...

image.png

Et si on ajoute une bannière pour acceuillir les visiteurs, on obtient cette interface :

image.png

Voici un exemple de fiche produit. On peut y ajouter des descriptions, en format texte et même en format html (avec mise en page, images, etc.)

image.png

Voici ensuite le flux d'achat

image.png

image.png

image.png

image.png

Voici un exemple d'un webshop bien fait sur Odoo : https://www.coucoushop.be/shop