À quoi ça sert
Websource Theme Config est le centre de réglages du thème Websource. Depuis un seul écran du back-office, vous choisissez les couleurs, la forme des cartes et des boutons, les polices, les badges produit, le contenu de la première colonne du pied de page et le texte de copyright. Le module ajoute aussi au <head> de chaque page les balises utiles au partage et au référencement (Open Graph, couleur du navigateur, préconnexions, microdonnées de l'organisation, flux RSS des produits).
Depuis la version 1.11, il sait aussi exporter et importer un thème complet (réglages, mise en page, contenus du builder, menus, modules Websource) et propose une galerie de démos prêtes à importer.
Ce qu'il ne fait pas : les variantes d'en-tête et de pied de page (classique, centré, compact…), la position du menu mobile et la barre de recherche se choisissent dans la barre de mise en page de Websource Builder ; Theme Config se contente de les enregistrer.
Installation
- Le module est installé et activé automatiquement avec le thème Websource. Sinon, ouvrez Modules > Gestionnaire de modules, cliquez sur Installer un module et envoyez
websourcethemeconfig.zip. - Vérifiez dans le gestionnaire de modules que Websource Theme Config est activé.
- Ouvrez sa configuration : Modules > Gestionnaire de modules > Websource Theme Config > Configurer. Un raccourci Apparence > Importer / Exporter le thème est aussi ajouté au menu.
Prise en main en 5 minutes
- Dans la carte 1. Couleurs, cliquez sur une palette toute faite (par exemple « Marine & jaune ») ou saisissez votre Couleur principale. Les lignes Lisibilité (contraste WCAG) doivent rester vertes.
- Dans 2. Forme, choisissez l'Arrondi des cartes et des boutons.
- Dans 3. Polices, laissez Police système (le plus rapide) ou choisissez Google Fonts (nom ou lien) et tapez le nom de la police.
- Dans 6. Pied de page : copyright, relisez le texte affiché tout en bas du site.
- Dans 7. Pied de page : informations de la boutique, saisissez une Description courte et collez l'adresse de vos réseaux sociaux.
- Cliquez sur Enregistrer (bouton qui reste visible en bas de l'écran), puis ouvrez votre boutique : couleurs, boutons, badges et pied de page ont changé.
Réglages
Tous les réglages sont sur l'écran Configurer du module, organisé en cartes numérotées. Un seul bouton Enregistrer valide l'ensemble. En multiboutique, les réglages sont propres à chaque boutique (le haut de l'écran rappelle la boutique concernée).
1. Couleurs
| Réglage | Rôle |
|---|---|
| Couleur principale | Couleur de marque : boutons, liens, filets. Une échelle de 50 à 900 et un texte lisible sont calculés automatiquement. |
| Couleur secondaire | Deuxième couleur : bandeaux, titres de pied de page. |
| Accent | Couleur de mise en avant : badges, promotions, points d'attention. |
| Texte | Couleur du texte courant. |
| Bordures | Couleur des filets et des bordures de cartes. |
| Fond de page, Fond des cartes, Fond du pied de page | Couleurs de fond. |
| Intensité des couleurs | Sobre (couleur de marque seule, touches discrètes), Équilibrée (par défaut) ou Vive (aplats et dégradés colorés). |
| Afficher le sélecteur de palettes aux administrateurs connectés sur la boutique | Ajoute, pour les super administrateurs connectés au back-office, un panneau de 8 palettes sur la boutique avec aperçu en direct. Les visiteurs ne voient rien. |
| Suggestions depuis la couleur principale | Harmonies calculées (complémentaire, analogues, triade, complémentaire divisée, carré, monochrome). Un clic sur la première teinte l'applique à la couleur secondaire, les suivantes à l'accent. |
| Palettes toutes faites | Neuf palettes en un clic : Bleu, jaune & blanc (par défaut), Marine & jaune, Corail & lagon, Forêt & terracotta, Ambre & turquoise, Violet & framboise, Framboise & sarcelle, Menthe & orange, Ardoise sobre. |
| Lisibilité (contraste WCAG) | Contrôle des contrastes texte / fond de page, texte / cartes, texte blanc / bouton principal, principale / fond de page. |
| Aperçu | Carte d'exemple avec texte, lien, bouton et badge dans vos couleurs. |
2. Forme
| Réglage | Rôle |
|---|---|
| Afficher les bordures (cartes, champs, tableaux) | Décoché : les cartes n'ont plus de filet. |
| Sans bordures : ajouter une ombre légère aux cartes | Ombre douce quand les bordures sont masquées. |
| Arrondis | Aucun (carré), Léger, Moyen, Arrondi ou Très arrondi. |
3. Polices
| Réglage | Rôle |
|---|---|
| Texte courant | Police système (le plus rapide), Google Fonts (nom ou lien) ou Importer un fichier (woff2, woff, ttf, otf). Un aperçu s'affiche sous le champ. |
| Titres | Mêmes choix, pour les titres. |
Avec Google Fonts, les liens preconnect vers fonts.googleapis.com et fonts.gstatic.com sont ajoutés automatiquement. Un fichier importé est stocké dans le dossier du module et servi par votre boutique.
4. Balises du <head>
| Réglage | Rôle |
|---|---|
| Compléter Open Graph / Twitter | Ajoute les balises manquantes pour un bel aperçu lors d'un partage. |
| Balise theme-color (couleur principale) | Colore la barre du navigateur mobile. |
| Image Open Graph par défaut (URL) | Image utilisée quand la page n'en a pas. |
| Compte Twitter/X, Facebook App ID | Identifiants déclarés aux réseaux. |
| Preconnect, DNS-prefetch (une URL par ligne) | Préconnexions vers vos services externes (CDN, polices). |
| Preload (une URL par ligne) | Préchargement de polices, CSS, JS ou images ; le type est déduit de l'extension. |
Balises libres (HTML ajouté tel quel dans le <head>) | Par exemple une balise de vérification de site. Réservé aux utilisateurs avertis. |
5. Microdonnées & flux RSS
| Réglage | Rôle |
|---|---|
| Profils sociaux (sameAs, une URL par ligne) | Adresses de vos profils, déclarées dans les microdonnées de l'organisation. |
| Téléphone, E-mail | Point de contact déclaré dans les microdonnées. |
| Activer le flux RSS des produits | Flux des derniers produits, adresse affichée à côté de la case. Ajoutez ?id_category=ID pour un flux par catégorie. |
| Nombre de produits dans le flux | 30 par défaut. |
Microdonnées e-commerce : livraison, retours, paiement
Ces informations sont publiées pour les moteurs de recherche et les moteurs IA. Un champ vide n'émet rien : ne renseignez que vos conditions réelles.
| Réglage | Rôle |
|---|---|
| Pays de livraison | Codes ISO séparés par des virgules (FR, BE, CH). |
| Délai de préparation min / max, Délai de transport min / max (jours) | Délais déclarés dans les offres produit. |
| Coût de livraison par défaut, Livraison gratuite à partir de, Devise des montants | Frais de port déclarés ; le seuil de gratuité ne s'applique que dans la devise indiquée. |
| Politique de retour | Non renseignée (rien n'est émis), Retours acceptés, Retours non acceptés. |
| Délai de retour (jours), Type de retour, Montant des frais de retour fixes, Méthode de retour, Pays concernés par les retours, Page décrivant la politique de retour | Détail de la politique de retour. |
| Déclarer les modules de paiement actifs de la boutique (paymentAccepted) | Liste automatique de vos modules de paiement. |
| Moyens de paiement supplémentaires, Zone desservie, Gamme de prix, Devises acceptées supplémentaires, Déclarer les devises actives de la boutique | Compléments de la fiche Organization. |
6. Pied de page : copyright
| Réglage | Rôle |
|---|---|
| Éditeur du texte | Texte affiché tout en bas du site, par langue. Boutons B, I, Lien, Saut de ligne, Insérer l'année, Insérer le nom du site, Rétablir le texte par défaut. |
| Lien | Fenêtre Adresse du lien avec case Ouvrir dans un nouvel onglet. |
| Aperçu en direct | Rendu avec l'année et le nom de la boutique remplacés. |
Les jetons {year} et {shop_name} sont remplacés à l'affichage. Un texte vidé volontairement laisse le thème afficher « © année nom de la boutique ».
7. Pied de page : informations de la boutique
Première colonne du pied de page. Les coordonnées (adresse, téléphone, horaires) sont, elles, affichées par le module Websource Store Info.
| Réglage | Rôle |
|---|---|
| Afficher la colonne « Informations de la boutique » | Active ou masque la colonne. |
| Boutique dont les informations sont affichées | La boutique en cours (celle du visiteur) ou une boutique précise. Lien Modifier les informations de cette boutique vers les coordonnées PrestaShop. |
| Logo / Nom (seulement si aucun logo n'est affiché) | Ce qui apparaît en tête de colonne. |
| Logo clair (fond sombre), Logo sombre (fond clair) | Logos du pied de page (PNG, SVG, WebP ou JPG, 2 Mo maximum). Le thème choisit celui qui convient au fond ; sans logo, le logo de la boutique est posé sur une pastille blanche. |
| Description courte | Quelques mots sous le logo, par langue, 300 caractères maximum. |
| Réseaux sociaux | Facebook, Instagram, X (Twitter), YouTube, TikTok, LinkedIn, Pinterest, WhatsApp, Snapchat, Discord, Twitch, Threads : collez l'adresse de votre page (https:// uniquement). Seuls les réseaux renseignés sont affichés, en icônes rondes. |
8. Catégories : sous-catégories
| Réglage | Rôle |
|---|---|
| Affichage des sous-catégories | Image + nom (par défaut), Image seule, Image + info-bulle (nom au survol ou au focus), Masquées, Slider (défilement horizontal). |
| Défilement automatique, Délai (secondes) | Visibles seulement en mode Slider ; le défilement est coupé si le visiteur préfère réduire les animations. |
9. Badges
Pastilles « Réduction », « Nouveau », « En promotion », « Pack », « Rupture », « Exclusivité web » et autres, dans les listes, les fiches produit et les widgets de produits. Un Aperçu en direct suit vos changements.
| Réglage | Rôle |
|---|---|
| Arrondi des coins | Pilule (par défaut), Arrondi moyen, Carré, Valeur libre (px) avec Rayon (px, 0 à 40). |
| Taille de police, Graisse, Texte en MAJUSCULES | Typographie des badges. |
| Épaisseur (bordure) | 0 à 4 px ; 0 = aucune bordure. |
| Marge interne haut et bas, Marge interne gauche et droite, Espace entre les badges | Espacements en pixels. |
| Couleurs par type | Fond, Texte et Bordure pour Réduction, Nouveau, En promotion, Pack, Rupture, Exclusivité web, Autres badges. Champ vide = couleur principale (fond), blanc (texte), couleur du fond (bordure). Bouton Défaut par champ. |
| Tout remettre par défaut (formulaire, à enregistrer) | Vide tous les champs ; cliquez ensuite sur Enregistrer. |
10. Modules Websource du thème
Tableau des modules Websource et des modules d'origine qu'ils remplacent, avec leur état (actif, désactivé, à déposer dans /modules).
| Bouton | Rôle |
|---|---|
| Installer et activer les modules Websource | Installe et active tous les modules Websource présents, et désactive les modules d'origine remplacés (menu, panier, compte, listes de liens, filtres…). |
| Rétablir les accroches | Réinscrit les modules Websource sur leurs emplacements. À utiliser après l'activation d'un thème qui a vidé les accroches. |
| Revenir aux modules d'origine | Réactive les modules PrestaShop d'origine et désactive les modules Websource. |
10. En-tête : hauteur et marges (bureau)
| Réglage | Rôle |
|---|---|
| Hauteur minimale (0 = automatique) | Hauteur minimale de l'en-tête sur ordinateur (écrans de 992 px et plus). |
| Marge interne au-dessus / en dessous | 20 px par défaut. |
11. Miniatures produit
| Réglage | Rôle |
|---|---|
| Marge interne entre la bordure et l'image (px) | Espace dans le cadre arrondi des miniatures. |
| Arrondi de l'image | Identique au cadre (par défaut) ou Concentrique (arrondi du cadre moins la marge). |
| Afficher les déclinaisons disponibles sous l'image de la miniature | Masqué, Pastilles de couleur (par défaut), ou Couleurs et autres attributs (tailles…) en pastilles de texte. Chaque pastille ouvre la fiche avec la déclinaison choisie. |
| Nombre maximum de valeurs affichées par attribut (puis « +N ») | 1 à 12, 5 par défaut. |
| Valeurs en rupture de stock | Les barrer / griser (restent cliquables), Les masquer, Les afficher normalement. |
12. Fiche produit : réseaux de partage
Cases à cocher : Facebook, X, LinkedIn, WhatsApp, Telegram, Pinterest, E-mail, Copier le lien. Par défaut : Facebook, WhatsApp, Telegram, E-mail et Copier le lien.
Tunnel de commande
| Réglage | Rôle |
|---|---|
| En-tête / menu | Complet (comme sur le reste du site), Épuré (logo seul), Aucun. |
| Pied de page | Complet, Épuré (pied de page simplifié), Aucun. |
Avec un en-tête autre que Complet, la barre de navigation mobile est aussi masquée pendant la commande.
Apparence > Importer / Exporter le thème
Écran séparé, réservé aux super administrateurs. Quatre onglets :
| Onglet | Rôle |
|---|---|
| Démos | Galerie de démos livrées avec le module (beauté, bijouterie, bureau, avocat, chaussures, décoration, jardinage, jeux vidéo, jouets, médical, sport, épicerie fine…) avec Aperçu et Importer cette démo. Le contenu des démos est fictif. |
| Importer | Importer un fichier (.wsxtheme.json ou .wsxtheme.zip) ou collez le JSON, puis Analyser le fichier : l'analyse à blanc montre ce qui sera remplacé, ajouté ou ignoré avant d'appliquer. |
| Exporter | Nom du thème, Description, Secteur d'activité, Étiquettes, Image d'aperçu, format Paquet ZIP (JSON + images, polices et icônes) : recommandé ou JSON seul, choix des sections (réglages, pages CMS, menus, modules Websource…), bouton Exporter et télécharger. |
| Démos importées | Historique des imports avec bouton Revenir : chaque import fait une sauvegarde automatique (les 5 dernières sont conservées). |
Cas d'usage
Adapter la boutique à votre charte en dix minutes
- Dans 1. Couleurs, saisissez la couleur de votre logo dans Couleur principale.
- Dans Suggestions depuis la couleur principale, cliquez sur une teinte de la ligne Complémentaire ou Triade : elle devient la couleur secondaire ou l'accent.
- Vérifiez que Lisibilité (contraste WCAG) affiche au moins AA partout. Sinon, assombrissez la couleur principale.
- Dans 3. Polices, choisissez votre police Google pour les Titres et gardez la police système pour le Texte courant.
- Enregistrer, puis contrôlez la boutique sur mobile.
Essayer plusieurs palettes directement sur la boutique
- Cochez Afficher le sélecteur de palettes aux administrateurs connectés sur la boutique et enregistrez.
- Ouvrez la boutique dans le même navigateur que le back-office : un bouton rond apparaît en bas à gauche.
- Cliquez sur une pastille pour voir la palette appliquée en direct, puis Enregistrer ou Annuler dans le panneau. Toutes les palettes… ouvre une fenêtre avec couleurs personnalisées.
- Une fois votre choix fait, décochez le réglage : le bouton n'apparaît que pour vous, mais autant l'enlever.
Déclarer vos conditions de livraison et de retour aux moteurs de recherche
- Dans Microdonnées e-commerce, saisissez vos pays de livraison, vos délais et le coût de livraison par défaut.
- Choisissez Retours acceptés et renseignez le délai, le type et la méthode de retour.
- Enregistrez. Ces informations sont ajoutées aux offres de vos fiches produit, uniquement si elles sont renseignées.
Sauvegarder votre thème avant une refonte, ou le dupliquer sur une autre boutique
- Apparence > Importer / Exporter le thème > Exporter : donnez un nom, laissez Paquet ZIP, cochez les sections voulues, Exporter et télécharger.
- Sur l'autre boutique (ou après la refonte) : onglet Importer, choisissez le fichier, Analyser le fichier, lisez le rapport puis appliquez.
- En cas de regret, onglet Démos importées > Revenir.
Les identifiants de connexion, abonnés, avis réels, clés d'API et code libre du <head> ne sont jamais exportés.
Questions fréquentes
Où règle-t-on l'en-tête centré, le pied de page clair ou la position du menu mobile ? Dans la barre de mise en page de Websource Builder (onglet Apparence). Theme Config enregistre ces choix mais ne les affiche pas sur son écran, à l'exception de la hauteur et des marges de l'en-tête (carte 10).
Mes couleurs ne changent pas sur la boutique. Videz le cache dans Paramètres avancés > Performance et rechargez la page en forçant le navigateur (Ctrl + F5). Si un CDN est en place, purgez-le.
Puis-je avoir une police différente par langue ? Non : une seule police de texte et une seule police de titres par boutique.
Les microdonnées remplacent-elles celles du thème ? Non, elles les complètent : le thème émet WebSite, Organization, BreadcrumbList, Product et listes ; le module enrichit Organization et les offres produit avec ce que vous saisissez.
Qui peut importer une démo ? Les super administrateurs seulement. Une démo ajoute des produits marqués « démo » ; rien n'est supprimé sans confirmation explicite.
Le module est-il compatible multiboutique ? Oui : chaque boutique a ses réglages (repli sur le groupe puis la valeur globale). Il n'y a pas de copie de réglages d'une boutique vers une autre en un clic ; passez par l'export / import.
Dépannage
| Problème | Solution |
|---|---|
| L'écran de configuration affiche un avertissement « toutes les boutiques ». | Sélectionnez une boutique précise dans le sélecteur du back-office avant de régler. |
| Le sélecteur de palettes n'apparaît pas sur la boutique. | Il faut être super administrateur, connecté au back-office dans le même navigateur, et avoir coché le réglage dans 1. Couleurs. |
| La police Google ne se charge pas. | Vérifiez l'orthographe du nom (tel qu'affiché sur Google Fonts) ou collez le lien complet. |
| Le fichier de police est refusé. | Formats acceptés : woff2, woff, ttf, otf ; le fichier doit être une vraie police (signature vérifiée). |
| Un logo du pied de page est refusé. | PNG, SVG, WebP ou JPG, 2 Mo maximum ; un SVG contenant un script est rejeté. |
| Après activation d'un thème, les modules Websource ont disparu de l'en-tête. | Carte 10. Modules Websource du thème > Rétablir les accroches. |
| L'import d'un paquet est refusé. | Le paquet est d'une version plus récente que le module, dépasse les limites (10 Mo par média, 200 Mo au total) ou contient un média invalide ; le rapport d'analyse indique la raison. |
| Le flux RSS est vide. | Vérifiez que Activer le flux RSS des produits est coché et qu'il existe des produits actifs dans la boutique (ou la catégorie demandée). |
Désinstallation
- Ouvrez Modules > Gestionnaire de modules, recherchez Websource Theme Config.
- Dans le menu du module, choisissez Désinstaller et confirmez.
- Le thème reprend ses couleurs et polices de repli ; l'onglet Importer / Exporter le thème disparaît ; les réglages (
WSTC_SETTINGS) sont supprimés. Les polices et logos importés restent dans le dossier du module tant que celui-ci n'est pas effacé du disque. - Les autres modules Websource continuent de fonctionner, mais les variantes d'en-tête et de pied de page reviennent aux valeurs par défaut du thème.