{"id":14185,"date":"2017-09-05T16:38:25","date_gmt":"2017-09-05T13:38:25","guid":{"rendered":"https:\/\/belvg.com\/blog\/?p=14185"},"modified":"2021-02-18T14:17:20","modified_gmt":"2021-02-18T12:17:20","slug":"how-to-customize-magento-theme-using-layout-xml","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/how-to-customize-magento-theme-using-layout-xml.html","title":{"rendered":"How To Customize Magento Theme Using Layout XML"},"content":{"rendered":"\n

How can I include a custom CSS file on a product detail page for a specific product type (e.g. grouped, downloadable, configurable, etc.)?<\/strong><\/p>\n

For adding the custom CSS file (for example, “custom_example.css”) for various product types, it’s necessary to open the layout of directory file in your theme:<\/span>
\n“\/app\/design\/frontend\/our_package\/our_theme\/layout\/catalog.xml”<\/span><\/p>\n

Additionally, we can use the file local.xml: <\/span>
\n“\/app\/design\/frontend\/our_package\/our_theme\/layout\/local.xml”<\/span><\/p>\n

And then depending on product type you should add the necessary code:<\/span><\/p>\n

For <\/span>Simple Product Type<\/b>: <\/span><\/p>\n

<PRODUCT_TYPE_simple translate=\"label\" module=\"catalog\">\r\n   <reference name=\"head\">\r\n       <action method=\"addCss\"><stylesheet>css\/custom_example.css<\/stylesheet><\/action>\r\n   <\/reference>\r\n<\/PRODUCT_TYPE_simple><\/pre>\n
For <\/span>Grouped Product Type<\/b>:<\/span><\/p>\n
<PRODUCT_TYPE_grouped translate=\"label\" module=\"catalog\">\r\n   <reference name=\"head\">\r\n       <action method=\"addCss\"><stylesheet>css\/custom_example.css<\/stylesheet><\/action>\r\n   <\/reference>\r\n<\/PRODUCT_TYPE_grouped><\/pre>\n
For <\/span>Configurable Product Type<\/b>:<\/span><\/p>\n
<PRODUCT_TYPE_configurable translate=\"label\" module=\"catalog\">\r\n   <reference name=\"head\">\r\n       <action method=\"addCss\"><stylesheet>css\/custom_example.css<\/stylesheet><\/action>\r\n   <\/reference>\r\n<\/PRODUCT_TYPE_configurable><\/pre>\n
For <\/span>Virtual Product Type<\/b>:<\/span><\/p>\n
<PRODUCT_TYPE_virtual translate=\"label\" module=\"catalog\">\r\n   <reference name=\"head\">\r\n       <action method=\"addCss\"><stylesheet>css\/custom_example.css<\/stylesheet><\/action>\r\n   <\/reference>\r\n<\/PRODUCT_TYPE_virtual><\/pre>\n
For <\/span>Bundle Product Type<\/b>:<\/span><\/p>\n
<PRODUCT_TYPE_bundle translate=\"label\" module=\"catalog\">\r\n   <reference name='head'>\r\n       <action method=\"addCss\"><stylesheet>css\/custom_example.css<\/stylesheet><\/action>\r\n   <\/reference>\r\n<\/PRODUCT_TYPE_bundle><\/pre>\n
For <\/span>Downloadable Product Type<\/b>:<\/span><\/p>\n
<PRODUCT_TYPE_downloadable translate=\"label\" module=\"catalog\">\r\n   <reference name=\"head\">\r\n       <action\r\n\r\nmethod=\"addCss\"><stylesheet>css\/custom_example.css<\/stylesheet><\/action>\r\n   <\/reference>\r\n<\/PRODUCT_TYPE_downloadable><\/pre>\n
Where “css\/custom_example.css” is the file path in our custom theme. Of course, make sure you have put the custom file on the specified path. In this case, it means the folder with css files of our custom theme: “\/skin\/frontend\/our_package\/our_theme\/css”. <\/span>Don’t forget to clear cache after making changes.<\/span><\/p>\n
How can I include a custom CSS file on a CMS page?<\/strong><\/p>\n
In order to include the custom file (for example, “custom_example.css”) for CMS Page, there’re two possible ways. But before applying, it’s necessary to put the custom file in the folder with CSS files of our custom theme: “\/skin\/frontend\/our_package\/our_theme\/css”.<\/span><\/p>\n
The first way:<\/b>
\nGet in the admin panel and open CMS Page which the custom css file is applied for. On the tab “Design” in the field “Custom Layout Update XML” add the connection code of custom css file: <\/span><\/p>\n
<reference name=\"head\">\r\n<action method=\"addCss\"><stylesheet>css\/custom_example.css<\/stylesheet><\/action>\r\n<\/reference><\/pre>\n
Where “css\/custom_example.css” is the file path in our custom theme.<\/span><\/p>\n
\"How<\/a><\/p>\n
The second way: <\/strong>
\nOpen layout file local.xml in your theme: <\/span>
\n“\/app\/design\/frontend\/our_package\/our_theme\/layout\/local.xml”<\/span><\/p>\n
In this file we should add the following code: <\/span><\/p>\n
<cms_page page_id=\"8\">\r\n   <reference name=\"head\">\r\n       <action method=\"addCss\"><stylesheet>css\/custom_example.css<\/stylesheet><\/action>\r\n   <\/reference>\r\n<\/cms_page><\/pre>\n
Where the meaning of the attribute “page_id” is the id of the CMS Page which the custom styles file is going to be applied for; “css\/custom_example.css” is the file path in our custom theme. <\/span>Don’t forget to clear cache after making changes.<\/span><\/p>\n
I would add for myself, it’s not useful to practice the second way, as it “litters” the layout file and, as a result, you have to monitor when deleting CMS Page, there’s no unused connection code of custom files left.<\/span><\/p>\n
<\/a>
\"migration
Magento 2 Migration<\/h3>
Take your online store to the next level with BelVG Magento 2 Migration<\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n
How can you avoid copying core layout XML files into a custom theme by using the local.xml layout file?<\/b><\/p>\n
We can avoid copying core layout XML files into a custom theme by using different handles, directives, and methods in the layout file local.xml. Let’s analyze details!<\/span><\/p>\n
The general algorithm of working with layout file is following:<\/span><\/p>\n