Template « Freedom » : comment configurer votre template

Ce guide a pour but de vous aider à prendre en main votre nouveau template. Veuillez lire attentivement les instructions et suivre les étapes présentées

Commencer dès maintenant
Header Image
Étape 1
Importez le nouveau template
Étape 2
Apportez quelques modifications
Étape 3
Activez le template

Remarques importantes avant de commencer

Certaines modifications ont un impact immédiat sur votre boutique en ligne !
Nous vous recommandons de configurer le template aux heures où votre boutique est la moins fréquentée (la nuit, par exemple). La configuration prend environ 1 à 2 heures.

Avez-vous créé une copie de sauvegarde ?
Si vous utilisez déjà un autre template, créez une sauvegarde de celui-ci et du contenu de votre page d’accueil avant d’installer le nouveau :

  • Les options de personnalisation sont limitées. Veuillez noter que toute modification apportée au template, non mentionnée dans cette documentation, relève de votre propre responsabilité.
  • Assurez-vous que votre boutique répond à toutes les exigences indiquées pour chaque template du Templates store.
  • Le template présente six produits sur la page d’accueil. Vous pouvez les ajouter ou les supprimer sous Contenu/Catégories >> Vue des données techniques >> Produits.
  • Pour modifier les polices et les couleurs, vous pouvez utiliser le mode Création rapide de l’interface d’administration.
  • Vous pouvez repositionner des éléments de page (comme le champ de recherche) et en ajouter, mais nous vous le déconseillons, car nous ne pouvons pas vous garantir un positionnement exact.
  • L’icône du panier ne peut pas être modifiée.

Étape 1 : importez le nouveau template

  1. Dans le menu principal de l’interface d’administration, sélectionnez Style puis Mes templates.
    My themes
  2. Faites défiler la page jusqu’en bas et sélectionnez Importer un template.
    Import theme
  3. Veuillez noter que les étapes suivantes entraînent la suppression du contenu de votre page d’accueil.
    Il peut s’agir de texte, d’images ou d’autres éléments présents sur la page de départ en plus des listes de produits.

    Pour enregistrer une copie de sauvegarde de votre contenu, veuillez réaliser ces étapes avant de passer aux étapes 3 et 4.

  4. Cliquez sur le bouton Sélectionner un fichier, puis ouvrez le dossier dans lequel vous avez décompressé le fichier que nous vous avons envoyé. Sélectionnez ensuite le fichier du template, par exemple exemple.template.zip. Cochez la case Remplacer la page de départ au cours de l’importation..
    Select File
  5. Sélectionnez Importer.

  6. Si l’importation s’est correctement déroulée, le template est répertorié au bas de la page Mes templates.
    My themes page

Félicitations, votre template a bien été importé !

Savez-vous qu’il est possible de modifier le template avant de l’activer ?

Afin de disposer de plus de temps pour la mise en place, nous vous recommandons d’apporter des modifications avant d’activer le nouveau template. Il vous suffit de suivre attentivement les étapes suivantes pour garantir la bonne installation du template avant son activation dans votre boutique.


Étape 2 : apportez quelques modifications

Même si le template est prêt à l’emploi, certaines modifications sont nécessaires lors d’un changement de style, comme le remplacement des images de substitution du template par les vôtres.
Exchanging the themes placeholder images

Modifier l’en-tête

Pour remplacer le paramètre de substitution dans la zone d’en-tête, vous devez fournir une image. Nous vous recommandons d’utiliser une taille de 2 000 x 1 200 pixels.

Comment remplacer l’image d’en-tête

  1. Dans le menu principal de l’interface d’administration, sélectionnez Style puis Mes templates.
    My themes
  2. Recherchez le template que vous avez importé, puis sélectionnez Lancer la création avancée.
    Start advanced design
  3. Cliquez sur la zone de l’en-tête.
    Header area
  4. Sélectionnez Insérer le fichier.
    Insert file
  5. Sélectionnez Vos fichiers.
    Your files
  6. Si vous souhaitez télécharger un autre fichier, sélectionnez Télécharger les fichiers, puis téléchargez une image stockée sur votre ordinateur, sinon passez à l’étape suivante.
    Upload files
  7. Sélectionnez l’image d’en-tête que vous souhaitez utiliser. Veuillez tenir compte des tailles d’image prédéfinies (de préférence, 2 000 x 500 pixels).
    Select header image
  8. Sélectionnez OK.

  9. Enregistrez les modifications.
    Select Save

Votre nouvelle image d’en-tête est désormais sélectionnée.

