Tag - Création site e commerce

mercredi 6 janvier 2010

Premier conseil pour réussir dans le e-commerce : Différenciez-vous.

Olivier, l'un des fondateurs de votre plateforme e-commerce préférée, travaille depuis plusieurs semaines sur un nouveau guide, les 7 conseils pour réussir dans le e-commerce.

Ces conseils sont basés sur l'analyse des quelques 1900 boutiques ouvertes sur 42Stores et sur les discussions entretenues avec divers e-commerçants. Illustrés d'exemples concrets, vous y trouverez toutes les clés qui vous aideront à réussir sur internet, si ce n'est pas déjà le cas.

Je vous laisse lire ce premier article sur l'importance de se différencier des autres quand on cherche à vendre sur internet... Rendez-vous sur le blog e-commerce "Les 9 vies du chat" !



lundi 2 février 2009

Nouvelle fonctionnalité : les fiches produits individuelles

Depuis ce matin, une nouvelle option est apparue dans la rubrique configuration de la boutique : vous pouvez désormais décider d'utiliser ou nom les pages produits. Cela aura pour effet de distinguer clairement chaque produit des autres.



Jusqu'alors, quand un internaute cherchait à entrer sur la description d'un produit, les autres produits de la même catégorie apparaissaient au dessous et en dessous du produit visé. 

Maintenant, chaque produit peut posséder sa propre page, comme dans un e-commerce "classique". Cette page est bien évidemment personnalisable comme le reste de la boutique, en utilisant la feuille de styles ; pour les adeptes qui veulent pousser un peu plus le design de cette page, il suffit de faire quelques changements dans le template "product.html" qui se trouve dans l'éditeur de thème.

Pour ce qui est de la page "catégorie", elle reprend l'apparence de la page d'accueil : les produits qui y sont liés se suivent et il est possible de les commander directement ou d'entrer dans les détails en cliquant soit sur la photo, soit sur le titre, soit sur les deux (selon ce que vous avez paramétré dans la configuration du thème de votre boutique)

(visuels : lampe design et la boite à thé)

Maintenant, à vous de choisir ce qui convient le mieux à votre site !


mardi 4 novembre 2008

Personnalisation des textes de la boutique.

Nouvelle fonctionnalité à l'ordre du jour : vous pouvez désormais personnaliser les expressions "fixes" de votre boutique en ligne.

Comme elle était très demandée ces derniers jours, notre développeur de choc s'est motivé et l'a mise en ligne depuis hier soir. Il vous suffit de vous rendre dans les préférences, puis dans "personnalisation de textes"

personnaliser blog e-commerce

Le formulaire suivant vous invite à changer quelques expressions "fixes" sur votre site (notamment le bouton "Achetez" ou encore la phrase "Nouveaux produits dans la boutique" )

D'autres expressions seront traductibles selon les besoins de chacun, il suffit de nous dire ce sur quoi vous désirez avoir la main !


lundi 27 octobre 2008

Changer le bouton "Achetez".

Beaucoup d'entre vous nous font la remarque, le bouton "Achetez" tel qu'il est par défaut ne convient par forcemment au thème de votre boutique ; voici donc quelques pistes pour vous aider dans sa personnalisation.

Allez dans la rubrique "préférences" > "personnalisez votre thème" > "Configuration du thème", puis dans le champ "Feuille de style". L'exemple qui suit vous montre comment créer un bouton vert.

Pour changer sa couleur :

