Le blog de 42Stores - Tag - Astuces vente en ligne

Présentez vos produits sous plusieurs angles simplement

Admin — Wed, 15 Jul 2009 10:29:00 +0200

Photoscape est un logiciel gratuit ( disponible sur Windows uniquement ) qui va vous permettre de réaliser un montage photo original, à la manière de ce qu'on trouve sur le site www.lespetitesbobines.com.
La créatrice du site y propose, entre autres, des étuis en lin , des sacs pliables et autres idées cadeaux originales, allez y faire un tour, ça vaut le coup d'oeil !

Montrez vos produits en détail

Il est indispensable de montrer vos produits sous différents angles, surtout s'ils possèdent plusieurs propriétés. C'est pourquoi nous conseillons généralement d'ajouter, en plus de la photo principale du produit, d' autres prises de vues au sein de la description de votre article. Cela permettra à vos visiteurs, faute de pouvoir toucher le produit, le retourner et l'examiner en détail, de se faire une idée assez précise sur ses finitions, sa composition, sa solidité, sa texture...

En utilisant un logiciel comme Photoscape, vous allez pouvoir regrouper différentes prises de vues en une seule image assez facilement pour un rendu très séduisant :

Comment utiliser Photoscape ?

Le principal avantage de ce logiciel : sa simplicité d'utilisation. Tout d'abord, vous devez le récupérer via ce lien : Téléchargez Photoscape[en], puis l'installer sur votre ordinateur.

Comme dans tout logiciel de retouche, ses capacités sont nombreuses : vous pouvez recadrer vos photos, les redimensionner, les traiter par lots... Je vous laisse les découvrir par vous-même, la fonctionnalité qui nous intéresse ici est celle qui permet de créer une présentation comme l'illustre la photo ci-dessus.

Lorsque vous lancez le logiciel, il suffit de vous rendre dans l'onglet intitulé "mise en page" dans le menu horizontal (en haut de la fenêtre).

Là, vous avez la possibilité de choisir parmi les différents modèles de présentation qui se trouvent à droite de la fenêtre.

Une fois votre choix effectué, vous devez, en utilisant l'arborescence des fichiers, retrouver les photos que vous souhaitez utiliser dans chaque cadre.

Il faut ensuite soit les glisser-déposer depuis le menu, soit cliquer directement dans l'un des cadres et la récupérer via la fenêtre de sélection qui s'ouvre alors.

Vous pouvez bien sûr vous amuser à redimensionner / recadrer chaque image pour qu'elle s'insère parfaitement dans son encart.

Une fois votre photomontage terminé, il ne vous reste plus qu'à sélectionner les dimensions de l'image à exporter via le menu situé au dessus des modèles (cliquez sur la petite tête).

Le menu qui s'affiche alors vous propose de définir le rapport de l'image ainsi que sa taille en pourcentage. Dans l'idéal, optez pour du 600x600 ou du 700x700, ça devrait être assez pour voir les détails des petites photos. En revanche évitez de dépasser les 800 pixels, sinon votre photo risque de prendre tout l'écran de l'internaute qui activera son zoom !

Profitez-en également pour déterminer la taille de la marge de séparation entre chaque photo ainsi que sa couleur. Notez qu'il est également possible d'arrondir les angles de vos images.

Au moment d'enregistrer, choisissez la compression Jpeg ou PNG, qui sont deux formats adaptés pour le web.

Ne préparez pas vos montages sans réfléchir !

Évidemment, Photoscape ne fait pas tout et il faut au préalable disposer de photographies exploitables avec des produits mis en scène.
Jouez sur les couleurs, les ambiances, trouvez un moyen d'harmoniser vos photos de façon à ce que l'ensemble soit cohérent... Vous pouvez même aller jusqu'à scénariser votre présentation si vous êtes inspiré !

Personnalisez l'affichage des catégories

Admin — Thu, 16 Apr 2009 17:21:00 +0200

Comme toujours après l'apparition d'une nouvelle fonctionnalité, nous avons pas mal de retours sur le support, et une question revient très souvent : comment rendre l'affichage des catégories plus "lisible" ?

Il est vrai que sur certaines boutiques, l'affichage des catégories est confus : on a du mal à bien repérer les catégories des sous-catégories. Et pourtant, avec quelques ajustements dans la feuille de styles, vous pouvez très facilement "hiéarchiser" visuellement l'information.

Pour avoir ce rendu, c'est simple, il suffit juste de jouer avec les différents niveaux de l'élément <li> de cette façon :

D'abord, on détermine l'apparence du titre de la catégorie principale, au premier niveau :

