Adapter son browse VM à son template Joomla!

Imprimer

Note des utilisateurs: / 1
MauvaisTrès bien 

Vous avez décidé de faire votre e-boutique sur Joomla! grâce au composant Virtuemart. Comme la plupart des utilisateurs vous avez probablement choisi un thème pour votre site e-commerce en fonction de vos goûts et des couleurs de votre entreprise ( ou même du prix!). Cependant, la plupart des thèmes Joomla! ne proposent pas forcément de thème pour Virtuemart. Il va donc falloir penser à adapter un browse et un flypage pour VM afin de conserver une cohérence dans le style de votre site.

Comment faire pour suivre la thématique de sa charte graphique?

Tout d'abord réalisez une impression de votre site internet, ensuite insérez un cadre blanc en lieu et place de la boutique pour y voir plus clair.

Grâce à votre logiciel de retouche photo vous placerez des photos de produits. Le mieux est d'en mettre 2 ou 3 par ligne.La raison est simple :

  • 1 photo par ligne oblige le client à descendre dans la page pour voir les produits,
  • 4 photos par ligne réduit la taille des photos sur le browse à la limite de la visibilité. Cela obligera votre client potentiel à ouvrir la page produit pour visualiser une photo plus grande. S'il est venu sur le site et tente de comparer les offres, imaginez le nombre de clics nécessaires pour lui jusqu'à la finalisation de son acte d'achat. Pas très ergonomique.
  • 2 ou 3 photos par ligne me parait donc une bonne moyenne pour réaliser un browse agréable tant en terme d'équilibre de design que de choix. Le client va visualiser en un coup d'oeil une grande quantité de produit . On parle de lisibilité de vos produits.

Veillez bien à ce que la taille de vos images soit la même. Si tel n'est pas le cas, pensez à ajouter un cadre de la même couleur que le fond de vos images .

La cohérence dans la taille des images donnera une impression plus professionnelle et mettra davantage vos produits en valeur.

L'idéal ést de conserver la même couleur de fond pour vos produits. (voir article sur le détourage d'une photo ou la création d'une chambre photographique)

A present vous devez penser à 2 choses : mettre du texte pour le descriptif court de vos produits si vous le souhaitez, choisir des emplacements pour les liens :

 

  • ajouter au panier si vous souhaitez que cette action puisse être directement effectuée depuis le browse sans entrer dans la fiche produit : attention cette option est conseillée uniquement si vos produit n'ont pas d'option. Dans le cas contraire le client devra entrer dans la fiche pour valider ses options. Autrement dit votre browse comportera des vignettes avec et sans panier ce qui risque des créer des décalages et d'être très inesthétique.
  • voir la fiche produit ou lire la suite (qui doivent amener vers le flypage et ses options)


Conception du design de browse

étape 1 le placement des photos

Ajoutez un entourage à votre vignette vous permettra de rendre la page de visualisation de vos produits plus ordonné mais peut être un peu stricte. C'est donc un choix à faire.

étape 2 placement des liens et textes

Observez avec attention votre site. Certains éléments qui vous sont apparus comme des détails sont en fait ce qui fait le désign et la personnalité de votre site : des flèches métallisées pour les items de menus, une couleur dominante et une en soutien.
Votre gabarit doit rappeler ces éléments sans trop s'en eloigner.

étape 3 placer les éléments graphiques

Les écritures de votre site sont de l'Arial ou de la Tahoma, n'utilisez pas d'autre typo vous risquez au lieu de vouloir être original, de paraitre totalement en décalage et générer un inconfort visuel. En clair l'oeil du client peut se perdre et ne plus comprendre ce qu 'il est important de lire ou ce qui ressort.

Votre gabarit est crée, il va falloir le développer. Et tout d'abord, enprenant les mesures de chaque éléments pour les renseginer en css.

étape 4 prise des mesures



Au plus simple vous pouvez modifier le browse déjà existant.ou le dupliquer a votre nom ex mon-browse. Vous pouvez personnaliser le fichier browse.tpl. Sortez le fichier par FTP et ouvrez notepad ++

les informations contenus sont la disposition de votre vignette et l'appel de éléments textuels. (ajouter au panier, nom du produit, description, voir la fiche produit.)

code d'un browse

dans notre exemple :

la vignette se trouve en haut à gauche et les prix et le lien vers la fiche produit flottent à droite.

Procédez par étape, et repérez les variables qui servent à l'appel du panier , du nom du produit ou du flypage. Vous pouvez mettre le style directement dans le browse pour travailler l'aspect visuel. Il vous suffira dans un 2è temps de créer des class afin de reporter le style dans un fichier css. Pensez surtout à conserver les fichiers d'origine pour revenir à une version antérieure.

 

Un grand merci à Biboard shop, spécialisé dans la vente de mini motos qui nous a laissé faire un browse sur un template mynxx .