A partir du moment où vous créez une boutique en ligne KingEshop, celle-ci est automatiquement compatible pour les téléphones intelligents (smartphones) et les tablettes.

Cependant, pour avoir de meilleurs résultats, il est important de prendre un peu de temps pour configurer certains aspects graphiques afin de personnaliser la version mobile de votre site.

1 - Avantages de la version mobile

De plus en plus, les internautes se servent de leur téléphone intelligent (smartphone) et de leur tablette pour naviguer et acheter sur internet.

Même si la demande est de plus en plus grande, il y a très peu de boutiques en ligne (et très peu de plateformes) qui ont la chance d'offrir à leur clients une version mobile de leur site. Avec votre boutique KingEshop, vous aurez un grand avantage sur vos concurrents.

Aussi, les quelques plateformes qui offrent ce type de fonction, travaillent avec une technologie que nous jugeons désuète. En fait, la vieille logique consiste à détecter le type d'appareil et diriger le visiteur vers la version correspondante.

Le problème de cette mécanique est qu'à cause du nombre croissant de modèles d'appareil mobiles, il est impossible de tous les détecter. Cela fait que très souvent le visiteur qui arrive sur un site avec son téléphone intelligent est affligé d'une version complètement inadaptée du site.

La version mobile de votre boutique KingEshop se base sur une toute autre technologie. En fait, le système ne tient pas compte du type d'appareil qui visite le site. Lorsqu'un visiteur arrive, le système lui envoie une page qui s'adaptera automatiquement au type d'écran (téléphone intelligent, tablette ou version régulière). Peu importe la taille de l'écran ou le type d'appareil, votre site sera toujours parfait au yeux de votre client.

Un autre avantage notoire de votre boutique KingEshop est que la totalité de votre site sera présente dans la version mobile. Ceci vous donne une grande avance sur vos concurrents, car la plupart des sites qui ont une version mobile ne contiennent que le strict minimum, offrant aux visiteurs une version fort incomplète de leurs boutiques.

En terminant sur les avantages, votre boutique KingEshop vous offre la possibilité de personnaliser l'aspect graphique de la version mobile selon vos goûts et besoins. Ceci aura pour résultat de donner une belle expérience de navigation à tous ces visiteurs de plus en plus nombreux qui ne se séparent jamais de leurs appareils mobiles.

2 - Comment faire des tests de la version mobile

Pour faire des tests, vous pouvez utiliser vos appareils mobiles (téléphone intelligent et tablette) ou votre navigateur (non Internet Explorer).

2.1 - Faire des tests avec votre téléphone intelligent (smartphone) et votre tablette

Si vous avez accès à ces appareils, nous vous conseillons vivement de vérifier le résultat de chacune de vos modifications en prenant soin de rafraîchir les pages de votre site.

Tablette

Téléphone intelligent

2.2 - Faire des tests avec votre navigateur (non Internet Explorer)

Vous pouvez aussi utiliser votre navigateur pour simuler la façon dont votre site sera visible avec tous les types d'appareils mobiles. Étant donné la quantité énorme de modèles d'appareils mobiles, cette méthode vous donne l'avantage de tester votre site en simulant toutes les tailles d'écran possibles.

Pour faire vos tests vous devez utiliser un des navigateurs suivants : Chrome, Mozilla Firefox, Opéra ou Safari (cette méthode de test ne fonctionne pas avec Internet Explorer).

Procédure :

- Ouvrez un navigateur (non Internet Explorer).

- Assurez vous que le navigateur soit flottant dans votre écran (pas plein écran).

- Visualisez votre site du côté client et placez votre curseur sur le côté droit du navigateur.

- Cliquez sans relâcher sur le bouton de gauche de votre souris et déplacez votre souris vers la droite.

- Continuez à déplacer la souris vers la gauche jusqu'à la version ''Tablette''

- Continuez à déplacer la souris vers la gauche jusqu'à la version ''Téléphone intelligent''

