À quoi ça sert
Websource Prestashop Theme est le thème de votre boutique. Il remplace le thème « Classic » de PrestaShop et dessine toutes les pages : accueil, catégories, fiches produit, panier, tunnel de commande, compte client, pages de contenu, contact, recherche, 404.
- Rapide : chaque page ne charge que la feuille de style dont elle a besoin (un socle commun, puis un fichier par type de page). Aucun CSS n'est calculé dans le navigateur.
- Réglable sans code : couleurs, polices, formes, en-tête, pied de page, menu mobile, badges, données structurées… tout se règle dans le module Websource Theme Config. Les contenus de l'accueil et des pages se composent dans Websource Builder.
- Pensé pour le mobile : barre de navigation en bas de l'écran (Accueil, Menu, Compte, Panier, Nouveautés, Contact), boutons et champs d'au moins 44 px, typographie fluide.
- Accessible : lien « Aller au contenu », focus visible, boutons nommés pour les lecteurs d'écran, animations réduites si le visiteur le demande.
- Multilingue, multidevise, multiboutique : textes repris des traductions de PrestaShop, langues de droite à gauche prises en charge, aucun prix ni symbole écrit en dur.
- Référencement : balises
title, description, canonical,hreflang, Open Graph, paginationprev/nextet données structurées (fil d'Ariane, produit, listes de produits, magasins) générées à partir des vraies données de la boutique.
Le thème s'appuie sur ses modules compagnons. Sans eux, il fonctionne avec un en-tête, un pied de page et une fiche produit par défaut ; avec eux, chaque zone devient réglable :
| Zone de la boutique | Module Websource |
|---|---|
| Couleurs, polices, formes, en-tête, pied de page, badges, SEO | Websource Theme Config |
| Contenu de l'accueil, des pages et disposition de la fiche produit | Websource Builder |
| Styles supplémentaires page par page | Websource Page Styles |
| Menu principal et menu mobile | Websource Mega Menu |
| Listes de liens du pied de page | Websource Link Lists |
| Compte client (connexion, création de compte) dans l'en-tête | Websource Account Block |
| Panier dans l'en-tête | Websource Cart Block |
| Barre de recherche | Websource Search Bar |
| Filtres des catégories | Websource Faceted Search |
| Sélecteur de langue et de devise | Websource Locale |
| Carrousel, réassurance, marques, nouveautés, newsletter, coordonnées… | modules du même nom |
Installation
- Dans le back-office, ouvrez Apparence > Thème et logo.
- Cliquez sur Ajouter un thème, puis Importer depuis votre ordinateur et choisissez le fichier
WebsourcePrestashopTheme.zip. - Une fois le thème importé, cliquez sur Utiliser ce thème sous sa vignette.
- PrestaShop active alors les modules Websource livrés avec le thème et désactive les modules natifs qu'ils remplacent (menu, panier, connexion, listes de liens, filtres, recherche, carrousel, nouveautés, marques, réassurance, coordonnées, newsletter, bandeau). L'aperçu rapide des produits est désactivé.
- Ouvrez Modules > Gestionnaire de modules, recherchez « Websource » et vérifiez que chaque module est installé et activé. Installez ceux qui manquent.
Si vous activez le thème sur une boutique qui avait déjà des modules placés sur ses emplacements, ouvrez ensuite Websource Theme Config et cliquez sur Rétablir les accroches : les modules Websource se replacent sur leurs emplacements.
Prise en main en 5 minutes
- Apparence > Thème et logo : envoyez votre logo (hauteur conseillée 40 px, largeur 200 px), le logo des e-mails et le favicon. Cliquez sur Enregistrer.
- Modules > Websource Theme Config > Configurer : choisissez votre couleur de marque, une police et un arrondi. Les boutons, liens, filets et badges s'adaptent aussitôt.
- Apparence > Websource Builder : dans la barre de mise en page, choisissez la variante d'en-tête et de pied de page (enregistrées par Websource Theme Config).
- Apparence > Websource Mega Menu : composez le menu principal (il sert aussi de menu mobile).
- Apparence > Websource Builder : composez l'accueil (bandeau, catégories, produits, atouts…) et mettez-le en ligne.
- Ouvrez votre boutique sur un ordinateur, puis sur un téléphone, et vérifiez l'accueil, une catégorie, une fiche produit et le panier.
Réglages
Le thème lui-même n'a pas d'écran de réglages propre : tout passe par les écrans natifs de PrestaShop et par ses modules compagnons.
Apparence > Thème et logo
| Réglage | Rôle |
|---|---|
| Logo de l'en-tête | Logo affiché en haut de chaque page (encadré par un titre h1 sur l'accueil seulement). |
| Logo des mails | Logo des e-mails envoyés par la boutique ; à défaut, le logo de l'en-tête. |
| Logo des factures | Logo des PDF de facture. |
| Favicon | Icône de l'onglet du navigateur. |
| Mon thème pour la boutique | Thème actif. Exporter le thème actif produit une archive réutilisable sur une autre boutique. |
| Pages Configuration | Écran natif de PrestaShop : modules affichés sur l'accueil, les catégories et les fiches produit. Avec le thème Websource, utilisez plutôt Websource Builder et Websource Theme Config. |
| Personnalisation avancée | Création d'un thème enfant pour modifier des fichiers sans toucher au thème parent (voir Cas d'usage). |
Gabarits de page
Le thème propose quatre gabarits, choisis par PrestaShop selon la page (modifiables dans Apparence > Thème et logo > Choisir les mises en page).
| Gabarit | Rôle |
|---|---|
| Pleine largeur | Sans colonne latérale : accueil, fiche produit, panier, tunnel de commande, compte, pages de contenu (gabarit par défaut). |
| Colonne gauche | Filtres et arbre des catégories à gauche : catégories, meilleures ventes, nouveautés, promotions, contact. |
| Colonne droite | Colonne à droite. |
| Trois colonnes | Colonne centrale et deux colonnes latérales. |
Formats d'image
Le thème déclare ses formats d'image à l'activation (Apparence > Images). Après un changement, cliquez sur Régénérer les miniatures.
| Format | Taille | Utilisation |
|---|---|---|
| cart_default | 125 × 125 | Panier et mini-panier. |
| small_default | 98 × 98 | Vignettes de la fiche produit, catégories, marques, fournisseurs. |
| home_default | 250 × 250 | Listes de produits (accueil, catégories, recherche). |
| medium_default | 452 × 452 | Image principale moyenne, marques et fournisseurs. |
| large_default | 800 × 800 | Image principale de la fiche produit et visionneuse. |
| category_default | 1 400 × 280 | Bannière des catégories. |
| stores_default | 170 × 115 | Page des magasins. |
Réglages dans les modules compagnons
| Réglage | Où |
|---|---|
| Couleurs (principale, secondaire, accent, texte, bordures, fonds), intensité, palettes toutes faites | Websource Theme Config > 1. Couleurs |
| Bordures, ombres et arrondis | Websource Theme Config > 2. Forme |
| Polices (système, Google Fonts ou fichier importé) | Websource Theme Config > 3. Polices |
| Open Graph, theme-color, preconnect, preload, balises libres | Websource Theme Config > 4. Balises du head |
| Microdonnées de l'organisation, livraison et retours, flux RSS | Websource Theme Config > 5. Microdonnées & flux RSS et Microdonnées e-commerce |
| Copyright et première colonne du pied de page (logos, description, réseaux sociaux) | Websource Theme Config > 6 et 7. Pied de page |
| Sous-catégories en haut des catégories (image + nom, image seule, info-bulle, carrousel, masquées) | Websource Theme Config > 8. Catégories : sous-catégories |
| Badges produit (forme, taille, couleurs par type), déclinaisons sous les miniatures | Websource Theme Config > 9. Badges et 11. Miniatures produit |
| Hauteur et marges de l'en-tête sur ordinateur | Websource Theme Config > 10. En-tête |
| En-tête et pied de page du tunnel de commande (complets, épurés, masqués) | Websource Theme Config > Tunnel de commande |
| Variante d'en-tête (8 sur ordinateur, 3 sur mobile), barre du bas ou bouton en haut sur mobile, largeur et position de la recherche, variante de pied de page (8) | Websource Builder > barre de mise en page |
| Disposition de la fiche produit (Classique, Galerie XL, Vitrine, Minimal, Achat toujours visible, Magazine) | Websource Builder > Fiche produit |
Chaque module a son propre guide dans cette documentation.
Cas d'usage
Une fiche produit claire
La fiche produit affiche la galerie (vignettes, zoom au survol, visionneuse plein écran), le prix et les remises, les déclinaisons (listes ou pastilles de couleur), la quantité, le bouton Ajouter au panier, les boutons de partage, puis la description et les détails en onglets (en accordéon sur mobile). Les avis s'affichent si un module d'avis est installé.
- Dans Catalogue > Produits, remplissez la description courte : elle s'affiche sous le prix, en exergue.
- Ajoutez plusieurs images : la première est la couverture, les autres deviennent des vignettes.
- Renseignez les caractéristiques : elles apparaissent dans l'onglet Détails du produit et dans les données structurées.
- Pour changer l'agencement (galerie large, bouton d'achat toujours visible…), ouvrez Websource Builder > Fiche produit.
Le panier et le tunnel de commande
Le panier liste les produits avec quantité modifiable, le récapitulatif à droite et le bouton Commander. Le tunnel de commande reprend les étapes natives de PrestaShop (informations, adresses, livraison, paiement) dans un gabarit pleine largeur ; l'en-tête et le pied de page peuvent y être épurés ou masqués depuis Websource Theme Config.
Les pages du compte client
Connexion, création de compte, mot de passe oublié, adresses, historique des commandes, avoirs, retours et informations personnelles utilisent les formulaires natifs de PrestaShop, mis en forme par le thème (champs de 44 px, bouton Afficher le mot de passe, messages d'erreur sous les champs).
Une boutique en plusieurs langues ou devises
- Ajoutez vos langues et devises dans International.
- Le thème reprend les traductions de PrestaShop (domaines du thème Classic) : vous n'avez rien à retraduire pour les textes de l'interface.
- Les sélecteurs de langue et de devise apparaissent automatiquement dans l'en-tête et le pied de page dès qu'il y a plus d'une langue ou d'une devise (module Websource Locale ou sélecteurs natifs).
- Pour une langue de droite à gauche (arabe, hébreu), la mise en page est inversée automatiquement.
Un thème enfant pour vos propres modifications
Si un développeur doit modifier des gabarits ou ajouter du CSS, utilisez un thème enfant plutôt que de modifier le thème : vos changements survivent aux mises à jour.
- Ouvrez Apparence > Thème et logo > Personnalisation avancée.
- Cliquez sur Télécharger le thème, modifiez les fichiers voulus dans l'archive, puis Importer thème enfant.
- Activez le thème enfant dans Thème et logo.
Pour un simple ajout de CSS, le module Websource Page Styles évite même le thème enfant.
Questions fréquentes
Faut-il installer tous les modules Websource ? Non. Le thème fonctionne avec les modules natifs de PrestaShop. Mais chaque module Websource remplace un module natif en apportant les réglages prévus pour ce thème ; l'ensemble a été conçu pour fonctionner ensemble.
Le thème modifie-t-il mes produits ou mes commandes ? Non. Il ne touche qu'à l'affichage. Vos données restent celles de PrestaShop.
Puis-je revenir au thème Classic ? Oui. Dans Apparence > Thème et logo, cliquez sur Utiliser ce thème sous le thème Classic. Réactivez ensuite les modules natifs (menu, panier, filtres…) si vous le souhaitez.
Pourquoi l'aperçu rapide a-t-il disparu ?
Le thème le désactive à l'activation (PS_QUICK_VIEW) : sur mobile, il gêne plus qu'il n'aide. Vous pouvez le réactiver dans Paramètres de la boutique > Produits, mais le thème n'a pas de fenêtre d'aperçu rapide.
Le thème est-il conforme à un référentiel d'accessibilité ?
Le thème applique de bonnes pratiques (lien d'évitement, focus visible, cibles de 44 px, aria-label, animations réduites) mais aucune déclaration de conformité RGAA ou WCAG n'a été établie.
Puis-je utiliser le thème sur plusieurs boutiques ? Oui. Le thème est stocké une fois ; activez-le boutique par boutique depuis le sélecteur de boutique. Les réglages des modules Websource sont propres à chaque boutique.
Le thème charge-t-il jQuery ?
Le script du thème n'en a pas besoin, mais PrestaShop et certains modules natifs l'utilisent : le fichier vendor-theme.js conserve les greffons hérités du thème Classic.
Dépannage
| Problème | Solution |
|---|---|
| Après activation, l'en-tête ou l'accueil est vide. | Les modules Websource ne sont pas installés ou pas placés sur leurs emplacements. Installez-les, puis cliquez sur Rétablir les accroches dans Websource Theme Config. |
| Les anciens modules natifs apparaissent en double. | Désactivez les modules natifs remplacés (ps_mainmenu, ps_shoppingcart, ps_customersignin, ps_linklist, ps_facetedsearch, ps_searchbar…) dans Modules > Gestionnaire de modules. |
| Mes changements de CSS ne s'affichent pas. | Videz le cache : Paramètres avancés > Performance > Vider le cache. Si vous utilisez un CDN ou Cloudflare, purgez-le aussi. |
| Les images produit sont floues ou déformées. | Apparence > Images > Régénérer les miniatures après l'activation du thème. |
| Le menu mobile ne s'ouvre pas. | Le bouton Menu ouvre le menu du module Websource Mega Menu : installez-le et mettez un menu en ligne. |
| Les textes de l'onglet « Nouveautés » ou du bouton « Pause » restent dans une seule langue. | Ces deux libellés sont à traduire dans International > Traductions > Traductions du thème (domaine Shop.Theme.Global). |
| Un module tiers s'affiche mal en langue de droite à gauche. | Le thème inverse son propre CSS ; un module qui écrit margin-left ou float:left en dur ne sera pas inversé. Voyez avec son éditeur. |
Désinstallation
- Ouvrez Apparence > Thème et logo et cliquez sur Utiliser ce thème sous un autre thème (Classic, par exemple).
- Réactivez si besoin les modules natifs désactivés à l'installation du thème.
- Pour supprimer les fichiers du thème, cliquez sur la corbeille de sa vignette dans Thème et logo (impossible tant qu'il est actif).
- Les modules Websource restent installés : désinstallez-les un à un dans Modules > Gestionnaire de modules si vous ne les utilisez plus.