Ajouter un accordéon dans une page cms | Astuce Prestashop 1.6

Grâce à ce tuto très simple, vous pourrez ajouter un accordéon dans votre page CMS

Astuce Prestashop 1.6

————————————————-

Solution 1 (ne fonctionne pas toujours)

1) Une fois sur la page cms, cliquez sur l’icône source code

Ajouter des tabs dans une page cms | Astuce Prestashop

2. Insérez le code suivant

3 Enregistrer et visualiser

Ajouter un accordéon dans une page cms | Astuce Prestashop

Solution 2

1) Une fois sur la page cms, cliquez sur l’icône source code

Capture d’écran 2016-04-05 à 14.02.35

2. Insérez le code suivant

3) Ajouter le code suivant  dans ../themes/lenomdevotretheme/js/global.js. Au début ou à la fin peu importe :

4) Ajouter le code suivant  dans ../themes/lenomdevotretheme/css/cms.css

5)  Résultat

Ajouter un accordéon dans une page cms | Astuce Prestashop

Attention: lorsque vous touchez les fichiers .tpl .css, si vous ne voyez pas de changements, n’oubliez pas de nettoyer votre cache Prestashop !

Articles similaires

Quelques astuces pour vous aider à créer un site e-commerce avec Prestashop
views 813
Créer son site e-commerce avec Prestashop n'est pas toujours facile. Je mettrais régulièrement des documents que vous pourrez télécharger afin de mieu...
Afficher les sous-catégories sur la page catégorie | Prestashop 1.7
views 5839
Vous l'avez peut-être constaté mais sur la version Prestashop 1.7, les sous-catégories ne s'affichent pas sur les pages catégories comme sur Prestasho...
Astuce : Centrer votre menu dans Prestashop 1.6
views 3285
Voici un petit tuto qui va vous permettre de centrer votre menu dans prestashop Cette astuce Prestashop est valable pour la version 1.6 Comm...
Insérer une page CMS sur votre formulaire de contact | PrestaShop 1.6
views 1750
Vous désirez insérer une page cms à l'intérieur de votre formulaire de contact de votre boutique PrestaShop Rien de plus simple avec ce petit tuto ...
Mettre à jour automatiquement le taux de change | Astuce Prestashop 1.6
views 1356
Vous désirez ouvrir votre boutique à l'international et indiquez le taux de change. Voici un petit tuto qui va vous montrer comment mettre à jour a...
Insérer une page cms sur une page produit | Astuce Prestashop 1.6
views 2571
Je vais vous montrer comment insérer une page cms sur une page produit. Astuce Prestashop 1.6 1) Si on désire que le contenu soit affiché sur ...
Le nouveau menu du back-office de Prestashop 1.7 – Partie 1
views 3568
La version R.C.0.1 de Prestasho 1.7 est sortie, et grande surprise son back-office a été traduit en français (enfin une grande partie) Par rapport ...
Gratuit : template facture et bon de livraison | Astuce Prestashop 1.6
views 19288
On ne va pas se le cacher, la mise en page des pdf des factures et bons de livraison, n'est vraiment pas top. Je vous propose donc une nouvelle mis...
Supprimer redirection Home après s’être connecté lors du tunnel d’achat en 5 ...
views 771
Après avoir installé le tunnel de commande en 5 étapes sur le site e-commerce d'un client, j'ai rencontré un problème lors de l'étape inscription. ...
Comment créer un compte employé/profils/permissions dans PrestaShop 1.6 & 1.7
views 2586
La page d'administration "Employés" permet de créer des comptes afin de se connecter au back-office de PrestaShop. La connexion aux back-office se fai...
  1. Adrian

    Hello, et merci pour ces méthodes !
    La première ne fonctionne apparemment pas, par contre la deuxième est parfaite !
    Attention dans le 4) tout à la fin :
    il y a un espace à f147, du coup le symbol ne fonctionne pas.
    Merci à vous 🙂

    }
    .accordion-toggle.minus-cercle:before {
    content: “\f147 “;
    }

  2. c_majory Auteur de l’article

    Bonjour,

    Non, en cas de mise à jour de prestashop, les fichiers qui se situent à l’intérieur du dossier thèmes ne sont pas impactés.

  3. Caroline

    Merci pour ce tuto simple et efficace. J’ai d’office testé la solution 2 qui marche très bien. Sauf que 🙂 j’ai 2 blocs (editeur de page d’accueil et contentbox) sur la même page et dans lesquels j’ai créé pour chacun un effet toggle. J’avais testé d’abord sur le second bloc. Mais depuis que j’ai mis le code dans le premier, le second ne fonctionne plus. Que faut-il faire pour pouvoir utiliser le script à plusieurs endroits de la page ? Merci d’avance

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *