Start chat

ZEMEZ © Privacy Policy

Predion Documentation

TM Extensions Settings

Attention! Some modules may not be included into your template package. This section describes configuration of all modules that are used in our templates. Each template pack is provided with a set of modules which is included into the design of this specific template.

Ajax Catalog

Quick and easy selection among the variety of products contributes to making a positive decision on purchasing in your online shop. Ajax Catalog module that provides this possibility is the most popular module among the online shops based on various platforms. It allows you to find and filter the products you need according to the selected parameters quickly and easily without reloading the page.

In order to configure this module, navigate to Stores > Settings > Configuration section.

Then navigate to ZEMEZ > Ajax Catalog in the left side menu to go to the module settings interface.

Let's review module options:

Use Ajax filter - the option enables AJAX filter by attributes and parameters located in the standard shop filters column.
Grid/List Mode Button - products display layout. This option allows you to specify products layout for listing pages without reloading them. (1)
Sort Order - sorting parameters. It allows you to define the sorting parameter without reloading the page.(2)
Sort by (desc/asc) - products ordering. You can sort items without reloading the main page.
Pagination - listing pagination. If your listing includes more than one page with products, this option allows to switch between the inner pages without reloading the main page.
Items per page - number of products displayed on the page. This option allows you to change the number of products displayed on the single listing page without reloading.
Price slider - able to activate the price slider. Activating the option allows to filter products by price range.
Infinite scroll - enable infinite scroll for the catalog page. The option help to auto-load the next page products when the user reaches the end of the page.
Pages to show - choose the number of pages to show within the single infinite scroll auto-load.
Product Attributes - selected attributes is multiselected in layer navigation.

GoogleMap

The given module allows you to embed the Google map to your Magento website. By default, module provides you with three maps: the map on the contact page, the map in the footer of other pages and the map on the Home Page.

All maps can be configured via Magento Admin Panel in Store > Configuration ...

... > ZEMEZ > Google Map.

  1. General section allows you to enter the API key.
  2. Home page map settings section allows you to display the map on the home page.
  3. Contacts page map settings section allows you to display the map on the contacts page.
  4. Footer map settings section allows you to display the map in site footer.

Let's review the options available:

API key -
Google Api Key is necessary for the correct work of the map. You can receive and activate it by following the link.
Coordinates -
location data which will be shown in the centre of the displayed map. You can get this location data using Google Maps website or using this one.
Zoom - enlargement value [should not exceed 8].
Map Type - type of the displayed map [roadmap, satellite, hybrid, etc.].
Map width - width of the map.
Map height - height of the map in pixels.
Styles -
display style of the map. In order to change the appearance of the map, use the styles provided on the website snazzymaps.
Disable UI - hides the elements which control the map.
Scrollwheel - disables the mouse scroll option.
Draggable - enables you to move the map using the left button of the mouse or your fingers for touch [sensor] devices.
Show on - defines if your map will be displayed before or after the footer. Available for 'Home page' only.
Selector - allows you to define the html class or id of the item, that will go right before the map. Available for the 'Footer' only.
Markers - allows you to add a few markers with different coordinates onto the same map.
Icon -
custom image filename [with the extension specified], if you need to replace the default marker with your own one, e.g., marker.png. You should upload the image to the pub/media/googlemap/ folder of your Magento installation.
Coordinates - sets the marker coordinates.
Infowindow - tooltip text that will show up on click on the marker. Any html-structure is allowed.

Copy the provided on the website snazzymaps and paste it into the Styles option field:

Megamenu

TemplateMonster Megamenu module extends standard Magento menu functionality and allows you to configure subcategories multi-column display, add static blocks and products to the dropdown menu, as well as the flexibly customize its appearance in site admin panel.

Global Configuration

In order to configure this module, you should navigate to Magento admin panel and choose the Stores > Configuration section in the left side menu.

Choose the ZEMEZ > Megamenu in the left side menu to go to the module settings interface. This module has 2 options:

Enable/Disable - you can enable or disable the module if needed;
Menu position - you can choose menu position here.
Menu position option includes two values: Topnav and Sidebar.
Topnav - displays menu in site header;
Sidebar - shows menu in sidebar.