#sidebar .categoriesstore li a:link{
font-size:14px
color:#E4690B;
text-decoration:underline;
}

Ensuite, on fait à peu près la même chose pour le second niveau, en changeant la couleur, en réduisant la police et en retirant l'effet de soulignement :

#sidebar .categoriesstore li li a:link{
color:black;
font-size:12px;
text-decoration:none;
}

Pour personnaliser le 3ème niveau, c'est encore la même chose, on modifie l'apparence de l'élément <li> qui dépend de l'élément du niveau 2. Dans l'exemple, la police est grise et légèrement plus petite que celle du niveau 2.

#sidebar .categoriesstore li li li a:link{
color:grey;
font-size:11px;
text-decoration:none;
}

Evidemment, on peut aller très loin comme ça, mais le principe est le même pour personnaliser le 4ème niveau, et ainsi de suite... A vous de jouer, mais faites attention à ne pas trop en abuser, si votre arborescence est trop complexe, peut-être devriez-vous songer à ouvrir un autre blog-boutique !

5 astuces pour améliorer l'ergonomie de votre boutique

Admin — Thu, 19 Feb 2009 14:41:00 +0100

Un petit détail peut changer beaucoup de choses... Nous allons voir dans ce billet qu'il est possible, en faisant quelques petites modifications, d'améliorer la navigation sur votre site pour amener vos visiteurs où vous voulez...

Rendez la navigation plus simple et plus intuitive.

Le constat est assez général : les boutiques qui utilisent (trop ?) les différents widgets proposés risquent de semer la confusion chez leurs visiteurs, et donc de les faire fuir d'un site sur lequel ils ne se sentent pas à l'aise.

- Changez l'apparence du menu principal

Pour bien distinguer les liens qui permettent d'accéder à votre catalogue des autres liens présent dans les différents encarts du site, vous pouvez changer leur couleur ou leur taille très facilement en modifiant le sélecteur de balise suivant :

#sidebar #blognav #categoriesstore a:link { }

En application, voilà un exemple de ce que ça pourrait donner

#sidebar #blognav #categoriesstore a:link {
padding:5px 0 0 25px; /*Léger décalage vers la droite*/
color:#4D92CF; /* Couleur bleu ciel */
font-size:16px; /* Taille de la police un peu plus grande */
text-decoration:none; /*Lien non souligné*/
}

Et ajoutez cela en plus si vous souhaitez créer un effet de survol sur le nom des rubriques :

#sidebar #blognav #categoriesstore a:hover {
text-decoration:underline; /*Le texte est souligné quand on passe la souris dessus*/
}

- Ajoutez un bouton "Retour à l'accueil"

Vous pouvez rendre votre bannière cliquable, mais la manipulation est différente selon le thème que vous choisissez ; pour faire plus simple, créez un bouton "Retour à l'accueil" et positionnez-le au dessus de votre menu principal. Pour ce faire, utilisez simplement le widget texte dans lequel vous écrirez la chose suivante :

<a href="http://votreboutique.com">Retour à l'accueil</a>

ou encore, si vous souhaitez utiliser une image en guise de bouton

- Proposez une navigation alternative avec les tags

Réfléchissez avant de créer des tags; il vaut mieux les utiliser afin de regrouper vos billets dans des thématiques bien précises (attention toutefois à ne pas multiplier leur utilisation).
Ainsi, vous pouvez créer un encart de recherche par thématique qui propose, par exemple, de naviguer sur votre site en fonction non pas des catégories "classiques" de votre catalogue, mais plutôt en fonction des marques, des couleurs, des saisons, des formes, des artistes, etc... ( Cela dépend de ce que vous vendez, bien sûr )

Faites ressortir les éléments importants

Toujours dans l'optique d'améliorer la navigation sur votre site, il convient de créer des "points de repère" permettant à vos utilisateurs de savoir en un coup d'œil où se trouvent les éléments clés de votre boutique

- Mettez le panier d'achats en avant

La fonction première d'une boutique, c'est de vendre . C'est pourquoi l'encart "panier" a son importance : mettez-le en évidence pour qu'à tout moment votre visiteur puisse le consulter et se rendre facilement sur la page de commande. Pour le modifier, il suffit de "jouer" avec le sélecteur de balise suivant :

div#cart {}

Par exemple, admettons que vous souhaitez ajouter un fond coloré et lui mettre une bordure ; voilà comment faire :

div#cart {

background-color:#DDEAF3; /* On créée un fond coloré */

border:1px solid #EFB343; /* On ajoute une petite bordure */

}

