Mercredi, Juin 20, 2018
Text Size

Adapter son browse VM à son template Joomla!

Attention, ouverture dans une nouvelle fenêtre. ImprimerEnvoyer

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 .

Ajouter un Commentaire


Code de sécurité
Rafraîchir

Articles

joomla/virtuemart
joomla/virtuemart
Amélioration d'une boutique Virtuemart 07 Mars 2011, 14.00 Administrator joomla/virtuemart
Amélioration d'une boutique Virtuemart
Dynamiser une boutique E-commerce, c'est intéresser le prospect. C'est lui indiquer ce qu'il doit acheter. C'est lui montrer que notre boutique est visuellement bien, et lui donner envie d'acheter. Je sais, 'lui indiquer ce
Read More 8776 Hits 4 Ratings
Avis de tornade sur le web : l'ouragan Pingouin 29 Avril 2012, 18.57 Administrator joomla/virtuemart
Avis de tornade sur le web : l'ouragan Pingouin
Depuis quelques jours un ourgan balaye le monde du web. Un ouragan annoncé, et qui ne passe pas forcement partout. Cet ouragan, défiant la nature est arrivée pour purifier une société régie par le grand Dieu du
Read More 3533 Hits 4 Ratings
Flux direct Google shopping 30 Mars 2011, 15.45 Administrator joomla/virtuemart
Flux direct Google shopping
Il a été demandé un flux direct. Un flux pour Google shopping sans avoir à refaire un export RSS. Bien que je ne sois pas pour le faire, j'ai pris 5 minutes.Je ne suis pas pour avoir un tel flux pour plusieurs raisons
Read More 8392 Hits 0 Ratings
Gagner du temps et de l'argent sur Virtuemart Joomla 07 Avril 2014, 11.31 Administrator joomla/virtuemart
Gagner du temps et de l'argent sur Virtuemart Joomla
Gagnez de l'argent quand on fait son site sur Joomla/ Virtuemart, c'est avant tout gagner du temps. Quand vous passez 2 heures tous les jours à faire et refaire les mêmes choses sur votre site virtuemart, il est grand temps
Read More 3355 Hits 0 Ratings
Google Merchant 07 Mars 2011, 14.07 Administrator Développement Virtuemart/Joomla
Google Merchant
Quand on parle de site e-commerce, on parle aussi de recherche de client. Une des phases essentielles au bon fonctionnement d'une e-boutique est la recherche d'emplacement sur le net. Les moteurs de recherche d'article comme
Read More 6006 Hits 5 Ratings