Hookah Documentation

Pages, static blocks and widgets import

In order to make your template look exactly like our Live Demo, you need to import the store pages, static blocks and widgets. Please follow the instructions below in order to import store pages, static blocks and widgets.

Pages Import

• Navigate to the Stores > Settings > Configuration section.



• Then choose the TEMPLATEMONSTER > Theme Options in the left side menu and you'll move to the module settings interface.



• Click on the Store View: Default Config. Select a Main Website from the option dropdown.



• Confirm the scope switching in the pop-up window. Press "OK" to confirm.



• Go to the Sample Data Installer tab > CMS pages.



• Select files you want to import. You need to select Cms Page.
• Set the Override option to "Yes" if you want to replace your store pages with new ones in case of duplicate key.
• Press the Import button.



• You will see the confirmation message. The message will inform you about the total number of imported pages.

Static blocks Import

When you are done with the pages import, you need to import the static blocks. The procedure is similar to the previous.

Widgets Import

Now you need to import the widgets. The procedure is almost the same as the previous one.

Remember to save the settings.

Pages Configuration

In order to make your template look exactly like our Live Demo, you need to set up store pages in a specific way. We provide all the files with the pages source code. You need to add them into Magento admin panel as per the instructions below using the settings table. Settings table is located on the Template Settings page on the template preview page.

The main template page will be affected the most. It usually contains the following elements: banners, slider, etc.

We recommend that you disable the WYSIWYG editor. To do this, from the admin top menu select Stores > Configuration. Open the "Content Management" section uncheck and in the WYSIWYG Options window set "Enable WYSIWYG Editor" option to "Disabled Completely".

In case you have already made the changes to your pages code and would like to add our code without affecting your changes, it is recommended to contact professional technicians or prepare a backup before making changes.

1. From the top menu select Content > Pages. Here you can find all the store pages. Home page, About Us and Customer Service should already be available, so you don't need to add them. You only need to update the pages HTML and XML content. Open any of them in order to get the access to the content.

   

2. Open the page and select the Content tab. It contains the HTML code of the page. You can take the page HTML code from the appropriate source file. You can see the list of source files included in the "Template Settings" section on your templates preview page. Copy the code from the source file and paste it to the content area.

   

3. When you are done with the HTML code, switch to "Design" tab. It contains the page XML code. XML code allows you to add Magento static blocks and widgets to the page. The XML code should be copied the same way as the HTML from the source file. Copy the XML code to the "Layout Update XML" area.

   

4. Don't forget to select the valid "Layout" option.
5. In case you need to add a new page, click the "Add New Page" button in the top right corner.

Useful Tutorials:

1. How to add content to Contact Us page?
2. How to add new Page?
3. How to add new Widget on the Page?
4. How to add the CMS Page link to Main Menu?

Widgets Configuration

CMS Static Block Widget Type Configuration

Banners 1 Widget

1. To configure the Banners 1 widget, navigate to Content > Widgets. Click the widget title to open the setting interface.



2. Assign the widget to specific Store View(s) or All Store Views.



3. Navigate to Widgets Options tab. Press the Select Block button.
4. Select the Banners 1 static block for this widget.



5. Save the settings.

You also can change the block content. In order to do this, go to the Content > Blocks section. Select Edit from the Action option dropdown. You will see CMS block settings interface. Now, you're able to edit the block content in the content field. Full HTML support is provided. Remember to save the settings.

How to change the Banners 1 link?

1. To change the banner link go to the Content > Blocks section.
2. Find the static block you want to change (it's the Banners 1 block in our case).
3. Select Edit from the Action option dropdown.



4. You will see CMS block settings interface. Now, you're able to edit the block content in the content field. Full HTML support is provided. ( Press the Show / Hide Editor button to activate the HTML Editor. Check the tutorial: How to Enable/Disable the WYSIWYG Editor )



5. Find the <a href="XXX.html"> code. Replace the XXX with the needed page or category URL Key.



6. Remember to save the settings.

How to change the Banners 1 image?

1. To change the banner link go to the Content > Blocks section.
2. Find the static block you want to change (it's the Banners 1 block in our case; see the Template Settings table).
3. Select Edit from the Action option dropdown.



4. You'll see the static block content field.
5. Select the code which is responsible for the image display:
<img src="{{view url=''}}/images/media/banner-1.png"/>



6. Delete the code and press the Insert Image button.



7. Upload the new banner image (click Browse) and press on the Insert File button.



8. You should get the code:
<img src="{{media url="wysiwyg/new-image.png"}}" alt="" />
9. Save the block settings.

1. Banners 2 - select Banners 2 CMS Static block.



2. Banners 3 - select Banners 3 CMS Static block.



3. Banners 4 - select Banners 4 CMS Static block.

Featured Products Widget

1. To configure the Featured Products widget, navigate to Content > Widgets.
2. Click the widget title to open the setting interface.



3. Navigate to Widgets Options tab.



4. You can change the tab title (All Products title, Top Rated Products title and Most Viewed Products title options)



You also can show the selected items in the widget. Perform the next steps:

1. Select Manual Product type and go to the Choose Custom Products option.
2. Press Select button.



3. Pick the products (put a checkmarl) you want to display in the widget and click Add Product.



5. Save the settings.

How change the Info Banners block Font Icon?

1. Navigate to your Magento store admin panel. Then go to the Content > Blocks section.
2. Find the Info Banners block and open it to edit. Select Edit from the Action option dropdown.
3. You will see CMS block settings interface.
4. Find the <i class="XXX"></i> line and replace XXX with a new icon class.)
5. Remember to save the settings.

How to change the Store Info block text?

1. Navigate to your Magento store admin panel. Then go to the Content > Blocks section.
2. Find the Store Info block and open it to edit. Select Edit from the Action option dropdown.
3. You will see CMS block settings interface. Now, you're able to edit the block content in the content field. Full HTML support is provided. (the text you can see on the frontend is between the <span>text</span> tag)



4. Remember to save the settings.

How to configure the Mega Menu?

Mega Menu for Desktop Version

1. Go to Catalog > Categories menu.
2. Open the category you want to add the dropdown to, then scroll down to the Megamenu tab.
3. Enable Magamenu for this Category.



4. Press the Add row button.



5. Now you need to add col-12 column (press Add column(s) button).



6. Enter the mmenu_desktop CSS class in the Enter Specific Class option textfield.



7. You need to add the Catalog Image Grid widget to the column.



8. To add the widget click the Add button.



9. Choose the Catalog Image Grid widget and complete the settings as in the table below:

#	Option Name	Value
1.	Status	Enable
2.	AMP	No
3.	Category	select the store category with 6 subcategories in it.
4.	Title	Catalog Image Grid (for internal reference only)
5.	Template	Catalog Image Grid
6.	Use Image	Thumbnail Image
7.	Category Images	Enable
8.	Subcategory Images	Disable
9.	Columns Count	3
10.	Count of Categories to Show	6
11.	Show "View More" Button	Disable

10. Then click on the Insert Widget button.
11. Save the settings.

Mega Menu for Mobile Version

1. You need to add 2 rows and 6 columns with the column width set to col-4.
2. Enter the mmenu_mobile in the Enter Specific Class option textfield of each column.
3. Then add subcategory to each column.
4. Remember to save the changes.

Check the tutorials below:

Template Settings

Configuration of display static blocks/widgets on different layouts shown in the table below.

Pages Configuration

Static Blocks Configuration

Widgets Configuration