Installation du thème Fashion SEO pour PrestaShop

Cela se passe via l’installateur de PrestaShop, dans : Apparence ->  Thème et logo ->  Ajouter un thème
Si besoin, configurer ensuite les modules nécessaires sur l’accueil (Carrousel, Bannière, Editeur de page d’accueil, etc), dans Apparence -> Positions

Nous vous fournissons 2 thèmes

  • 1 thème parent : il doit obligatoirement être installé, c’est le thème principal.
  • 1 thème enfant : il peut être installé en complément si vous comptez apporter des modification au thème parent.

Quel est l’intérêt d’un thème enfant ?

Le thème enfant offre la possibilité d’apporter des modifications aux fichiers sources tout en permettant les mises à jour du thème parent sans perdre ces modifications. Cela s’adresse aux personnes qui ont des notions en développement. Utiliser un thème enfant vous permet d’apporter des modifications à votre thème, sans jamais avoir à toucher aux fichiers originaux du thème parent. Si vous ne comptez pas modifier le code du thème, n’utilisez pas le thème enfant.

Par contre, il faut savoir que si vous modifiez directement le thème parent, ces modifications seront perdues à la prochaine mise à jour du thème. En conséquence, toutes les personnes qui auront personnalisé leur thème directement sur le thème parent, ne seront plus en mesure de mettre à jour leur thème ou alors une fois la mise à jour terminée, ils constateront que toutes leurs modifications ont été perdues.

Hébergement recommandés pour notre thème PrestaShop

  • Entrée de gamme, pour les petits budgets : O2switch.fr
  • Polyvalent et performant : Alwaysdata.com
  • Infogéré et très performant, celui que nous recommandons le plus : 772424.com

Attention, nous déconseillons OVH et 1and1 qui ne sont pas assez performants et qui peuvent poser certains soucis.

Utilisation du thème Fashion SEO et de ses modules

Présentation des différentes optimisations SEO du thème

Avant de commencer à configurer le thème, il faut comprendre l’intérêt de tout ce qui a été mis en place en terme d’optimisations SEO.

Module SeoPresta – Thème Editor

Module Theme Editor

Licence

  • Clé de licence à renseigner pour le fonctionnement du thème
  • Activation / désactivation de la licence

Si par exemple vous migrez une boutique PrestaShop de dev en prod, il faudra désactiver la clé sur la boutique de dev et l’activer sur la boutique de prod à cet endroit.

Module Theme Editor Licence

Options et couleurs générales

  • Importation du logo desktop et du logo mobile
  • Couleurs personnalisables
  • Polices personnalisables
  • Apparence du menu (taille, mise en forme…)
  • Option pour afficher ou pas les popups de quick view des produits (depuis la mise à jour v1.1.0)

Options Generales Theme Seo Presta

Réglages du header (haut de page)

  • Contenu de la baseline dans topbar

Module Theme Editor Header

Réglages de la page d’accueil

  • Titre H1 et texte SEO
  • Titres et sous-titres des différents blocs
  • Bannières
  • Ordres des blocs

Dans le cas ou les articles du blog WordPress ne doivent pas être affichés, retirer le « 7 » et laisser vide dans le champ « seoprestahomeblogpost » dédié aux positions.

Module Theme Editor Accueil

Réglages des pages catégories

  • Afficher ou pas les sous catégories
  • Paramétrage de la longueur des résumés produits

Module Theme Editor Categories

Blog

  • Renseigner le blog WordPress associé à la boutique (gestion de la relation multi-langue entre PrestaShop et WordPress via l’extension Polylang depuis la version v1.1.0)
  • Nombre d’articles à intégrer sur la page d’accueil de la boutique

Pour ne plus afficher les derniers articles de blog sur la page d’accueil, il faut se rendre dans Menu -> Paramètres -> Positions -> displayHome, puis degreffer SeoPresta Blog.

Module Theme Editor Blog

Réglages du footer (pied de page)

  • Obfusquer les liens du footer ou pas (sur toutes les pages ou toutes les pages sauf l’accueil)
  • Bannière
  • Logo
  • Coordonnées (mail, téléphone, fax : masquer ou pas)
  • Champ texte sous le logo
  • Champ du copyright
  • Texte RGPD pour la newsletter
  • Réseaux sociaux (Facebook, Youtube, Viméo, Twitter, Instagram, Pinterest, Linkedin)
  • 4 éléments de réassurance, pour les icônes : il faut les importer vos visuels ou les choisir ici http://themes-pixeden.com/font-demos/7-stroke/ ou https://fontawesome.com/icons?d=gallery (modifier le code comme ceci, exemple : fas fa-truck -> icon icon-truck)

Module Theme Editor Footer

Code personnalisé

  • Intégration de codes personnalisés

Module Theme Editor Code Perso

Tracking (depuis la mise à jour v1.1.0)

  • Intégration du code de tracking Google Analytics
  • Intégration du code de tracking Google Search Console
  • Intégration du code de tracking Pixel Facebook ID

