À quoi ça sert
Le Thème Drupal Websource SEO donne à votre boutique Drupal Commerce une présentation soignée : en-tête avec recherche, cartes produit arrondies, fiche produit lisible, panier et commande sans distraction, espace client clair.
Vous choisissez l'agencement de l'en-tête, la disposition de la fiche produit et la couleur de votre marque depuis l'administration. Aucun code à écrire.
Le thème fonctionne aussi sans Drupal Commerce, pour un site vitrine ou un blog.
Ce que le thème apporte :
- trois agencements d'en-tête sur ordinateur et trois sur mobile ;
- une barre de navigation en bas de l'écran sur mobile ;
- un catalogue avec colonne de filtres (catégories et marques), tri et pagination ;
- six dispositions de fiche produit, avec les détails en onglets, en accordéon ou empilés ;
- un panier, un tunnel de commande en étapes et un espace client habillés ;
- une page d'accueil qui se compose seule : catégories, nouveautés, promotions, derniers articles ;
- les balises utiles au référencement (description, adresse canonique, langues, Open Graph, données structurées) ;
- une traduction française complète.
Installation
- Décompressez l'archive
websource_theme-1.0.1.zip. - Copiez le dossier
websource_themedans le dossierthemes/custom/de votre site Drupal. - Dans l'administration, ouvrez Apparence.
- Dans la liste Thèmes désinstallés, repérez Thème Drupal Websource SEO et cliquez sur Installer et définir par défaut.
- Si votre site est en français, ouvrez Rapports > Mises à jour de traduction disponibles, puis cliquez sur Vérifier manuellement. La traduction française du thème est importée.
À l'installation, le thème crée ce qui lui manque, sans rien écraser :
- les vocabulaires Catégories de produits et Marques ;
- les champs Catégories et Marque sur les produits, Images sur les variations ;
- la vue Websource — catalogue (pages
/catalogue,/nouveautes, pages de catégorie et de marque) ; - la vue Websource — blog (page
/blog) ; - les menus Websource — barre du haut et Websource — liens légaux.
Les éléments liés aux produits sont créés quand Drupal Commerce est installé. Si vous installez Drupal Commerce après le thème, Drupal les crée à ce moment-là.
Prise en main en 5 minutes
- Ouvrez Apparence, puis cliquez sur Paramètres à côté de Thème Drupal Websource SEO.
- Dans l'onglet Couleurs et formes, saisissez la couleur de votre marque, par exemple
#0f766e. - Plus haut dans la page, dans Image du logo, décochez Utiliser le logo fourni par le thème et envoyez votre logo.
- Cliquez sur Enregistrer la configuration.
- Ouvrez Structure > Taxonomie > Catégories de produits et créez vos catégories. Ajoutez une image à chacune.
- Ouvrez Commerce > Produits. Dans chaque produit, choisissez ses Catégories et sa Marque. Ajoutez les Images dans ses variations.
- Ouvrez Structure > Menus > Navigation principale et ajoutez vos liens :
/catalogue, vos catégories,/nouveautes,/blog. - Affichez votre boutique : l'accueil, le catalogue et les fiches produit sont en place.
Réglages
Tous les réglages du thème se trouvent dans Apparence > Paramètres > Thème Drupal Websource SEO. Ils sont rangés en cinq onglets.
Couleurs et formes
| Réglage | Rôle |
|---|---|
| Couleur de marque | Couleur des boutons, des liens et des pastilles. Saisissez un code hexadécimal, par exemple #0f766e. Les nuances claires et foncées sont calculées pour vous. Vide : le vert par défaut. |
| Couleur du texte | Couleur du texte courant. Vide : #14282b. |
| Arrondi des angles | Arrondi des cartes, des boutons et des champs : carré, légèrement arrondi, arrondi, très arrondi. |
En-tête, navigation et pied de page
| Réglage | Rôle |
|---|---|
| Agencement de l'en-tête (ordinateur) | Classique : logo à gauche, recherche au centre, menu en dessous. Centré : logo, recherche et menu centrés. Compact : tout sur une seule ligne. |
| Agencement de l'en-tête (mobile) | Icônes à droite du logo, logo centré entre les icônes, ou champ de recherche toujours visible sous le logo. |
| Navigation mobile | Barre en bas de l'écran (Accueil, Menu, Nouveautés, Contact) ou Bouton de menu dans l'en-tête. |
| Pied de page | Fond sombre ou fond clair. |
| Texte de présentation du pied de page | Quelques lignes sous le logo. Vide : le slogan du site. |
| Ligne de copyright | Vide : « © année nom du site ». |
Boutique et fiche produit
| Réglage | Rôle |
|---|---|
| Disposition de la fiche produit | Six dispositions : Classique, Galerie XL, Vitrine, Minimal, Achat toujours visible, Magazine. |
| Détails du produit | Description et caractéristiques en Onglets, en Accordéon ou en Sections empilées. |
| Colonne du catalogue | Colonne de gauche ou Pas de colonne. Sur mobile, la colonne s'ouvre avec le bouton Filtrer. |
| Filtres intégrés par catégorie et par marque | Affiche l'arbre des catégories et le filtre par marque en haut de la colonne. Décochez pour n'afficher que vos propres blocs. |
| Produits par ligne | 3 ou 4 produits par ligne sur ordinateur. |
| Chemin du catalogue | Adresse de la liste des produits. Par défaut /catalogue. |
| Chemin des nouveautés | Adresse de la page des nouveautés. Par défaut /nouveautes. |
| Chemin du blog | Adresse de la liste des articles. Par défaut /blog. |
| Chemin de la page de contact | Utilisé par la barre du bas sur mobile. Vide : pas d'entrée Contact. |
Sections de la page d'accueil
| Réglage | Rôle |
|---|---|
| Bloc de bienvenue | Nom du site, slogan et bouton vers le catalogue. |
| Catégories de produits | Les catégories de premier niveau, avec leur image et leur nombre de produits. |
| Nouveautés | Les huit derniers produits. |
| Promotions | Les produits qui ont un prix barré. |
| Derniers articles | Les trois derniers articles du blog. |
Les sections s'affichent sous le contenu de votre page d'accueil. Une section sans contenu ne s'affiche pas.
Référencement
| Réglage | Rôle |
|---|---|
| Émettre les balises de référencement | Ajoute la description, l'adresse canonique, les liens entre langues, les balises de partage et les données structurées (produit, article, fil d'Ariane, organisation). |
Si vous installez le module Metatag, le thème s'efface : il n'émet plus ces balises, pour éviter les doublons.
Structure > Mise en page des blocs
Le thème propose des régions où placer vos blocs.
| Région | Rôle |
|---|---|
| Bandeau (tout en haut) | Message sur toute la largeur, au-dessus de l'en-tête. |
| Barre du haut — gauche et droite | Petits liens ou sélecteur de langue au-dessus du logo. |
| En-tête — actions, recherche, ligne du menu | Remplacent les éléments d'origine de l'en-tête (compte et panier, recherche, menu). |
| Menu push mobile | Contenu ajouté sous le menu push mobile. |
| Boutique — colonne de gauche | Blocs affichés sous les filtres intégrés du catalogue. |
| Blog — colonne de droite | Colonne des pages du blog et des articles. |
| Sections de la page d'accueil | Blocs affichés après les sections automatiques. |
| Produit — réassurance | Blocs affichés sous le bouton d'achat de chaque fiche produit. |
| Produit — bas de fiche | Blocs affichés sous la fiche produit. |
| Panier — bas de page | Blocs affichés sous le panier. |
| Pied de page — bandeau, colonnes 1 à 3, barre du bas | Contenus du pied de page. |
Structure > Menus
| Menu | Rôle |
|---|---|
| Navigation principale | Menu de l'en-tête et du menu push mobile. Trois niveaux au plus : un lien avec des sous-liens ouvre un panneau. |
| Pied de page | Colonne Informations du pied de page. |
| Websource — barre du haut | Petits liens au-dessus du logo. |
| Websource — liens légaux | Liens de la barre du bas du pied de page. |
Cas d'usage
Mettre en avant une offre de livraison
- Ouvrez Structure > Menus > Websource — barre du haut.
- Cliquez sur Ajouter un lien.
- Saisissez le texte de votre offre et l'adresse de votre page de livraison.
- Enregistrez. Le lien apparaît au-dessus du logo, sur toutes les pages.
Rassurer vos clients sur la fiche produit
- Ouvrez Structure > Mise en page des blocs.
- Dans la région Produit — réassurance, cliquez sur Placer le bloc.
- Choisissez un bloc de texte, par exemple « Paiement sécurisé, retours sous 30 jours ».
- Enregistrez. Le bloc s'affiche sous le bouton Ajouter au panier de chaque produit.
Garder le bouton d'achat toujours à l'écran
- Ouvrez Apparence > Paramètres > Thème Drupal Websource SEO, onglet Boutique et fiche produit.
- Dans Disposition de la fiche produit, choisissez Achat toujours visible ou Vitrine.
- Enregistrez. La carte d'achat reste visible pendant que le client fait défiler la page.
Afficher le champ Quantité sur la fiche produit
Drupal Commerce masque la quantité par défaut.
- Ouvrez Commerce > Configuration > Types d'élément de commande.
- Sur la ligne Default, ouvrez Gérer l'affichage du formulaire, puis l'onglet Ajouter au panier.
- Faites glisser Quantité hors de la zone Désactivé.
- Enregistrez. Le thème affiche le champ avec ses boutons − et +.
Filtrer le catalogue
La colonne de gauche du catalogue affiche l'arbre des catégories et la liste des marques, avec le nombre de produits de chacune. Un clic sur une marque filtre la liste en cours. Effacer le filtre revient à la liste complète.
Sur mobile, le bouton Filtrer ouvre la colonne dans un panneau push (filtres push).
Suivre le panier et la commande
Le panier montre chaque article avec sa vignette et ses options, et le total dans une carte à droite. La commande se déroule en étapes numérotées, avec le récapitulatif toujours visible.
Naviguer sur mobile
Sur mobile, une barre en bas de l'écran donne accès à l'accueil, au menu, aux nouveautés et au contact. Le bouton Menu ouvre le menu push.
Autres pages
Le blog, les articles, l'espace client, la page introuvable et la page de maintenance reprennent le même habillage.
Questions fréquentes
Le thème fonctionne-t-il sans Drupal Commerce ? Oui. Le catalogue, le panier et les sections de produits disparaissent. Le blog, les pages et la recherche restent habillés.
Puis-je garder mes propres vues de catalogue ? Oui. Indiquez leur adresse dans Chemin du catalogue et Chemin des nouveautés. Les filtres intégrés ne s'affichent que sur la vue Websource — catalogue.
Puis-je utiliser le module Facets ? Oui. Placez vos blocs de facettes dans la région Boutique — colonne de gauche et décochez Filtres intégrés par catégorie et par marque.
Mon site est en plusieurs langues. Que fait le thème ?
Il ajoute dans chaque page les liens vers ses traductions (balises hreflang). Vous n'avez rien à régler.
Comment traduire le thème dans une autre langue ? Ouvrez Configuration > Régionalisation et langue > Traduction de l'interface utilisateur et cherchez les textes du thème.
Le thème charge-t-il jQuery ? Non pour ses propres fonctions. Drupal Commerce charge ses scripts habituels sur la fiche produit et la commande.
Puis-je changer la couleur d'un seul élément ? Oui, avec du code : le thème expose ses couleurs en variables CSS. Voir la référence développeur.
Dépannage
Le thème est en anglais.
Ouvrez Rapports > Mises à jour de traduction disponibles et cliquez sur Vérifier manuellement. Si le thème n'est pas dans themes/custom/websource_theme, importez à la main le fichier translations/fr.po depuis Configuration > Régionalisation et langue > Traduction de l'interface utilisateur > Importer.
Les pages /catalogue et /nouveautes n'existent pas.
Ouvrez Structure > Vues et vérifiez que la vue Websource — catalogue existe et qu'elle est activée. Elle demande Drupal Commerce. Videz ensuite les caches.
La colonne de gauche ne s'affiche pas. Vérifiez que Colonne du catalogue est sur Colonne de gauche. La colonne ne s'affiche que sur les pages du catalogue.
Les produits n'ont pas d'image. Les images se placent dans les variations du produit, champ Images.
Une section de l'accueil manque. Une section sans contenu ne s'affiche pas. Promotions demande au moins un produit avec un prix barré supérieur au prix de vente.
La couleur ne change pas. Videz les caches : Configuration > Développement > Performance > Effacer tous les caches.
Les balises de référencement sont absentes. Le module Metatag est installé : c'est lui qui les émet. Sinon, vérifiez la case de l'onglet Référencement.
Désinstallation
- Ouvrez Apparence.
- Définissez un autre thème par défaut.
- Sur la ligne Thème Drupal Websource SEO, cliquez sur Désinstaller.
- Supprimez le dossier
themes/custom/websource_theme.
Les réglages du thème et ses blocs sont supprimés. Vos produits, vos catégories, vos marques, les vues et les menus créés à l'installation restent en place. Supprimez-les à la main si vous n'en avez plus besoin.