- \n
- Configure design changes (page layout);<\/li>\n
- Use custom layout updates (XML);<\/li>\n
- Use container blocks provided by native Magento to display additional information on category pages.<\/li>\n<\/ul>\n
Configure design changes (page layout)<\/h3>\n
Open the desired product in the admin panel. After that go to Design tab<\/strong>, find Page<\/strong> Layout<\/strong> and choose the necessary layout. You can choose from various options:<\/p>\n
- \n
- 1 column;<\/li>\n
- 2 columns with left bar;<\/li>\n
- 2 columns with right bar;<\/li>\n
- 3 columns.<\/li>\n<\/ul>\n
You can add your own layout (click on the image to open it in full size):<\/p>\n
![\"Без](\"https:\/\/belvg.com\/wp-content\/uploads\/2019\/06\/pixel.png\" "\\"How")
<\/a><\/p>\n<\/a>![\"magento](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2019\/01\/magento-custom-development.png\" "\\"How")
Magento Custom Development<\/h3>
Take your online store to the next level with BelVG Magento Custom Development<\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n
You can also configure layout product page by adding the following construction into local.xml<\/strong>:<\/p>\n
<handle>\r\n <label>Catalog Product View (Any)<\/label>\r\n <!-- Mage_Catalog -->\r\n <reference name=\"root\">\r\n <action method=\"setTemplate\"><template>page\/2columns-left.phtml<\/template>\r\n <\/action>\r\n <\/reference>\r\n<\/handle><\/pre>\n
When speaking generally about products, instead of layout name you can insert the following:<\/p>\n
<catalog_product_view>\r\n\r\n<PRODUCT_TYPE_simple>\r\n<PRODUCT_TYPE_configurable>\r\n<PRODUCT_TYPE_grouped>\r\n<PRODUCT_TYPE_bundle>\r\n<PRODUCT_TYPE_virtual>\r\n<PRODUCT_TYPE_downloadable><\/pre>\n
Regarding a particular product, the layout name will be:<\/p>\n
<PRODUCT_ID><\/pre>\n
Use custom layout updates (XML)<\/h3>\n
We add custom layout configurations into local.xml<\/strong> (\/app\/design\/frontend\/our_package\/our_theme\/layout\/local.xml) or into catalog.xml<\/strong> using the handles I mentioned above:<\/p>\n
<catalog_product_view>\r\n\r\n<PRODUCT_TYPE_simple>\r\n<PRODUCT_TYPE_configurable>\r\n<PRODUCT_TYPE_grouped>\r\n<PRODUCT_TYPE_bundle>\r\n<PRODUCT_TYPE_virtual>\r\n<PRODUCT_TYPE_downloadable><\/pre>\n
Regarding a particular product, the layout name will be:<\/p>\n
<PRODUCT_ID><\/pre>\n
Use container blocks provided by native Magento to display additional information on category pages<\/h3>\n
To add blocks to additional information tab, use the following construction, where we display our block in phtml template: $this->getChildHtml(‘my_child_alias’)<\/strong><\/p>\n
After that in file local.xml<\/strong> or catalog.xml<\/strong> we write our template into the following construction:<\/p>\n
<reference name=\"product.attributes\">\r\n<block type=\"core\/template\" name=\"my.custom.product.block\" as=\"my_child_alias\" template=\"my\/custom\/template.phtml\" \/>\r\n<\/reference><\/pre>\n
We can also set our override in the admin panel on the Design tab<\/strong> of the corresponding product (click on the image to open it in full size):
\n<\/a><\/p>\nCategory Pages:<\/h2>\n
- \n
- Configure design changes (page layout);<\/li>\n
- Use custom layout updates (XML);<\/li>\n
- Configure the layered navigation;<\/li>\n
- Configure design inheritance;<\/li>\n
- Configure a CMS block as a category landing page.<\/li>\n<\/ul>\n
Configure design changes (page layout)<\/h3>\n
Also, it is possible to configure design changes via admin panel. You can choose one of the standard layouts (1 column, 2 columns with left bar, 2 columns with right bar, 3 columns), or create your own:<\/p>\n
<\/p>\nAnother option is to set page layout in file.xml<\/strong> of your theme, or in catalog.xml<\/strong> (\/app\/design\/frontend\/our_package\/our_theme\/layout\/catalog.xml), or in local.xml<\/strong> (\/app\/design\/frontend\/our_package\/our_theme\/layout\/local.xml) using “setTemplate<\/strong>“. It looks as follows:<\/p>\n
<required-handle>\r\n\r\n<reference name=\"root\">\r\n<action method=\"setTemplate\"><template>page\/2columns-right.phtml<\/template><\/action>\r\n<\/reference>\r\n\r\n<\/required-handle><\/pre>\n
where required-handle<\/strong> — is the necessary handle of the category (for example, “catalog_category_default”), for which we configure the layout.<\/p>\n
<\/a>Magento 2 Development<\/h3>
Take your online store to the next level with BelVG Magento 2 Development<\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n
Use custom layout updates (XML)<\/h3>\n
Custom layout changes for the category should be added in our theme in file catalog.xml<\/strong> (\/app\/design\/frontend\/our_package\/our_theme\/layout\/catalog.xml) or in file local.xml<\/strong> (\/app\/design\/frontend\/our_package\/our_theme\/layout\/local.xml).<\/p>\n
Configure the layered navigation<\/h3>\n
Layered navigation consists of product features (price, size, color, material, etc.). It is displayed as a filter on the site (by default in left sidebar). We set product filters in the admin panel in product properties. Layout design for layered navigation can be configured in our themes in folder “\/app\/design\/frontend\/base\/default\/template\/catalog\/layer”. Category filter can be configured in folder “\/app\/design\/frontend\/base\/default\/template\/catalog\/navigation”<\/p>\n
Configure design inheritance<\/h3>\n
We have a separate article<\/a> devoted to inheritance in our blog.<\/p>\n
In short and regarding the issue, the design changes from our theme are initially applied. For example, the category templates will be used from the current theme (\/app\/design\/frontend\/our_package\/our_theme\/templates\/catalog\/category). If the system does not find the templates in that folder, it will search for them among the templates of the theme, from which our theme was inherited (from the theme “default\/blank”, for example) and so on. The final step is theme “base\/default<\/strong>”.<\/p>\n
Configure a CMS block as a category landing page<\/h3>\n
![\"Без](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2018\/03\/%D0%91%D0%B5%D0%B7-%D0%BD%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F.png\" "\\"How")
<\/a><\/p>\n