E-Commerce pour les Nuls

Plusieurs sites proposent des modèles de blog déjà tout faits. Certains sont gratuits, d'autres payants, mais le plus gros inconvénient c'est qu'ils sont habituellement difficilement personnalisables et qu'ils comportent des droits d'auteur, ce qui en restreint l'utilisation lorsqu'il s'agit d'un commerce électronique.

Voici comment personnaliser les modèles existants sur Blogger:

1. Débuter
2. Variable definitions (modifier les couleurs et les polices d'écriture)
3. Navbar (cacher/afficher la barre de navigation)
4. Définition des paramètres
5. Structure
   

Débuter

1. Choisir un modèle de base. J'ai choisi le modèle Rounders. Enregistrer le modèle.
   (Mise en page > Sélectionner un nouveau modèle > Choisir le troisième, Rounders)
2. Aller dans l'onglet Modifier le code HTML
   (Mise en page > Modifier le code HTML)
3. Le code HTML se trouvant dans la section Modifier le modèle contient deux sections; la section où les styles CSS sont présentés (l'apparence de la page, un peu comme) et celle du body (la structure, la partie visible par les utilisateurs)
4. Astuce: Pour retrouver facilement des bouts de code dans l'ensemble du code, appuyer sur CTRL-F et recherchez le bout de code désiré.

Variable definitions

Cette section défini les variables qui pourront être modifiées plus tard dans la section Polices et Couleurs. On peut ajouter des variables si nécessaire. Je suggère d'ajouter la variable suivante :

<Variable name="bgcolor" description="Background Color" type="color" default="#aba" value="#aba">

Navbar

Pour faire disparaitre la barre de navigation en haut de la page, trouvez le bout de code :

body {

et collez le bout de code :

#navbar-iframe {
   display: none !important;
}

Définition des paramètres 

• Polices et couleurs : Quand vous voyez un $ devant une variable, il s'agit d'une des variables qui a été définie plus haut dans Variable definitions. Il est donc possible de modifier le paramètre dans l'onglet Police et couleurs.

• body : L'apparence générale de la page


• Afin de suivre la logique des variables et de les rendre plus facilement modifiables par la suite, je recommande de remplacer


• la valeur du paramètre background pour la variable créée plus tôt:
  

    background:$bgcolor;

• tous les paramètres font (3) du body pour le paramètre:
  
  

  font:$bodyfont;



•  Les marges extérieures de la pages sont réglées par défaut à 0 pixels. Pour avoir une marge uniforme de 20 pixels par exemple, modifier le paramètre margin pour 20px.
  

  margin: 20px;

  Pour avoir une marge de 20 pixels en haut, 0 à droite, 5 en bas et 10 à gauche, on doit écrire:
  
  

  margin: 20px 0px 5px 10px;

• Le paramètre body devrait donc avoir l'air de:
  
  

  body {
    background:$bgcolor;
    margin:0px 7px 0px 7px;
    text-align:center;
    line-height: 1.5em;
    font:$bodyfont;
    color:$mainTextColor;
    }



•  Largeur de la page


• Les modèles de blog proposés par Blogger sont assez anciens et ont optimisés pour des ordinateurs dont la résolution était plus basse (800x600) que ceux d'aujourd'hui (1024x768 et plus). La largeur par défaut des modèles proposés est donc en conséquence d'un écran de 800 pixels de largeur au lieu de 1024 comme dans la plupart des cas aujourd'hui. Je recommande donc d'élargir votre page jusqu'à 970px.


• Trouvez les bouts de code #outer-wrapper et body#layout #outer-wrapper, et modifiez la largeur (width) pour 970px et 960px respectivement
  
  

  #outer-wrapper {
    width:970px;

• Il faut aussi modifier la largeur des autres boîtes. Ajustez comme bon vous semble la largeur des paramètres #main-wrap1, #main, #sidebar-wrap, .main .widget et .main .Blog. Personnellement, je recommande de régler #sidebar-wrap à 330px pour qu'une bannière publicitaire de 300px de large entre parfaitement dans la barre verticale de droite (300px plus des marges à gauche et à droite de 15px). Considérant l'espace entre les deux blocs, #main-wrap1 et #main doivent être de 625px, .main .widget de 608px et .main .Blog de 624px.


• Les coins ronds: Le modèle de départ avait des belles boîtes avec les coins ronds. Malheureusement, il n'existe pas de code qui appliquerait directement des coins arrondis aux boîtes, il faut le faire avec des images. Trois choix s'offrent alors à vous:


• Manière simple: Vous abandonnez les boîtes rondes


• Recherchez tous les fichiers GIF (recherchez .gif) et effacez les (17 au total).
  
  

  background:$mainBgColor url("http://www1.blogblog.com/rounders/corners_main_bot.gif")
  
  devient
  
  background:$mainBgColor url()



•  Plus complexe, plus longue mais relativement facile: 


• Recherchez tous les fichiers GIF, copiez l'adresse de l'image, 
• Enregistrez l'image sur votre ordinateur,
• Modifiez l'image pour qu'elle soit de la bonne grandeur/couleur
• Téléchargez les images sur un serveur, idéalement un service gratuit de photos en ligne (ex: Picasa)
• Remplacez l'adresse initiale de l'image par la nouvelle adresse


• Plus rapide mais pour utilisateurs un peu plus avancés:


• Personnellement, j'ai essayé la méthode proposée sur ce site (anglais) et ça a fonctionné très bien.


• Autres paramètres : L'essentiel des paramètres concernant la structure, les couleurs et les polices ont été personnalisés plus haut. Il ne reste qu'à modifier les autres éléments comme les marges (margin), le padding et les borders pour avoir un site complètement personnalisé.

Structure

Les paramètres CSS définis plus tôt servent à indiquer l'apparence des éléments dans la page. Maintenant, il faut définir où les éléments seront placés.

Pour ajouter des colonnes ou modifier considérablement à l'horizontale la structure du modèle de base, on doit avoir des notions un peu plus avancées de programmation. Nous devons nous en tenir à une structure plus ou moins comme celle du départ, c'est à dire en-tête, deux colonnes et pied de page.

Par contre, voici un petit truc bien simple pour contourner la structure un peu rigide du modèle de départ qui permettra d'ajouter des boîtes et des éléments à la verticale :

1. Se rendre dans la section
2. Chercher tous les bouts de code où il est écrit locked='true'
   
   

   <b:widget id="HTML1" locked="true" title="" type="HTML">

   et changer 'true' pour 'false'
   
   

   <b:widget id="HTML1" locked="false" title="" type="HTML">

3. Chercher tous les bouts de code où il est écrit maxwidgets=
   
   

   <b:section class="header" id="header" maxwidgets="1">

   si la valeur est basse (ex: 1), la modifier pour un nombre plus élevé
   
   

   <b:section class="header" id="header" maxwidgets="10">

4.  Chercher tous les bouts de code où il est écrit showaddelement='no'
   
   

   <b:section class="main" id="main" showaddelement="no">

   et changer 'no' pour 'yes'
   
   

   <b:section class='main' id='main' showaddelement='yes'>

Ces petites modifications bien simples vous permettront d'ajouter autant d'élément que vous désirez et de vous débarasser de sections que vous ne désirez pas.

Il y a deux façons de répertorier ou de faire apparaître son site dans les moteurs de recherché (Google, Yahoo, Bing…)?

1. Apparaître dans les résultats publicitaires
2. Apparaître dans les résultats naturels

La première est la méthode paresseuse et probablement la plus efficace à court terme mais aussi celle qui risque d'être la plus coûteuse à long terme.





Je n’élaborerai pas trop sur ce sujet car il est relativement bien expliqué, mais voici tout de même quelques petits trucs pour être plus efficace lorsqu'on choisi cette méthode.




En gros, si on veut résumer très bêtement, le principe est que l'on achète des mots clés. Lorsqu'un utilisateur recherche ce mot clé, les sites qui ont achetés ces mots clés apparaissent en premier dans une section dédiée. L'ordre et la fréquence à laquelle ils vont apparaître dépend du montant que "l'advertiser" (l'acheteur de mots clés) est prêt à payer par clic qui sera fait sur sa publicité. C'est ce qu'on appelle du Pay Per Clic (PPC). Donc si quelqu'un recherche le mot clé que vous avez acheté, celui qui a misé le plus d'argent par clic sur ce mot clé sera présenté en premier. Le premier résultat payera toujours 0,01$ de plus que le deuxième résultat.




Par exemple, si 2 annonceurs ont misé sur le même mot clé, que le premier a misé 1,20$ sur le mot tandisque le deuxième a misé 0,82$ par clic, si l'internaute clic sur le premier lien, le clic coûtera seulement 0,83$ au premier annonceur et 0,00$ au deuxième. S'il clic sur le deuxième lien, le clic coûtera 0,00$ au premier annonceur et 0,82$ au dexième annonceur.




L'erreur à ne pas faire, c'est d'acheter des mots clés comme si on classait notre site web dans une catégorie. La plupart des gens achèteront instinctivement des mots clés ayant rapport à leur produit au lieu de penser à ce que leur client potentiel risque de rechercher.




Les meilleures pratiques sont de choisir une combinaison de mots clés qui fait en sorte que la personne qui verra votre publicité soit une personne qui risque d'être intéressée par votre produit. Comme vous payez par clic fait sur votre pub, vous ne voulez pas que quelqu'un clic s'il n'est pas intéressé à acheter. Donc le but c'est seulement d'avoir un peu plus de visibilité que vos concurrents directs en arrivant plus haut dans la liste des résultats de recherche, pas de présenter du contenu à des internautes qui se foutent de votre produit. Et souvenez vous, plus il y a de commerçants qui misent sur le même mot clé que vous, plus ce mot vous coûtera cher!




Par exemple, mon commerce s'appelle Auto-Fictif et je suis un vendeur de voitures d'occasion spécialisé dans les voitures asiatiques ayant pignon sur rue dans la ville Fictive-ville.




Mots clés à ne pas acheter:

• Auto-Fictif : C'est votre nom! Si quelqu'un vous recherche, c'est qu'il essaiera de toute façon d'arriver sur votre site. Pourquoi payer pour son clic?
• Auto, Voiture, Occasion, Usagée... : D'après vous, combien de commerçants sur internet ont déjà misé sur ces mots clés? Et pourquoi voudriez vous qu'un internaute demeurant à 200km de votre commerce et qui recherche le mot clé Auto clic sur votre publicité et vous fasse débourser de l'argent?
• Ford, Voitures américaines, Maison à vendre... : Ne tentez pas d'acheter des mots clés qui ne concerne pas votre commerce! Bravo, vous allez peut-être tomber dans les premiers résultats... et alors? La personne qui cliquera sur votre publicité ne sera pas intéressée par vos produits, donc vous aurez déboursé pour un clic qui ne rapporte rien.

Mots clés à acheter:
Il est toujours préférable d'acheter une combinaison de mot en gardant en tête ce que votre client typique risque de rechercher :

• Voiture pas chère fictive-ville
• Auto usagée japonaise
• Bagnole d'occasion frictive-région
• Toyota en bon état fictive-ville

Ces mots clés risquent d'être très peu chers (quelques cents par clic) et vous apporter des clients qui risquent d'être intéressés par vos produits. Votre site web sera affiché peut-être seulement 15 fois par jour au lieu de 3000 fois, mais vous aurez peut-être 4 clics au lieu de 5 et sur tous les clics reçus, 8% risquent d'acheter au lieu de seulement 1%. Faites le calcul rapidement et pas besoin d'être un génie pour comprendre comment faire une publicité efficace.

Vous avez peu, ou pas de connaissances en programmation ou en design de site web mais voulez vendre vos produits sur Internet? Vos moyens financiers sont très limités?

J'ai trouvé une solution efficace et extrêmement simple qui permet de construire rapidement un site web avec une allure assez professionnelle (tout dépend du temps que l'on y met) facile à modifier et à entretenir! Voici un tutoriel étape par étape de ce dont vous avez besoin (voir un exemple):

1- Ouvrir un compte Blogger

La première étape consiste à créer un blog. Pourquoi un blog? C'est gratuit, on vous fourni une adresse, une structure et une façon rapide et simple d'ajouter du contenu sans posséder de logiciel ou de connaissances techniques avancées. Vous croyez qu'un blog sert seulement qu'à publier des messages pour raconter sa vie sur Internet? Vous allez découvrir qu'il y existe plusieurs autres fonctions très intéressantes!

1. Se rendre sur le site de Blogger.
2. Cliquer sur Créer un Blog. Si vous ne possédez pas de compte Google, on vous demandera d'en créer un. Poursuivez en suivant les étapes.
3. Choisir le nom du blog.
4. Choisir un modèle. Pour l'étape du modèle, vous pouvez choisir n'importe lequel dans ceux qui vous sont proposés. Vous pourrez ensuite personnaliser tout le contenu à votre goût.

2- Modifier l'apparence

En ce qui concerne l'apparence, vous avez 3 choix.

1. Conserver le modèle actuel (celui founi par Blogger). Passer à l'étape 4 si vous choisissez cette option.
2. Trouver un modèle (Template) sur Internet (Rechercher dans Google quelque chose comme "Blogger Template")
3. Télécharger mon modèle. J'ai prit le temps de confectionner un modèle adapté spécialement pour un site de e-commerce (voir l'exemple). Je base le reste du tutoriel sur ce modèle. Il n'est pas obligatoire, mais recommandé. Vous pouvez le télécharger ci-dessous pour seulement 2€.
   

