Archive pour la catégorie 'Design & Apparence' 38 articles

Nouveau design gratuit – Triple Fresh

Publié dans Design & Apparence le mardi 28 juin 2011 | Par M. Wizi

Un nouveau design gratuit est désormais disponible !
Comme vous avez été nombreux à nous le demander, nous avons créé un graphisme sur 3 colonnes.
Bienvenue au « Triple Fresh » !

Ce design propose quelques nouveautés très intéressantes :

Un grand emplacement pour votre bannière
Une petite astuce pour habiller votre design : créez une bannière qui prend la largeur de la charte graphique et ajoutez là sur votre site (dans Mon Compte > Informations de la boutique, chargez votre bannière).

Mon compte
En plus du panier qui se développe au survol de la souris, la partie « Mon Compte » devient elle aussi interactive et propose à vos visiteurs connectés des informations sur leur compte et leurs commandes.

Deux colonnes pour rassurer votre client
Les menus et la newsletter restent à gauche. La colonne de droite vous permet ainsi d’ajouter facilement vos éléments de réassurance (service client, infos sur vos moyens de paiement ou vos livraisons par exemple) sous le panier et la recherche.

Une nouvelle présentation du choix des modes de livraison et de paiement
Nous sommes actuellement en train de finaliser un nouveau processus de commande qui a pour but d’accroitre le taux de transformation en simplifiant les étapes.
Une nouvelle présentation sera proposée sur tous les designs mais dès aujourd’hui, certains aspects sont déjà disponibles sur le Triple Fresh. Notamment la sélection des moyens de paiement ou des moyens de livraison.

Un code CSS optimisé
Pour tous ceux qui maitrisent le CSS, sachez que celui-ci a été simplifié. Toutes les couleurs sont par exemple dans un fichier à part afin que vous puissiez les modifier facilement.

Vous pouvez bien entendu tester ce nouveau design sur votre boutique en vous rendant dans la rubrique « Apparence > Changer de design » de votre interface d’administration.

3 commentaires Écrire un commentaire

Explications sur les systèmes de cache

Publié dans Design & Apparence le vendredi 17 décembre 2010 | Par M. Wizi

Comme vous le savez, nous avons modifié en profondeur l’architecture de nos serveurs afin de donner plus de performances et de stabilité à la plateforme.

Cette transition difficile était nécessaire pour assurer le rapide développement de vos sites et anticiper l’avenir.
Nous en profitons également depuis plusieurs semaines pour optimiser certaines parties de l’administration et l’affichage des boutiques, notamment le système de cache.

Système de cache

Avant de rentrer dans les détails, il nous semble important de vous expliquer à quoi sert le cache.
Le système de cache permet d’améliorer les performances du serveur en enregistrant de façon temporaire les différentes pages de votre site. Ainsi lorsqu’un visiteur consulte votre page d’accueil par exemple, le serveur ne va pas interroger la base de données à chaque consultation mais renvoyer les informations enregistrées temporairement. Ce cache est bien entendu mis à jour lorsque vous allez faire des opérations (changement de prix, de stock, publication ou suppression de produits, etc.).

2 types de cache

Nous déployons deux types de cache sur vos boutiques. Le cache navigateur et le cache FTP.

Le cache navigateur est un cache classique utilisé par tous les navigateurs modernes. Les images, les javascripts et les CSS sont enregistrés dans le navigateur du client lors de sa première consultation. Cela permet une navigation plus fluide. Par exemple une fois le logo de votre boutique chargé sur le navigateur du client, lorsque celui-ci visite les autres pages, le logo n’a pas besoin d’être téléchargé à nouveau, le navigateur lui renvoie instantanément la même image.
Du coup, si vous chargez un logo qui a le même nom ou modifiez le CSS sans le renommer, le navigateur va penser qu’il s’agit du même fichier et ne va pas le charger à nouveau. Vous ne verrez donc pas de changement sur votre site à moins de changer de navigateur ou de vider votre cache (CTRL + F5 la plus part du temps).

