Installation du Thème Prestashop 1.7 Pour Swank

Merci d’avoir acheté le thème Swank Prestashop pour la version 1.7.

LISEZ S’IL VOUS PLAÎT:

Videz votre cache! ( Paramètres avancés > Performances)

Il est recommandé de désactiver toutes les fonctions de mise en cache et de minimisation jusqu’à ce que vous ayez fini de travailler sur votre site. Si vous le maintenez … videz souvent votre cache pour voir les mises à jour que vous effectuez.

Veuillez noter que ce thème sera automatiquement configuré avec les mêmes paramètres que notre démo. Bien sûr, sans nos images et produits de démonstration … mais avec les produits de démonstration Prestashop.

Alors ne vous inquiétez pas si le curseur de la page d’accueil ne ressemble pas à notre démo. Suivez les instructions et ça ira!

Suivez nos étapes et ça ira. Et contactez-nous si vous avez des questions.


Installer votre template

Pour installer le modèle à l’aide de votre administrateur, procédez comme suit:

  1. connectez-vous à votre administrateur
  2. Allez à “Apparence> Thème et logo”
  3. En haut à droite de la page, cliquez sur “ajouter un nouveau thème”.
  4. Cliquez sur “Ajouter un fichier” sous “importer de votre ordinateur”
  5. Recherchez le fichier zip téléchargé que vous avez acheté.
  6. Cliquez sur Enregistrer
  7. Maintenant, vous verrez le thème énuméré ci-dessous, survolez le thème que vous souhaitez utiliser pour votre boutique et cliquez sur “utiliser ce thème”.

Si vous avez acheté via Prestashop Addons, votre thème sera automatiquement installé si votre boutique est connectée à votre compte Addons.


Comme je l’ai mentionné ci-dessus, vous devez vider votre cache après avoir apporté des modifications à votre site, comme pour l’installation du modèle: ( Paramètres avancés > Performances)

Cliquez sur le bouton “vider le cache” en haut à droite de la page.

Si vous faites défiler l’écran vers le bas, vous verrez d’autres options telles que la compression.

Lisez cette page pour savoir comment contrôler le cache et minimiser:
http://doc.prestashop.com/display/PS17/Performance


Tailles d’image

Dans votre administrateur, allez à Apparence> Images

Ici, vous verrez une liste de tous les types de taille d’image.

Lors de l’installation du thème, la taille de l’image sera configurée. Mais ils seront configurés comme carrés et doivent être basculés vers la taille de l’image de votre produit.

  • cart_default: 125px by 125px – Voici la petite image du produit que les clients voient dans le panier.
  • small_default: 350px by 350px – Ceci est utilisé pour toutes les petites images de produits, marques, catégories, fournisseurs
  • medium_default: 550px by 550px – Ceci est utilisé pour les catégories de produits sur la page de catégorie, les fournisseurs et les marques
  • home_default: 550px by 550px – Ceci est utilisé sur les pages du produit sur la page d’accueil. Vous pouvez en faire la même taille que le paramètre medium_default, sauf si vous souhaitez que cette section soit plus petite ou plus grande.
  • large_default: 800px by 800px – Ceci est utilisé pour les images de produit sur la page du produit, ainsi que pour les images des fournisseurs et des marques. Vous voudrez que cette image soit beaucoup plus grande que le support.
  • category_default: 1400px by 550px – C’est la taille de l’image de la catégorie. Ceci est configuré pour être rectangulaire, vous voudrez donc créer votre image de catégorie si vous en envoyez une à cette taille. Si vous souhaitez une taille différente, modifiez également la taille de l’image que vous avez téléchargée et modifiez-la dans la section images prestashop.
  • stores_default: 170px by 115px – C’est la taille de l’image pour la page de magasin. Si vous avez des emplacements physiques, vous voudrez avoir une page ici et télécharger des images. Vous pouvez agrandir ces images ici.

Vous pouvez avoir des images de produits avec différentes tailles. Toutes vos images resteront de la même taille car Prestashop les recadre. Mais vous pouvez les régler sur la hauteur ou la largeur automatique.

Faites défiler la liste jusqu’à ce que “Générer les images en se basant sur un côté de l’image source” s’affiche. Ici, vous pouvez générer la taille en fonction de la hauteur ou de la largeur.