Les couleurs, les images, le contenu et la position des objets sont toujours personnalisables et modifiables.

3- Installer un modèle

1. Si vous avez trouvé un modèle de blog sur Internet ou si vous avez téléchargé mon modèle, vous devez décompresser le fichier .zip (e-commerce-template-fr.zip) pour en extraire le fichier .xml (e-commerce-template-fr.xml). L'extraire dans un dossier sur votre ordinateur où vous pourrez le retrouver par la suite.
2. Se rendre au tableau de bord de Blogger.
3. Cliquer sur Mise en page sous le blog correspondant.
4. Cliquer sur Modifier le code HTML sous l'onglet Mise en page.
5. Récupérer le fichier .xml extrait a priori (Transférez un modèle à partir d'un fichier de votre disque dur
   

4- Personnaliser la page

La section de la personnalisation est assez facile dans Blogger. Sous l'onglet Mise en page, changez les couleurs et les polices d'écrituer à votre gré dans la section Police et couleurs. Toujours sous Mise en page, essayez d'ajouter, d'enlever ou de modifier des éléments dans Éléments de la page. L'originalité de votre page dépendra du temps investi dans cette section.
Plus vous choisissez un modèle complet, plus il sera difficile de modifier vos paramètre personnels. À peu près tout (sauf la structure de base) est personnalisable dans le modèle que je vous propose.

Modèle de blog e-commerce

5- Recevoir les paiements de futurs clients

Évidemment, le but d'étaller ses produits à vendre sur le Web est premièrement de les vendre et deuxièmement, espérer faire de l'argent! À mon avis, la façon la plus simple et la plus sécure pour transférer de l'argent sur Internet reste PayPal. Les consommateurs commencent à avoir l'habitude d'entendre ce nom et leur font généralement confiance. Croyez moi, vos futurs clients aimeront mieux fournir leur numéro de carte de crédit à une entreprise reconnue que de vous le donner directement à vous!
Si vous avez déjà un compte PayPal, passez directement à l'étape 6. Sinon, voici comment en créer un.

1. Se rendre sur le site de PayPal.
2. S'inscrire.
3. Choisir un type de compte Premier (recommandé pour des petites entreprises) ou Business.
4. Suivre les instructions

6- Ajouter un item

C'est ici que le blog devient très intéressant! Habituellement, un blog sert à publier des messages. Ces messages sont classés par Blogger selon la date, le titre et les mots clés reliés à ceux-ci. Alors automatiquement, votre blog affichera par défaut les items les plus récents, mais vos clients pourront aussi facilement trier ceux-ci par mots clés et même faire des recherches par titre, date ou mot clé. Publier un message sur un blog, c'est tout sauf compliqué... publier un item sur son nouveau site transactionnel, ce n'est pas bien bien plus compliqué, on devra seulement que rajouter une petite étape très importante, la transaction!

1. Se rendre au tableau de bord de Blogger.
2. Cliquer sur Nouveau message.
3. Dans Titre, entrer le nom de votre produit.
4. Cliquer ensuite sur Modifier le code HTML.
   
   
   
5. Cliquer sur l'icone Ajouter une image (Petit dessin d'une photo, habituellement la 2e à partir de la droite).
6. Ajouter une image à partir de votre ordinateur. Évidemment, vous devrez avoir prit une bonne photo de votre item a priori.
7. Choisissez Aucun dans mise en page.
8. Cliquer sur Envoyer une image. Ne pas publier le message tout de suite.
   
   
   
   Voici la partir importante:
   
   
   
