{"id":4430,"date":"2018-07-11T11:06:11","date_gmt":"2018-07-11T05:36:11","guid":{"rendered":"https:\/\/www.hiddentechies.com\/blog\/?p=4430"},"modified":"2020-10-09T18:52:40","modified_gmt":"2020-10-09T13:22:40","slug":"create-child-theme-prestashop-1-7-4","status":"publish","type":"post","link":"https:\/\/www.hiddentechies.com\/blog\/prestashop\/create-child-theme-prestashop-1-7-4\/","title":{"rendered":"How to create child theme in Prestashop 1.7.4"},"content":{"rendered":"<p>Prestashop released 1.7.4 version to provide complete new way to deal with theme customization. So, let\u2019s talk about one of most important child theme feature and how you can use it to customize themes more easily in brief.<\/p>\n<div style=\"display: block; float: left; width: 100%; padding: 30px 0; background: black; border-radius: 5px; margin: 0 0 25px 0;\">\n<p style=\"text-align: center;\"><a style=\"color: #fff; font-size: 28px; font-weight: 600;\" href=\"https:\/\/www.hiddentechies.com\/blog\/ecommerce-tips\/why-choose-premium-prestashop-themes\/\" target=\"_blank\" rel=\"noopener noreferrer\"> Why to Choose Our Premium Prestashop Themes <\/a><\/p>\n<\/div>\n<p class=\"ht-sub-heading\">What is child theme feature?<\/p>\n<p>A child theme is a theme that inherits the functionality and styling of another (parent) theme and edit the properties according to your needs.<\/p>\n<p>Child themes are the recommended way of updating an existing theme. This feature enables you to customize only the parts of the theme you want to alter, leaving everything else to be handled by the existing parent theme. If the parent theme gets upgraded the changes won\u2019t be overwritten.<\/p>\n<p class=\"ht-sub-heading\">What\u2019s the benefit?<\/p>\n<p>You might be wondering why a child theme feature is worth the trouble if you can just edit your theme directly. Of course, you could also apply each change manually on your theme. Which isn\u2019t convenient at all. Using a child theme actually comes with many advantages:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Before you create a child theme, you will need to make some preparations. First, it\u2019s very important that you create a backup of your site before you do anything else.<\/li>\n<li>You make sure that your parent theme must be placed in \/themes PrestaShop folder.<\/li>\n<li>Now create one new folder in same prestashop (\/themes) directory and it should be contain following files only.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre class=\"lang:default decode:true \">.\r\n\u251c\u2500\u2500 config\/\r\n\u2502 \u251c\u2500\u2500 theme.yml\r\n\u2514\u2500\u2500 preview.png<\/pre>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Once you created theme.yml file, you need to add following lines in your theme.yml file:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre class=\"lang:default decode:true \">parent: classic\r\nname: childtheme\r\ndisplay_name: My first child Theme\r\nversion: 1.0.0\r\nassets:\r\nuse_parent_assets: true<\/pre>\n<p>Where,<\/p>\n<p>1. Parent:<\/p>\n<ul>\n<li>Your parent theme name as mentioned in themes folder of prestashop directory.<\/li>\n<\/ul>\n<p>2. Use_parent_assets:<\/p>\n<ul>\n<li>true : if you want to use the CSS and JS files from the parent theme<\/li>\n<li>false : if you don&#8217;t want to use the CSS and JS files from the parent theme<\/li>\n<\/ul>\n<p>You can now use this theme in your back office and edit it as you wish.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4434\" src=\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/Parent-child-theme-prestashop-1.7.png\" alt=\"Parent-child-theme prestashop 1.7\" width=\"1366\" height=\"654\" srcset=\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/Parent-child-theme-prestashop-1.7.png 1366w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/Parent-child-theme-prestashop-1.7-300x144.png 300w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/Parent-child-theme-prestashop-1.7-768x368.png 768w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/Parent-child-theme-prestashop-1.7-1024x490.png 1024w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/Parent-child-theme-prestashop-1.7-676x324.png 676w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" \/><\/p>\n<p class=\"ht-sub-heading\">Overriding templates<\/p>\n<p>In the theme.yml config file, the child theme uses every template from the parent theme. There are two ways for extending templates from another theme:<\/p>\n<ol>\n<li>Override some parts of the template.<\/li>\n<li>Modifying the whole template structure.<\/li>\n<\/ol>\n<p>Before this you have to create category template file in child theme at the same prestashop directory:<\/p>\n<pre class=\"lang:default decode:true \">templates\/catalog\/listing\/category.tpl<\/pre>\n<p class=\"ht-sub-heading\">Override some parts of the template.<\/p>\n<p>Here, you have to extend the template which is you want to update in your parent theme and also you have to determine block that you need.<\/p>\n<p>To specify that the template comes from the parent theme, you have to add parent: keyword as shown in below example<\/p>\n<pre class=\"lang:default decode:true \">{extends file='parent:catalog\/listing\/category.tpl'}<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4437\" src=\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/Parent-child-theme-prestashop-1.7-1.png\" alt=\"Parent-child-theme-prestashop 1.7\" width=\"1366\" height=\"654\" srcset=\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/Parent-child-theme-prestashop-1.7-1.png 1366w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/Parent-child-theme-prestashop-1.7-1-300x144.png 300w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/Parent-child-theme-prestashop-1.7-1-768x368.png 768w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/Parent-child-theme-prestashop-1.7-1-1024x490.png 1024w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/Parent-child-theme-prestashop-1.7-1-676x324.png 676w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" \/><\/p>\n<p class=\"ht-sub-heading\">Modifying the whole template structure<\/p>\n<p>Here, you can do whatever you want in this template but most likely you will still want to extend the product-list template. If so, you don\u2019t have to copy that product-list template in your child theme, because prestashop will use the parent file.<\/p>\n<p>Just extend product-list in a normal way and just override the block you need. In below example, I have changed product_list_header block:<\/p>\n<pre class=\"lang:default decode:true \">{extends file='catalog\/listing\/product-list.tpl'}\r\n{block name='product_list_header'}\r\n&lt;div class=\"title\"&gt;{$listing.label}&lt;\/div&gt;\r\n{\/block}<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4439\" src=\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/Parent-child-theme_prestashop-1.7.png\" alt=\"Parent-child-theme_prestashop 1.7\" width=\"1366\" height=\"654\" srcset=\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/Parent-child-theme_prestashop-1.7.png 1366w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/Parent-child-theme_prestashop-1.7-300x144.png 300w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/Parent-child-theme_prestashop-1.7-768x368.png 768w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/Parent-child-theme_prestashop-1.7-1024x490.png 1024w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/Parent-child-theme_prestashop-1.7-676x324.png 676w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" \/><\/p>\n<p class=\"ht-sub-heading\">Advanced Customization:<\/p>\n<p>Here you can customize your theme using the Parent\/Child theme feature. By clicking on &#8220;Download theme&#8221;, the merchant will be able to get a zip of the current theme.<\/p>\n<p>1- Download your current theme<\/p>\n<p>2- Edit the child theme<\/p>\n<p>3- Upload the child theme<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4403\" src=\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/prestashop-1.7.4_Customization.png\" alt=\"prestashop 1.7.4_Customization\" width=\"1366\" height=\"654\" srcset=\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/prestashop-1.7.4_Customization.png 1366w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/prestashop-1.7.4_Customization-300x144.png 300w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/prestashop-1.7.4_Customization-768x368.png 768w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/prestashop-1.7.4_Customization-1024x490.png 1024w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/07\/prestashop-1.7.4_Customization-676x324.png 676w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" \/><\/p>\n<p>This is all about how to create child theme in prestashop 1.7.4 version. If you still have any doubts, feel free to ask in comments and we\u2019ll reply as soon as possible.<\/p>\n<div class=\"angwp_12010 _ning_cont _ning_hidden _ning_outer _align_center responsive\" data-size=\"custom\" data-bid=\"12010\" data-aid=\"0\" style=\"max-width:800px; width:100%;height:inherit;\"><div class=\"_ning_label _left\" style=\"\"><\/div><div class=\"_ning_inner\" style=\"\"><a href=\"https:\/\/www.hiddentechies.com\/blog?_dnlink=12010&t=1775812089\" class=\"strack_cli _ning_link\" target=\"_blank\">&nbsp;<\/a><div class=\"_ning_elmt\"><img decoding=\"async\" src=\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/angwp\/items\/12010\/Banner-2.png\" \/><\/div><\/div><\/div><div class=\"clear\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Prestashop released 1.7.4 version to provide complete new way to deal with theme customization. So, let\u2019s talk about one of most important child theme feature and how you can use it to customize themes more easily in brief. Why to Choose Our Premium Prestashop Themes What is child theme feature? A child theme is a&#8230; <\/p>\n<div class=\"actions\"><a href=\"https:\/\/www.hiddentechies.com\/blog\/prestashop\/create-child-theme-prestashop-1-7-4\/\">Continue Reading<\/a><\/div>\n","protected":false},"author":1,"featured_media":4536,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[221,222,2139],"tags":[332,329,328,330,331],"_links":{"self":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/4430"}],"collection":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/comments?post=4430"}],"version-history":[{"count":19,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/4430\/revisions"}],"predecessor-version":[{"id":10559,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/4430\/revisions\/10559"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media\/4536"}],"wp:attachment":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media?parent=4430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/categories?post=4430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/tags?post=4430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}