À quoi ça sert
Le Thème Joomla Websource SEO donne à votre boutique HikaShop une présentation soignée : en-tête avec recherche, cartes produit arrondies, fiche produit lisible, panier et commande sans distraction, espace client clair.
Le template est léger. Chaque page ne charge que la feuille de style dont elle a besoin : votre boutique s'affiche vite, sur ordinateur comme sur mobile.
Il fonctionne aussi sans HikaShop, pour un blog ou un site de pages.
Installation
- Dans l'administration Joomla, ouvrez Système, puis Extensions dans le bloc Installation.
- Dans l'onglet Archive à envoyer, déposez le fichier
tpl_websource-1.0.1.zip. - Attendez le message de confirmation.
- Ouvrez Système, puis Styles de site dans le bloc Templates.
- Sur la ligne Thème Joomla Websource SEO - Par défaut, cliquez sur le rond de la colonne Défaut. Une étoile apparaît : le template est actif sur tout le site.
Vous n'avez rien d'autre à installer. HikaShop est facultatif : installez-le avant ou après, le template le reconnaît seul.
Prise en main en 5 minutes
- Ajoutez votre logo. Ouvrez Système > Styles de site, puis cliquez sur Thème Joomla Websource SEO - Par défaut. Dans l'onglet Détails, cliquez sur Sélectionner en face de Logo. Sans logo, le nom du site s'affiche à la place.
- Placez votre menu. Ouvrez Contenus > Modules du site. Ouvrez votre module de menu, choisissez la position header-menu et, dans l'onglet Avancé, la disposition megamenu. Enregistrez.
- Placez le panier. Publiez le module HikaShop Cart Module en position header-actions et choisissez sa disposition websource dans l'onglet Avancé. Le compteur d'articles se met à jour seul.
- Choisissez vos agencements. Revenez dans le style du template, onglets Agencement et Boutique et accueil. Choisissez l'en-tête et la disposition de la fiche produit.
- Enregistrez. Cliquez sur Enregistrer & Fermer, puis regardez votre site.
Réglages
Tous les réglages se trouvent dans Système > Styles de site > Thème Joomla Websource SEO - Par défaut. Ils sont rangés en cinq onglets.
Onglet Détails (identité)
| Réglage | Rôle |
|---|---|
| Logo | Image affichée dans l'en-tête et le pied de page. Sans logo, le nom du site est écrit à la place. |
| Logo sur fond sombre | Version claire du logo, facultative, utilisée dans le pied de page sombre. |
| Titre à la place du logo | Texte écrit dans l'en-tête quand aucun logo n'est choisi. Vide : le nom du site. |
| Texte du pied de page | Quelques lignes de présentation sous le logo du pied de page. |
| Ligne de copyright | Barre basse du pied de page. Vide : « © année nom du site ». |
| Élément de menu Contact | Page ouverte par le bouton Contact de la barre du bas sur mobile. Par défaut : la première page de contact trouvée. |
| Élément de menu Nouveautés / blog | Page ouverte par le bouton Nouveautés de la barre du bas. Par défaut : la boutique. |
| Élément de menu Recherche | Page de résultats visée par le champ de recherche de l'en-tête. Par défaut : la première trouvée. |
Onglet Agencement
| Réglage | Rôle |
|---|---|
| Agencement de l'en-tête (ordinateur) | Classique : logo à gauche, recherche au centre, menu dessous. Logo centré : logo, recherche et menu centrés. Compact (une ligne) : tout sur une ligne. |
| Agencement de l'en-tête (mobile) | Icônes à droite du logo, Logo centré ou Champ de recherche toujours visible. |
| Navigation mobile | Barre du bas (Accueil, Menu, Nouveautés, Contact) ou Bouton Menu dans l'en-tête. |
| En-tête fixé en haut | Oui : l'en-tête reste visible quand on fait défiler la page. |
| Pied de page | Sombre ou Clair. |
| Largeur du contenu | Étroite, Par défaut, Large ou Pleine largeur. |
| Bouton Retour en haut | Oui : un bouton rond ramène en haut de la page. |
Onglet Boutique et accueil
| Réglage | Rôle |
|---|---|
| Disposition de la fiche produit | Six dispositions : Classique, Grande galerie, Vitrine, Minimale, Boîte d'achat toujours visible, Magazine. |
| Détails du produit | Description, détails et avis présentés en Onglets, en Accordéon ou en Sections empilées. |
| Colonne latérale de la boutique | À gauche : les modules de la position shop-sidebar s'affichent à gauche des listes. Aucune : la grille prend toute la largeur. |
| Produits par ligne | 3 ou 4 produits par ligne sur grand écran. |
| Pastille « Nouveau » (jours) | Un produit créé depuis moins de ce nombre de jours porte la pastille Nouveau. 0 la retire. |
| Sections automatiques de l'accueil | Oui : le bloc de bienvenue, les catégories et les nouveautés s'ajoutent à la page d'accueil. |
| Bloc de bienvenue : petite ligne, titre, texte | Textes du bandeau en haut de l'accueil. Laissez le titre vide pour masquer le bandeau. |
| Bloc de bienvenue : libellé du bouton, lien du bouton | Bouton du bandeau. Le lien est une adresse complète ou un chemin de votre site, par exemple /boutique. Vide : la boutique. |
Onglet Couleurs et polices
| Réglage | Rôle |
|---|---|
| Couleur de marque | Couleur des boutons, des liens et des éléments actifs. Vide : le vert Lagon. Les nuances claires et foncées sont calculées pour vous. |
| Couleur secondaire, Couleur d'accent | Couleurs d'appoint (étoiles, survol du pied de page). |
| Couleur de mise en avant | Pastille de promotion et compteur du panier. |
| Couleur du texte, Couleur des bordures | Texte courant et traits fins des cartes. |
| Fond de page, Fond des cartes, Fond du pied de page | Fonds du site. Le dernier ne sert qu'au pied de page sombre. |
| Arrondis | Carrés, Petits, Par défaut ou Grands. |
| Ombre des cartes | Aucune, Douce ou Marquée. |
| Police du texte, Police des titres | Polices déjà présentes sur l'appareil du visiteur. Rien n'est téléchargé chez un tiers. |
Laissez une couleur vide pour garder la valeur d'origine.
Onglet Référencement
| Réglage | Rôle |
|---|---|
| Balises de référencement | Oui : le template écrit les balises robots, canonical et de partage (Open Graph). Choisissez Non si une extension de référencement s'en charge. |
| Données structurées (JSON-LD) | Oui : le template décrit votre site aux moteurs de recherche (organisation, fil d'Ariane, listes, articles). |
| Nom de l'organisation | Nom de votre entreprise. Vide : le nom du site. |
| Profils sociaux (sameAs) | Adresses de vos pages sur les réseaux sociaux, une par ligne. |
| Image de partage par défaut | Image montrée quand une page est partagée et n'a pas d'image. |
Positions de modules
Le template propose 24 positions. Vous les choisissez dans Contenus > Modules du site, champ Position.
| Position | Emplacement |
|---|---|
| banner | Bandeau d'annonce tout en haut du site. |
| topbar-left, topbar-right | Barre fine au-dessus de l'en-tête (liens utiles, téléphone). |
| header-search | Recherche de l'en-tête. Vide : le champ de recherche du template. |
| header-actions | À côté du lien Compte : module HikaShop Cart Module, sélecteur de langue. |
| header-menu | Menu principal (disposition megamenu). |
| drawer | Bas du menu mobile. |
| wrapper-top, wrapper-bottom | Bandes pleine largeur avant et après le contenu. |
| breadcrumbs | Fil d'Ariane. |
| home | Page d'accueil, sous le contenu. |
| shop-sidebar | Colonne de gauche de la boutique (catégories, filtres). |
| sidebar | Colonne de droite des autres pages. |
| product-reassurance, product-footer | Fiche produit : sous le bouton d'achat et en bas de page. |
| cart-footer | Sous le panier et la commande. |
| footer-before, footer-1, footer-2, footer-3, footer-after | Pied de page : bande haute, trois colonnes, barre basse (liens légaux). |
| error-404, error-403 | Pages d'erreur. |
| debug | Réservée à Joomla. |
Pour un module de menu, trois dispositions existent dans l'onglet Avancé du module : megamenu (menu principal), inline (liens sur une ligne, pour la barre du haut et le pied de page) et drawer (menu mobile, utilisé automatiquement).
Cas d'usage
Mettre en avant une offre de livraison
- Ouvrez Contenus > Modules du site, cliquez sur Nouveau, puis sur Personnalisé.
- Écrivez votre message, par exemple « Livraison offerte dès 60 € ».
- Choisissez la position banner et enregistrez.
Le message s'affiche dans un bandeau en haut de toutes les pages.
Présenter la fiche produit qui vous convient
- Ouvrez le style du template, onglet Boutique et accueil.
- Choisissez une Disposition de la fiche produit. Boîte d'achat toujours visible garde le prix et le bouton à l'écran pendant la lecture.
- Enregistrez, puis ouvrez une fiche produit.
Quand le client ajoute un produit, une confirmation apparaît et le compteur du panier se met à jour.
Composer votre boutique
- Publiez un module HikaShop Content Module réglé sur les catégories, en position shop-sidebar.
- Dans le style du template, gardez Colonne latérale de la boutique sur À gauche.
- Choisissez 3 ou 4 Produits par ligne.
Sur mobile, la colonne se replie. Un bouton Filtres l'ouvre en filtres push.
Suivre le parcours d'achat
Le panier, la commande et la confirmation gardent le même habillage que le reste du site.
L'ordre des étapes se règle dans la configuration de HikaShop, dans la partie consacrée à la commande (Checkout). Le template s'adapte à un tunnel en une ou plusieurs étapes.
Offrir un espace client clair
Le client retrouve ses commandes et ses adresses dans son compte.
La page de connexion propose aussi la création de compte.
Naviguer sur mobile
Avec Navigation mobile sur Barre du bas, quatre boutons restent en bas de l'écran : Accueil, Menu, Nouveautés, Contact.
Le bouton Menu ouvre votre menu principal dans un menu push.
Publier un blog
Créez un élément de menu de type Articles > Blog d'une catégorie. Les articles s'affichent en cartes, la page d'un article reste sobre et lisible.
Autres pages
La recherche de Joomla et la page de contact reprennent le même habillage.
Questions fréquentes
Le template fonctionne-t-il sans HikaShop ? Oui. Les pages de contenu, le blog, la recherche, le contact et les comptes fonctionnent. Les éléments de boutique n'apparaissent pas.
Puis-je garder mes modules actuels ? Oui. Changez seulement leur position pour une position du template.
Les textes de la boutique sont en anglais. Pourquoi ? Ces textes viennent de HikaShop. Installez sa traduction française : Composants > HikaShop > Configuration, onglet Langues.
Puis-je changer les couleurs sans toucher au code ? Oui, dans l'onglet Couleurs et polices. Une seule couleur de marque suffit : les nuances sont calculées.
Puis-je ajouter mon propre CSS ?
Oui. Créez le fichier media/templates/site/websource/css/user.css. Il est chargé en dernier. Le template ne livre pas ce fichier : une mise à jour ne le remplace pas.
Le template charge-t-il des polices ou des scripts externes ? Non. Tout est servi par votre site.
Puis-je créer un template enfant ? Oui. Dans Système > Templates de site, ouvrez Websource et cliquez sur Créer un template enfant.
Dépannage
Le menu principal n'apparaît pas. Vérifiez que votre module de menu est publié en position header-menu et assigné à toutes les pages.
Le menu s'affiche en liste simple. Dans le module de menu, onglet Avancé, choisissez la disposition megamenu.
Le compteur du panier ne bouge pas. Publiez le module HikaShop Cart Module en position header-actions avec la disposition websource, ou retirez tout module panier de cette position : le template affiche alors son propre lien avec compteur.
La colonne de la boutique est vide. Publiez au moins un module en position shop-sidebar. Sans module, la colonne disparaît.
Le bandeau de l'accueil n'apparaît pas. Renseignez Bloc de bienvenue : titre et gardez Sections automatiques de l'accueil sur Oui.
Mes couleurs ne changent pas. Ouvrez Système, cliquez sur Vider le cache dans le bloc Maintenance, puis rechargez la page.
Une page affiche un message d'erreur. Ouvrez Système > Informations système et vérifiez la version de PHP (8.1 ou plus). Si le problème reste, repassez un instant sur le template Cassiopeia pour vérifier qu'il vient bien du template.
Désinstallation
- Ouvrez Système > Styles de site et choisissez un autre style par défaut, par exemple Cassiopeia - Default.
- Ouvrez Système, puis Extensions dans le bloc Gestion.
- Cherchez websource, cochez la ligne et cliquez sur Désinstaller.
Vos articles, vos produits, vos commandes et vos modules sont conservés. Seuls les réglages du template sont supprimés.