Pour éviter ce problème, si vous avez un design personnalisé, nous vous conseillons de mettre un paramètre lors de l’appel du css ou de l’image afin de faire croire à votre navigateur qu’il s’agit d’un autre fichier. Dans cette logique de mise en cache, nous avions proposé une mise à jour en Juin dernier pour vous permettre de rassembler tous vos CSS et vos javascripts afin d’optimiser le temps d’affichage des pages (voir la mise à jour « Combo CSS et JS »).

A chaque modification du CSS ou des javascripts, n’oubliez donc pas la dernière étape. Il faut ajouter un paramètre nouveau (ex : &25, la fois d’après &26, etc.) à la fin de vos appels pour obliger le rechargement des éléments par le navigateur de vos visiteurs afin qu’ils puissent voir vos derniers changements.

Le cache navigateur est utilisé depuis le début dans WiziShop et la méthode pour le rafraichir n’a pas changé.
Par contre, nous avons modifié les règles pour le cache FTP.

Le cache FTP permet de mettre en cache les éléments du template. Une fois vos pages chargées sur le FTP, nous devons les générer en version HTML. Cette opération est donc mise en cache également pour améliorer les performances d’affichage.

A chaque manipulation sur le FTP, afin de contrôler les changements, vous devez à présent régénérer le cache. Pour cela, nous avons mis au point une procédure simple. Il vous suffit de vous connecter à votre compte sur l’administration et de cliquer sur votre boutique.

Le template est alors reconstruit et vous voyez les résultats sur votre site.

Bien entendu, ces informations concernent les WiziShopiens qui personnalisent leur design, les autres ne sont pas concernés, tout est transparent pour eux ;)

Aucun commentaire Soyez le premier à commenter cet article

Nouveau design gratuit – Funny Red

Publié dans Design & Apparence le mercredi 13 octobre 2010 | Par M. Wizi

Nous venons de mettre en ligne un tout nouveau design.
Merci de faire un accueil chaleureux à notre dernier né, « Funny Red » !

Inspiré du fonctionnement du précédent design Light Gray, ce nouveau design est accessible gratuitement. Il est plus contrasté grâce à ses couleurs noires et bordeaux. De même, ses contours et menus plus arrondis et simples apportent un autre univers, plus Funny et convivial.

Vous pouvez bien entendu tester ce nouveau design sur votre boutique en vous rendant dans la rubrique « Apparence > Changer de design » de votre interface d’administration.

1 commentaire Écrire un commentaire

Nouveau design gratuit – Light Gray

Publié dans Design & Apparence le jeudi 5 août 2010 | Par M. Wizi

Nous venons de mettre en ligne un nouveau design gratuit. Celui-ci inaugure une nouvelle série de chartes graphiques « nouvelles générations » intégrant de nombreuses améliorations et de bonnes pratiques.

Le design Light Gray est la nouvelle création de WiziShop. Ce design est accessible gratuitement via votre interface d’administration > Apparence & Personnalisation.

Voici un tour d’horizon des spécificités de cette nouvelle charte graphique :

1. Les menus déroulants

Le menu horizontal du haut présente les différentes catégories principales de votre catalogue produit. Si vous possédez des sous-catégories, une petite flèche apparait et propose un menu déroulant permettant à votre visiteur d’accéder directement à la sous-catégorie de son choix.

Le menu déroulant s’adapte visuellement en se mettant sur une, deux ou trois colonnes selon le nombre de sous-catégorie.

2. Panier interactif

En haut à droite, le panier est automatiquement mis à jour. Il suffit au visiteur de survoler le panier pour voir apparaitre les différents produits sélectionnés, naviguer entre eux (ils sont présentés deux par deux) et finaliser la commande !

3. Mises en avant et listes de produits