Attention!!! If you're going to display menu in sidebar, be sure to enable a layout with left or right column included. In case, you have one-column layout active for pages and Menu position:Sidebar option is enabled, no menu will appear at site.

Categories Configuration

Megamenu block display can be configured on the 1st level category configuration page, that can be found in the Megamenu tab, at Products > Categories section.

You will see the Turn on Megamenu for this category option at the Megamenu tab. This option enabled Megamenu block for the selected category. After enabling this option, you will see the two fields and a widget with menu content settings.

Label option allows you to display the label (new, sale) for the top-level categories. This label has default styling, but its appearance can be changed by using Css class option. This option sets the class for current menu item's <li> и <a> tags, so you can easily create custom styling for your label by using the class.

Megamenu block content settings' widget allows you to define number of rows, columns, specify their width and lot of other settings.
In order to add a new row you need to use Add row button. Then you will see the empty field with Add column(s) and Remove row buttons.

Remove row - removes the row (field).

After pressing the Add column(s) button you'll see a pop-up window to select the width of the column you're going to add. The maximum width of the column is col-12 it stretches menu block to the full width of the container. So, if you need to display 4 columns in a row, you have to add 4 columns with the width parameter set to col-3.

Let's consider columns' settings.

  • Set column width - column width. It can take values from col-1 to col-12.
  • Enter specific class - custom css class of the column, so that you can further create styles for this column using css rules.
  • Add subcategory - subcategories dropdown for the parent category. 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. On the next step you will see this category listed at the Selected items field.
  • Select static block - static blocks dropdown list. You can show any of site static blocks in the dropdown menu same as the list of subcategories, if you have previously added it to the shop admin panel. In order to add a static block, choose it among the list and press on Add button. Static block title will be listed in the Selected items field.
  • Add product(s) - adding product to the menu. This option allows you to add any of site products to the menu. Product image, title and a price will be displayed in this case. After pressing on the button you'll see the pop-up list of products available for adding. After you add it to menu, it's title will be listed in the Selected items field.
  • Add widget(s) - this tool can be used to add a variety of content elements to the page.

    • Available widgets (click to expand)

    By default, Magento ships with the following widgets:

    — CMS Page Link

    The CMS Page Link widget will allow you to add a link to a page that you specify; this can be useful to add a link to the footer.

    — CMS Static Block

    The CMS Static c Block widget will add a static block to the location that you specify.

    — Catalog Category Link

    The Catalog Category Link widget adds a link to a specific category that you specify.

    — Catalog New Products List

    The Catalog New Products List widget allows you to add a list of products to a page; here you can select the amount of products that you want to show and if you want to display only new products or all products.

    — Catalog Product Link

    With the Catalog Product Link widget, it is possible to create a link to a specific product.

    — Catalog Product List

    To display a list of products on your page, you can use the Catalog Product List widget. With this widget, you can control the products shown based on your own conditions (product attributes).

    — Orders and Returns

    This will add a block to allow customers to search for their orders and view the status or request for a return.

    — Recently Compared Products

    This will add a block that shows the products that are added to the compare products list.

    — Recently Viewed Products

    This will add a block that shows the products that have been viewed by the user.

  • Selected items - the field for sorting the items. It allows you to change the display order (sorting) of your column content. Drag&Drop interface allows you to reorder items by dragging them. If you do not want the product or static block to be displayed below, just drag it to the top to reach the required appearance. You can also remove some items here. Select the ones you need to remove and press on Remove selected button to do that.
  • Add video - this video extension allows you to add videos to your product pages. You can upload a video (FLV, MPEG, MP4, JPEG, PNG, GIF and SWF) or embed it from youtube or Vimeo.

Subcategories Configuration

This module allows to add an image and a label to any products' subcategory. In order to configure the subcategory, open its page and navigate to the Megamenu tab. You'll see two options there: Category image and Label.

To add the subcategory image press on browse and choose an image from the clipart.
As to the label adding, fill in the Label field.

Styles Configuration

You can edit css style files to configure custom megamenu appearance. These files are located at the app\code\TemplateMonster\Megamenu\view\frontend. Do not forget to clear the cache after changing the styles and compiling.

Theme Options

Then choose the ZEMEZ > 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 Store View from the option dropdown.

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

After that process, we can see a new tab called Theme color settings under the General one.

The Tab structure is as follows:

