Attention! Some of the 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 Wishlist
In order to configure this module, you should navigate to Magento admin panel and choose the Stores > Configuration section in the left side menu.
Then choose the TemplateMonster > Ajax Wishlist item on the new page on the left side.
You can either enable or disable this module. In order to do this, navigate to the Magento admin panel and choose Stores > Configuration section in the left side menu.
Then choose the TemplateMonster > Ajax Product Compare item on the new page on the left side. Hire you can enable the module for you site.
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 TemplateMonster > Catalog Ajax in the left side menu to go to the module settings interface.
Let’s review module options:
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.
Show number items
-
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.
Sort by (desc/asc)
-
products ordering. You can sort items without reloading the main page.
List order (price, position, name)
-
sorting parameters. It allows you to define the sorting parameter without reloading the page.
View mode (grid/list)
-
products display layout. This option allows you to specify products layout for listing pages without reloading them.
Layer filter
-
filter by attributes. That is the main module option. It enables AJAX filter by attributes and parameters located in the standard shop filters column.
Feel free to use all the options at once or just a few of them, it’s up to you.
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 the module, navigate to Stores > Settings > Configuration section.
Choose the TEMPLATEMONSTER > 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 display 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 classoption. 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 products - 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 with the list of products available for adding. After you add it to menu, it’s title will be listed in the Selected items field.
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 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.
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 scss 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.
Facebook plugin
Facebook Share is a professional module that allows you to display Facebook feed anywhere on the website. The module comes loaded with a wide assortment of features that allow webmasters to adjust it to any design and project.
In order to configure this module, navigate to Stores > Settings > Configuration section.
Then navigate to TemplateMonster > Facebook Share in the left side menu to go to the module settings interface.
Facebook Page URL
-
specify the url address of your Facebook page.
Homepage Settings
Enable widget
-
enable/disable the widget.
Widget block title
-
here you should specify the title of the widget.
Widget position
-
specify the position, where the widget will be displayed.
Tabs
-
specify the type of the tabs.
Width
-
specify the width of the widget.
Height
-
specify the height of the widget.
Use Small Header
-
enable/disable small header.
Adapt to plugin container width
-
this option allows the module to adapt to the container width.
Hide Cover Photo
-
show/hide cover photo.
Show Friend's Faces
-
show/hide profiles of the Facebook users.
Category Page Settings
Enable widget
-
enable/disable the widget.
Widget block title
-
here you should specify the title of the widget.
Widget position
-
specify the position, where the widget will be displayed.
Tabs
-
specify the type of the tabs.
Width
-
specify the width of the widget.
Height
-
specify the height of the widget.
Use Small Header
-
enable/disable small header.
Adapt to plugin container width
-
this option allows the module to adapt to the container width.
Hide Cover Photo
-
show/hide cover photo.
Show Friend's Faces
-
show/hide profiles of the Facebook users.
Product Page Settings
Enable widget
-
enable/disable the widget.
Widget block title
-
here you should specify the title of the widget.
Widget position
-
specify the position, where the widget will be displayed.
Tabs
-
specify the type of the tabs.
Width
-
specify the width of the widget.
Height
-
specify the height of the widget.
Use Small Header
-
enable/disable small header.
Adapt to plugin container width
-
this option allows the module to adapt to the container width.
Hide Cover Photo
-
show/hide cover photo.
Show Friend's Faces
-
show/hide profiles of the Facebook users.
CMS Page Settings
Enable widget
-
enable/disable the widget.
Widget block title
-
here you should specify the title of the widget.
Widget position
-
specify the position, where the widget will be displayed.
Tabs
-
specify the type of the tabs.
Width
-
specify the width of the widget.
Height
-
specify the height of the widget.
Use Small Header
-
enable/disable small header.
Adapt to plugin container width
-
this option allows the module to adapt to the container width.
Hide Cover Photo
-
show/hide cover photo.
Show Friend's Faces
-
show/hide profiles of the Facebook users.
Twitter Timeline
Display Twitter Feed Box quickly and easily with the help of this advanced Twitter Timeline module. Thanks to a variety of customization options, you can adapt the module according to the specifications of your project.
In order to configure this module, navigate to Stores > Settings > Configuration section.
Then navigate to TemplateMonster > Twitter Timeline in the left side menu to go to the module settings interface.
Let’s review module options:
Enabled
-
turn on to enable the module.
Widget id
-
twitter widget id.
Account name
-
Twitter account name.
Position
-
widget position on the page.
Color scheme
-
color scheme of the timeline widget.
Layout enhancements
-
choose from options to customize timeline widget.
Tweet limit
-
number of tweets to display. This field can only be set, if height is not specified.
Link color
-
link color in hex format.
Border color
-
border color in hex format.
Height
-
height of the timeline widget in pixels. This field can only be set, if tweet limit is not specified.
Width
-
width of the timeline widget in pixels.
Feel free to use all the options at once or just a few of them, it’s up to you.
Theme Options
This module allows you to customize the look of the theme in accordance with the specifications of your project. You are free to change the background, footer or header color, as well as the appearance of the site on various screens.
Select a Stor 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.
Let’s take a look at each section of the module:
General
Body background color
-
specify the background color;
Body background image
-
enable/disable the background image;
Header background color
-
specify the header background color;
Footer background color
-
specify the footer background color;
Footer background image
-
enable/disable the footer background image.
Theme color settings
Let's review the options available:
UncheckUse Default Value to change thesettings.
Color scheme
-
choose color scheme for site.
Primary color
-
primary color in hex format. You can select a color from the Color Palette.
Secondary color
-
secondary color in hex format. You can select a color from the Color Palette.
Body background color
-
body background color in hex format. You can select a color from the Color Palette.
Body background image
-
Enable/Disable body background image.
Background image
-
body background image file. Allowed file types: ICO, PNG, GIF, JPG, JPEG, APNG, SVG. Not all browsers support all these formats! Click on Browse to select an image.
Background position
-
body background image position.
Background repeat
-
body background image repeat.
Background size
-
body background image size.
Background attachment
-
body background image attachment.
Header background color
-
header background color in hex format. You can select a color from the Color Palette.
Footer background color
-
footer background color in hex format. You can select a color from the Color Palette.
Footer background image
-
Enable/Disable 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! Click on Browse to select an image.
Background position
-
footer background image position.
Background repeat
-
footer background image repeat.
Background size
-
footer background image size.
Background attachment
-
footer background image attachment.
Primary font color
-
Set primary font color in hex format. You can select a color from the Color Palette.
Primary link color
-
Set primary link color in hex format. You can select a color from the Color Palette.
Primary title color
-
Set primary title color in hex format. You can select a color from the Color Palette.
Main Theme Settings
Top head background color
-
specify the top head background color;
Top head background image
-
enable/disable the head background image;
Block title background color
-
specify the block title background color;
Block title background image
-
enable/disable the block title background image.
Desktop
Product Grid Setting
Items per row
-
specify the number of items displayed;
Product image height
-
specify the height of the product image;
Product image width
-
specify the width of the product image.
Product List Setting
Product image height
-
specify the height of the product image;
Product image width
-
specify the width of the product image;
Short description length
-
specify the length of the short description.
Tablet
Product image height
-
specify the height of the product image;
Product image width
-
specify the width of the product image;
Short description length
-
specify the length of the short description.
Product Grid Setting
Items per row (portrait)
-
specify the number of items displayed in portrait mode;
Items per row (landscape)
-
specify the number of items displayed in landscape mode;
Products per page
-
specify the number of products displayed on the page.
Product List Setting
Product List Setting
-
Short description length - specify the product list short description length.
Mobile
Product Grid Setting
Items per row (portrait)
-
specify the number of items displayed in portrait mode;
Items per row (landscape)
-
specify the number of items displayed in landscape mode;
Products per page
-
specify the number of products displayed on the page.
Product List Setting
Product List Setting
-
Short description length - specify the product list short description length.
Product detail settings
Product gallery width
-
Product gallery width - specify the product gallery width;
Product gallery height
-
specify the product gallery height;
Show upsell products
-
show/hide upsell products;
Upsell products count
-
number of upsell products displayed;
Upsell image width
-
specify the upsell image width;
Upsell image height
-
specify the upsell image height;
Social Links
Header social links
-
show/hide social links in header;
Footer social links
-
show/hide social links in footer;
RSS link
-
insert the RSS link URL;
Facebook link
-
insert the Facebook link URL;
Twitter link
-
insert the Twitter link URL;
Google link
-
insert the Google link URL;
Instagram link
-
insert the Instagram link URL;
LinkedIn link
-
insert the LinkedIn link URL;
Dribble link
-
insert the Dribble link URL;
Youtube link
-
insert the Youtube link URL;
Ajax Search
In order to configure this module, you should navigate to Magento admin panel and choose the Stores > Configuration section in the left side menu.
Then choose the TemplateMonster > Catalog Search Ajax item in the left side menu to go to the module settings interface.
Attention!!!
If you decide to enable Category Search Ajax and Product Search Ajax options, you’ll also need to enable Use Flat Catalog Category and Use Flat Catalog Product options respectively. You can enable these options at the Catalog > Catalog > Storefront tab.
Film Slider
TemplateMonster FilmSlider module is an implementation of elegant and professional jQuery plugin ‘Slider Pro’. Allows you to add slider with multiple layers to your store home page. Rich collection of slider configuration options and user interface will help you to configure your slider fast and easily.
In the main navigation menu you’ll see new menu option TemplateMonster. To start working with the FilmSlider module, click Template Monster > Sliders menu item.
Here you can see a list of available sliders where you can disable/enable, delete or edit sliders.
To add new slider click Add New Slider button in the top right corner.
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.
Let’s see what slider options are available. As you can see options are divided into several parts to make the configuration interface more user friendly.
General Options
Main Settings
This section allows you to set slider title, select store view, enable/disable slider, set its width and height. Each option refers to Slider Pro jQuery plugin property. You can find more specific description of each property in official Slider Pro documentation. Some jQuery plugin properties may not present in the FilmSlider configuration, we will add them in future releases.
Slider dimensions (width and height) can be set to a fixed value, like 900 (indicating 900 pixels), or to a percentage value, like '100%'.
Please note: slide title, store view and status are required, you cannot save the slide without these values set.
Image Settings
In image section you can adjust slider image configuration settings. Each option has a brief description. Let’s describe some of them more specifically.
aspectRatio
Sets the aspect ratio of the slides. If set to a value different than -1, the height of the slides will be overridden in order to maintain the specified aspect ratio.
imageScaleMode
Sets the scale mode of the main slide images (images added as background). 'cover' will scale and crop the image so that it fills the entire slide. 'contain' will keep the entire image visible inside the slide. 'exact' will match the size of the image to the size of the slide. 'none' will leave the image to its original size.
forceSize
Indicates if the size of the slider will be forced to full width or full window.
Note: It's possible to make the slider full width or full window by giving it a width and/or height of '100%'. However, sometimes the slider might be inside other containers which are less than full width/window. The 'forceSize' property is useful in those situations because it will still enlarge the slider to fill the width or window by overflowing its parent elements.
Slides settings
Slides settings section allows to configure slides behaviour. Here you can configure slides animation, visible slider size, slides shuffle and loop.
Fade animation settings
This section contains settings for fade animation. Fade animation can be enabled on slide switch.
You can set if you want to fade out previous slide and fade animation duration in milliseconds.
Auto play settings
Autoplay feature in Film Slider allows to loop through the slides automatically. This configuration settings contain options to configure auto play delay, direction and pause with mouse cursor on hover.
Controls settings
Slider controls are the navigation buttons that let you switch the slides. In FilmSlider there are several types of navigation controls: prev/next arrows, pagination buttons. Enabled keyboard navigation allows you to switch between the slides using keyboard. Also, you can enable button that will switch slider to the full screen mode.
Responsive settings
Responsive settings section configures slider behaviour on mobile devices. Here you can define screen width breakpoints (small, medium, large). Also, you can enable touch swipe behaviour to let user switch between the slides with swipe gestures.
Caption Settings
Caption feature allows to add text to each slide. This section allows you to enable caption fade animation and set its duration.
Layers main settings
Layers configuration settings contain slides layers behaviour. Each option has a brief description under the input fields.
Adding Slides
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 Slider Item to add a new slide. Let’s see what slide configuration options are available.
Slide Information
Here you can input slide title and set its status (enabled/disabled).
Slide Images
This section allows you to add images to the slide. Click Insert Image button to open Image library where you can select available images.
You can also upload images from your computer.
Under the Image field you can see your slide preview. You are free to set preview size the way you like. We moved the next section of slide configuration to the separate section as it is fully related to slide layers.
Working with layers
FilmSlider is a multi-layer slider. This mean that you can add multiple independent layers to your slide. Layers can be added to the slide on the slide configuration screen described above. This screen contains several sections of layers settings.
Layers list
Layers list section allows to add layers to your slide. You can add image layers and text layers. Use corresponding buttons to add layers.
By clicking on Add layer image you’ll see an image library where you can select from available images or upload images from your computer. By clicking Add layer text, you’ll see new text layer added and layer settings became associated with your new particular layer.
Layer text settings
Using Layer text settings section you can input layer text, layer size, colors, font styling, etc.
In the Layer text/html field you can input your layer content in both text and html format.
Layer text position settings
In this section you can define text layer position.
Layer animation settings
This section allows you to define layer animation. You can set its position on the slide, set transition, offsets, delay, duration, etc.
When you add several layers, bottom configuration settings (position and animation) will show settings for the selected layer.
Adding slider to page
To add slider to your page please use Magento widgets. In the main admin panel menu click Content > Pages item.
Select the page you want to add slider to and click Edit.
At the page editing screen switch to Content section and click Insert Widget button.
In the appeared window select widget type Template Monster FilmSlider, select the slider you want to insert and click Insert Widget button.
When you are done adding the widget click Save Page button and switch to store frontend to see the result.
Newsletter Pop-up
Email newsletter has always been the important part of every marketing strategy. This method is used all over the world, so it will definitely help you to gain more orders and subscribers. That's why we proudly present you the Newsletter pop-up module. It displays the popup window with subscription form and social icons right after the client visits your site.
Global configuration
In order to configure the module, navigate to Stores > Settings > Configuration section.
Choose the TEMPLATEMONSTER > Newsletter Pop-up in the left side menu to go to the module settings interface.
The module has 2 sections, and each one contains a specific set of options:
General
Social Settings
General section includes main module settings, and Social settings section serves for social icons display setup in the pop-up window.
General
As stated above, this section includes main module settings. You can enable or disable module here, specify buttons color, define the width of the window, etc. Let’s review each option separately.
In order to enable or disable module completely, you'll need to use Enabled option. It provides the possibility to deactivate the module completely.
Show on startup, Show on footer and Show in footer options allow you to configure the subscription form pop-up display.
Show on startup option shows up the pop-up after visiting the site. As soon as shop page is loaded, you will see the pop-up offering you to subscribe to this site's newsletter.
This pop-up can be also set up to display once again after navigating to site footer by using a scrollbar. I.e., if you close the pop-up that appeared after the initial page loading and scroll down to the footer then, the same pop-up will show up for the second time. In order to re-display this subscription window, you have to enable Show on footer option.
Show in footer option allows you to display a link in the site footer, to display the newsletter pop-up after clicking on it. Footer link text field changes the label for the link displayed in the footer after activating the Show in footer option.
Pop-Up width option allows you to define the newsletter pop-up window width. Its size can be set in pixels only.
The pop-up may not be displayed immediately, but after some certain time period. This setting is controlled by Pop-Up timeout option. You can set a delay before the newsletter pop-up appearance and it will not show up right away, but only after the time you have specified passes since the client visits your site.
Button color and Button hover color options let you set a background color for the "subscribe" button.
You may need the CSS-class option when customizing the pop-up design. This option allows you to apply additional custom CSS-class for the pop-up window so that it can be used for further stylizing or other actions.
Social Settings
This section is responsible for social icons display and configuration in the newsletter pop-up. It consists of a few subsections that have similar options.
Main settings subsection allows you to set colors and social icons' appearance for the following services:
Facebook
Twitter
LinkedIn
Google+
Youtube
Vimeo
Pinterest
Instagram
Foursquare
Tumblr
RSS
You can enable or disable certain icon appearance by using the respective Enabled ……. icon option. This option activation will make a respective sections appear to let you configure each icon individually.
This section also includes the Use default icon colors option. It is used for changing icons color.
By default it's enabled, so all the icons have their corporate (standard) color that is specific for each social network. However, if you'd like to define icons color on your own, you should disable this option.
Each social network section has a Link option available. It lets you define the link to any page (your profile) in a respective social network.
After disabling the Use default icon colors option, you will see the new fields in subsections for each social network icon configuration:
Icon background
Icon color
Icon background hover
Icon hover color
All of these options allow you to customize the icon appearance. They provide you with the option to set the icon background and color for the initial state and on hover (after hovering the icon with the mouse cursor).
Please be sure to save your configuration!
Just in case you'd like to return all the default settings, there is a Reset button available next to the Save one.
Special Price Timer
Modules settings can be reached at the Store > Configuration > Templatemonster > Special Price Timer section at site admin panel.
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 > Templatemonster > Google Map.
General section allows you to enter the API key.
Home page map settings section allows you to display the map on the home page.
Contacts page map settings section allows you to display the map on the contacts page.
Footer map settings section allows you to display the map in site footer.
