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

This tutorial will show you how to create custom layout using ‘TM Mega Layout‘ module 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.

   

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.

   

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.

   

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.

   

6. Check your updates on the site frontend. Two columns with the modules you have selected should be displayed in the top column.

   

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

Feel free to check the detailed video tutorial below: