SaleZone 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 (ZEMEZ in the new version) > 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

Slider Settings

1. First you should create new slider.

2. Go to TemplateMonster > Sliders section.

3. To add new slider click Add New Slider button in the top right corner.

4. On the slider configuration screen in General Options section you can see all available slider settings. Slider Items section allows you to add slides to your slider.

Then complete the settings as below:

General Setting (click to expand ▼)

Main Settings

Enter the slider title (only for internal reference).

#	Option Name	Option Value
1.	Status	Enable
2.	Slide Width	100%
3.	Slide Height	500

Image Settings

#	Option Name	Option Value
1.	The aspect ratio	2.926
2.	Image Scale Mode	Cover
3.	Allow Scale Up	Enable
4.	Auto Height	Disable
5.	Center Image	Enable
6.	Orientation	Horizontal
7.	Force Size	None

Slides Settings

#	Option Name	Option Value
1.	Slide Animation Duration	700
2.	Height Animation Duration	700
3.	Visible Size	auto
4.	Start Slide	0
5.	Shuffle	Disable
6.	Loop	Enable

Fade Animation Settings

#	Option Name	Option Value
1.	Fade	Enable
2.	Fade Out Previous Slide	Enable
3.	Fade Duration	500

Auto Play Settings

#	Option Name	Option Value
1.	Auto Play	Enable
2.	Auto Play Delay	5000
3.	Auto Play Direction	Normal
4.	Auto Play On Hover	Pause

Controls Settings

#	Option Name	Option Value
1.	Arrows	Disable
2.	Fade Arrows	Enable
3.	Buttons	Enable
4.	Keyboard	Enable
5.	Full Screen	Disable
6.	Fade Full Screen	Enable

Responsive Settings

#	Option Name	Option Value
1.	Responsive	Enable
2.	Touch Swipe	Enable
3.	Touch Swipe Threshold	50
4.	Small Size	480
5.	Medium Size	758
6.	Large Size	1024

Caption Settings

#	Option Name	Option Value
1.	Fade Caption	Enable
2.	Caption Fade Duration	5000

Layers Main Settings

#	Option Name	Option Value
1.	Wait For Layers	Enable
2.	Auto Scale Layers	Enable
3.	Auto Scale Reference	1300

You can add new slides only after saving the slider. Click Save and Continue Edit button in the top right corner. When the slider is saved, switch to Slider Items tab.

Click Add Slide button to add a new slide.

First Slide Settings

Slide Information

Slide Images

Layers List

Layers list section allows you to add layers to your slide. You can add image layers and text layers. Use corresponding buttons to add layers.

By clicking Add layer text, you'll see new text layer added and layer settings became associated with your new particular layer.

Layer-text-1

Layer Text Settings

Layer Position Settings

Layer Animation Settings

Second Slide Settings

Slide Information

Slide Images

Layers list

Layers list section allows you to add layers to your slide. You can add image layers and text layers. Use corresponding buttons to add layers.

By clicking Add layer text, you'll see new text layer added and layer settings became associated with your new particular layer.

Layer-text-1

Layer Text Settings

Layer Position Settings

Layer Animation Settings

Third Slide Settings

Slide Information

Slide Images

Layers list

Layers list section allows you to add layers to your slide. You can add image layers and text layers. Use corresponding buttons to add layers.

By clicking Add layer text, you'll see new text layer added and layer settings became associated with your new particular layer.

Layer-text-1

Layer Text Settings

Layer Position Settings

Layer Animation Settings

Add the Slider Widget

1. In the top menu navigate to Content > Widgets
2. In the top right corner click the Add Widget button to add a new widget.
3. Set the widget type to FilmSlider and select the theme that you want to apply the widget to (your new theme), then click Continue button.
4. On the next page in the Widget Title field enter the name of the widget which will be displayed in the admin panel. In the Assign to Store Views field you need to select Store View where you want the slider to be displayed on. Set the Sort Order to 0.



5. Move to the Layout Updates section and click on the Add Layout Update button.
6. In the Display On select Specified Page. Choose CMS Home Page for the Page option. Set Container option to After Page Header. You can get the widget details from the Template Settings table.
7. In the left sidebar click Widget Options tab and select the slider you want to insert. Don't forget to save changes.

Categories List Widget Settings

Note, the categories should have the Thumbnail Images.

1. Go to Products > Categories. Select the category you want to display with the help of the widget.
2. Switch to the Catalog Images Grid tab.
3. Activate Image Grid for the category and upload the thumbnail image.



4. Remember to save the settings.

Thumbnail Images:

1. cat-1.jpg - 190x190px
2. cat-2.jpg - 190x190px
3. cat-3.jpg - 190x190px
4. cat-4.jpg - 190x190px
5. cat-5.jpg - 190x190px
6. cat-6.jpg - 190x190px

You can find these images in the pub/media/catalog/category folder.

Useful Tutorials:

1. How to manage Catalog Images Grid module?
2. How to add Catalog Image Grid widget?
3. How to set the category thumbnail image?
4. Magento 2. Manage Product Categories.
5. How to "disable" the Category Image Grid widget?

1. To configure the Categories List Widget widget (see Template Settings section), navigate to Content > Widgets.

2. Click the widget title to open the setting interface.



3. Switch to Widgets Options tab and go to the Categories option. You need to select your category you want to display within the widget. Save the settings.



N.B. To display store main categories, you can see in the Main Menu, select Default Category for the Category option.
4. Don't forget to save changes.

Sale Products Widget

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



3. Navigate to Widgets Options tab and select Sale Products to display.



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

4. Select Manual Product type and go to the Choose Custom Products option.
5. Press Select button.



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



7. You can change the tab title.



8. Save the settings.

Home Banners Widget

1. To configure the Home Banners 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 Home Banners 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 Home Banners text?

1. To change the banner link go to the Content > Blocks section.
2. Find the static block you want to change (it's the Home Banners 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. You can change the text which is between the angle brackets ( >text< ).



6. Remember to save the settings.

How to change the Home Banners 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="{{media url="wysiwyg/home-banner-1.jpg"}}" alt="" />
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.

Latest Posts Widget

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



3. Switch to the Widget Options tab. Here you configure widget Title and Post amount per View, in case the Carousel is enabled.

Useful Tutorials:

• How to add a new blog post?
• Magetique. How to manage Blog extension?

Brands List Settings

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



2. Navigate to Widgets Options tab. Go to the Choose brands option. You need to select brands you want to display within the widget (hold CTRL key to select more than one brand).



3. Save the settings.

Useful Tutorials:

• Magento 2.1.x. How to add Shop by Brand widget on the Home Page
• Magento 2.1.x. Add a new Brand
• Magento 2.1.x. How to manage Shop By Brand module

Sidebar Banners Widget

1. To configure the Sidebar Banners 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 Sidebar Banners 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 Home Banners text?

1. To change the banner link go to the Content > Blocks section.
2. Find the static block you want to change (it's the Home Banners 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. You can change the text which is between the angle brackets ( >text< ).



6. Remember to save the settings.

How to change the Home Banners 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="{{media url="wysiwyg/s-banner-1.jpg"}}" alt="" />
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.

How to configure the Mega Menu?

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 4 columns with column width set to col-3 (press Add column(s) button).



6. The next step is to add a subcategory to each column. Move to the Add subcategory option. This option allows you to select and display the subcategories you need. In order to do this, choose the subcategory among the list and press on the Add button.



7. Then add one more row with two col-6 columns (press Add row > Add column(s) button > select col-6 > click Add button).



8. Add Menu Banner 1 and



Menu Banner 2 to each col-6 column.



9. Save the settings.

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