Start chat

ZEMEZ © Privacy Policy

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

Blog

The Blog module enables the Customers to add their post in the blog form in the Magento2 Webstore. The Customer can also edit or delete the post.

General

In this section, you'll find all the general settings of the module. Here you can enable or disable the module, add keywords, description, etc.
In order to configure the module, navigate to the Stores > Settings > Configuration section.

Choose TEMPLATEMONSTER > Blog in the left side menu to go to the module settings interface.

Check the tutorial on How to Manage Blog Extension.

Blog Category

Navigate to the TEMPLATEMONSTER section in the left sidebar. Find the Blog section and click the Categories. Here you will see the list of categories. You can either delete or edit the category by clicking the Select button in the Action column.
To create a new category, you need to click the Add New Category button at the top. In the window, you will see several sections.

Check the tutorial on How to Add New Blog Category.

Adding post

Navigate to the TEMPLATEMONSTER section in the left sidebar. Find the Blog section and click the Posts. Here you will see the list of all posts available on your website. You can either delete or edit the posts by clicking the Select button in the Action column.
To create a new post, you need to click the Add New Post button at the top. In the popup window, you will see several sections.

Check the tutorial on How to Add New Blog Post.

Check the tutorials below:

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 the Stores > Settings > Configuration section.

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

Check the tutorial on How to Manage Catalog Ajax Module.

Useful Tutorial:

 

Catalog Images Grid

Catalog page settings

To configure the module, navigate to the Stores > Configuration tab and select TemplateMonster > Catalog Images Grid on the left.
This section contains two subsections:
  • General
  • Category page

General

General section contains only one setting: Enable, it completely enables/disables the module. Category page section contains settings for the category page.

Check the tutorial on How to Manage Catalog Images Grid Module.

Widget settings

In addition to the static display of the block on the product listing page, you can also display the list of categories on the page of your choice with the help of a widget.

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.

Check the tutorial on How to Add Catalog Image Grid Widget.

Useful Tutorials:

Film Slider

Allows you to add slider with multiple layers to your store home page. Rich collection of slider configuration options and user-friendly interface will help you to configure your slider fast and easily.

To start working with the FilmSlider module, go to the TemplateMonster > Sliders section.

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 the General Options section you will 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.

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.

The Aspect Ratio
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.
Image Scale Mode

Sets the scale mode of the main slide images [images added as background].

  1. cover — will scale and crop the image so that it fills the entire slide.
  2. contain — will keep the entire image visible inside the slide.
  3. exact — will match the size of the image to the size of the slide.
  4. none — will leave the image to its original size.
Force Size
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 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
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 you 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

Click on the Add Slide button to add a new slide.

You can upload the slide image by simply dragging and dropping it on the slide thumbnail.

Press on the Slide Settings button to change the Slide Title and Slide Position.

The slide with the Slide Position set to 1 will de displayed before the slide with the position 2.

Rememder to Save the settings.

In order to open the the layers setting interfase click on the Layers Settings button.

Add Layers
Film Slider is a multi-layer slider. This mean that you can add multiple independent layers to your slide.

To add new layes to the slider, press the Add Layer button.

Click on the layer section to activate the layers's settings.

Let's see what layers configuration options are available.

Content Tab

Enter the text you you want to see on the slide. You can edit the text as you wish using the text editor, change the font family, design of type face, font color etc.

You also can add the link to any categoty, product or page. Highlight the text you want to display as the link. Press the Add Link button. Enter the link path and press the Save button.

You can set the layer size (px or %), background opaciti, colors, font styling, etc.