Il est possible de commander le produit directement depuis la sélection. Une bulle d’information au survol du produit affiche plus de renseignements (la description courte du produit), le contour du bloc est également renforcé pour bien mettre en valeur le produit survolé. Dans les listes produits, on utilise une plus grande image (150 x 150 px) pour mieux mettre en valeur vos articles.

4. La fiche produit

A l’instar des plus grands sites marchands, nous avons décidé d’épurer la fiche produit pour ne pas « dissiper » l’attention du visiteur. Ainsi, la fiche produit prend toute la largeur de la page, les menus et les éléments de la colonne se retrouvant en pied de page.

On retrouve, avant le fil d’ariane, un bouton permettant d’accéder à la catégorie supérieure pour choisir facilement un nouveau produit. Les boutons de partage prennent moins de place que sur les anciens design et ouvrent une fenêtre lors du clic.

La description du produit et les caractéristiques sont présentées sous forme d’onglets pour passer facilement de l’un à l’autre. En haut de la fiche produit, le début de la description (ou la description courte si elle existe) permet d’avoir un petit aperçu du produit. Le lien « En savoir + » renvoie vers la description complète située plus bas dans la page.

 

5. Le pied de page

Selon le nombre de liens, les informations à afficher et la page parcourue par le visiteur, le pied de page s’adapte pour donner du contenu cohérent.

Exemple du pied de page qui met le blog en avant :

Le même pied de page dans une fiche produit :

 

6. Le panier

Tout comme la fiche produit, le panier prend toute la largeur pour capter toute l’attention du futur client. Les étapes sont clairement identifiées et des boutons permettent de modifier très facilement la quantité des produits désirés.

J’espère que vous apprécierez ce nouveau design. D’autres graphisme découleront rapidement de celui-ci afin de coller à tous les goûts…

17 commentaires Écrire un commentaire

Ajouter des variables à vos produits ou vos catégories

Publié dans Design & Apparence , Nouvelles Fonctionnalités le lundi 4 janvier 2010 | Par M. Wizi

Cette nouvelle option est destinée aux e-commerçants qui possèdent un design personnalisé.

Avec les variables libres (que vous trouverez dans les options avancées de la fiche produit et de la personnalisation des catégories), vous aurez désormais beaucoup plus de liberté pour vos créations graphiques.

Vous pouvez créer des variables (autant que vous le souhaitez) et définir une valeur pour chacune d’elle. Ces variables libres sont ensuite renvoyées sur le template de la même manière que les variables habituelles (nom du produit, prix, etc.).

A vous ensuite de les interroger et de les utiliser comme bon vous semble (changement graphique selon la valeur de la variable, ajout de vidéo, création d’onglet, lien vers une page extérieure…).

Prenons un exemple. Vous avez 3 catégories principales et vous souhaitez que le fond de votre page soit différent dans chacune de ces catégories. Dans la personnalisation des catégories, vous allez donc créer une variable intitulée « couleur ». Pour la première catégorie, vous indiquez la valeur « rouge », pour la seconde, « bleu » et pour la dernière « vert ».
Dans vos pages HTML, vous pourrez maintenant interroger la variable « couleur ». Si c’est rouge, vous appliquerez cette couleur en fond de page et ainsi de suite.

Comment interroger une variable ?

Pour appeler une variable personnalisée, il suffit de mettre le prefix VAR_ suivi du nom de votre variable.

Dans notre exemple, cela donnerait donc :

<!– SI VAR_COULEUR egal rouge –>
ici vos changements sur le template
<!– FINSI –>

2 commentaires Écrire un commentaire

3 nouvelles tailles pour vos images

Publié dans Design & Apparence , Nouvelles Fonctionnalités le jeudi 22 octobre 2009 | Par M. Wizi

Nous venons d’apporter 3 améliorations importantes au niveau de la gestion de vos images.

Nouveau format carré