Après toute modification, assurez-vous de faire défiler la page et de générer des images. Si votre serveur arrive à expiration, vous pouvez tout d’abord régénérer par catégorie, puis par produit, etc.

 


Ajout de votre logo

Pour ajouter votre logo à Prestashop 1.7, dans votre administrateur

  1. aller à “Apparence > Thème et logo

Sur cette page, vous ajoutez votre logo. Assurez-vous que la largeur de votre logo ne dépasse pas 500 pixels de large. Il n’a pas besoin d’être plus grand que ça. Vous voudrez peut-être utiliser un logo différent pour les courriels et les factures. Quelque chose qui imprimera bien.

Vous téléchargez également des favicons dans cette section.


Changing the theme color

Lorsque vous installez le thème, un configurateur de couleur de thème sera également installé. Cela vous permet de contrôler le jeu de couleurs de votre site Web.
Dans votre admin, allez dans “Modules >Module Manager” puis cliquez sur “modules installés”.

  • Faites défiler jusqu’à voir “eShopalot Configurator”
  • Cliquez sur “Activer” si ce n’est déjà fait. Si déjà activé, cliquez sur “Configurer”
  • À côté de ” Show Theme configurator” Cliquez “yes”. Cela devrait déjà être réglé sur oui.
  • Allez maintenant dans votre magasin (www.???.com) et vous verrez l’onglet Changeur de couleurs ouvert.
  • Ceci est utilisé comme guide afin que vous puissiez voir à quoi ressemblera votre choix de couleur. Faites votre choix de couleur ici.
  • Maintenant, dans la configuration du module dans votre administrateur, vous ajoutez ces numéros de couleur ici.
  • Lorsque vous avez terminé d’ajouter vos couleurs dans le module via l’administrateur, désactivez l’option “show theme configurator”. Cela désactivera la sélection des couleurs sur le devant de votre site Web.
  • Maintenant, cliquez sur “Enregistrer”

Theme color changer configuration Prestashop 1.7

Maintenant, allez dans votre boutique Prestashop et cliquez sur Actualiser dans votre navigateur. Si vous avez activé le cache dans prestashop, vous devez d’abord le vider.

 


Configurer le carrousel de parallaxe de la page d’accueil

Par défaut, Prestashop désactive le curseur sur le mobile. Si vous voulez que le curseur apparaisse sur les vues mobiles, suivez ces instructions

Activer sur mobile

  • Cliquez sur «modules> modules et services» dans le menu de gauche
  • Faites défiler jusqu’à “Carrousel”
  • À côté de “configurer”, cliquez sur la flèche vers le bas.
  • Cliquez ensuite sur “activer mobile”.
  • Maintenant, vous verrez le curseur sur mobile

Make images

Créez plusieurs images en utilisant une taille de 1700px large par 1153px haut. Gardez toutes vos images de curseur de la même taille!

Dans notre démo, la hauteur est de 1700px de large sur 1153px de hauteur, mais vous pouvez augmenter cette taille mais assurez-vous que le rapport est identique.

Lorsque vous avez créé vos images à la taille correcte, suivez ces instructions:

  • Cliquez sur “modules>Module Manager” dans le menu de gauche
  • Rechercher “Carrousel”.
  • Cliquez sur “configurer”.
  • Vitesse: 5000 (garder la valeur par défaut)
  • Pause & répéter que vous pouvez ignorer

Ajouter une image au carrousel

  • Cliquez sur le cercle plus à droite de la page. Juste sous le bouton “enregistrer”
  • Sélectionnez l’image de votre disque dur
  • Titre: assurez-vous de ne pas ajouter trop de texte.
  • URL cible: ceci est le lien pour l’image
  • Légende: cela ne sera pas affiché, vous pouvez ignorer cette section
  • Description: assurez-vous de ne pas ajouter trop de texte. Un petit texte de présentation sera bien dans ce domaine
  • Si vous avez plusieurs langues, vous devrez ajouter du texte pour chaque langue dans un bloc d’image.
  • Cliquez ensuite sur “enregistrer”.

Ajouter une vidéo au contenu