Let's review the options avaliable:

  • Width — specify the layer width, with units only (E.g. 100%, 120px, 3em, etc.)
  • Height — enter the layer height, with units only (E.g. 100%, 120px, 3em, etc.)
  • Background Color — choose the background color for the layer.
  • Background Opacity — set the layer background opacity in the range from 0 to 1 (E.g. 0.5)
  • Font Family — enter the font family name to use for the the text (E.g. Arial, Helvetica, etc.)
  • Text Color — specify the text color. You can use a Color Picker or enter the Hex Code. (e.g. #14649f, #40878d)
  • Font Size — set the text font size for layer (E.g. 22px, 3em, etc.)
  • Line Height — specify the line height for layer.
  • Font Style — choose the font style (Normal, Italilic, Oblique)
  • Font Weight — set the font weight value. The font-weight property specifies the weight or boldness of the font (400 - Normal)
Appearance Tab

Change the layer position by mooving the layer block on the slide preview section.

Set the layer depth (in px). You can apply some custom CSS Code and CSS Class to the layer as well.

Animation Tab

This section allows you to set transition, offsets, delay, duration, etc.

Remember to save the settings.

Press the Dublicate Slide button to copy the desired slide keeping the same layer(s) settings.

You can disable or enable the slide using the toggle button.

Remove the slide using the delete button.

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. (You may need to press Show/Hide Editor button to make Insert Widget button visible.)
In the appeared window select widget type 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.

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

Check the tutorial on How to Manage Google Map Extension.

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.

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.

 

    Let's review each option separately (click to expand):

    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 and Show on footer options allow you to configure the subscription form pop-up display.

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

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

    5. Show subscription link 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. Pop-Up width option allows you to define the newsletter pop-up window width. Its size can be set in pixels only.
    7. The pop-up may not be displayed immediately, but after some certain time period. This setting is controlled by Pop-Up delay 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.
    8. Button color and Button hover color options let you set a background color for the "subscribe" button.
    9. You can change Content in pop-up window: Title, Content, Submit button text, Cancel button text.
    10. 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.

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.

Check the tutorial on How to Manage Parallax Module.

 

PromoBanner

With this widget, you will be able to show banners on the home page, product pages, category pages, cart or specific product page etc. The PromoBanner offers to display images and cms-blocks banner types.

Check the tutorial on How to Manage Promo Banner Extension.

 

Site Maintenance

The Site Maintenance module for Magento 2 allows you to display the "Site under maintenance" page and let your customers know that now there is some technical work going on and that the website will soon become available.
With the help of this plugin, you can change the appearance of this page. You can whitelist IPs, which allows users gain access to the frontend. You can specify the end time of the service work and display a timer to let your clients know the timing of this work. The module allows you display a subscription form for this page, and in the end of the work you can send e-mail notifications to your clients.

General

To set up the module, navigate to Stores > Configuration and in the section on the right select Templatemonster > Site maintenance.
You'll find three sections there:
  • Page configuration;
  • Timer section;
  • Form settings.

Page configuration

This section serves for setting up the appearance of the page and contains a set of important settings.
Let's take a look at the available options:
Site Maintenance - enables/disables the module on the whole.
Title - the page title. It also serves as a heading in the page contents.
Allow frontend for current IP - with the help of this button, you can automatically add your IP to the whitelist and gain access to the frontend, bypassing the maintenance page.
IP Whitelist - in this field, you can add the IP addresses of the clients, who need to get access to the website frontend, bypassing the maintenance page.
Logo - you can add the page logo as an image.
Background Type - you can select the background type for the page. There are two available options: Image, Color. Depending on what option you choose, you'll see more settings. If you select Color, you'll see the Background color option. If you select the Image type, you'll see additional settings.
Background Color - the background color for the page.
Background Image - the image that is displayed on the background of your page.
- css-properties for managing the background in the image form.
Page Description - the field for the page content management. You can either use the WYSIWYG-editor, or work with html-code.

Timer section

This section is responsible for display and setup of the timer on the Maintenance page.
Let's take a look at the options of this section.
Enabled - enables/disables the timer on the page.
Timer Text - Allows you to display text before the timer with the help of WYSIWYG-editor or html-code.
Date/Time - you can set up the end date of the service work.
Timer Format -
the field to format the timer output. The field takes html-code. You can find the more detailed information on formatting the timer output on the plugin official website. %D days %H:%M:%S Y: years, J: months, n: days to month, w: weeks, d: days to week, D: total days, H: hours, M: minutes, S: seconds, h: total hours, m: total minutes, s: total seconds. HTML can be used here

Form settings section

This section is responsible for displaying and setting up the subscription form.
Let's take a look at the options of this section.
Enabled - enables/disables subscription forms on the page.
Form Title - the title of the block with the form, which will be displayed in front of the form.
Form Text - allows displaying some text before the subscription form with the help of the WYSIWYG-editor or html-code.

Social Login

General

The General section allows you to enable or disable the module whenever you need. Even after disabling the module, all the changes made previously will be preserved.
In order to configure the module, navigate to the Stores > Settings > Configuration section.

Choose TEMPLATEMONSTER > Social login in the left side menu to go to the module settings interface.
Enabled - turn on to enable the module.

Social Providers

Here you can customize each social media platform separately. Just fill in several fields to make the login button appear on the site.
Google+
This section allows you to enable the Google+ login button.
Enabled - turn on to enable the module.
Client id - Google+ client id.
Client secret - Google+ client secret.
Redirect Uri - use this uri to configure your application on Google Developers Console.
Sort order - sort order of the Google+ icon on frontend.
Facebook Options
This section allows you to enable the Facebook login button.
Instagram Options
This section allows you to enable the Instagram login button.
Enabled - turn on to enable the module.
Client id - Facebook client id.
Client secret - Facebook client secret.
Sort order - sort order of the Facebook icon on frontend.
Enabled - turn on to enable the module.
Client id - Instagram client id.
Client secret - Instagram client secret.
Sort order - sort order of the Instagram icon on frontend.
Twitter Options
This section allows you to enable the Twitter login button.
Enabled - turn on to enable the module.
Client id - Twitter client id.
Client secret - Twitter client secret.
Redirect Uri - use this uri to configure your application on Twitter Apps.
Sort order - sort order of the Twitter icon on frontend.

Shop by Brand

In order to customize the module, click the Stores > Settings > Configuration.

Then choose the TEMPLATEMONSTER > Shop by Brand in the left side menu and you'll move to the module settings interface.

The tab helps you configure the general information of the module.

Check the tutorial on How to Manage Shop By Brand Module.

Add a New Brand

If you want to add a new brand, click on the Add New Brand button at the top right corner, then fill out data about that new brand.

Check the tutorial on Add a New Brand.

Useful Tutorial:

 

Theme Options settings

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

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 - set 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. Example: 48.
Logo Line Height - enter line height for logo text in pixels. Example: 48.
Logo Font Color - set color for logo text in hex format. You can select a color from the Color Palette.
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. Example: 28.
Slogan Line Height - enter line height for slogan text in pixels. Example: 28.
Slogan Font Color - set color for slogan text in hex format.
Slogan Position - select slogan position relative to the logo.

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.

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.

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

Typography

Settings for the Typography tab are the following:

Primary font family - set primary font family name. Make sure, that specified font is included.
Secondary font family - set secondary font family name.
Primary font size - set primary font size [number with units e.g. 16px, 1.2em etc.]
Primary line height - set primary line height [number with units e.g. 16px, 1.2em etc.]

Category Page

Settings for Category page in a list/grid view.

parallax
Grid View
parallax
Number of columns - specify number of product listing columns in grid view.
Choose hover type - select type of product hover on product listing.
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.
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.
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
Show upsell products - show upsell products section. [9]
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 - Input tab title for description tab.
Show additional - Show a additional information tab.
Additional tab title - Input tab title for additional tab.
Show reviews - Show a reviews tab.
Reviews tab title - Input tab 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.

Header

In Header tab you have one 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.