Comment modifier le texte et le bouton présent sur l’image d’en-tête

  1. Dans le menu principal de l’interface d’administration, sélectionnez Style puis Mes templates.
    My themes
  2. Recherchez le template que vous avez importé, puis sélectionnez Lancer la création avancée.
    Start advanced design
  3. Dans l’aperçu, l’en-tête contient le bouton « View collection » (Voir la collection). Pour le modifier, placez le pointeur de la souris dessus, puis sélectionnez l’icône représentant un crayon. Si les paramètres de substitution ne sont pas visibles, suivez ces instructions.
    Select pencil icon
  4. Le libellé du bouton ne peut être modifié que dans le code source. Pour ce faire, cliquez sur l’icône Source à droite.
    Select the HTML icon
  5. Modifiez le libellé du bouton dans le code source.
    Edit HTML

Le bouton est conçu pour atteindre la liste des produits présentés sur la page d’accueil. Le lien du bouton ne doit donc pas être modifié, car cela changerait sa fonction.

  1. Si votre boutique est disponible en plusieurs langues, sélectionnez une autre langue et reprenez les étapes 4 à 6 ce pour chacune d’elles. Si aucun texte n’est affiché dans les autres langues, veuillez suivre ces instructions.
    Make language adjustments
  2. Sélectionnez Appliquer.
    Select apply
  3. Enregistrez les modifications.
    Save the changes

Comment modifier les couleurs de l’en-tête

Vous pouvez changer les couleurs du bouton, du texte et du panier présents dans la barre de navigation comme d’habitude en Mode de création avancée, à quelques exceptions près.

En raison des paramètres spécifiques du template, les éléments de navigation sont blancs en haut de la page. Lorsque vous faites défiler la page vers le bas ou accédez à une page précise, la couleur des éléments de navigation passe automatiquement au noir pour créer un contraste avec le fond blanc du template.

Les textes et boutons de navigation peuvent donc être modifiés à deux niveaux.

  1. Dans le menu principal de l’interface d’administration, sélectionnez Style puis Mes templates.
    My themes
  2. Recherchez le template que vous avez importé, puis sélectionnez Lancer la création avancée.
    Start advanced design
  3. Cliquez sur la zone de l’en-tête.
    Click on the header area
  4. Sélectionnez la couleur de votre choix pour Titre, Texte, Lien et Surligné. Cela a pour effet de modifier les éléments d’en-tête blancs dans la page de démarrage.
    Select your preferred colour
  5. Enregistrez les modifications.
    Save the changes
  6. Pour remplacer la couleur noire des éléments d’en-tête qui apparaissent lors d’un défilement vers le bas ou sur les pages de catégorie par une autre couleur, activez le pied de page. Si la sélection des zones de page n’est pas visible, cliquez tout simplement sur la zone présentant un fond gris à côté du template pour l’activer.
    Activate the footer
  7. Faites défiler vers le bas, puis sélectionnez la zone Pied de page.
    Select the footer
  8. Remplacez les couleurs des éléments Titre, Texte, Lien et Surligné par celles de votre choix.
    Change the colours
  9. Sélectionnez Enregistrer.
    Select save
  10. Désactivez le pied de page. Si la sélection des zones de page n’est pas visible, cliquez tout simplement sur la zone présentant un fond gris à côté du template pour l’activer.
    Deactivate the footer

Les couleurs de vos éléments d’en-tête sont désormais changées.

Modifier les images d’accroche

La page d’accueil de votre boutique présente trois images d’accroche qui apparaissent sous l’image d’en-tête. Vous devez remplacer les paramètres de substitution par les images d’accroche. Dans ce cas, nous vous recommandons d’utiliser une taille de 300 x 200 pixels.

Comment remplacer les images d’accroche

  1. Sélectionnez Contenu/Catégories puis Vue des données techniques.
    Select datasheet view
  2. Sélectionnez Général.
    Select general
  3. Les paramètres de substitution pour les images d’accroche se trouvent sous Description longue. Si les paramètres de substitution ne sont pas visibles, suivez ces instructions.
    Find placeholders for the teaser images
  4. Cliquez avec le bouton droit de la souris sur le paramètre de substitution à modifier, puis sélectionnez Image.
    Select image
  5. Sélectionnez Télécharger une image.
    Upload image
  6. Si vous souhaitez télécharger un autre fichier, sélectionnez Télécharger les fichiers, puis téléchargez une image stockée sur votre ordinateur, sinon passez à l’étape suivante.
    Upload files
  7. Sélectionnez l’image que vous souhaitez utiliser.
    Select an image
  8. Sélectionnez Appliquer.

  9. Si votre image est trop grande, vous pouvez saisir la largeur et la hauteur appropriées, mais nous vous recommandons de redimensionner correctement vos images avant de les télécharger. Pour éviter la déformation de l’image, le cadenas représenté dans l’icône doit être fermé. La taille recommandée pour les images d’accroche est de 300 x 200 pixels.
    Adjust images
  10. Sélectionnez OK.

  11. Vous pouvez à présent ajouter un lien à l’image. Pour ce faire, cliquez dessus avec le bouton droit de la souris, puis sélectionnez Modifier le lien. Sinon, passez à l’étape 15.
    Edit link
  12. Sélectionnez Pages.
    Select pages
  13. Sélectionnez la page de votre boutique vers laquelle le lien doit renvoyer.
    Select a page
  14. Sélectionnez Appliquer.

  15. Reprenez les étapes 4 à 14 pour toutes les images d’accroche à modifier.

  16. Si votre boutique est disponible en plusieurs langues, sélectionnez une autre langue et reprenez les étapes 3 à 15 ce pour chacune d’elles. Si aucun texte n’est affiché dans les autres langues, veuillez suivre ces instructions.
    Select another language
  17. Enregistrez les modifications.
    Save the changes

Étape 3 : activez le template

  1. Dans le menu principal de l’interface d’administration, sélectionnez Style puis Mes templates.
    My Themes
  2. Accédez au template que vous avez importé, puis sélectionnez Activer maintenant.
    Activate now

Votre nouveau template est désormais activé.


Annexe

Créer une copie de sauvegarde du template

Si vous utilisez un template dans votre boutique, veuillez créer une copie de sauvegarde de celui-ci avant d’installer le nouveau.

  1. Dans le menu principal de l’interface d’administration, sélectionnez Style puis Mes templates.
    My themes
  2. Créez une copie de sauvegarde du template en sélectionnant Créer une copie de sauvegarde.
    Create backup copy

Une copie de sauvegarde du template est désormais créée et disponible au bas de la page.

Créer une copie de sauvegarde du contenu de la page d’accueil

Si vous utilisez un template dans votre boutique, veuillez créer une copie de sauvegarde du contenu de votre page d’accueil, comme des images ou du texte.

  1. Pour créer une sauvegarde du contenu de la page d’accueil de votre boutique, accédez à l’interface d’administration, sélectionnez Contenu/Catégories dans le menu principal, puis Vue des données techniques.
    Datasheet view
  2. Sélectionnez Pages.
    Select Pages
  3. Au bas du tableau, attribuez un nom à la sauvegarde dans la colonne Nom, par exemple « Sauvegarde du contenu de la page d’accueil ».
    Enter a name for the backup
  4. Sélectionnez Enregistrer.

  5. Sélectionnez Général.
    Select General
  6. Copiez le contenu de la page d’accueil à conserver, par exemple du texte et des images présents dans le champ Description longue.
    Long description
  7. Sélectionnez Pages.
    Select Pages
  8. Dans le tableau, sélectionnez la page créée à l’étape 3.
    Select the page you created
  9. Sélectionnez Textes.
    Select Texts
  10. Collez le contenu que vous avez copié dans le champ correspondant, par exemple Description longue.
    Long description
  11. Enregistrez les modifications.
    Select Save
  12. Si vous souhaitez sauvegarder d’autres éléments de votre page d’accueil, sélectionnez Page d’accueil puis reprenez les étapes 5 à 11.

  13. Si votre boutique est disponible en plusieurs langues, sélectionnez une autre langue et reprenez les étapes 5 à 12 pour chaque langue. Si aucun texte n’est affiché dans les autres langues, veuillez suivre ces instructions.
    Select another language

Vous venez de créer une copie de sauvegarde du contenu de votre page d’accueil. Vous pouvez désormais importer votre template en remplaçant la page d’accueil.

Modifier la page de droit de retrait

Les pages produit de votre boutique comportent un lien intitulé « livraison » :
Delivery link
Si vous n’avez pas modifié les paramètres standard pour que ce lien pointe vers une autre page, celui-ci renvoie vers une page spéciale qui affiche séparément le contenu de votre page de droit de retrait. Cette page particulière peut s’avérer incompatible avec le nouveau template ; vous devez donc renvoyer directement vers la page de droit de retrait.

Comment renvoyer vers la page de droit de retrait

  1. Dans le menu principal, sélectionnez Produit, puis Paramètres produits.
    Product settings
  2. Sélectionnez Textes.
    Select texts
  3. Dans le champ de texte situé en haut, cliquez avec le bouton droit de la souris sur le mot « livraison », puis sélectionnez Modifier le lien.
    Edit link
  4. Sélectionnez la page de droit de retrait.
    Select the right of withdrawal page
  5. Sélectionnez Appliquer.

  6. Reprenez les étapes 3 à 6 pour chaque champ de texte contenant le lien « livraison ».

  7. Enregistrez les modifications.
    Save the changes
  8. Si votre boutique est disponible en plusieurs langues, sélectionnez une autre langue et reprenez les étapes 3 à 7 pour chaque langue.
    Select another language
  9. Sélectionnez Texte pour les prix HT.
    Select Notes texts for net prices
  10. Reprenez les étapes 3-8 pour tous les champs de texte contenant le lien « livraison ».