9. Se rendre sur son compte PayPal.
10. Cliquer sur l'onglet Solutions e-commerce.
11. Cliquer sur Bouton Ajouter au panier.
12. Suivre les instructions. Cette partie peut être un peu plus compliquée pour un nouvel utilisateur mais une fois habitué, elle prend moins d'une minute. Pour de l'aide concernant la création de boutons sur PayPal, se référer à l'aide de PayPal.
13. Une fois le bouton créé, copier le code du bouton fourni par PayPal.
14. Retourner au message dans le Code HTML. Vous devriez voir quelquechose qui ressemble à ceci:
    
    
    
    

    <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="image1.jpg"><img style="cursor:pointer; cursor:hand;width: 800px; height: 600px;" src="image1.jpg" border="0" alt="" /></a>

    
    Coller le code du bouton immédiatement à coté du dernier caractère
    (soit: </a>)
15. Pour avoir une belle mise en forme, tenter de supprimer tous les sauts de lignes non nécessaires, idéalement directement dans le code HTML. Il est aussi possible de cliquer sur l'onglet Rédiger dans le haut du message et tenter de supprimer les sauts de ligne sous la photo, mais il faut faire attention car avec cette méthode, il arrive qu'on puisse effacer accidentellement les propriétés du code qui fait en sorte que le bouton fonctionne.
16. Entrer, si désiré, un petit texte sous le bouton pour décrire votre item.
17. Ajouter des libellés pour ce message. Ce sont les mots clés qui aideront au classement de votre item sur le site (ex: catégorie, couleur, format...).
18. Cliquer sur Publier le message. Voilà! C'est terminé! Votre premier item est publié et prêt à être vendu. Répeter pour chaque nouvel item.

7- Créer un bouton Afficher le panier

Pour les utilisateurs du modèle que je vous ai proposé, vous pouvez ajouter un bouton Afficher le panier, qui permet à vos clients d'acheter plusieurs items lors de la même transaction.

1. Après avoir créé votre bouton pour votre item, sous le code généré par PayPal, vous avez l'option de Créer un bouton Afficher le panier. Cliquer sur ce lien et créer le bouton.
2. Sélectionner et copier le code.
3. Se rendre au tableau de bord de Blogger.
4. Dans Mise en page, sélectionner Éléments de la page. Vous voyez alors les éléments qui apparaissent dans votre page.
5. Dans la section de droite, vous avez un petit encadré écrit HTML/JavaScript (directement au dessus de Rechercher un lien). Cliquer sur Modifier.
6. Remplacer le code existant par le code du bouton Afficher le panier que vous venez de créer.