[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":22,"$fb6-up6urcU2u7Xt5nX28bBT4Sej6YlLv5RDxxzZOK2U":103,"megamenu":141,"$fhOaI5AIlde9-QbZh9so7BhBkeb-Ao4ALuO_dYozKErw":197,"footer-db":211,"header-db":229},{"theme":4},{"colors":5,"typography":13,"ui":17,"defaultColorMode":21},{"primary":6,"secondary":7,"background":8,"foreground":9,"muted":10,"headerBg":11,"footerBg":12,"topBarBg":9,"topBarText":11},"#4F46E5","#0D9488","#F9FAFB","#111827","#6B7280","#ffffff","#020617",{"fontFamily":14,"fontUrl":15,"baseFontSize":16},"Inter, system-ui, sans-serif","https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700&display=swap","16px",{"borderRadius":18,"contentWidth":19,"shadow":20},"lg","7xl",true,"light",{"columns":23},[24,40,70,91],{"title":25,"links":26},"Plateforme",[27,31,34,37],{"label":28,"href":29,"external":30},"Offre Starter (2 500 €)","\u002Foffre-starter",false,{"label":32,"href":33,"external":30},"Devenir Ambassadeur","\u002Fambassadeur",{"label":35,"href":36,"external":30},"Modules PrestaShop","\u002Fmodules",{"label":38,"href":39,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":41,"links":42},"Le Synedre",[43,46,49,52,55,58,61,64,67],{"label":44,"href":45,"external":30},"L'histoire","\u002Fsynedre",{"label":47,"href":48,"external":30},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":50,"href":51,"external":30},"L'équipe","\u002Fequipe",{"label":53,"href":54,"external":30},"Le réacteur en direct","\u002Freacteur",{"label":56,"href":57,"external":30},"Le Drill (entraînement)","\u002Fdrill",{"label":59,"href":60,"external":30},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":62,"href":63,"external":30},"Les agents IA","\u002Fagents-ia",{"label":65,"href":66,"external":30},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":68,"href":69,"external":30},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":71,"links":72},"Ressources",[73,76,79,82,85,88],{"label":74,"href":75,"external":30},"Blog","\u002Fblog",{"label":77,"href":78,"external":30},"Academy","\u002Facademy",{"label":80,"href":81,"external":30},"Dictionnaire","\u002Fdictionnaire",{"label":83,"href":84,"external":30},"Expertise PrestaShop","\u002Fexpertise",{"label":86,"href":87,"external":30},"Flywheel","\u002Fflywheel",{"label":89,"href":90,"external":30},"Manifeste","\u002Fmanifeste",{"title":92,"links":93},"À propos",[94,97,100],{"label":95,"href":96,"external":30},"Alexandre Carette","\u002Fa-propos",{"label":98,"href":99,"external":30},"Dossier de presse","\u002Fpresse",{"label":101,"href":102,"external":30},"Contact","\u002Fcontact",{"title":104,"slug":105,"metaDescription":106,"category":107,"tags":108,"difficulty":114,"psVersions":115,"content":119,"faq":120,"tldr":136,"readingTime":137,"generatedAt":138,"publishDate":138,"relatedArticles":139,"sourceCategory":140},"Personnaliser le bouton Ajouter au panier dans PrestaShop","personnaliser-bouton-ajouter-panier-prestashop","Comment modifier le texte et le style du bouton Ajouter au panier dans PrestaShop : traductions, templates Smarty et bonnes pratiques pour 1.6, 1.7 et 8.x.","design",[109,110,111,112,113],"bouton ajouter au panier","personnalisation theme","traduction prestashop","smarty template","UX e-commerce","debutant",[116,117,118],"1.6","1.7","8.x","\u003Ch2>Pourquoi personnaliser le bouton « Ajouter au panier » ?\u003C\u002Fh2>\n\u003Cp>Le bouton d'ajout au panier est l'élément d'interface le plus critique d'une boutique e-commerce. Son libellé, sa couleur et son comportement influencent directement le taux de conversion. Remplacer le texte générique « Ajouter au panier » par une formulation plus engageante — « Commander maintenant », « Je le veux ! » ou « Réserver » — peut faire la différence sur certains segments de marché.\u003C\u002Fp>\n\u003Cp>Deux approches complémentaires permettent d'y parvenir : la modification via le système de traductions (sans toucher au code) et la personnalisation directe des templates du thème.\u003C\u002Fp>\n\u003Ch2>Méthode 1 : modifier le libellé via les traductions du back-office\u003C\u002Fh2>\n\u003Cp>C'est la méthode la plus simple et la plus propre. Elle ne nécessite aucune compétence en développement et résiste aux mises à jour du thème.\u003C\u002Fp>\n\u003Ch3>Sur PrestaShop 1.6\u003C\u002Fh3>\n\u003Col>\n\u003Cli>Accéder à **Localisation → Traductions** dans le back-office\u003C\u002Fli>\n\u003Cli>Sélectionner **Traduction du front office**\u003C\u002Fli>\n\u003Cli>Choisir le thème actif (par défaut `default-bootstrap`) et la langue souhaitée\u003C\u002Fli>\n\u003Cli>Cliquer sur **Modifier**\u003C\u002Fli>\n\u003Cli>Rechercher le bloc **Product** dans la liste des chaînes de traduction\u003C\u002Fli>\n\u003Cli>Localiser la chaîne `Add to cart` ou `Ajouter au panier`\u003C\u002Fli>\n\u003Cli>Remplacer par le texte souhaité et sauvegarder\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Sur PrestaShop 1.7 et 8.x\u003C\u002Fh3>\n\u003Cp>Le système de traductions a évolué. La procédure devient :\u003C\u002Fp>\n\u003Col>\n\u003Cli>Accéder à **International → Traductions**\u003C\u002Fli>\n\u003Cli>Dans la section **Modifier les traductions**, sélectionner :\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>   - Type : \u003Cstrong>Traductions du thème\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>   - Thème : votre thème actif (par défaut \u003Ccode>classic\u003C\u002Fcode>)\u003C\u002Fp>\n\u003Cp>   - Langue : Français\u003C\u002Fp>\n\u003Col>\n\u003Cli>Cliquer sur **Modifier**\u003C\u002Fli>\n\u003Cli>Naviguer dans l'arborescence jusqu'à **ShopTheme → Catalog** ou rechercher la chaîne `Add to cart`\u003C\u002Fli>\n\u003Cli>Remplacer le libellé et sauvegarder\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Sur PrestaShop 8.x, vous pouvez également passer par les fichiers de traduction du thème directement :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\n\u002Fthemes\u002Fvotre-theme\u002Ftranslations\u002Ffr-FR\u002FShopTheme.fr-FR.xlf\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Recherchez la balise correspondante :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-xml\">\n<trans-unit id=\"some-hash\" resname=\"Add to cart\">\n  <source>Add to cart<\u002Fsource>\n  <target>Commander maintenant<\u002Ftarget>\n<\u002Ftrans-unit>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cblockquote>\u003Cp>\u003Cstrong>Bonne pratique :\u003C\u002Fstrong> privilégiez toujours la modification via le back-office plutôt que l'édition directe des fichiers \u003Ccode>.xlf\u003C\u002Fcode>. Le back-office gère le cache de traduction automatiquement.\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch2>Méthode 2 : personnaliser le template du bouton\u003C\u002Fh2>\n\u003Cp>Pour aller plus loin — changer l'icône, ajouter une classe CSS, ou remplacer le bouton par un lien de type Quick View — il faut intervenir sur les fichiers de template.\u003C\u002Fp>\n\u003Ch3>Sur PrestaShop 1.6 (Smarty)\u003C\u002Fh3>\n\u003Cp>Le fichier à modifier est \u003Ccode>product-list.tpl\u003C\u002Fcode> dans votre thème :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\n\u002Fthemes\u002Fvotre-theme\u002Fproduct-list.tpl\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Pour transformer le lien produit en déclencheur de Quick View (aperçu rapide), ajoutez la classe \u003Ccode>quick-view\u003C\u002Fcode> aux éléments souhaités :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{* Avant *}\n<a class=\"product_img_link\" href=\"{$product.link}\" title=\"{$product.name}\">\n\n{* Après *}\n<a class=\"quick-view product_img_link\" href=\"{$product.link}\" title=\"{$product.name}\">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Cette classe \u003Ccode>quick-view\u003C\u002Fcode> est interceptée par le JavaScript natif de PrestaShop 1.6 pour afficher une modale avec les détails du produit au lieu de naviguer vers la fiche produit.\u003C\u002Fp>\n\u003Ch3>Sur PrestaShop 1.7 et 8.x (Twig)\u003C\u002Fh3>\n\u003Cp>Le template du bouton d'ajout au panier se trouve dans :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\n\u002Fthemes\u002Fclassic\u002Ftemplates\u002Fcatalog\u002F_partials\u002Fminiatures\u002Fproduct.tpl\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Le bouton est rendu via un sous-template dédié :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\n\u002Fthemes\u002Fclassic\u002Ftemplates\u002Fcatalog\u002F_partials\u002Fproduct-add-to-cart.tpl\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Pour personnaliser le bouton, créez un thème enfant et surchargez ce fichier :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n<button\n  class=\"btn btn-primary add-to-cart\"\n  data-button-action=\"add-to-cart\"\n  type=\"submit\"\n  {if !$product.add_to_cart_url}\n    disabled\n  {\u002Fif}\n>\n  <i class=\"material-icons shopping-cart\"><\u002Fi>\n  {l s='Commander maintenant' d='Shop.Theme.Actions'}\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cblockquote>\u003Cp>\u003Cstrong>Important :\u003C\u002Fstrong> conservez toujours l'attribut \u003Ccode>data-button-action=\"add-to-cart\"\u003C\u002Fcode> — c'est lui qui déclenche la logique JavaScript d'ajout au panier. Sans cet attribut, le bouton ne fonctionnera pas.\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch2>Personnaliser le style CSS du bouton\u003C\u002Fh2>\n\u003Cp>Au-delà du texte, le style visuel du bouton a un impact majeur sur la conversion. Voici un exemple de personnalisation CSS applicable à tous les thèmes :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* Bouton Ajouter au panier personnalisé *\u002F\n.btn.add-to-cart {\n  background-color: #e74c3c;\n  border: none;\n  border-radius: 25px;\n  padding: 12px 30px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 1px;\n  transition: all 0.3s ease;\n}\n\n.btn.add-to-cart:hover {\n  background-color: #c0392b;\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Placez ce CSS dans le fichier \u003Ccode>custom.css\u003C\u002Fcode> de votre thème pour qu'il résiste aux mises à jour.\u003C\u002Fp>\n\u003Ch2>Bonnes pratiques UX pour le bouton d'achat\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>**Contraste élevé :** le bouton doit se démarquer visuellement du reste de la page. Utilisez une couleur d'accent forte.\u003C\u002Fli>\n\u003Cli>**Libellé orienté action :** préférez « Commander » ou « Ajouter à mon panier » plutôt que des formulations passives.\u003C\u002Fli>\n\u003Cli>**Feedback visuel :** ajoutez une animation ou un changement de couleur au clic pour confirmer l'action à l'utilisateur.\u003C\u002Fli>\n\u003Cli>**Taille tactile :** sur mobile, le bouton doit mesurer au minimum 44×44 pixels (recommandation Apple\u002FGoogle).\u003C\u002Fli>\n\u003Cli>**Cohérence :** utilisez le même style sur les listes de produits et les fiches produit pour ne pas dérouter l'utilisateur.\u003C\u002Fli>\n\u003C\u002Ful>",[121,124,127,130,133],{"q":122,"a":123},"Comment changer le texte du bouton Ajouter au panier sans modifier le code ?","Rendez-vous dans le back-office, section International → Traductions (ou Localisation → Traductions sur PrestaShop 1.6). Sélectionnez les traductions du thème actif, recherchez la chaîne « Add to cart » et remplacez-la par le texte souhaité. Cette méthode est non invasive et résiste aux mises à jour du thème.",{"q":125,"a":126},"Le bouton Ajouter au panier ne fonctionne plus après ma modification, que faire ?","Vérifiez que l'attribut data-button-action=\"add-to-cart\" est toujours présent sur l'élément HTML du bouton. C'est cet attribut que le JavaScript de PrestaShop utilise pour intercepter le clic et déclencher l'ajout au panier en AJAX. Videz également le cache de PrestaShop (Paramètres avancés → Performances) et le cache de votre navigateur.",{"q":128,"a":129},"Comment remplacer le bouton Ajouter au panier par un bouton Quick View ?","Sur PrestaShop 1.6, ajoutez la classe CSS « quick-view » à l'élément concerné dans le fichier product-list.tpl de votre thème. Le JavaScript natif de PrestaShop intercepte cette classe pour afficher une modale de prévisualisation. Sur PrestaShop 1.7 et 8.x, le Quick View est géré différemment et nécessite l'activation du module correspondant dans le back-office.",{"q":131,"a":132},"Peut-on avoir un texte de bouton différent selon la catégorie de produits ?","Oui, mais cela nécessite une modification du template. Dans le fichier product-add-to-cart.tpl de votre thème enfant, vous pouvez conditionner le libellé en fonction de la catégorie du produit avec une condition Smarty : {if $product.id_category_default == 5}Réserver{else}Ajouter au panier{\u002Fif}. Cette approche est utile pour distinguer les produits physiques des services ou des réservations.",{"q":134,"a":135},"Comment personnaliser le bouton Ajouter au panier uniquement sur mobile ?","Utilisez les media queries CSS dans le fichier custom.css de votre thème. Par exemple, @media (max-width: 768px) { .btn.add-to-cart { width: 100%; font-size: 16px; padding: 15px; } } permet d'afficher un bouton pleine largeur sur les écrans mobiles, ce qui améliore l'ergonomie tactile et le taux de conversion sur smartphone.","Le texte du bouton « Ajouter au panier » se modifie sans code via les traductions du back-office PrestaShop. Pour une personnalisation avancée (style, Quick View, conditions par catégorie), il faut surcharger les templates du thème dans un thème enfant en conservant l'attribut data-button-action=\"add-to-cart\".",4,"2026-03-21T16:13:40.000Z",[],"PrestaShop pour les développeurs",{"items":142},[143,152,158,164,172,179,185,191],{"id":144,"type":145,"label":146,"href":84,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":30,"position":149,"children":150,"psChildren":151},41,"link",{"fr":147},"Expertise",null,0,[],[],{"id":153,"type":145,"label":154,"href":75,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":30,"position":155,"children":156,"psChildren":157},42,{"fr":74},1,[],[],{"id":159,"type":145,"label":160,"href":36,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":30,"position":161,"children":162,"psChildren":163},43,{"fr":35},2,[],[],{"id":165,"type":145,"label":166,"href":168,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":30,"position":169,"children":170,"psChildren":171},44,{"fr":167},"Outils IA","\u002Foutils-ia",3,[],[],{"id":173,"type":145,"label":174,"href":29,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":176,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":30,"position":137,"children":177,"psChildren":178},45,{"fr":175},"Offre Starter ✨",{"highlight":20},[],[],{"id":180,"type":145,"label":181,"href":78,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":30,"position":182,"children":183,"psChildren":184},46,{"fr":77},5,[],[],{"id":186,"type":145,"label":187,"href":96,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":30,"position":188,"children":189,"psChildren":190},47,{"fr":92},6,[],[],{"id":192,"type":145,"label":193,"href":102,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":30,"position":194,"children":195,"psChildren":196},48,{"fr":101},7,[],[],{"academy":198,"blog":199,"expertise":210},[],[200,204,207],{"title":201,"url":202,"score":155,"type":203},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":205,"url":206,"score":155,"type":203},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":208,"url":209,"score":155,"type":203},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[],{"footer":212},{"theme":213,"description":148,"hours":148,"logo":214,"contact":217,"social":218,"bottomBar":228},"dark",{"src":215,"href":216,"alt":95},"\u002Flogo-ac.svg","\u002F",{"email":148,"phone":148,"address":148,"cta":148},[219,222,225],{"platform":220,"href":221,"label":220},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":223,"href":224,"label":223},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":226,"href":227,"label":226},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":148},{"header":230},{"logo":231,"topBar":234,"contactEmail":237,"features":238,"navBar":148},{"src":215,"alt":232,"text":95,"href":216,"class":233},"Alexandre Carette — Architecte E-commerce Souverain","h-10 w-10",{"message":148,"showLanguages":30,"align":235,"languages":236},"left",[],"contact@alexandrecarette.fr",{"showSearch":30,"showWishlist":30,"showLogin":20,"showContact":30,"showCart":30,"stickyHeader":20,"headerLayout":239},"inline"]