{"id":3284,"date":"2017-05-10T13:44:58","date_gmt":"2017-05-10T13:44:58","guid":{"rendered":"http:\/\/www.majory-cubizolles.fr\/blog\/?p=3284"},"modified":"2017-05-10T13:44:58","modified_gmt":"2017-05-10T13:44:58","slug":"modifier-larriere-plan-de-boutique-prestashop-1-7","status":"publish","type":"post","link":"https:\/\/www.majory-cubizolles.fr\/blog\/modifier-larriere-plan-de-boutique-prestashop-1-7\/","title":{"rendered":"Modifier l&rsquo;arri\u00e8re-plan de votre boutique Prestashop 1.7"},"content":{"rendered":"<p>Dans ce tutorial, nous allons voir comment modifier les couleurs de fond de votre boutique en ligne Prestashop 1.7. Tout se passe \u00e0 l&rsquo;int\u00e9rieur des codes.<\/p>\n<p><strong>1) Haut de page<\/strong><br \/>\n<strong> 2) Contenu<\/strong><br \/>\n<strong> 3) Bas de page<\/strong><\/p>\n<p><a href=\"http:\/\/www.majory-cubizolles.fr\/blog\/modifier-larriere-plan-de-boutique-prestashop-1-7\/bg_prestashop1-7\/\" rel=\"attachment wp-att-3285\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-3285\" src=\"http:\/\/www.majory-cubizolles.fr\/blog\/wp-content\/uploads\/2017\/05\/bg_prestashop1.7.jpg\" alt=\"Modifier l'arri\u00e8re-plan de votre boutique Prestashop 1.7\" width=\"900\" height=\"1551\" srcset=\"https:\/\/www.majory-cubizolles.fr\/blog\/wp-content\/uploads\/2017\/05\/bg_prestashop1.7.jpg 900w, https:\/\/www.majory-cubizolles.fr\/blog\/wp-content\/uploads\/2017\/05\/bg_prestashop1.7-174x300.jpg 174w, https:\/\/www.majory-cubizolles.fr\/blog\/wp-content\/uploads\/2017\/05\/bg_prestashop1.7-594x1024.jpg 594w, https:\/\/www.majory-cubizolles.fr\/blog\/wp-content\/uploads\/2017\/05\/bg_prestashop1.7-624x1075.jpg 624w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<p><!--more-->&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<\/p>\n<h2><strong><span style=\"color: #800000;\">A) Etape 1 : <\/span><\/strong><\/h2>\n<p><span style=\"color: #800000;\"><span style=\"color: #000000;\">Ouvrir le fichier themes.css dans \/themes\/classic\/assets\/css\/theme.css<\/span><\/span><\/p>\n<p><a href=\"http:\/\/www.majory-cubizolles.fr\/blog\/modifier-larriere-plan-de-boutique-prestashop-1-7\/bg_prestashop1-7-etape1\/\" rel=\"attachment wp-att-3286\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-3286\" src=\"http:\/\/www.majory-cubizolles.fr\/blog\/wp-content\/uploads\/2017\/05\/bg_prestashop1.7-etape1.jpg\" alt=\"Modifier l'arri\u00e8re-plan de votre boutique Prestashop 1.7\" width=\"900\" height=\"683\" srcset=\"https:\/\/www.majory-cubizolles.fr\/blog\/wp-content\/uploads\/2017\/05\/bg_prestashop1.7-etape1.jpg 900w, https:\/\/www.majory-cubizolles.fr\/blog\/wp-content\/uploads\/2017\/05\/bg_prestashop1.7-etape1-300x228.jpg 300w, https:\/\/www.majory-cubizolles.fr\/blog\/wp-content\/uploads\/2017\/05\/bg_prestashop1.7-etape1-624x474.jpg 624w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<h2><strong><span style=\"color: #800000;\">B) Etape 2 : <\/span><\/strong><\/h2>\n<p>Dans certaines versions de Prestashop, le fichier est compress\u00e9 c&rsquo;est \u00e0 dire que le code est sur une ligne. Vous pouvez utiliser ce site <a href=\"http:\/\/unminify.com\/\" target=\"_blank\">http:\/\/unminify.com\/<\/a> afin de \u00ab\u00a0d\u00e9compresser&rsquo; le code c&rsquo;est \u00e0 dire de mettre le code sur plusieurs lignes afin que celui-ci soit plus lisible.<\/p>\n<h2><strong><span style=\"color: #800000;\">C) Etape 3 :<\/span><\/strong><\/h2>\n<p>La couleur est d\u00e9sign\u00e9e par un\u00a0\u00a0code hexad\u00e9cimal (un di\u00e8se suivi de 6 digits). Les deux premiers digits repr\u00e9sentent la valeur de rouge, les deux suivants le vert et les deux derniers le bleu. En m\u00e9langeant dans des proportions diff\u00e9rentes ces trois couleurs de base, on peut obtenir toutes les couleurs. Par exemple le noir aura pour code hexad\u00e9cimal #000000 OU #000, le blanc\u00a0aura pour code hexad\u00e9cimal #ffffff ou #fff<\/p>\n<p>Si vous d\u00e9sirez obtenir votre\u00a0couleur hexad\u00e9cimal, vous pouvez consulter le site suivant:\u00a0<a href=\"http:\/\/www.color-hex.com\/\">http:\/\/www.color-hex.com\/<\/a><\/p>\n<p><span style=\"color: #000080;\"><strong>Modifier le haut de page<br \/>\n<\/strong><\/span>Pour modifier la couleur du haut de page, il faut chercher le code suivant ( en ce qui me concerne, il se situe vers la ligne 11191)<\/p>\n<pre class=\"lang:default decode:true\">#header {\r\n    background: #fff;\r\n    color: #acaaa6\r\n}\r\n<\/pre>\n<p>Dans mon exemple, j&rsquo;ai utilis\u00e9 un fond gris clair ayant pour code hexad\u00e9cimal #f7f7f7.\u00a0Je vais donc changer la couleur de \u00ab\u00a0background\u00a0\u00bb, ce qui va donner<\/p>\n<pre class=\"lang:default decode:true\">#header {\r\n    background: #f7f7f7;\r\n    color: #acaaa6\r\n}<\/pre>\n<p><span style=\"color: #000080;\"><b><br \/>\nContenu<br \/>\n<\/b><\/span>Pour modifier la couleur du contenu,\u00a0il faut chercher le code suivant ( en ce qui me concerne, il se situe vers la ligne 11360)<\/p>\n<pre class=\"lang:default decode:true\">#wrapper {\r\n    background: #ebebeb;\r\n    box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, .11);\r\n    padding-top: 1.5625rem\r\n}<\/pre>\n<p>Dans mon exemple, j&rsquo;ai utilis\u00e9 un fond bleu\u00a0ayant pour code hexad\u00e9cimal #8798bf .\u00a0Je vais donc changer la couleur de \u00ab\u00a0background\u00a0\u00bb, ce qui va donner<\/p>\n<pre class=\"lang:default decode:true\">#wrapper {\r\n    background: #8798bf;\r\n    box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, .11);\r\n    padding-top: 1.5625rem\r\n}<\/pre>\n<p><span style=\"color: #000080;\"><b><br \/>\nBas de page<br \/>\n<\/b><\/span>Pour modifier la couleur du bas\u00a0de page, il faut chercher le code suivant ( en ce qui me concerne, il se situe vers la ligne 11435)<\/p>\n<pre class=\"lang:default decode:true\">#footer {\r\n    padding-top: 2.5rem\r\n}\r\n<\/pre>\n<p>Dans mon exemple, j&rsquo;ai utilis\u00e9 un fond gris clair ayant pour code hexad\u00e9cimal #f7f7f7 .\u00a0Je vais donc ajouter \u00e0 mon code un bakcground<\/p>\n<pre class=\"lang:default decode:true\">#footer {\r\n    padding-top: 2.5rem;\r\n    background:#f7f7f7;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<h2><strong><span style=\"color: #800000;\">C) Etape 3 :<\/span><\/strong><\/h2>\n<p>Enregistrer votre fichier, si vous actualiser votre site, vous\u00a0visualiserez les modifications. Si ce n&rsquo;est pas le cas, c&rsquo;est peut-\u00eatre un souci de cache. Pour nettoyer votre cache, vous pouvez lire l&rsquo;article suivant :\u00a0<a href=\"http:\/\/www.majory-cubizolles.fr\/blog\/vider-cache-prestashop\/\" target=\"_blank\">Vider le cache dans Prestashop 1.6 et 1.7<\/a><\/p>\n<p>&nbsp;<\/p>\n<!-- Begin Yuzo --><div class='yuzo_related_post style-2'  data-version='5.12.88'><!-- without result --><div class='yuzo_clearfixed yuzo__title yuzo__title'><h2>Articles similaires<\/h2><\/div>\n\t\t\t\t\t\t<div class=\"relatedthumb yuzo-list  \" style=\"\"  >  \n\t\t\t\t\t\t  <a  href=\"https:\/\/www.majory-cubizolles.fr\/blog\/mettre-boutique-maintenance-acceder-a-boutique-prestashop-1-6-1-7\/\" class=\"image-list\" target='_blank' >\n\t\t\t\t\t\t  <div class=\"yuzo-img-wrap \" style=\"width: 185px;height:150px;\">\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t <div class=\"yuzo-img\" style=\"background:url('https:\/\/www.majory-cubizolles.fr\/blog\/wp-content\/uploads\/2017\/05\/mettresaboutiqueenmaintenance-400x249.jpg') 50% 50% no-repeat;width: 190px;height:150px;margin-bottom: 5px;background-size:  cover;  \"><\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t  <a  class=\"link-list yuzo__text--title\" href=\"https:\/\/www.majory-cubizolles.fr\/blog\/mettre-boutique-maintenance-acceder-a-boutique-prestashop-1-6-1-7\/\" style=\"font-size:15px;font-weight:bold;;line-height:23px;\"> Mettre sa boutique en maintenance et acc\u00e9der \u00e0 sa boutique \u00a0| Prestashop 1.6 et 1.7  <div class='yuzo_views_post yuzo_icon_views yuzo_icon_views__bottom' style='font-size:13px;'>views 5270<\/div><\/a>\n\t\t\t\t\t\t\t\t<span class=\"yuzo_text\" style=\"font-size:11px;\" >Lorsque vous d\u00e9sirez effectuer de grands changements sur\u00a0votre boutique, je vous conseille de mettre votre boutique en maintenance c'est \u00e0 dire de signaler \u00e0 vos clients que votre site \u00a0est\u00a0temporairement inaccessible. Vous seul aurez acc\u00e8s \u00e0 votre boutique pour voir les changements.\r\n\r\nSi vous travaillez en local, le mode maintenance est inutile dans la mesure o\u00f9 les internautes n'y ont pas acc\u00e8s...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"relatedthumb yuzo-list  \" style=\"\"  >  \n\t\t\t\t\t\t  <a  href=\"https:\/\/www.majory-cubizolles.fr\/blog\/gerer-paniers-abandonnes-astuce-prestashop\/\" class=\"image-list\" target='_blank' >\n\t\t\t\t\t\t  <div class=\"yuzo-img-wrap \" style=\"width: 185px;height:150px;\">\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t <div class=\"yuzo-img\" style=\"background:url('https:\/\/www.majory-cubizolles.fr\/blog\/wp-content\/uploads\/2016\/07\/wsi-imageoptim-gerer-l-abandon-de-panier-prestashop-400x249.jpg') 50% 50% no-repeat;width: 190px;height:150px;margin-bottom: 5px;background-size:  cover;  \"><\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t  <a  class=\"link-list yuzo__text--title\" href=\"https:\/\/www.majory-cubizolles.fr\/blog\/gerer-paniers-abandonnes-astuce-prestashop\/\" style=\"font-size:15px;font-weight:bold;;line-height:23px;\"> G\u00e9rer les paniers abandonn\u00e9s | Astuce Prestashop 1.6  <div class='yuzo_views_post yuzo_icon_views yuzo_icon_views__bottom' style='font-size:13px;'>views 5855<\/div><\/a>\n\t\t\t\t\t\t\t\t<span class=\"yuzo_text\" style=\"font-size:11px;\" >Qu'est ce qu'un panier abandonn\u00e9 ?\u00a0\r\nL\u2019abandon de panier, \u00a0c\u2019est lorsque l\u2019un de vos internautes ne finalise pas le processus de commande, apr\u00e8s avoir ajout\u00e9 un ou plusieurs produits dans le panier et cliqu\u00e9 sur\u00a0le bouton \"commander\".\r\n\r\nUn internaute peut d\u00e9cider d'arr\u00eater sa commande \u00e0 n'importe quelle \u00e9tape du processus: cr\u00e9ation de compte, choix de livraison, paiement....\r\n\r\nO\u00f9 consulter la li...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"relatedthumb yuzo-list  \" style=\"\"  >  \n\t\t\t\t\t\t  <a  href=\"https:\/\/www.majory-cubizolles.fr\/blog\/la-psychologie-des-consommateurs\/\" class=\"image-list\" target='_blank' >\n\t\t\t\t\t\t  <div class=\"yuzo-img-wrap \" style=\"width: 185px;height:150px;\">\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t <div class=\"yuzo-img\" style=\"background:url('https:\/\/www.majory-cubizolles.fr\/blog\/wp-content\/uploads\/2015\/01\/Capture-d\u2019e\u0301cran-2015-01-07-a\u0300-15.37.54-300x187.png') 50% 50% no-repeat;width: 190px;height:150px;margin-bottom: 5px;background-size:  cover;  \"><\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t  <a  class=\"link-list yuzo__text--title\" href=\"https:\/\/www.majory-cubizolles.fr\/blog\/la-psychologie-des-consommateurs\/\" style=\"font-size:15px;font-weight:bold;;line-height:23px;\"> La psychologie des consommateurs  <div class='yuzo_views_post yuzo_icon_views yuzo_icon_views__bottom' style='font-size:13px;'>views 254<\/div><\/a>\n\t\t\t\t\t\t\t\t<span class=\"yuzo_text\" style=\"font-size:11px;\" >Cette infographie met en avant la psychologie des consommateurs sur les sites de e-commerce. Elle permet de cerner les crit\u00e8res de confiance qui d\u00e9clencheront (ou pas) l'achat sur votre site aupr\u00e8s des internautes.\r\n\r\n------------\r\n\r\n1) La vitesse du site\r\nApr\u00e8s une attente de 3 secondes, 57% des utilisateurs abandonneront leur panier et 80% de ces personnes ne reviendront pas sur le site.\r\n\r\n\r\n\r\n...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"relatedthumb yuzo-list  \" style=\"\"  >  \n\t\t\t\t\t\t  <a  href=\"https:\/\/www.majory-cubizolles.fr\/blog\/transformer-les-tabs-de-la-page-daccueil-en-bloc-prestashop\/\" class=\"image-list\" target='_blank' >\n\t\t\t\t\t\t  <div class=\"yuzo-img-wrap \" style=\"width: 185px;height:150px;\">\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t <div class=\"yuzo-img\" style=\"background:url('https:\/\/www.majory-cubizolles.fr\/blog\/wp-content\/uploads\/2016\/07\/wsi-imageoptim-Capture-d\u2019\u00e9cran-2015-10-19-\u00e0-18.04.011-400x249.png') 50% 50% no-repeat;width: 190px;height:150px;margin-bottom: 5px;background-size:  cover;  \"><\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t  <a  class=\"link-list yuzo__text--title\" href=\"https:\/\/www.majory-cubizolles.fr\/blog\/transformer-les-tabs-de-la-page-daccueil-en-bloc-prestashop\/\" style=\"font-size:15px;font-weight:bold;;line-height:23px;\"> Transformer les tabs de la page d\u2019accueil en bloc |  Astuce Prestashop 1.6  <div class='yuzo_views_post yuzo_icon_views yuzo_icon_views__bottom' style='font-size:13px;'>views 5197<\/div><\/a>\n\t\t\t\t\t\t\t\t<span class=\"yuzo_text\" style=\"font-size:11px;\" >Ce tutorial va vous permettre\u00a0de\u00a0transformer les tabs \"Populaire\", \"Meilleurs ventes\", \"Nouveaux Produits\" et \"Promotions\" de la page d'accueil en bloc\r\n\r\nCette astuce Prestashop a \u00e9t\u00e9 test\u00e9e\u00a0sur la version 1.6.1\r\n\r\nAttention, cette astuce est conseill\u00e9e pour les personnes qui connaissent un minimum Prestashop, html et css.\r\n\r\n\r\nA)\u00a0\u00a0Bloc Populaire\r\n1) \u00a0Aller dans Modules > Positions.\r\n\r\n1.1 ) D...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"relatedthumb yuzo-list  \" style=\"\"  >  \n\t\t\t\t\t\t  <a  href=\"https:\/\/www.majory-cubizolles.fr\/blog\/65-statistiques-a-connaitre-comportement-dachat-e-consommateur\/\" class=\"image-list\" target='_blank' >\n\t\t\t\t\t\t  <div class=\"yuzo-img-wrap \" style=\"width: 185px;height:150px;\">\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t <div class=\"yuzo-img\" style=\"background:url('https:\/\/www.majory-cubizolles.fr\/blog\/wp-content\/uploads\/2016\/07\/wsi-imageoptim-comportement-achat-400x249.jpg') 50% 50% no-repeat;width: 190px;height:150px;margin-bottom: 5px;background-size:  cover;  \"><\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t  <a  class=\"link-list yuzo__text--title\" href=\"https:\/\/www.majory-cubizolles.fr\/blog\/65-statistiques-a-connaitre-comportement-dachat-e-consommateur\/\" style=\"font-size:15px;font-weight:bold;;line-height:23px;\"> Tout conna\u00eetre sur le comportement d\u2019achat du e-consommateur  <div class='yuzo_views_post yuzo_icon_views yuzo_icon_views__bottom' style='font-size:13px;'>views 1439<\/div><\/a>\n\t\t\t\t\t\t\t\t<span class=\"yuzo_text\" style=\"font-size:11px;\" >Les sites e-commerce en France connaissent une forte croissance entrainant ainsi une concurrence importante.\r\n\r\nIl est primordial de se d\u00e9marquer des autres et de r\u00e9pondre \u00a0aux crit\u00e8res de s\u00e9lection des internautes\r\n\r\nCette infographie\u00a0r\u00e9alis\u00e9e par Ecoreuil.fr\u00a0va vous aider \u00e0 connaitre mieux\u00a0le comportement d\u2019achat\u00a0du e-consommateur et d'am\u00e9liorer ainsi\u00a0le processus d'achat sur votre en site en-li...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n<\/div>  <!-- End Yuzo :) -->","protected":false},"excerpt":{"rendered":"<p>Dans ce tutorial, nous allons voir comment modifier les couleurs de fond de votre boutique en ligne Prestashop 1.7. Tout se passe \u00e0 l&rsquo;int\u00e9rieur des codes. 1) Haut de page 2) Contenu 3) Bas de page Articles similaires La part de march\u00e9 des 4 navigateurs dans 4 pays europ\u00e9ens views [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3288,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,12],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts\/3284"}],"collection":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/comments?post=3284"}],"version-history":[{"count":0,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts\/3284\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/media\/3288"}],"wp:attachment":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/media?parent=3284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/categories?post=3284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/tags?post=3284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}