Jusqu’à présent 2 formats carré étaient automatiquement générés lors du chargement de votre image. Un format en 50 x 50 pixels (utilisé notamment dans le panier) et un format 100 x 100 (utilisé dans la liste des produits). Si vous avez personnalisé le design de votre boutique, sachez qu’il existe désormais une nouvelle taille d’image, un peu plus grande (150 x 150 pixels) pour la présentation de vos pages. Vous pouvez utiliser cette taille d’image grâce à la variable IMG_150.

Un zoom beaucoup plus grand

Notre redimensionnement automatique était un peu trop limité en largeur jusqu’à présent. Le Zoom sur l’image ne pouvait pas dépassé les 460 pixels de haut. Il était donc temps de remédier à ce problème et d’augmenter considérablement la taille du zoom.

Cette taille est désormais fixée à 840 x 630 pixels.

Si vous aviez chargé des images plus grandes que 1000 x 1000 pixels, nous avons automatiquement pu mettre à jour la taille de vos images. Allez faire un tour sur votre boutique, vous verrez rapidement la différence !

Possibilité d’utiliser la taille originale

Dernière nouveauté, très importante également, si vous utilisez un design personnalisé, vous pourrez désormais accéder à l’image originale que vous avez chargé. Il s’agit donc d’un très grand format (que nous retaillons tout de même à 1600 x 1600 pixels si il dépasse cette taille) que vous pourrez, par exemple, utiliser avec un système de zoom puissant de style « loupe » en javascript.
Vous pouvez utiliser cette taille d’image grâce à la variable IMG_RAW.

8 commentaires Écrire un commentaire

Nouveau design gratuit – Science

Publié dans Design & Apparence le mercredi 15 avril 2009 | Par M. Wizi

Depuis quelques jours, vous pouvez trouver un nouveau design dans la rubrique Apparence & Personnalisation > Graphisme de la boutique.

Le design « Science » est disponible avec le menu à gauche ou le menu à droite. Vous pouvez le tester sur votre boutique dès à présent !

Aucun commentaire Soyez le premier à commenter cet article

Nouveau design gratuit – Purple

Publié dans Design & Apparence le lundi 6 avril 2009 | Par M. Wizi

Un nouveau design vient d’être mis en ligne. « Purple » est un template violet (comme son nom l’indique) décliné du design Blue One.

Cette charge graphique est disponible gratuitement en deux versions (menu à droite à et menu à gauche). Pour tester le design sur votre boutique Wizishop, rendez vous dans votre interface d’administration > Apparence et personnalisation.

Aucun commentaire Soyez le premier à commenter cet article

Nouveau design gratuit – ToyShop Green

Publié dans Design & Apparence le jeudi 5 mars 2009 | Par M. Wizi

Nous venons d’ajouter le template ToyShop Green, un nouveau design gratuit que vous pourrez retrouver dans la rubrique Apparence & Personnalisation de votre interface d’administration.

 

Ce nouveau design à la dominante verte (d’autres couleurs sont prévues dans le futur), est comme un jouet de luxe. Formes arrondies et dégradés sont à l’honneur.

Une charte graphique idéale pour la vente de jeux par exemple.

2 commentaires Écrire un commentaire

Télécharger les templates Wizishop

Publié dans Design & Apparence le mardi 3 mars 2009 | Par M. Wizi

Pour vous aider dans la personnalisation de votre design (ou dans la mise à jour de celui-ci), nous vous donnons désormais accès à un FTP vous permettant de télécharger tous nos templates gratuits.

Vous pourrez ainsi voir comment sont structurés nos pages et vous en inspirer plus facilement.

Accès FTP :

Hôte : ftp.wizishop.com
Type d’identification : Anonyme

Aucun commentaire Soyez le premier à commenter cet article

Ne perdez plus de temps ! Testez WiziShop dès aujourd'hui...

L'essai est gratuit pendant 15 jours, sans engagement et vous donne accès à l'ensemble des fonctionnalités.

TESTER WIZISHOP