THEME RESPONSIVE DESIGN

Transcription

1 THEME RESPONSIVE DESIGN Tablettes, smartphones, netbooks, ordinateurs les résolutions d écrans sont nombreuses. Adaptez vous aux nouvelles habitudes des utilisateurs en étant visible de façon optimale. Un site en responsive design s ajuste dynamiquement à la largeur et à la hauteur des écrans des différents terminaux. En intégrant ce thème responsive sur votre boutique en ligne vos clients pourront faire leurs achats où qu ils soient et auront toujours un site avec une navigation adaptée avec eux! 1

2 SOMMAIRE ZOOM SUR LE NOUVEAU THEME COTE CLIENTS... 3 INSTALLATION... 4 CONFIGURATION DES NOUVEAUTES... 5 A. GRAPHISME DU THEME... 5 a. Installation de vos bannières... 5 b. Paramétrage le carrousel... 7 c. Options... 8 d. Couleurs... 9 B. FICHE PRODUIT DU THEME a. Plusieurs photos par produit b. Option zoom pour les images de vos produits C.3. MENU ET PIED DE PAGE DU THEME a. Menu déroulant b. Pied de page

3 ZOOM SUR LE NOUVEAU THEME COTE CLIENTS 1. Bannières Deux bannières : une pour la version mobile et une autre pour les ordinateurs. 2. Menu Avec la mise en avant des catégories de produits en menu déroulant. 3. Carrousel Des images qui défilent agrémentées de votre texte et d un bouton afin de mettre en avant sur votre page d accueil actualités, promotions et évènements 4. Produits mis en page d accueil Nouvelle mise en avant optimale de votre sélection de produits 5. Dernier billet de blog Possibilité d afficher ou pas le dernier billet de blog. 6. Produit(s) lié(s) au billet 7. Widgets 8. Fond de page Texture, image ou couleur au choix pour le fond de la page SUR LA FICHE PRODUIT 9. Pied de page Regroupement de widgets et possibilité d afficher un plan de géolocalisation ou bien les boutons de partage sur les réseaux sociaux. 11. Zoom sur photo Possibilité d un zoom sur image au passage de la souris. 10. Plusieurs Photos Possibilité d afficher plusieurs photos par produit. 3

4 INSTALLATION Afin de vous aider au mieux à la mise en place de votre nouveau thème, voici un rappel de l installation pour activer la personnalisation depuis votre espace d administration. Etape1 : Cliquez dans la partie «APPARENCE» > «Choix du thème». Sélectionnez le thème «Responsive Design» en cliquant dessus puis cliquez sur «Personnaliser le thème» Etape 2 :, vous trouvez, cliquez dessus pour pouvoir effectuer les changements de couleurs ou autres. Une nouvelle page apparaît : Etape 3 : Créez votre personnalisation, en cliquant sur Ajouter une personnalisation (bouton vert en bas à droite). Etape 4 : Cliquez sur l'encart Choisissez une personnalisation, puis choisir celle que vous venez de créer. Cette action vous ouvrira la page du design du thème à modifier, en commençant par l «Entête», le «Carrousel», les «Options» et les «Couleurs». 4