.productInList .buynow a:link {background:#a7e01a; color:#374a08; padding:2px 20px 2px 20px;}
.productInList .buynow a:visited {background:#a7e01a; color:#374a08; padding:2px 20px 2px 20px;}
.productInList .buynow a:hover {background:#a7e01a; color:#374a08; padding:2px 20px 2px 20px;}


Voici le résultat :


Pour lui ajouter une image de fond :

.productInList .buynow a:link {background:transparent;color:#374a08; padding:0 20px 0 20px;}

.productInList .buynow a:visited {background:transparent;color:#374a08; padding:0 20px 0 20px;}
.productInList .buynow a:hover {background:transparent;color:#374a08; padding:0 20px 0 20px;}div .buynow {height:26px;background:transparent url(/pub/background-buy.jpg) no-repeat center center;} 

Notez bien qu'il faut au préalable envoyer l'image "background-buy.jpg" (qui est le fond du bouton sans le texte) dans votre Gestionnaire d'images.

Voici le résultat :



Voilà, vous savez désormais comment changer l'apparence de votre bouton fétiche !

EDIT : pour changer le bouton dans les catégories, vous devez modifier les paramètres suivants :

.productInList .buynow a:link {background:#a7e01a; color:#374a08; padding:2px 20px 2px 20px;}
.productInList .buynow a:visited {background:#a7e01a; color:#374a08; padding:2px 20px 2px 20px;}
.productInList .buynow a:hover {background:#a7e01a; color:#374a08; padding:2px 20px 2px 20px;}

.productDetail .blocprice td.buynow  a:link {background:#a7e01a; color:#374a08; padding:2px 20px 2px 20px;}
.productDetail .blocprice td.buynow  a:visited {background:#a7e01a; color:#374a08; padding:2px 20px 2px 20px;}
.productDetail .blocprice td.buynow  a:hover {background:#a7e01a; color:#374a08; padding:2px 20px 2px 20px;}

.productDetail .blocprice td {background:#ffffff;border-color:#ffffff}

( Dans cet exemple, le tableau qui encadre le bouton a des bords et un fond blancs )

mardi 14 octobre 2008

Changer la couleur de la police.

Sur le support, vous êtes plusieurs à nous poser la question suivante : comment faire pour changer la couleur des polices du site ?


Je vais tenter d'y répondre en vous fournissant quelques pistes sur les styles à changer dans la feuille de style éditable ( préférences > personnalisez votre thème > configuration du thème ).

Pour changer la couleur des liens >
a:link, a:visited { color:#...... }

Pour changer la couleur du titre du blog (qui reprend le nom de la boutique) >
#top  h1 a:link, #top h1 a:visited, #top h1 a:hover
{ color:#...... }

Pour masquer le titre du blog >

#top h1 a {visibility:hidden}

Pour changer la couleur des titres des blocs de navigation >
#sidebar h2 { color:#...... }

Pour changer la couleur des titres des articles >
.post-title a:link, .post-title a:visited { color:#...... }

Pour changer la couleur de la police du footer >
#footer p a:link, #footer p a:visited { color:#......}

Vous devez entrer le code hexadecimal de la couleur après le # ; si vous ne savez pas comment le trouver, plusieurs outils en ligne peuvent vous aider : le chromafiltre , ou encore le "code couleur"

En bonus, si vous manquez d'inspiration pour choisir vos couleurs, voici quelques sites qui peuvent vous mettre sur la piste :

A vos pincea... claviers !

vendredi 10 octobre 2008

7 outils en ligne pour personnaliser sa boutique

Pour personnaliser votre boutique, ajouter des éléments graphiques simplement et sans faire appel à un graphiste, vous pouvez tout à fait utiliser des services en ligne appelés "générateurs". En exclu, voici une première liste d'outils que vous pouvez utiliser pour vous créer boutons, fonds, logos, et j'en passe...

Création de logos

Web 2.0 logo create : un petit formulaire vous invite à créer rapidement un logo avec votre nom dans un style très "tendance" ; les possibilités sont certes limitées, mais pourquoi ne pas faire simple, au fond ? On peut même ajouter un petit "Beta" dans le coin du logo !

Generated Image

Reflection Maker : Reflection Maker vous permet de créer une "réflexion" de votre logo ou de toute autre image.



Création de boutons originaux

My Cool Button :  application qui permet de générer un bouton, avec quelques effets sympathiques et pas mal de polices originales.


Création de fonds

Stripe Generator : Stripe generator est un générateur de rayures ; certains sites utilisent cet effet pour le fond de leur page, peut être cela vous interessera t-il...



Création d' encarts

Rounded Corner
: En quelques clics, vous pouvez grâce à ce site générer des éléments (fonds, boutons...) avec des angles arrondis en CSS. Il vous suffit de copier le contenu du code html dans votre page ou votre article, et les éléments de style dans la feuille de style (onglet "configuration du thème"). Je n'ai pas mis d'exemple ici, mais je suis sûr que vous comprendrez vite en quoi cela consiste...

Divers

Web 2.0 badges : vous avez certainement déjà croisé ce type de picto sur des sites qui se revendiquent là encore "web 2.0" ; cet outil permet d'en créer un sans avoir à ouvrir le moindre logiciel.



3d Box Maker : SI vous voulez créer des "packs" sans aucune notion de graphisme ni de création 3d, cet outil est fait pour vous (je n'avais pas d'images sous la main pour faire un bel exemple mais vous pouvez voir les capacités de l'outil)

Vous pouvez choisir plusieurs formats : cd, dvd, pack...

- page 1 de 3