IMPORTANT : Chaque fois que vous faites un changement, n'oubliez pas de rafraîchir votre site en cliquant sur le bouton F5 de votre clavier.

3 - Comment sont disposés les textes et images dans les pages statiques et rubriques (''version liquide'')

Lorsqu'on parle de version mobile, on entend souvent le terme ''version liquide''.

Pour comprendre cela, il faut voir la version régulière des pages statiques et rubriques comme une version figée, où chaque texte et image a une place bien déterminée au pixel près.

Les différents modèles et marques d'appareils mobiles étant beaucoup trop nombreux, il est impossible de prédire la taille de l'écran où sera affichée la version mobile. Ceci a pour conséquence, qu'il est impossible de structurer les textes et images de façon figée, donc ces éléments doivent ''couler'' dans l'écran mobile comme un liquide s'adaptant à la forme de son contenant.

Dans la version mobile ou ''liquide'', les textes et images se placeront selon l'ordre naturel. Vous devez faire de nombreux tests pour arriver à construire des pages agréables à regarder dans les versions régulières et mobiles.

4 - Comment configurer les textes dans les pages statiques et rubriques

Note : Pour comprendre les explications qui suivent, vous devez être familier avec l'insertion de textes dans les pages statiques et dans les rubriques. Pour avoir tous les détails, SVP consultez les FAQ sur le sujet.

Lorsque vous insérez un texte dans une page statique ou dans une rubrique, le texte EST VISIBLE dans la version régulière et dans la version mobile.

Si vous voulez masquer un texte dans la version mobile d'une page statique ou d'une rubrique, dans l'éditeur, vous devez suivre la procédure qui suit :

- Double cliquez dans le texte en question. Le cadre pour modifier le texte apparaîtra.

- Cliquez ensuite dans le cercle situé à côté du champ ''Non'' sous la question ''Ce texte sera-t-il visible à la version mobile ?''.

Lorsque vous aurez masqué un texte pour la version mobile, vous remarquerez que dans l'éditeur, le texte sera précédé des caractères [X]. Ces caractères spéciaux servent à vous indiquer que le texte qui suit n'est visible que dans la version régulière.

Les caractères spéciaux comme tels ([X]), ne sont visibles que dans l'éditeur. Ils ne seront jamais vus par vos visiteurs.

Si vous voulez afficher de nouveau un texte dans la version mobile d'une page statique ou d'une rubrique, dans l'éditeur, vous devez double cliquer dans le texte en question et cliquer ensuite dans le cercle situé à côté du champ ''Oui'' sous la question ''Ce texte sera-t-il visible à la version mobile ?''.

5 - Comment configurer les images dans les pages statiques et rubriques

Note : Pour comprendre les explications qui suivent, vous devez être familier avec l'insertion d'images dans les pages statiques et dans les rubriques. Pour avoir tous les détails, SVP consultez les FAQ sur le sujet.

Lorsque vous insérez une image dans une page statique ou dans une rubrique, l'image sera visible uniquement dans la version régulière de votre site et invisible dans la version mobile.

Si vous ne faites aucune modification, les images et textes seront affichés dans la version régulière de votre site, et dans la version mobile, vos visiteurs ne verront que du texte.

Donc, vous devez tout d'abord choisir les images qui apparaîtront dans la version mobile de votre site. Pour cela, vous devez ouvrir une par une vos images grâce à l'éditeur des pages statiques et rubriques.

Ensuite, double cliquez sur l'image. Le cadre ''Modifier cette image'' apparaîtra :

Pour que l'image soit visible dans la version mobile de votre site, cliquez dans le cercle situé à côté du champ ''Oui'' sous la question ''Cette image sera-t-elle visible dans la version mobile ?''.

6 - Comment configurer l'ordre des textes et images dans les pages statiques et rubriques

Dans la version mobile de votre site, les images et les textes sont affichés dans l'ordre logique, c'est-à-dire, les éléments qui sont plus haut seront affichés au dessus de ceux qui sont plus bas.

Si vous avez des éléments (textes ou images) qui sont exactement à la même distance du haut de la page, l'ordre de parution sera aléatoire dans la version mobile. Pour éviter cela, vous n'avez qu'à décaler d'un pixel l'élément que vous voulez voir apparaître en premier.

Par exemple, ici vous avez deux textes qui sont sur la même ligne à l'oeil nu dans la version régulière. Si vous voulez que le ''Texte 2'' sorte en premier dans la version mobile, vous n'avez qu'à le monter d'un pixel par rapport à l'autre texte.

7 - Comment configurer les couleurs et autres aspects graphiques de la version mobile de mon site

Allez à la fonction ''Configuration des éléments de la version mobile du site'' située dans la section ''Mon site web'' - ''Apparence'' - Icône du téléphone portable.

7.1 - Fonction ''Entête pour mobile'' :

Pour cette fonction, vous avez deux choix : ''Entête en texte (très recommandé)'' ou ''Entête en image''.

Entête en texte (très recommandé) :

Il est très recommandé de choisir l'option ''Entête en texte (très recommandé)'' parce que l'image est plus légère et prend moins d'espace dans la page.

Voici le résultat si vous choisissez l'option ''Entête en texte (très recommandé)'' :

Pour cette option, vous devez configurer les champs situés dans le cadre ''Entête en texte'' :

Texte : entrez le texte que vous voulez voir apparaître dans l'entête. Exemple : Ma boutique en ligne.

Couleur du texte : choisissez la couleur du texte.

Mode : pour mettre le texte en gras choisissez l'option ''Gras''. Si vous ne voulez pas que le texte soit en gras, choisissez l'option ''Normal''.

Police : choisissez la police du texte.

Type : si vous voulez que votre texte soit en ''Small Caps'' (petites majuscules), choisissez l'option ''Majuscules''. Sinon, choisissez l'option ''Normal''.

Ombre : vous pouvez mettre de l'ombre au texte. Choisissez un chiffre entre 1 et 5. Plus le chiffre est élevé, plus l'ombre sera prononcée. Choisissez le chiffre ''0'' si vous ne voulez pas ajouter de l'ombre au texte''

Couleur ombre : choisissez la couleur de l'ombre.

Fond : choisissez la couleur de fond de l'entête.

Ligne en haut : choisissez la couleur de la ligne supérieure de l'entête.

Entête en image :

Voici le résultat si vous choisissez l'option ''Entête en image'' :

Si vous choisissez cette option l'entête peut prendre jusqu'au 1/3 de l'espace visible selon le type de téléphone intelligent que vous utilisez, ce qui n'est pas recommandé.

En utilisant l'option ''Entête en image'', vous devez considérer que votre logo ne sera pas forcement situé au même endroit dans l'entête dans la version mobile et dans la version normale. Vous devez ajuster l'emplacement de votre logo selon les versions.

Pour ajuster l'emplacement de votre logo dans la version mobile de votre site, vous devez configurer les champs du cadre ''Entête en image''.

Il ne faut pas confondre l'emplacement du logo dans la version régulière et dans la version mobile (celle dont nous parlons dans cette FAQ). Pour positionner votre logo dans la version régulière, SVP, consultez les FAQ.

7.2 - Fonctions de 1 à 42 :

Vous pouvez personnaliser la version mobile de votre site en 39 points. Il suffit de choisir la couleur en cliquant sur la flêche descendante située à côté du numéro.

IMPORTANT : si vous constatez que certaines fonctions sont bloquées, c'est parce que vous devez activer l'historique, les rubriques, la recherche ou le panier dans la section ''Mon site web'' - ''Général'' - ''Configurations des options et des pages statiques'' de votre administration. Ceci n'est pas obligatoire, mais si ces fonctions ne sont pas activées, elles n'apparaîtront pas dans la version mobile de votre site.