General

For Image Type:

Use Logo Type - select type of logo.
Logo Image - you can upload your logotype image (Allowed file types: png, gif, jpg, jpeg, svg).
Logo Image Width - set a Logo image width in pixels.
Logo Image Height - set a Logo image height in pixels.
Logo image alt text - enter a Logo image alternative text.

For Text Logo Type:

Use Logo Type - select type of logo.
Logo Text - enter text for logo.
Logo Font Size - enter font size for logo text in pixels.
Logo Line Height - enter line height for logo text in pixels.
Logo Font Color - set color for logo text in hex format. You can select a color from the Color Palette.
Slogan Settings:    
Use slogan -
Enable/Disable slogan. (If you enable this option, additional options became available.)
Slogan Text - enter text for slogan.
Slogan Font Size - enter font size for slogan text in pixels.
Slogan Line Height - enter line height for slogan text in pixels.
Slogan Font Color - set color for slogan text in hex format.
Slogan Position - select slogan position relative to the logo.

SEO

Welcome text - you can change default welcome text.
Favicon icon - allowed file types: ico, png, gif, jpg, jpeg, apng, svg. Not all browsers support all these formats!
Site title - set a title site on homepage.
Default description - you can input default description for your store.
Default keywords - input keywords for your store.
Copyright - input your copyright. The text will be displayed as copyright message in the footer.

Preloader and BackToTop Button

Use ToTop Button - you can decide if you want to show the ToTop button.
Use PreLoader - set if you want to use the preloader for your website.
Choose preLoader type - use the CSS3 or Image preloader.
Preloader Image - in case you choose the Image type, upload the image file for the preloader. Allowed file types: ico, png, gif, jpg, jpeg, apng, svg. Not all browsers support all these formats!.

Theme Color Settings

Please note: for display Theme color settings and apply color scheme you need select your website (1). If you want to edit each color individually, you need to choose store (2).
All colors set in HEX format: #xxxxxx

theme optons

Let's review the options available:

Uncheck Use Website to change the layout settings.

Color Scheme Status

Color scheme status - enable/Disable color scheme.
Color scheme - choose color scheme for site.

Header

Header background color - the header background color in hex format. You can select a color from the Color Palette.
Header panel background color - choose the background color for header panel.
Header Main Menu background color - choose the background color for Main Menu panel.
Header Main Menu link color - choose the color for Main Menu links.
Header background image - Enable/Disable header background image
Background image - upload the header background image file. Allowed file types: ICO, PNG, GIF, JPG, JPEG, APNG, SVG. Not all browsers support all these formats!
Background position -
set the header background image position.
Background repeat - set the header background image repeat.
Background size - set the header background image size.
Background attachment - set the header background image attachment.

Content

Primary color - the primary color in hex format.
Secondary color - set the secondary color in hex format. You can select a color from the Color Palette.
Body background color - body background color in hex format.
Body background image -
Enable/Disable body background image
Background image - upload the body background image file. Allowed file types: ICO, PNG, GIF, JPG, JPEG, APNG, SVG. Not all browsers support all these formats!
Background position - set position for your background: Left Top, Center Top, Right Top, Left Center, Center Center. Right Center, Left Bottom, Center Bottom, Right Bottom.
Background repeat - choose how background image will be repeated: Repeat, No Repeat, Repeat X, Repeat Y.
Background size - set the body background image size
Background attachment - body background image attachment: Scroll (scroll with content), Fixed (no scroll with content).
Primary font color - set the primary font color in hex format. You can select a color from the Color Palette.
Primary link color - set the primary link color in hex format. You can select a color from the Color Palette.
Primary title color -
set the primary title color in hex format.

Footer

Footer background color - choose the color for your footer. You can select a color from the Color Palette.
Footer background image - enable/disable the footer background image.
Background image - Footer background image file. Allowed file types: ICO, PNG, GIF, JPG, JPEG, APNG, SVG. Not all browsers support all these formats!
Background position -
Footer background image position.
Background repeat - Footer background image repeat.
Background size - set the footer background image size.
Background attachment - set footer background image attachment
parallax
In case, you've changed the "website code" in Stores > All stores, you must change it in the color_schemes.xml file, too.

In order to change "website code" in the color_schemes.xml file go to app\code\TemplateMonster\ThemeOptions\etc.

parallax

Open the color_schemes.xml file using any code editor.

Find the <website code="clothes_store"> line (in our case) and replace "clothes_store" (the previous code) with the new one <website code="your code">.

parallax

If you change the "website code" for another Web Site, you need to change its code in color_schemes.xml file. Find the <website code="previous code"> line and replace it with <website code="new code">.

Before modifying the website code please make sure it is not used in index.php.

Category Page

Settings for Category page in a list/grid view.

parallax
Grid View
Number of columns - specify number of product listing columns in grid view.
Enable the Card Parallax Hover - set if you want to enable the parallax hover effect for Product Card.
Choose the Product Image hover effect - choosr the hoover efect you want to use for the Product Page.
Choose the Product Image hover effect - select type of product hover on product listing.
Slides count - in case you select the Image carousel, the new option will come up prompting to set the number of slides to show.
for Thumpnail Gallery    
Thumbnails width - set thumbnails width in px. Example: 50
Thumbnails height - specify thumbnails height in px. Example: 50
Slides count - set number of slides to display. If empty, all product images will be included to the gallery.
Image width - product image width in pixels.
Image height - product image height in pixels.
Use aspect ratio - using image aspect ratio.
Show swatches - show swatches block in listing.
Show compare - select if you want to show a compare button.
Show wishlist - select if you want to show a wishlist button.
Show reviews - select if you want to show a reviews section.
Show product description - select if you want to show a product description section.
To enable the "image on hover" feature for the products you should first select the image for the effect.

See the tutorial: How to Enable "Product Image on Hover" Feature.

List View
parallax
Image width - product image width in pixels.
Image height - product image height in pixels.
Use aspect ratio - image aspect ratio.
Show swatches - select if you want to show a swatches block.
Show compare - select if you want to show a compare button.
Show wishlist - select if you want to show a wishlist button.
Show reviews - select if you want to show a reviews section.
Show product description - select if you want to show a product description section.

Product Page

You see three tabs: General, Tabs section, Gallery settings.

parallax
General
parallax
Show stock - show product stock status.
Show sku - show product sku.
Show compare - show a compare button.
Show wishlist - show a wishlist button.
Show email to friend - show a button email to friend.
Show reviews - show a reviews section.
Show product short description - show short description section.
Related ptoducts
Show related products - show related products on a product page.
Related products count - specify the number of related products.
Related image width - related image width in pixels.
Related image height - related image height in pixels.
Show related checkbox - show checkbox "Add to Cart" on relate product.You can add few products in a cart if you select product. Configurable products do not support the Show related checkbox option
Upsell products
Show upsell products - show upsell products section.
Upsell products count - specify the number of upsell products.
Upsell image width - upsell image width in pixels.
Upsell image height - upsell image height in pixels.
Tabs sections
parallax
Show description - show a description tab.
Description tab title - enter the title for description tab.
Show additional - show a additional information tab.
Additional tab title - specify the title for additional tab.
Show reviews - show a reviews tab.
Reviews tab title - enter the title for reviews tab.
Gallery settings
parallax
Image width - set the thumbnail image width in pixels.
Image height - set the thumbnail image height in pixels.
Image zoom - enable the image zooming for the Product Page.

Header

General

Sticky menu - specify if you want to use the sticky menu for your website.

In Header tab you have the Social links section.

Social links

parallax

You can add link to your social network using Font Icon or Image icon.

Image icon

For adding URL with image, you need add social url, width of icon, alternative text to image and upload image.

parallax
Font Icon

For adding URL with FontIcon, you need add icon CSS Class, social url, set font size and line height

parallax

Footer

parallax

In footer you can add social link and set position

Image icon

For adding URL with image, you need add social url, width of icon, alternative text to image and upload image.

parallax
Font Icon

For adding URL with Font Icon, you need add icon CSS Class, social url, set font size and line height.

parallax

Sidebar

parallax
Show Wishlist - show/hide Wishlist block.
Show Compare - show/hide Compare block.
Show Recently Viewed Products - show/hide Recently Viewed block. Make sure, that the widget was created.
Show Recently Compared Products - show/hide Recently Compared block. Make sure, that the widget was created.
Show My Orders - show/hide My Orders block.

Useful Tutorials: