MyGym Documentation

TM Extensions Settings

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

Post View

Related posts

Related Products

Sidebar

In this section, you can add some boxes in the sidebar on a blog page. Note, you should choose the 2 column layout.

Social Sharing tab

General

To get the Profile Id, register at the Addthis website. After this, you need to create a project in your Dashboard. When creating a project, you'll be redirected to the General settings, where you'll see the ID field in General section. You should use this very identifier.

You need to paste it in the Profile ID field in the Blog module settings window to make Share Buttons appear on your site.

Look & Feel

In this section, you can set up the appearance of the icons. You can choose one of the predefined presets, or you can add your own icons.

Add your own icons. There are 2 options in this section:

Custom button — select this option and specify the link to your image in the input field. When clicking the link, you'll see a popup for selecting a sharing service.

Custom code — if you select this option, you can fully replace to display of the icons with a custom one. The field can take html and css code. If you need to add a custom Facebook, Twitter or other service's icon, and want to make it work, you need to add a corresponding class to the link. For Facebook, this will be class="addthis_button_facebook", for Twitter - class="addthis_button_twitter", for a popup with selection of social networks - class="addthis_button_more".

Custom Metadata

In this section, you can set up sharing for a custom page.

Having specified all the data, you'll see their output in the sharing dialogue window. You'll see the specified data there.

Custom Sharing Service

In this section, you can add an icon of your social network, and users will be able to share, using your service.

Your module will be changed accordingly.

Api Configuration Options

This section contains the API settings of the Addthis service.

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.

General [Category Information]

SEO [Meta Data]

Related Posts

In this section, you can add the related post.

Select posts and click the "Save Category" button.

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.

Post information

Content

Meta Data

This section contains metadata for your post. You need to specify keywords and short description here.

Related Products

Here you can choose related products that will be displayed on the post page. Check the products you need to add and specify position of the products.

Choose Any option from the first column dropdown. Press the Search button. Check products you need to add and specify position of the products.

Related Posts

This section works the same way as the Related Products section.

Post Comments

Navigate to the TEMPLATEMONSTER section in the left sidebar. Find Blog and click Comments.

In this section, you can see all the comments for a particular post. You can edit and display each of them. To do this, you need to click the Edit button in the right column.

*Click to expand the tab

Frontend (based on the Magento default store):

1. Show in Menu — enable;
2. Title — Blog.

Post List Page (based on the Magento default store):

1. Title — Blog (1) ;
2. Posts per view — 3/6/9 (2);
3. Post List Page Layout — 2 columns with left bar;
4. Data Format — M d, Y (3);
5. Show Categories — enable (4);
6. Number of Categories — 3;
7. Show Recent Posts — enable (5);
8. Number of Posts — 3.

Post Page (based on the Magento default store):

Post Page:

1. Title — Blog;
2. Post Page Layout — 2 columns with left bar.

Related Posts (based on the Magento default store):

1. Display Related Posts — enable;
2. Number of Posts — 5;
3. Post Layout View — grid with thumbnails;
4. Number of Posts Per View — 4;

Related Products (based on the Magento default store):

1. Display Related Products — enable;
2. Number of Products — 6;
3. Number of Products Per View — 3;
4. Show Post Links at Product Page — yes.

Blog: Latest Posts Widget

To add a Blog widget to the homepage, you need to navigate to Content > Widgets tab. You can change settings of any Blog Widget here.

Tip:

if you want to find all Blog Widgets, use the filters to simplify the process. Select the "Blog Latest Posts" type in the "- Type -" filter dropdown list [Type column]. To open any edit required widget, click on its title.

Storefront Properties

Here you can find a list of options that allow customizing the widget and making it match the corporate style of your business.

Widget Options

Check the tutorials below:

Ajax Search

Quick and easy search among the variety of products contributes to making a positive decision on purchasing in your online shop. 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 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.

Featured Products

General

To set up the widget, navigate to the Content > Widgets section and press the Add widget button.

In the Storefront Properties section in the Type field, select Featured products. Press Continue.

Then, fill the other fields and specify the place, where you want to display the module in the Layout Updates section.

To set up the widget, go to the Widget Options section on the left.

In this section you should select the product type, which you want to display, in the Product types option.

General:

View:

Labels:

Banner:

Gallery:

When complete, tab Save.

Frontend

Example 1 (based on the default Magento store)

• Type — Featured Products;
• Assign to Store Views — All Store Views;

Layout Update:

• Display on — Anchor Categories;
• Categories — Specific Categories; 23 (Women > Tops > Jackets);
• Container — Main Content Bottom;
• Template — Products List;
• Product types — New Products; Sale Products; Most Viewed Products; Bestseller Products; Top Rated Products; Manual Products; All Products;
• Choose custom products — Joust Duffle Bag; Strive Shoulder Pack; Crown Summit Backpack; Wayfarer Messenger Bag; Rival Field Messenger; Fusion Backpack; Impulse Duffle; Voyage Yoga Bag; Compete Track Tote; Savvy Shoulder Tote;
• All Products title — All;
• Manual Products title — Manual;
• Top Rated Products title — Top Rated;
• Bestseller Products title — Bestseller;
• Most Viewed Products title — Most Viewed;
• Sale Products title — Sale;
• New Products title — New;
• Product Image width — 240;
• Product Image height — 240;
• Product Name length — 10;
• Products to Display — 10;
• Carousel — enabled;
• Number of products per view — 5;
• Use arrows — enabled;
• Use Pagination — enabled;
• Manual Products label — Manual;
• Top Rated Products label — Top Rated;
• Bestseller Products label — Bestseller;
• Most Viewed Products label — Most Viewed;
• Sale Products label — Sale;
• New Products label — New;
• Banner — enabled (OUR BEST PRODUCTS!!!);
• Choose hover type — Image carousel;
• Slides count — 20.

Example 2 (based on the default Magento store)

• Template — Products grid;
• Carousel — disabled.

The other settings are the same.

Example 3 (based on the default Magento store)

• Template — Products Sidebar;
• Container — Sidebar Main;
• Carousel — enabled;
• Number of products per view — 1.

The other settings are the same.

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

Google map

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.

   

Let's review the options available:

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

Frontend (Contact us page)

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

By default, Magento ships with the following widgets:



Widget Types (click to expand)

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

Styles configuration

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.

Social Providers

Google+

Facebook Options

Instagram Options

Twitter Options

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

Let's review the options available:

Uncheck Use Website to change the layout settings.

SEO

Color scheme status

Header

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

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.

Typography

Settings for the Typography tab are the following:

Category Page

Settings for Category page in a list/grid view.

Grid View

List View

Product Page

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

General

Tabs sections

Gallery settings

Header

In Header tab you have one Social links section.

Social links

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.

Font Icon

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

Footer

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.

Font Icon

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

Sidebar