Categories

Featured templates

PrestaShop 1.6.x. How to create custom layout using “TM Mega Layout” module

Martin Clarke June 9, 2016
Rating: 5.0/5. From 3 votes.
Please wait...

This tutorial will show you how to create custom layout using ‘TM Mega Layoutmodule in PrestaShop 1.6.x. template.

In order to create a layout you need to:

  1. Navigate to Modules and Services->Modules and Services section and find the TM Mega Layout module. Press the Configure button to access it’s settings.

    PrestaShop 1.6.x. How to create custom layout using 'TM Mega Layout' module-1
  2. You can switch between positions at the top, for now let’s try the DisplayTopColumn. Click on the Add preset button to create a new layout and enter a name for your layout. Now let’s add a wrapper, which will work as a container for our content. To do this you need to hit the +Add wrapper button.

    PrestaShop 1.6.x. How to create custom layout using 'TM Mega Layout' module-2
  3. Now that we have a wrapper we can add rows of content to it. Click on the Add row button which is located on the newly created wrapper. We can split this row into multiple columns or leave it as it is. Let’s add 2 columns to it by clicking on the “” button on the right side. You will see a drop-down menu, where you need to select +Add col.

    PrestaShop 1.6.x. How to create custom layout using 'TM Mega Layout' module-3
  4. You will see a pop-up window where you can define a specific class for a column and set the number of span columns it will take for different devices (maximum value is 12). Let’s set 6 ‘spans’ for this column and create a new one which will take the same amount of space. This way we will have 2 equal columns.

  5. The layout is ready and we can add modules to it. You can add a module to a column by clicking on the “” button on the right side and selecting +Add Module. Now you need to click the Use as default switch at the top.

    PrestaShop 1.6.x. How to create custom layout using 'TM Mega Layout' module-4
  6. Check your updates on the site frontend. Two columns with the modules you have selected should be displayed in the top column.

    PrestaShop 1.6.x. How to create custom layout using 'TM Mega Layout' module-5

Thank you for watching our tutorial. Now you know how to create custom layout using ‘TM Mega Layoutmodule in PrestaShop 1.6.x.

Feel free to check the detailed video tutorial below:

PrestaShop 1.6.x. How to create custom layout using “TM Mega Layout” module
Prestashop Themes
This entry was posted in PrestaShop Tutorials and tagged layout, module, Prestashop, TM Mega Layout. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket