{"id":79680,"date":"2017-03-03T10:42:20","date_gmt":"2017-03-03T15:42:20","guid":{"rendered":"https:\/\/www.templatemonster.com\/help\/?p=79680"},"modified":"2020-01-29T08:03:54","modified_gmt":"2020-01-29T13:03:54","slug":"prestashop-1-6-x-switch-template-skins-create-new-one-based-eveprest","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/prestashop-1-6-x-switch-template-skins-create-new-one-based-eveprest.html","title":{"rendered":"PrestaShop 1.6.x. How to switch template skins and create a new one (based on Eveprest)"},"content":{"rendered":"<p>Using the instructions below you will learn the basics of <strong>TM Mega Layout<\/strong> module management, e.g. changing in-built <strong>presets<\/strong> and adding new in <strong>Eveprest<\/strong> based template.<\/p>\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/RtDhFlHn5ro\"><\/iframe>\r\n<\/div>\r\n\r\n<h3 class=\"custom\">Changing Presets<\/h3>\r\n\r\n<ol>\r\n    <li><p>Navigate to <strong>Modules and Services<\/strong>, locate <strong>TM Mega Layout<\/strong> module and tap \r\n\t<em>configure<\/em>&#59;<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one.jpg\" alt=\"PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one\" width=\"1160\" height=\"674\" class=\"alignnone size-full wp-image-79681\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one.jpg 1160w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-150x87.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-300x174.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-768x446.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-1024x595.jpg 1024w\" sizes=\"(max-width: 1160px) 100vw, 1160px\" \/><\/a>\t\r\n\t\r\n    <p>The module includes <strong>Main Layouts<\/strong> management and <strong>Product Page<\/strong> \r\n\tlayout management.<\/p><\/li>\r\n\t\r\n\t<li><p><em>Main Layouts<\/em> include the following pages&#8217; areas&#58;<\/p>\r\n        <ul class=\"list\">\r\n\t\t\t<li><p><strong>Header<\/strong>&#45;located in the main top area of the website&#59;<\/p><\/li>\r\n\t\t\t<li><p><strong>Top Column<\/strong>&#45;located underneath the header area&#59;<\/p><\/li>\r\n\t\t\t<li><p><strong>Home<\/strong>&#45;home page body&#47;main content area&#59;<\/p><\/li>\r\n\t\t\t<li><p><strong>Footer<\/strong>&#45;located at very bottom of the pages&#59;<\/p><\/li>\r\n\t\t\t\r\n\t\t<\/ul>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-2.jpg\" alt=\"PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-2\" width=\"941\" height=\"190\" class=\"alignnone size-full wp-image-79682\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-2.jpg 941w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-2-150x30.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-2-300x61.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-2-768x155.jpg 768w\" sizes=\"(max-width: 941px) 100vw, 941px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li><p><em>Product Page<\/em> layout will allow you to create custom layout for the <em>single product page footer<\/em>&#59;<\/p><\/li>\r\n    <li><p>Select either <em>Main Layouts<\/em> or <em>Product Page<\/em> option,  on top right, pick the area&#47;position&#59;<\/p><\/li>\r\n   \t<li><p>Next to <strong>Add a Preset<\/strong> button, select any of the available presets, and enable <strong>Use as Default<\/strong> option&#59;<\/p><\/li>\r\n    <li><p>You will see <em>black rating star<\/em> icon appearing next to a preset which means that the preset has been activated&#59;<\/p><\/li>\r\n    <li><p>The presets can be applied individually to different pages. Next to <em>Use as default<\/em> tab, click <strong>All pages<\/strong> link and pick the page you would like to apply  preset to from drop-down list. The <em>half-black rating star <\/em> icon will come up next to a preset, which means the preset has been applied to a specific page&#59;<\/p>\r\n\t\t\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-3.jpg\" alt=\"PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-3\" width=\"1163\" height=\"675\" class=\"alignnone size-full wp-image-79683\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-3.jpg 1163w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-3-150x87.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-3-300x174.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-3-768x446.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-3-1024x594.jpg 1024w\" sizes=\"(max-width: 1163px) 100vw, 1163px\" \/><\/a>\t\r\n\t\r\n\t<\/li>\t\r\n<\/ol>\r\n\r\n<h3 class=\"custom\">Adding Presets<\/h3>\r\n\r\n<p>This block of the tutorial will show you how to create custom layout <strong>presets<\/strong>.<\/p>\r\n\r\n<ol>\r\n\t<li><p>Select the position for your preset, and click green <strong>Add a Preset<\/strong> button&#59;<\/p><\/li>\r\n\t<li><p>The window will prompt you to enter the name for your preset, put any name you prefer&#59;<\/p><\/li>\r\n\t<li><p>Pick either <strong>Add wrapper<\/strong> or <strong>Add row<\/strong>. \r\n\t<em>Wrapper<\/em> might take in rows, columns and modules. It is a box which can give you additional control over your layout&#59;<\/p><\/li>\r\n\t<li><p>You will see a tab with several icons on the right&#58;\r\n\t\t<ul class=\"list\">\r\n\t\t\t<li><p><strong>Trash Icon<\/strong> &#45; removes block&#59;<\/p><\/li>\r\n\t\t\t<li><p><strong>Blocks Icon<\/strong> &#45; allows you to add custom <strong>Selector<\/strong> which can be later used for custom <em>CSS<\/em> or <em>JavaScript<\/em>&#59;<\/p><\/li>\r\n\t\t\t<li><p><strong>Pencil Icon<\/strong> &#45; in-built style editor allows you to add background images, colors, border styles as well as box shadows&#59;<\/p><\/li>\r\n\t\t\t<li><p><strong>Drag Icon<\/strong> allows you to change block position relative to other blocks inside a wrapper by dragging and dropping&#59;<\/p><\/li>\r\n\t\t<\/ul>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-4.jpg\" alt=\"PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-4\" width=\"1862\" height=\"437\" class=\"alignnone size-full wp-image-79684\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-4.jpg 1862w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-4-150x35.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-4-300x70.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-4-768x180.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-4-1024x240.jpg 1024w\" sizes=\"(max-width: 1862px) 100vw, 1862px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li><p>Click the <strong>Add row<\/strong> button&#59;<\/p><\/li>\r\n\t<li><p>Tap <strong>Ellipsis<\/strong> icon on the right&#58;<\/p>\r\n\t\t<ul class=\"list\">\r\n\t\t\t<li><p>Select <strong>Edit Row<\/strong> option to add custom <em>CSS&#47;JavaScript<\/em> selector&#59;<\/p><\/li>\r\n\t\t\t<li><p>Select <strong>Stylize<\/strong> to add custom styles to your row&#59;<\/p><\/li>\r\n\t\t\t<li><p> Click <strong>Delete<\/strong> to remove row&#59;<\/p><\/li>\r\n\t\t<\/ul>\r\n\t\t\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-6.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-6.jpg\" alt=\"PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-6\" width=\"1109\" height=\"638\" class=\"alignnone size-full wp-image-79686\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-6.jpg 1109w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-6-150x86.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-6-300x173.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-6-768x442.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-6-1024x589.jpg 1024w\" sizes=\"(max-width: 1109px) 100vw, 1109px\" \/><\/a>\t\r\n\t\r\n\t<\/li>\r\n\t<li><p>Choose <strong>Add col<\/strong> option. Add a specific selector and pick <a href=\"\/help\/htmlcss-bootstrap-3-grid-system.html\" target=\"_blank\">bootstrap classes<\/a> \r\n\tfor the column in a prompt&#59;<\/p>\r\n\t\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-5.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-5.jpg\" alt=\"PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-5\" width=\"652\" height=\"424\" class=\"alignnone size-full wp-image-79685\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-5.jpg 652w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-5-150x98.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-5-300x195.jpg 300w\" sizes=\"(max-width: 652px) 100vw, 652px\" \/><\/a>\t\r\n\t\r\n\t<\/li>\r\n\t<li><p>Click on the <strong>Ellipsis<\/strong> in the column tab, and select <strong>Add Module<\/strong>.<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-7.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-7.jpg\" alt=\"PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-7\" width=\"1099\" height=\"349\" class=\"alignnone size-full wp-image-79687\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-7.jpg 1099w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-7-150x48.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-7-300x95.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-7-768x244.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-7-1024x325.jpg 1024w\" sizes=\"(max-width: 1099px) 100vw, 1099px\" \/><\/a>\t\t\r\n\t<\/li> \r\n\t<li><p>Pick the module you would like to display in a column from <strong>Select a module<\/strong> dropdown list and tap the <strong>Confirm<\/strong> button&#59;<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-8.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-8.jpg\" alt=\"PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-8\" width=\"677\" height=\"565\" class=\"alignnone size-full wp-image-79688\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-8.jpg 677w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-8-150x125.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/PrestaShop1.6.x-how-to-switch-template-skins-and-create-a-new-one-8-300x250.jpg 300w\" sizes=\"(max-width: 677px) 100vw, 677px\" \/><\/a>\t\t\r\n\t<\/li>\r\n<\/ol>\r\n<p class=\"attention\">NOTE&#33; The module will not appear among available on the list until it is hooked to corresponding <a href=\"\/help\/prestashop-1-6-x-how-to-manage-modules-and-modules-positions.html\" target=\"_blank\">position<\/a>.<\/p>\r\n<p class=\"attention\">NOTE&#33; TM Mega Layout saves changes using <strong>AJAX<\/strong>. It is recommended to clear smarty cache once the modifications have been implemented.<\/p>\r\n<p class=\"attention\">NOTE&#33; In case TM Mega Layout module is deactivated, the default presets will be disabled. The modules will return to their default appearance.<\/p>\r\n<p>Browse the wide collection of high-quality <a href=\"https:\/\/www.templatemonster.com\/prestashop-themes.php\" target=\"_blank\" title=\"PrestaShop Themes\">PrestaShop templates<\/a> if you need more! <\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=RtDhFlHn5ro?width=1280&amp;height=720\" rel=\"prettyPhoto\">PrestaShop 1.6.x. How to switch template skins and create a new one (based on Eveprest)<\/a>","protected":false},"excerpt":{"rendered":"<p>Using the instructions below you will learn the basics of <strong>TM Mega Layout<\/strong> module management, e.g. changing in-built <strong>presets<\/strong> and adding new in <strong>Eveprest<\/strong> based template.<\/p>\n","protected":false},"author":111,"featured_media":79689,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[732],"tags":[2566,482,2296,552,682,1376,2298],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/79680"}],"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\/111"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=79680"}],"version-history":[{"count":11,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/79680\/revisions"}],"predecessor-version":[{"id":85810,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/79680\/revisions\/85810"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/79689"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=79680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=79680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=79680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}