{"id":75276,"date":"2016-08-29T10:16:31","date_gmt":"2016-08-29T14:16:31","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=75276"},"modified":"2017-02-06T06:17:34","modified_gmt":"2017-02-06T11:17:34","slug":"opencart-2-x-add-new-layout-assign-module-page-using","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/opencart-2-x-add-new-layout-assign-module-page-using.html","title":{"rendered":"OpenCart 2.x. How to add new layout and assign a module to a page using it"},"content":{"rendered":"<p>This tutorial shows how to add a new layout and assign a module to a page using it in <a href=\"https:\/\/www.templatemonster.com\/opencart-templates.php\" target=\"_blank\">OpenCart 2<\/a>.<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/mR2NBf55LNA\"><\/iframe>\r\n<\/div>\r\n<p>In order add a new layout and assign a module to a page, you should perform the following:<\/p>\r\n<p><strong>Step 1: Create a new layout<\/strong>.<\/p>\r\n<p>Not all the pages have layouts by default, f.e. the &#8220;Search&#8221; page. So, in order to assign any Module to the Specials page, the Layout has to be created.<\/p>\r\n<p>To create the Layout (f.e., for the Search page), please, do the following:<\/p>\r\n<ol>\r\n\t<li>\r\n        <p>Navigate to <strong>System -> Layouts<\/strong> in your OpenCart admin panel.\r\n\t\t<\/p>\r\n\t<\/li>  \r\n    <li>\r\n\t\t<p>Click the <strong>Add new<\/strong> button at the top right. Specify the <strong>Layout Name<\/strong>.<\/p>\r\n\t<\/li>\r\n    <li>\r\n\t\t<p>Click the <strong>Add Route<\/strong> button and add the route for the Layout (f.e.&#8217;product\/search&#8217; for the &#8216;Search&#8217; page).<\/p>\r\n\t<\/li>\r\n    <li><p>Click <strong>Save<\/strong> at the top right: <\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/08\/OpenCart_2.x._How_to_add_new_layout_and_assign_a_module_to_a_page_using_it1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/08\/OpenCart_2.x._How_to_add_new_layout_and_assign_a_module_to_a_page_using_it1-300x91.jpg\" alt=\"OpenCart_2.x._How_to_add_new_layout_and_assign_a_module_to_a_page_using_it1\" width=\"300\" height=\"91\" class=\"alignnone size-medium wp-image-75283\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/OpenCart_2.x._How_to_add_new_layout_and_assign_a_module_to_a_page_using_it1-300x91.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/OpenCart_2.x._How_to_add_new_layout_and_assign_a_module_to_a_page_using_it1-150x45.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/OpenCart_2.x._How_to_add_new_layout_and_assign_a_module_to_a_page_using_it1-768x232.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/OpenCart_2.x._How_to_add_new_layout_and_assign_a_module_to_a_page_using_it1-1024x310.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/OpenCart_2.x._How_to_add_new_layout_and_assign_a_module_to_a_page_using_it1.jpg 1203w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\r\n\t<\/li>\r\n    \r\n<\/ol>\r\n<p><strong>Step 2: Assign the Module to the page&#8217;s Layout<\/strong>.<\/p>\r\n<ol>\r\n    <li><p>Click on the <strong>Add module<\/strong> button.<\/p>\r\n\t<\/li>\r\n    <li><p>Select the module you would like to assign and choose its position.<\/p>\r\n\t<\/li>\r\n    <li><p>Click <strong>Save<\/strong> at the top right: <\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/08\/OpenCart_2.x._How_to_add_new_layout_and_assign_a_module_to_a_page_using_it2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/08\/OpenCart_2.x._How_to_add_new_layout_and_assign_a_module_to_a_page_using_it2-300x65.jpg\" alt=\"OpenCart_2.x._How_to_add_new_layout_and_assign_a_module_to_a_page_using_it2\" width=\"300\" height=\"65\" class=\"alignnone size-medium wp-image-75284\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/OpenCart_2.x._How_to_add_new_layout_and_assign_a_module_to_a_page_using_it2-300x65.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/OpenCart_2.x._How_to_add_new_layout_and_assign_a_module_to_a_page_using_it2-150x32.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/OpenCart_2.x._How_to_add_new_layout_and_assign_a_module_to_a_page_using_it2-768x166.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/OpenCart_2.x._How_to_add_new_layout_and_assign_a_module_to_a_page_using_it2-1024x222.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/OpenCart_2.x._How_to_add_new_layout_and_assign_a_module_to_a_page_using_it2.jpg 1196w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\r\n\t<\/li>\r\n<\/ol>\r\n<p>This is the end of the tutorial. Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=mR2NBf55LNA?width=1280&amp;height=720\" rel=\"prettyPhoto\">OpenCart 2.x. How to add new layout and assign a module to a page using it<\/a>\r\n<p>You may be looking for more website building options, so view <a href=\"https:\/\/www.templatemonster.com\/blog\/best-opencart-themes-2017\/\" title=\"Best OpenCart Themes 2017\" target=\"_blank\">Best OpenCart Themes 2017<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>This tutorial shows how to add a new layout and assign a module to a page using it in OpenCart 2.<\/p>\n","protected":false},"author":61,"featured_media":75286,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1156],"tags":[2005,482,557,2285],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/75276"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/61"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=75276"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/75276\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/75286"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=75276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=75276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=75276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}