IMPORTANT

  • Aller aux Paramètres de la boutique > Paramètres généraux
  • Et assurez-vous que “Autoriser les iframes dans les champs HTML” est défini sur oui.
  • Ensuite, allez dans n’importe quelle page ou produit où vous voulez que la vidéo soit vue.

Ajout d’une vidéo Vimeo ou YouTube

  • Trouvez une vidéo sur vimeo ou youtube
  • Dans une page ou un produit, cliquez sur l’icône de la vidéo
  • Une popup apparaitra
  • Source: lien vidéo Youtube ou vimeo
  • Source alternative: source vidéo alternative – Laissez vide si vous utilisez vimeo ou youtube
  • Publier:Ceci est l’image que vous verrez avant de lire la vidéo. Si vous utilisez youtube ou vimeo, cela sera défini ici. Vous pouvez donc laisser ce champ vide.
  • Dimensions: Définissez la taille de la vidéo. Vous devez seulement ajouter la largeur. Dans le thème, il définira la hauteur automatiquement.
  • Vous pouvez également ajouter une vidéo aux catégories, aux produits et aux pages du système de gestion de contenu.


Ajouter les produits en vedette à la page d’accueil

Par défaut, le module Produits en vedette est transplanté sur la page d’accueil et placé dans un carrousel. Vous pouvez ajouter des produits à cela en sélectionnant “maison” comme l’une des catégories lors de la fabrication du produit.

Créer des bannières

Contrairement à Prestashop 1.6, le module bannière interne de Prestashop 1.7 n’autorise qu’une bannière.

Vous pouvez accrocher le module de bannière à l’une des colonnes ou le laisser tel quel, par défaut, sur la page d’accueil.

Puis suivez ces instructions:

  • Cliquez sur “modules>Module Manager” dans le menu de gauche
  • Rechercher “Bannière”.
  • Cliquez sur “configurer” puis vous ajoutez vos informations
    • Image de la bannière: Télécharger une image de votre disque dur
    • Lien de la bannière: l’URL vers laquelle la bannière sera liée
    • Description pour la bannière: Add a description of your banner.

Mise en place de colonnes

Vous pouvez configurer vos pages pour avoir 1 ou 3 colonnes. Vous pouvez définir 3 colonnes mais je ne le recommande pas car cela ne sera pas très joli. 1 ou 2 est le meilleur.

Notre démo a 1 colonne sur toutes les pages sauf pour la page de liste de produits de catégorie. Vous pouvez changer cela en 1 colonne facilement.

  • Go under ” Apparence > Thème et logo.
  • Faites défiler l’écran jusqu’en bas jusqu’à ce que vous voyez à droite “Choisir la mise en page” et cliquez sur ce bouton.
  • Maintenant vous aurez une liste de toutes les pages où vous pouvez changer le nombre de colonnes.
  • Par exemple, si vous souhaitez modifier la page de catégorie en 1 colonne, recherchez “category”, puis sélectionnez “Full Width – No side columns, ideal for distraction-free pages such as product pages”.
  • Puis enregistrez en bas

Ajouter des icônes de médias sociaux

  • Cliquez sur “modules>Module Manager” dans le menu de gauche
  • Recherchez “Boutons de partage sur réseaux sociaux “.
  • Cliquez sur “configurer”
  • Ajoutez vos liens de médias sociaux et enregistrez.

Configurer le menu du haut

Si vous n’avez pas ajouté de catégories, faites-le maintenant. Vous pouvez ensuite connecter vos produits à ces catégories. Vous pouvez également ajouter une hiérarchie de catégories.

Aller au Catalogue -> Catégories

Si vous avez déjà créé des catégories, ignorez cette étape.

Add your categories & more into the main menu

  • Cliquez sur “modules > Module Manager” dans le menu de gauche
  • Search for “Menu principal”
  • Puis cliquez sur configurer

Cela va de soi que faire ensuite. Vous avez des éléments à droite que vous devez sélectionner et mettre dans la zone de gauche. La boîte à gauche est ce qui va apparaître dans le menu principal du site.

En bas, vous pouvez ajouter des liens personnalisés.

N’oubliez pas de sauvegarder après avoir apporté des modifications.


Contact us

Si vous avez des questions ou si vous avez besoin d’aide pour configurer votre thème, contactez-nous. en cliquant ici

Translate »