Skip to main content

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

  • Dans la barre latérale
    • des filtre par attributs de produit (taille, type de matériau). Ces attributs sont activés quand on configure les produits avec variants.
    • un filtre par prix
  • Dans la première barre du haut
    • une barre de recherche
    • selection de la liste de prix utilisé (si plusieurs listes sont configurées).
    • un critère de classement
    • un changement de layout (vue par icône vs liste)
  • Dans la seconde barre du haut : un filtre par catégorie

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 déscriptions 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