Deux petites lignes, et voilà la différence

- Travaillez l'apparence de vos liens

Cela peut paraître anodin, mais il est également intéressant de travailler l'aspect des liens dans les textes de votre blog-boutique ; ne surprenez pas vos visiteurs, mettez bien en évidence le fait que telle expression ou tel mot renvoie vers une autre page ; vous pouvez là encore préciser avec une sorte de "code visuel" qu'il s'agit d'un lien interne, ou d'un lien externe. Voici quelques idées :

- Laissez le soulignement actif sur tous les liens de votre site
- Attribuez-leur une couleur si ce n'est pas déjà le cas
- Ajoutez un petit symbole devant votre lien pour indiquer qu'il y a une "dynamique" sur le mot ou l'expression ( » exemple de lien )
- Ajoutez la langue de la page de destination entre crochets lorsque vous citez une page externe à votre site ( » exemple de lien externe [fr] )

Quelques outils utiles pour vous faciliter (encore plus) le travail :

» Trouver des couleurs rapidement [en]
» Trouver des gammes de couleur [en]

» Les symboles et leur traduction en HTML [fr]

Envoyez toutes vos photos d'un coup pour gagner du temps

Admin — Thu, 11 Dec 2008 17:25:00 +0100

Au cas où certains ne l'auraient pas remarqué, il existe une fonctionnalité assez intéressante qui peut vous permettre de gagner pas mal de temps : l'envoi d'images par lots.

En effet, plutôt qu' uploader ( = télécharger sur le serveur ) vos images une par une lorsque vous créez vos fiches produits par exemple, vous pouvez envoyer toutes vos photos d'un seul coup. Il vous suffit juste de faire une petite manipulation technique sur votre ordinateur : mettre vos photos dans un fichier zip.

En quoi cela consiste-t-il ? Tout simplement à créer une sorte de "package" , regrouper toutes les photos dans un seul fichier compressé dont l'extension est .zip.

Si vous êtes sur Windows, vous devez installer un logiciel qui permet de créer ces fameux "zip" ( 7zip par exemple ), sélectionner toutes les images (ou un fichier) que vous voulez mettre en ligne, faire un clic droit puis "ajouter à l'archive" (pour en savoir + : tutoriel sur l'utilisation de 7zip) .

Sur Mac, faites simplement un clic droit puis sélectionnez "compresser".

Une fois le fichier zip créé, envoyez-le sur le site avec le gestionnaire de médias comme s'il s'agissait d'une image.

Ensuite, toujours dans le gestionnaire de média, ouvrez le fichier .zip (attention, ne cliquez pas sur le mot "ouvrir", mais sur le nom du fichier, ici "Image_1.zip" par exemple, sinon le fichier sera renvoyé sur votre pc !)

Repérez ensuite l'encart "extraire l'archive" ; là vous avez le choix entre 2 modes d'extraction : "extraire dans un nouveau répertoire" ou "extraire dans le répertoire actuel"

Si vous choisissez "extraire dans un nouveau répertoire" , cela créera un nouveau fichier dans lequel vous retrouverez toutes vos photos; le second choix dézippera toutes vos photos dans le fichier courant.

Dans les deux cas, vous constaterez que toutes les photos sont désormais toutes présentes dans votre gestionnaire de média ! Ca aide, n'est-ce pas ?

Créer une redirection de type CNAME avec Gandi.

Admin — Tue, 21 Oct 2008 10:12:00 +0200

Pour les personnes qui utilisent Gandi comme registrar pour leur nom de domaine, la manipulation a effectuer pour créer un enregistrement CNAME est la suivante :

Identifiez-vous sur le site avec votre compte, puis allez dans la rubrique "Administration" (vous trouverez l'onglet "Administration" dans ceux présents en haut de la page), et rendez-vous dans "Vos domaines".

Cliquez sur le domaine que vous souhaitez rediriger, vous aurez alors sa fiche, avec une série d'informations vous concernant. Allez en bas de page, dans les "Paramètres techniques" ; là, allez dans "Gérer la zone", qui conduit à la page intitulée "Modification de zone DNS".

Cliquez sur "Ajouter un enregistrement" (tout en bas), puis remplissez le formulaire tel que vous le voyez dans l'image suivante :

(type CNAME, Nom : www, Valeur : store.42stores.com. , n' oubliez pas le point final ! )

Cliquez sur Valider

Enfin, vous avez juste à nous prévenir sur le support en nous précisant votre nouveau nom de domaine, nous renommerons votre site pour qu'il réponde à cette nouvelle adresse.