Documentation
Thème Prestashop Universal
Documentation pour Prestashop 8
Installation, mise à jour, configuration et module Prestacrea Theme Editor : chaque étape est expliquée en détail.
Installation
Installation du thème
Rendez-vous dans le back-office de votre boutique et allez dans la section Apparence › Thème et logo puis cliquez sur Ajouter un thème en haut de la page.
Option 1 - Importer depuis l'ordinateur : sélectionnez le fichier ZIP du thème et cliquez sur Enregistrer.
Option 2 - Importer à partir du FTP : sélectionnez le fichier ZIP du thème que vous devez préalablement placer dans le dossier themes de votre boutique depuis votre client FTP et cliquez sur Enregistrer.
Une fois l'opération terminée, activez le thème en cliquant sur l'option Utiliser ce thème.
En cas d'erreur ou de page blanche : rafraîchissez la page jusqu'à ce que l'activation du thème soit effective. Il s'agit d'un souci de cache qui n'a pas d'incidence sur l'installation du thème ni sur son bon fonctionnement.
Allez dans la section Paramètres avancés › Performances et cliquez sur Vider le cache en haut de la page.
Mise à jour du thème
Avant de commencer, effectuez une sauvegarde complète de votre boutique (fichiers et base de données). Depuis une version 1.x du thème, la mise à jour n'est pas possible : une nouvelle installation est obligatoire.
Téléchargez le fichier ZIP de la nouvelle version du thème depuis votre compte client, sans le décompresser.
Allez dans la configuration du module Prestacrea Theme Editor, onglet Général, et cliquez sur le bouton Mise à jour du thème, en haut à droite du bloc Thèmes enfants.
Sélectionnez le fichier ZIP et cliquez sur Analyser. Le module vérifie que le fichier correspond bien à votre version de Prestashop et qu'il s'agit d'une version plus récente que celle installée. Il liste ensuite les fichiers du thème que vous avez modifiés et qui seront remplacés.
Cliquez sur Mettre à jour. Une sauvegarde de la version actuelle est créée automatiquement avant l'installation. Ne fermez pas la page pendant l'opération.
Allez dans la section Paramètres avancés › Performances et cliquez sur Vider le cache en haut de la page.
Tant que vous n'avez pas lancé une nouvelle mise à jour, le bouton Restaurer la version précédente de la même fenêtre vous permet de remettre les fichiers du thème et les réglages du module dans leur état précédent. Les modifications faites depuis seront perdues.
Mise à niveau majeure de Prestashop (exemple : passage de PS 8 à PS 9) : le module de mise à niveau de Prestashop désactive le module Prestacrea Theme Editor. Une fois la mise à niveau terminée, réactivez-le dans Modules › Gestionnaire de modules, puis installez la version du thème qui correspond à votre nouvelle version de Prestashop avec le bouton Mise à jour du thème.
Résolution des problèmes
| Problème | Solutions |
|---|---|
| Le thème provoque une erreur ou une page blanche |
|
| La colonne latérale du thème n'apparaît pas |
|
| L'un des modules n'apparaît pas ou n'est pas correctement placé |
|
| Le thème n'est pas semblable à la démonstration | Vérifiez que le thème est bien configuré comme indiqué dans la partie Configuration de la présente documentation. |
| Les images n'apparaissent plus suite à l'installation du thème ou ne sont pas de la bonne taille | Vérifiez que les images sont bien configurées comme indiqué dans la partie Configuration de la présente documentation et régénérez les images après vous être assuré qu'elles sont correctement configurées. |
| Les modifications appliquées dans le module Prestacrea Theme Editor sont sans effet |
|
| Les traductions du thème ne sont pas prises en compte | Videz le cache de Prestashop en cliquant sur Vider le cache dans la section Paramètres avancés › Performances de votre back-office. |
Configuration
Configuration générale
Vous pouvez régler le nombre de produits par page dans la section Paramètres de la boutique › Produits.
Configuration des images
Pour utiliser un logo PNG avec fond transparent, cochez Utiliser le PNG uniquement si l'image de base est au format PNG dans la section Apparence › Images avant de charger votre logo.
| Tailles recommandées | Largeur (en pixels) | Hauteur (en pixels) |
|---|---|---|
| Logo | 280 | 85 |
| Images du slider | 800 à 1920 (mobile : 540) | 440 à 620 (mobile : 440) |
| Images des blocs | 550 à 1920 | 350 à 620 |
Allez dans la section Apparence › Images et configurez les images comme indiqué ci-dessous :
| Nom | Largeur (en pixels) | Hauteur (en pixels) | Attribution |
|---|---|---|---|
cart_default | 100 | 100 | Produits |
small_default | 50 | 50 | Produits |
small_portrait_default | 50 | 75 | Produits |
medium_default | 100 | 100 | Produits |
medium_portrait_default | 100 | 150 | Produits |
home_default | 280 | 280 | Produits |
home_portrait_default | 360 | 540 | Produits |
large_default | 600 | 600 | Produits |
large_portrait_default | 600 | 900 | Produits |
category_default | 1140 | 300 | Catégories |
subcategory_default | 380 | 100 | Catégories |
stores_default | 180 | 120 | Magasins |
Configuration des modules
Allez dans la section Apparence › Positions et positionnez les modules comme indiqué ci-dessous :
| Position | Modules |
|---|---|
displayBanner | Prestacrea Theme Editor |
displayNav | Coordonnées Bloc devises Bloc sélecteur de langue |
displayNavFullWidth | Menu principal |
displayTop | Barre de recherche Lien de connexion client Panier |
displayTopColumndisplayAltColumndisplayHome | Prestacrea Theme Editor |
displayHomeContent | Produits phares Nouveaux produits Promotions Blocs de texte personnalisé Meilleures ventes |
displayWrapperTopdisplayWrapperBottom | Prestacrea Theme Editor |
displayHeaderCategorydisplayFooterCategory | Prestacrea Theme Editor |
displayLeftColumndisplayRightColumn | Navigation à facettes Prestacrea Theme Editor |
displayProductAdditionalInfo | Boutons de partage sur réseaux sociaux Commentaires produits / Avis clients |
displayProductListReviews | Commentaires produits / Avis clients |
displayReassuranceactionProductOutOfStock | Prestacrea Theme Editor |
displayFooterProduct | Prestacrea Theme Editor |
displayFooterProductContent | Commentaires produits / Avis clients Produits dans la même catégorie |
displayShoppingCartFooter | Prestacrea Theme Editor |
displayFooterBeforedisplayFooter | Prestacrea Theme Editor |
displayFooterAfter | Inscription à la newsletter Liens de suivi sur réseaux sociaux Prestacrea Theme Editor |
Lors de l'installation du thème certains modules sont automatiquement activés ou désactivés. Par ailleurs, le thème utilise les configurations par défaut des modules natifs excepté les configurations spécifiques suivantes :
| Produits phares | Afficher 10 produits |
|---|---|
| Bloc nouveaux produits | Afficher 10 produits |
| Bloc promotions | Afficher 10 produits |
| Bloc meilleures ventes | Afficher 10 produits |
| Produits dans la même catégorie | Afficher 10 produits / Afficher les prix |
Ces configurations peuvent varier en fonction du modèle préconfiguré activé sur votre boutique. Vous pouvez toutefois activer ou désactiver les modules que vous souhaitez, ajouter d'autres modules selon vos besoins et configurer l'ensemble des modules comme bon vous semble.
Utilisation du module Prestacrea Theme Editor
Rendez-vous dans votre back-office et allez dans la configuration du module Prestacrea Theme Editor.
Configuration générale
Cette section permet de configurer les paramètres généraux du thème.
| Désignation | Description |
|---|---|
| Thèmes enfants | Permet de créer des thèmes enfants. Il est recommandé d'en créer au moins un : vos personnalisations seront conservées lors des mises à jour du thème. La configuration actuelle (modules, formats d'images, mises en page) y est enregistrée. Activez ensuite le thème enfant dans Apparence › Thème et logo. Avant de changer de thème, enregistrez la configuration dans le thème enfant : elle est réappliquée à chacune de ses activations. |
| Mise à jour du thème | Permet d'installer une nouvelle version du thème (voir Mise à jour du thème). |
| Modèle préconfiguré | Permet d'activer l'un des 10 modèles préconfigurés sur votre boutique. Pensez à régénérer les miniatures après l'activation. |
| Formats d'images | Permet de choisir les formats d'images utilisés par le thème. Les formats de produits doivent avoir les mêmes proportions. |
| Sections | Permet de régler l'affichage des sections de la page d'accueil, de la fiche produit et de la page catégorie : largeur page ou fenêtre, affichage en liste ou en carrousel, couleur de fond. |
| Titre H1 de l'accueil | Titre principal de la page d'accueil, important pour le référencement. Laissez le champ vide pour ne pas afficher de titre. |
| Menu horizontal | Permet d'afficher ou de masquer les liens Promotions et Nouveautés du menu horizontal. |
| Sous-catégories | Permet d'afficher ou de masquer les sous-catégories dans les pages catégories et de régler le nombre de catégories affichées par ligne. |
| Modules de produits | Permet d'afficher ou de masquer le bouton d'ajout au panier dans les modules de produits (produits phares, nouveautés, promotions, meilleures ventes...) et de régler le nombre de produits affichés par ligne. |
| Listes de produits | Permet d'afficher ou de masquer le bouton d'ajout au panier sur les listes de produits et de régler le nombre de produits affichés par ligne. |
Configuration du slider
Cette section permet d'ajouter, éditer, désactiver ou supprimer des slides et de configurer les paramètres du slider.
Pour ajouter un nouveau slide, cliquez sur l'encart Ajouter un slide en haut de la page afin d'ouvrir le formulaire d'ajout. Pour éditer un slide existant, cliquez sur l'icône d'édition à côté du slide concerné afin d'ouvrir ce slide dans le formulaire d'édition.
Faites glisser les slides dans la liste pour modifier leur ordre.
Les slides de démonstration ne peuvent pas être supprimés, mais ils peuvent être désactivés.
| Désignation | Description |
|---|---|
| Ajouter un slide | Permet de définir l'image du slide (obligatoire) et une image mobile facultative, affichée sur les écrans jusqu'à 767px de large. Le texte alt (obligatoire) décrit l'image pour les moteurs de recherche et les lecteurs d'écran. Le titre, le sous-titre et la description forment la légende. Sans texte de bouton, le lien est placé sur toute la slide. |
| Affichage du slider | Permet d'afficher ou de masquer la pagination et les flèches de défilement. |
| Défilement du slider | Permet de régler le défilement automatique du slider ainsi que l'animation du slider et de la légende. |
Configuration des blocs
Cette section permet d'ajouter, éditer, désactiver ou supprimer des blocs. Les blocs permettent d'afficher des contenus personnalisés (images, textes...) à de nombreux emplacements de la boutique.
Pour ajouter un nouveau bloc, cliquez sur l'encart Ajouter un bloc en haut de la page afin d'ouvrir le formulaire d'ajout. Pour éditer un bloc existant, cliquez sur l'icône d'édition à côté du bloc concerné afin d'ouvrir ce bloc dans le formulaire d'édition.
Faites glisser les blocs dans la liste pour modifier leur ordre.
Les blocs de démonstration ne peuvent pas être supprimés, mais ils peuvent être désactivés.
| Désignation | Description |
|---|---|
| Emplacement | Permet de choisir où le bloc s'affiche, parmi 17 emplacements : en-tête, accueil, haut et bas de toutes les pages, pied de page, colonnes, listes de produits, fiche produit et panier. |
| Position | Sur la page d'accueil et en bas de la fiche produit, permet de placer le bloc avant, entre ou après les modules. Dans les listes de produits, permet d'insérer le bloc après le produit de votre choix, une seule fois ou de façon répétée. |
| Pages | Pour les emplacements des listes de produits, permet de limiter l'affichage du bloc à certaines catégories ou pages (nouveautés, promotions, meilleures ventes, recherche, marques, fournisseurs). Sans sélection, le bloc s'affiche sur toutes les listes de produits. |
| Affichage | Permet de régler la largeur du bloc, sa mise en page (texte sur l'image, image à gauche, image à droite, texte seul, icône et texte) et sa couleur de fond. |
| Contenu | Icône (mise en page « Icône et texte »), image et image mobile facultative, texte alt (obligatoire avec une image), surtitre, titre, description, texte du bouton et lien. Sans texte de bouton, le lien est placé sur tout le bloc. |
Configuration du footer
Cette section permet d'ajouter, éditer ou supprimer des liens du footer et de configurer l'image et le texte du footer.
Pour ajouter un nouveau lien, cliquez sur l'encart Ajouter un lien en haut de la page afin d'ouvrir le formulaire d'ajout. Pour éditer un lien existant, cliquez sur l'icône d'édition à côté du lien concerné afin d'ouvrir ce lien dans le formulaire d'édition.
Faites glisser les liens dans la liste pour modifier leur ordre.
Les liens de démonstration ne peuvent pas être supprimés.
| Désignation | Description |
|---|---|
| Ajouter un lien | Permet de choisir le bloc de liens (1, 2 ou 3) dans lequel le lien s'affiche et de renseigner son titre et son URL. Le titre de chacun des 3 blocs de liens peut être modifié. |
| Image du footer | Permet de charger une image pour le footer et de renseigner son texte alt, qui décrit l'image pour les moteurs de recherche et les lecteurs d'écran. |
| Texte du footer | Permet de renseigner le texte affiché sous l'image. Une adresse e-mail ou un numéro de téléphone seul sur une ligne devient un lien avec une icône : vous pouvez ainsi y indiquer vos coordonnées. |
Configuration du style
Cette section permet de configurer les paramètres graphiques du thème.
Les couleurs se saisissent au format hexadécimal, précédées du symbole # (exemple : #1a1a1a), ou se choisissent avec le sélecteur de couleur. Pour les conteneurs (header, colonnes de l'accueil, page), le bouton Transparent du sélecteur permet d'attribuer une transparence plutôt qu'une couleur.
Lorsque vous utilisez le sélecteur de couleur, cliquez sur Appliquer pour valider la couleur choisie.
| Désignation | Description |
|---|---|
| Fond du thème | Permet de régler la couleur de l'arrière-plan du thème, de charger et d'afficher une image d'arrière-plan et d'en régler la répétition et le défilement. |
| Couleurs principales | Permet de régler la couleur principale et la couleur secondaire du thème ainsi que les couleurs des polices. |
| Polices et aperçu de la police | Permet de régler les familles et les tailles de police (texte : 14 à 20 px, titres : 14 à 72 px, prix : 14 à 40 px) et d'en voir un aperçu immédiat. Les polices Google sont téléchargées sur votre serveur : aucune requête n'est envoyée à Google lors de la visite de votre boutique. |
| Header | Permet de régler la couleur de fond des éléments du header (conteneur et header nav), de régler la couleur de fond du menu (ordinateur et mobile) et de régler la largeur du menu. |
| Colonnes accueil | Permet de régler la couleur de fond des colonnes top et alt en page d'accueil et de régler la largeur du slider. |
| Page | Permet de régler la couleur de fond des éléments de la page (conteneur, page, blocs de base et blocs produits) et d'attribuer ou non une bordure aux blocs et images produits. Les blocs de base correspondent à l'ensemble des blocs de la boutique (blocs dans les colonnes gauche et droite, blocs de formulaire, sitemap...). Les blocs produits correspondent aux blocs produits des listings (produits phares, listes de produits dans les catégories, carousels dans les fiches produits...). |
| Footer | Permet de régler la couleur de fond des éléments du footer (avant-footer, footer, après-footer et copyright). |
Éditeur CSS
Cette section permet d'insérer du code CSS personnalisé dans le fichier _custom.scss du thème.
Vous pouvez utiliser librement la syntaxe CSS ou la syntaxe SASS. Il n'est par ailleurs pas utile d'ajouter des préfixes vendeur pour la compatibilité avec les différents navigateurs, la compilation du module incluant un autoprefixer. Vous pouvez également éditer directement le fichier _custom.scss dans le dossier assets › css › scss du thème avec l'éditeur de votre choix.
Le bouton Régénérer les fichiers CSS permet de compiler les fichiers SCSS et générer les fichiers CSS pour le modèle préconfiguré activé. Vous devez régénérer les fichiers CSS à chaque fois que vous effectuez une modification dans les fichiers SCSS (y compris depuis l'éditeur CSS) faute de quoi vos modifications ne seront pas visibles sur votre boutique.
Vos modifications effectuées via l'éditeur CSS ou directement dans le fichier _custom.scss sont conservées lors des mises à jour du thème. Pour modifier les templates du thème, créez un thème enfant.
En multiboutique, le code saisi dans l'éditeur CSS pour une boutique autre que la boutique principale est enregistré dans un fichier propre à cette boutique (par exemple _custom_2.scss pour la boutique n° 2).
Pour plus d'infos sur la syntaxe SASS : sass-lang.com/documentation
Licence et copyright
Licence
Ce thème est protégé par les lois en vigueur sur la propriété intellectuelle et le droit d'auteur.
L'achat de ce thème est assorti de l'octroi d'une licence d'utilisation non exclusive valable pour une seule boutique et pour toute la durée légale de protection par le droit d'auteur. Pour utiliser ce thème sur plusieurs boutiques, vous devez vous acquitter de l'achat d'autant de thèmes que de boutiques sur lesquelles vous souhaitez l'utiliser.
Un thème acheté = Une licence d'utilisation pour ce thème, valable pour une seule boutique
L'achat de ce thème n'implique aucune cession de droits de propriété intellectuelle. La licence octroyée autorise uniquement l'usage, la représentation et l'adaptation du thème. Toute reproduction, exploitation ou distribution, intégrale ou partielle, par quelque procédé que ce soit, sans l'accord préalable et écrit de Prestacrea, est strictement interdite et constitue un délit de contrefaçon. Il est interdit de redistribuer ce thème, modifié ou non, à titre gratuit ou payant, et par tout moyen que ce soit.
Copyright
Vous êtes libre de modifier, masquer ou supprimer la mention copyright intégrée dans le footer du thème.
Support technique et mises à jour
Support technique
Le support technique est assuré pour les problématiques liées à l'utilisation et au fonctionnement du thème mais en aucun cas pour sa personnalisation ou son adaptation à vos besoins.
Le support technique n'est pas assuré pour les problématiques liées à l'utilisation de services tiers (CMS Prestashop, modules tiers, hébergement...) et qui ne concernent pas directement le thème. En cas de difficultés avec l'utilisation du CMS Prestashop, veuillez consulter la documentation officielle : docs.prestashop-project.org
Le support technique est assuré uniquement pour un thème n'ayant subi aucune modification de votre part ou de celle d'un tiers, et dans le cadre d'une utilisation conforme aux spécifications indiquées dans les fiches techniques (compatibilité, langues...).
Dans certains cas nécessitant une intervention, Prestacrea peut avoir besoin d'un accès au back-office de votre boutique ainsi qu'à votre serveur FTP. Vous déclarez accepter de renoncer au support technique si vous refusez de fournir ces accès.
Mises à jour
Les mises à jour incluses avec l'achat de ce thème comprennent les corrections de bugs, les améliorations et optimisations, les ajouts de fonctionnalités ainsi que les mises à niveau vers les futures versions mineures de Prestashop (ex : passage de la version 8.1.0 à la version 8.2.0 de Prestashop). Elles ne comprennent pas les mises à niveau vers les futures versions majeures de Prestashop (ex : passage de la version 8.0 à la version 9.0 de Prestashop).
Prestacrea se réserve le droit de suspendre à tout moment et sans préavis la distribution de ce thème. Les mises à jour du thème ne seront dès lors plus assurées.
Changelog
- Complete redesign of the theme and of the Prestacrea Theme Editor module
- New installation required: no update possible from 1.x versions
- Added theme updates from the back office and child themes creation
- Added customizable sections, new block locations and layouts, quick add to cart and side cart
- Improved code, performances, SEO and accessibility
Versions précédentes
- Updated node modules
- Fixed error during theme installation
- Improved fonts management
- Improved design and code
- Fixed error with side products blocks when no products
- Fixed issue with product comments and shopping cart
- Added category additional information field content
- Added products blocks option in theme editor module
- Updated socialfollow module networks
- Improved design and code
- Improved multishop compatibility
- Fixed customization quantity display
- Added menu obfuscation
- Added new password policy in reset password
- Improved form input birthday
- Improved slider and custom blocks balance
- Updated socialfollow module networks
- Improved product images zoom
- Improved design and code
- Improved faceted search on small screen resolutions
- Fixed product page sticky add to cart issue
- Fixed checkboxes and radio buttons issue
- Added WEBP images support in theme editor module
- Added sticky add to cart on product page
- Fixed slider image display when there is only one slide
- Fixed email alerts module issues
- Fixed various HTML issues and improved code
- Removed outdated browser feature
- Improved SCSS files organization
- Improved performances
- Added slider mobile image upload
- Added new hook in the address step
- Removed Microdata in HTML code replaced by JSON-LD
- Removed widgets and added hooks on contact page
- Updated sitemap to dynamic URLs
- Improved shopping cart display
- Improved performances and accessibility
- Improved images loading time
- Fixed Google Fonts compatibility with GDPR
- Fixed sticky menu issue when scrolling short pages
- Fixed product attributes stock message issue after adding to cart
- Fixed syntax issue in GDPR module
- Fixed carrier prices not updated when a product is deleted from cart on order page
- Fixed display issues in theme editor module configuration
- Fixed shopping cart product availability color issue
- Fixed issue with multiple password fields
- Fixed slider inappropriate activation when there is only one slide
- Initial release
Besoin d'aide ?
Une question sur le thème ? Le support technique vous répond sous 24h, hors week-ends et jours fériés.