Tracking Google Facebook Prestashop

Sauvegarder / restaurer

  • Sauvegarder la configuration du thème
  • Importer et exporter des backups

Module Theme Editor Sauvegardes

Module Carrousel

Module Carrousel

  • Slides de la page d’accueil

Paramètres et vue des slides

Module Carrousel Parametres

Configuration pour chaque slide

Module Carrousel Slide

Code source de la description

Pour le SEO, ne pas intégrer de balises H1, H2, H3… seulement des balises P.

Module Carrousel Slide Code Source

Module SeoPresta – Silos

Module Silos

  • Gestion des silos : créer les silos tout en les associant aux catégories produits et aux pages CMS.

Création des silos

Module Silos Silos

Association des catégories produits aux silos

Module Silos Categories

Association des pages CMS aux silos

Module Silos Cms

Module SeoPresta – Menu

Module Menu

  • Gestion du menu principal
  • Association des silos aux entrées des menus

Aperçu du menu en place sur la démonstration

Module Menu Apercu

Onglet parent « Homme » de type classique

Module Menu Homme

Onglet parent « Qui sommes-nous ? » de type méga menu

Module Menu Qui Sommes Nous Mega

Module Inscription à la newsletter

Module Newsletter

  • Texte de la newsletter présent dans le footer

Module Newsletter Parametres

Fonctionnalités à retrouver dans les réglages natifs à PrestaShop

Liens footer

  • Apparence -> Link Widget : les liens présents dans le footer (à associer au point d’accroche « display footer »)

Les deux menus présent sur le footer :

Link Widget

Détail du menu « Produits » :

Link Widget Contenu Menu

Textes SEO présents sur les pages catégories produits

  • Catalogue -> Catégories : Textes SEO (sous les produits des pages catégories) à intégrer directement sur les pages catégories

Exemple en bas de la catégorie « Homme » :

Categories Textes Seo

Coordonnées dans le footer

  • Paramètres de la boutique -> Contact -> Magasins : coordonnées dans le footer (présent aussi sur les factures)

Exemple sur notre boutique de démonstration (ce sont aussi les coordonnées reprises sur vos factures) :

Coordonnes Boutique

Modes SeoPresta présents dans le thème, mais non configurables

Module Seopresta Non Parametrables

Personnalisation du thème Fashion SEO

Voici une liste de ce qu’il vous faudra préparer pour paramétrer et personnaliser ONE SEO. Tout ceci n’est pas obligatoire, c’est en fonction des modules et fonctions que vous utiliserez.

Visuels à préparer pour Fashion SEO pour PrestaShop

  • Logo header : 174 x 50 pixels (sur fond transparent pour un meilleur rendu)
  • Logo footer : 174 x 50 pixels (blanc et sur fond transparent pour un meilleur rendu)
  • Slides accueil : 1920 x 676 pixels
  • 3 bannières accueil : 380 x 460 pixels
  • Image associée au titre H1 et texte SEO : 940 x 946 pixels
  • Bannière derrière le texte : 1920 x 676 pixels
  • 4 visuels de réassurance : 111 x 110 pixels, ou à choisir ici : http://themes-pixeden.com/font-demos/7-stroke/ ou https://fontawesome.com/icons?d=gallery (modifier le code comme ceci, exemple : fas fa-truck -> icon icon-truck)
  • Bannière derrière les éléments de réassurance : 1920 x 641 pixels
  • Produits : 800 x 800 pixels
  • Catégorie produits (bandeau principal) : 1920 x 420 pixels
  • Catégorie produits (miniature) : 800 x 800 pixels
  • Logos des marques : 800 x 800 pixels

Pour éditer et redimensionner les images : https://pixlr.com
Pour alléger les images, principalement celles sur l’accueil : https://compressor.io ou https://www.jpeg.io

Textes à préparer pour Fashion SEO pour PrestaShop

  • Baseline du header
  • Textes présents sur les slides
  • Titre H1 de la page d’accueil
  • Texte SEO associé au H1 accueil : 200 à 300 mots en utilisant une sémantique riche
  • Texte présent sur la bannière
  • 4 textes de réassurance dans le pied de page, à associer aux 4 pictos ou visuels
  • Textes SEO en bas des fiches catégories (300 mots minimum)

Éléments à personnaliser pour Fashion SEO pour PrestaShop

  • Couleur  principale et couleur secondaire
  • 2 polices d’écritures à choisir parmi : Roboto sans-serif, Open Sans sans-serif, Lato sans-serif, Montserrat sans-serif, Raleway sans-serif, Oswald sans-serif, Noto Sans sans-serif, Poppins sans-serif, Josefin Sans sans-serif, Crimson Text seri
  • Texte intro newsletter footer
  • Texte RGPD newsletter footer
  • Liste des réseaux sociaux footer
  • Champs textes de l’éditeur de thème les différents titres (principalement sur l’accueil)