OpenCart 2.x. How to manage “TM Lookbook” module

The following tutorial will show you how to manage TM Lookbook module in OpenCart 2.

The lookbook is a set of photos, where you can mark any part of the image. This module serves for displaying the products of the one or several brands.

The module has two display modes for being displayed in the store position: in a form of a Banner (1) or in a form of a Collection (2).

1. To manage it, open the Extensions > Extensions > Modules and scroll to TM Lookbook.

   

2. Click on Add new

   

3. Fill in the general info: Module Name, Collection Name, Display Content and Status. For Display Content you will have two options available:

   

   1. Banner display mode;

      

   2. Collection display mode.

      

4. For the Banner content define the following settings:

   1. Banner Wrapper Class: The class of the banner wrapper;

   2. Banner Image: The image of the banner;

   3. Banner Image Width: The width of the banner image;

   4. Banner Image Height: The height of the banner image;

   5. Banner Description: The description of the banner

   

5. For the Collection lookbook content define the following settings:

   1. Collection Image: The image of the collection;

   2. Collection Image Width: The width of the collection image;

   3. Collection Image Height: The height of the collection image;

   4. Products: Collection products;

   5. Product Image Width: The width of the product images;

   6. Product Image Height: The height of the product images.

   

6. To mark the selected products on the image:

   1. Press the “Add Image Map” button.

      

   2. At the bottom, you’ll see a window, which allows creating selection areas and adding products to these areas.

      The areas that you create can be of 3 different forms: square, round, and complex (polygonal).

   3. To create a selection area on the picture, press the button, the name of which corresponds to the necessary form of selection area.

   4. After choosing the form, place it on the picture. Left-click the necessary part of the image, draw the area.

      Note: Polygonal selection should always be closed, make the first and the last point coincide.

   5. Press the “Edit” button.

   6. Double-click the selected area and choose the needed product from the dropdown list.

   7. Press the “Save” button.

   8. After marking all the areas and mapping all the products, press the Save button at the top.

      

7. Save module settings when all is done.

   

Do you need more templates? Take a look at our selection of well-crafted OpenCart themes.

Feel free to check the detailed video tutorial below:

If you need more premium templates to choose from, check out Best OpenCart Themes 2017.