LIghtedix Documentation

Catalog Images Grid

Catalog page settings

• General
• Category page

General

Widget settings

To add a widget, navigate to Content > Widgets menu and press Add Widget. In the appeared window, in the Type field, select Catalog Image grid. In the Design Themes select the theme, that you want to apply this widget to. Press Continue.

Storefront Properties

Navigate to Widget options tab and you will see available options. Part of them is identical with the category page options.

Product categories settings

Ajax Search

Quick and easy search among the variety of products contributes to making a positive decision on purchasing in your online shop. Search module is the popular module among the online shops based on various platforms. It allows you to find the products you need according to the selected parameters quickly and easily without reloading the page.

In order to configure this module, you should navigate to the 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.

This module has 6 options available for editing if needed.
Let's review each option separately:

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.

Feel free to use all the options at once or just some of them, it's up to you. In case there are any suggestions or errors detected, feel free to contact us using the link provided on the module page!

Enjoy using!

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.

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.

The Aspect Ratio

Image Scale Mode

Force Size

Slides settings

Slides settings section allows 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 looping 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

Caption Settings

Layers main settings

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.

Slide Information

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.

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

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 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

Layer text position settings

Layer animation settings

Adding slider to page

To add slider to your page please use Magento widgets. In the main admin panel menu click Content > Pages item.

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 TEMPLATEMONSTER > Megamenu in the left side menu to go to the module settings interface.

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.
• 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.

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.

Styles configuration

Frontend:

• 2 subcategories;
• Block — menu_banner, menu_logo;
• 1 product.

How to change the menu block image(s)

Navigate to your Magento root folder on your server. Then, go to the app/design/frontend/TemplateMonster/themeXXX/web/images/media folder. (XXX — your theme number)

Find the image you want to replace. Remember (copy) the name of the image.

Upload the new image to the media folder replacing the old one. The new image should have the same name and extension. (e.g. menu_banner.jpg)

- Megamenu block image name — menu_banner.jpg;

- Image size — 254x437 px.

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 this module, you should navigate to Magento admin panel and choose the Stores > Configuration section in the left side menu.

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.

General section includes main module settings, and Social settings section serves for social icons display setup in the pop-up window.

1. In order to enable or disable module completely, you'll need to use Enabled option. It provides the possibility to deactivate the module completely.
2. 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.
3. This pop-up can be also set up to display once again after navigating to site footer by using a scrollbar. E.g., 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.
4. Pop-Up width option allows you to define the newsletter pop-up window width. Its size can be set in pixels only.
5. 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.
6. 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.
7. Button color and Button hover color options let you set a background color for the "subscribe" button.
8. 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

1. 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.

   

2. 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.

3. 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.

   

4. 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.

How to change the newsletter text

Navigate to your Magento root folder on your server. Then, go to the app\design\frontend\TemplateMonster\themeXXX\Magento_Newsletter\templates folder. (XXX — your theme number) Open the subscribe.phtml file. Enter the text you want to display within the newsletter block (replacing the old one). Remember to save the file.

Parallax settings

General

To activate the module, navigate to Store > Configuration > Templatemonster > Parallax tab. Here you'll find option to enable module.

To add and configure parallax block, navigate to TEMPLATE MONSTER > Parallax Block.

You'll see the "Add new item" button [1] with the help of which you can add a new parallax block and a list of existing blocks [2].

While creating or editing a parallax block, two tabs become available. They are General Settings & Parallax Block Item.

General Settings

In this section, you'll see the general setting for a parallax block.

Let's review module options:

Parallax Block Items

In this section, you can see the [1] "Add item" button that is needed for adding a new layer, with the parallax or not. This button appears after a new parallax block creating only [once you click on the "Save block" or "Save and Continue edit" button].

Also, you are able to see this parallax block layers list [2].

While creating or editing a layer you might deal with the following settings:

Item name	-	in this field, you can set a name of a layer.
Status	-	enables/disables a parallax block on your website.
Type	-	you are free to choose any of four type of layer: Background Image/Background Video/Image/Text [each type settings became available after the type choosing].
Offset	-	set the layer vertical offset, in pixels only.
Inverse	-	determine the direction of parallax motion. Enable — to the top, Disable — to the bottom.
Layout speed	-	determines the speed of the layer relative to the scroll bar. The value should range from 0 to 2.
Sort Order	-	sort order of the block item.
Fade	-	if Enable, a layer will be gradually emerge from full transparency to full opacity depending on the position of the scroll layer.
CSS-class	-	you can add CSS class to your layer.

Settings according to the layer type

If you choose Background image or Image type, you going to have another field with a button to upload an image file. You can delete an uploaded image ticking the "Delete Image" and saving the configurations.

When choosing Background video, the additional options will appear:

If you choose the Text type, the field for you to input the text or HTML code, which ought to be displayed on your layer, will appear.

The output to Frontend

To display your parallax block on website you need to follow along with these several steps:

1. Go to Content > Widgets > Add Widget.

2. Select the Parallax block and your Design theme.

3. Click "Continue" button. Choose Store view in a Store front Properties tab, enter the Widget title and Order number.

4. Then you need to choose specific place to display the block.

5. Go to Widget Options tab and select your parallax block.

Ajax Compare

Products compare is one of the standard e-commerce features. We have created the special module for the convenient use of this feature, it is based on AJAX technology, and allows you to add products to compare without having to navigate to the separate page.

You can either enable or disable this module. In order to do this, navigate to the admin panel and choose the Stores > Configuration section in the left side menu.

Then choose the TemplateMonster > Product Compare Ajax item on the new page on the left side.

Theme Options settings

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

The Tab structure is as follows:

General

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).

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.

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">.

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.

Main Theme Settings

Settings for the Typography tab are the following:

Top head background color	-	top head background color in hex format.
Top head 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).

Deskop

Tablet

Mobile

Product detail settings

Social links

Swatch Settings