5 CONFIGURATION DES NOUVEAUTES A. Graphisme du thème a. Installation de vos bannières Sélectionner l onglet «Entête» afin de modifier/créer vos bannières. Ce thème a la particularité d exiger la mise en place de 2 bannières (une pour les écrans classiques et l autre pour les écrans de tablettes/mobiles). Privilégier la mise en évidence du texte (titre de votre boutique en ligne) sur la version tablette/mobile Si vous possédez déjà une bannière toute faite, il ne vous reste qu à la mettre à la taille de celle de ce thème : Bandeau mobile/tablette : 1024 x 230 pixels Bandeau du site : 721 x 161 pixels Si vous avez des notions de retouche photo, utilisez votre logiciel («Photoshop» ou le gratuiciel «The Gimp») afin de retailler votre propre bandeau à la bonne dimension. Ensuite, cliquez sur le bouton «Modifier l image». Cette action ouvre votre gestionnaire de média, où sont stockées vos images. Cliquez sur «Parcourir», et remontez dans votre ordinateur jusqu à la source du fichier que vous voulez télécharger. Ce fichier image (nous vous conseillons les formats jpg, gif ou png, très adaptés au web) ne doit pas dépasser 512 kilos octets. Cliquez ensuite sur le bouton «Envoyer». Une fois téléchargée, sélectionnez ensuite votre image en cliquant sur son nom de fichier ou la vignette. Pour enregistrer ces changements, vous devez maintenant cliquer sur «Valider», puis sur «Utiliser cette personnalisation sur le site». Vous pouvez aussi choisir de ne pas avoir de bannière sous forme d image, choisir juste une couleur de fond. Pour cela, cliquez sur «Supprimer l image», puis dans la partie droite de votre éditeur d en tête, choisissez sa «couleur de fond» (grâce à l éditeur de couleur, identique à celui visible plus bas) ainsi que sa taille en faisant jouer le curseur sous l encart «Taille du titre». 5

6 Bannière graphique téléchargée Téléchargez votre bannière via le gestionnaire de médias Si vous utilisez une bannière graphique, vous pouvez choisir de l affichage ou non du titre Cliquez sur les carreaux de couleur pour modifier les couleurs du site Actionnez les «bulles» afin de modifier couleurs et contrastes Actionnez le curseur de gauche à droite afin de modifier la taille du titre de votre boutique Pour le bandeau mobile/tablette vous avez uniquement la possibilité d intégrer une image : 6

7 b. Paramétrage le carrousel Veuillez trouver dans le schéma ci dessous les explications point par point afin de paramétrer votre carrousel. Pour ajouter une diapo à votre carrousel, il vous suffit de remplir les champs suivants et d enregistrer la programmation MATTENTION LA TAILLE OPTIMALE DE L IMAGE EST DE : 1024 X 300 PIXELS 1. Titre qui apparaitra sur votre image 2. Texte au dessous du titre 2.Vous pouvez choisir un ordre d apparition des images sur votre carrousel 2. Possibilité de mettre votre titre + texte à droite ou a gauche de l image 3. Nom du bouton 3. Lien de votre bouton vers votre site ou lien externe (ex : 3. Couleurs du fond et texte de votre bouton. Une fois la diapo créée et enregistrée, elle se retrouve dans le récap des diapos en bas de page. Modifiez ou supprimez vos diapos directement depuis cette interface en cliquant sur les boutons éponymes. «Modifier» ou «supprimer» une diapo intégrée dans le carrousel 7

8 c. Options L onglet Options de votre thème responsive design vous permet de paramétrer les détails d affichage de votre carrousel en plus des options de la page d accueil. Tous les points dans le schéma détaillé ci dessous. Possibilité d afficher ou non le dernier billet de blog sur la page d accueil La durée du défilement de l animation entre deux images Temporalité d affichage d une diapo du carrousel Miniatures Boutons de Navigation 8

9 d. Couleurs Le thème responsive design offre un large panel de personnalisations de votre site. Il est possible de modifier les couleurs de fond de page, de titres, de zones, de séparateurs, des liens, du texte, et rajouter une image ou une texture en fond de page. Modifiez les couleurs de chacun des onglets dédiés : EXCLU! Dans la partie «Fond du site» vous avez pour ce thème, la possibilité de mettre une image/ texture en fond de page (schéma n 8 page 2) Le détail de cette partie dans le schéma explicatif ci dessous : Possibilité de modifier l opacité de votre texture ou image La liste de vos textures/images apparaîtra en cliquant sur ce bouton Ajout d une nouvelle texture ou d un fond d écran de type image depuis ce lien (accès à votre gestionnaire de médias) En fixant l image de fond, vous permettez aux clients de garder l image en fond même s ils descendent dans la page 9

10 Voici un exemple d image en fond de page : MATTENTION LA TAILLE OPTIMALE DE L IMAGE EST D UN MINIMUM DE: 1500 X 800 PIXELS A noter : La mise en place d un habillage de fond en responsive design ne permet pas la mise en place de texte ou de promotion. Les messages risquent d être tronqués en fonction des écrans de navigation. Cette option a pour principale vocation de mettre en place un fond décoratif sur votre site. L équipe Service Conseil et Accompagnement Client de votre Pack e boutique reste à votre disposition afin de vous donner des indications si nécessaire. 10

11 B. Fiche produit du thème a. Plusieurs photos par produit EXCLU! Vous pouvez intégrer plusieurs photos pour un produit sur sa fiche. Rendez vous dans la partie «BOUTIQUE» > «Catalogue». Sélectionnez un de vos produits en cliquant dessus et intégrez simplement de nouvelles photos. Cliquez ici pour rajouter d autres images à votre produit MATTENTION NOMBRE MAXIMUM DE 5 IMAGES PAR PRODUIT 11

12 b. Option zoom pour les images de vos produits Nouvelle exclu sur ce thème : La possibilité de zoomer les images de vos produits! Pour un zoom optimal, nous vous recommandons d intégrer une image source dans votre gestionnaire de média d une taille minimum de 1000px x 689px. Au passage de la souris sur votre image celle ci effectuera un zoom comme ci dessous : 12

13 C.3. Menu et pied de page du thème a. Menu déroulant Le menu du thème responsive design permet la mise en valeur de vos catégories. Un menu déroulant permet l affichage des souscatégories définies. En plus de vos catégories, 3 autres boutons indispensables sont automatiquement affichés dans la barre du menu: La petite maison en toute première position pour revenir en page d accueil à tout moment. En savoir + : pour appeler votre page de présentation (Une page clé pour la confiance de l internaute) Son URL spécifique est : Presentation de la Boutique Actualités : pour appeler la partie blog Sachez que si vous définissez trop de catégories, un bouton «+» se met en place afin de toutes les afficher dans le menu déroulant. Cette fonction permet d éviter d avoir un menu trop important et de perturber la navigation de votre client. Nous vous conseillons par conséquent de définir au plus haut les catégories de produits les plus recherchés par vos clients. La programmation des catégories est toujours réalisée depuis la partie éponyme de votre espace d administration. b. Pied de page Afin d alléger votre site de widgets en colonne de droite/gauche, nous avons implémenté dans le pied de page de ce thème des widgets et des informations importantes à trouver sur tout site e commerce. Pensez alors à supprimer ces informations de vos widgets qui apparaissent juste au dessus de cette partie Voici le listing des informations disponibles en pied de page (Ces données ne sont pas paramétrables) : Contactez nous L entreprise Nous suivre Copyright Ils correspondent aux widgets suivants : Le logo paiement sécurisé, les contacts, nous suivre avec l abonnement à la newsletter, archives/fils des billets. 13

14 EXCLU! Partie «Nous trouver». Afin de localiser votre boutique physique, le Pack localise sur une carte votre adresse, permettant facilement à un client de vous trouver. Vous n avez pas de boutique physique ou ne souhaitez pas être localisé avec une carte? Rendez vous dans la partie «Infos boutique» de votre espace d administration dans l onglet «Boutique». Décochez l option «J accepte d être localisé» : Par défaut, l option partage de votre site sur les réseaux sociaux s affichera à la place de «Nous trouver» MISE A DISPOSITION DU THEME RESPONSIVE DESIGN LE MERCREDI 20 NOVEMBRE A PARTIR DE 12H La mise en production aura lieu de 9h à 12h le 20/11/2013. Durant ce créneau horaire, votre espace d administration sera momentanément indisponible. Veuillez nous excuser de la gêne occasionnée L équipe Service Conseil et Accompagnement Client 14