Click on “Add new” button and then click on “Upload theme” button. Here upload theme zip file.
Activate the theme.
Installing M Shop Pro Plugin
M Shop Pro Plugin will add Advanced premium features and functionality to M Shop free theme.
Step 1 : Navigate to ThemeHunk homepage, You will see “Themes” menus on the top, when you hover over it you’ll see Pro Themes, click on it. In the Pro Themes page you’ll see M Shop Pro, click on View More button.
Step 2 : M Shop pro sales-page will open, Afterward, just simply hit the ‘Buy Now’ button and it will directly take you to the ‘Pricing‘ section of M Shop Pro Plugin.
Step 3: Now choose your desired plan from here and hit the button Buy Now from desired table.
Step 4 : Purchase your plugin from here, fill all the required details. Login to your member’s area. Your pro plugin has been added in your member’s area dashboard.
Step 5 : You’ll see a M Shop Pro plugin zip file in your Member’s area. Download the zip file of plugin.
Step 6 : Now, Open your WP Dashboard > Plugins > Add New > Upload the Plugin Zip file and Activate it.
Now you can customize your website using Pro features.
How to add Advanced Search bar in theme.
After installing and Activating M Shop theme & Pro Addon in your dashboard. Go to your Plugins > Add New Plugin > Search TH Advance Product Search > You’ll find the plugin, Click on Install and Activate it in your Dashboard.
This will display Search bar in your website.To know how this plugin works, Go with this Doc.
How to Setup Menus
To set Menus in your site. First go to your Dashboard > Appearance > Menus.
Click the “Create a New Menu” button & Write a menu name on the field. Now Click the “Create Menu” button.
From the “Add menu items” you can add menu items to your menus. You can add pages, Create Custom links, categories, posts etc. Select your menu item by checking the box and Add Menu items in your Menu by Clicking on the “Add to Menu” Button.
Now you have created your Menu, you need to set it to a Menu location.
From the Menu Settings, you can display your Menu items in Header, Footer area.
You can Select Location by checking the Box of Header Above Menu, Main ( Frontpage Menu ), Sticky Header and Footer Menu ( Above Footer, Widget footer and Below footer ). Check them according to your requirement.
Click “Save Menu“ button to save the changes.
Demo Import
Follow this video tutorial and Learn to Import demo data.
Site Identity
Using this Option panel you can display Site logo or site title tagline and site icon in your website.
Logo– Upload a logo image with specific width and height.
Logo width – Set the desired logo image width.
Site Title & Tagline – Display site title & tagline in-place of Logo.
Site Title & Tagline Show/Hide – Check on the radio button display site title and tagline.
Site Icon – You can upload a site icon for your browser.
Homepage Setting
To create Homepage on your site follow the below instructions –
Go to Wp Dashboard > Page > Add New > Create a Page.
In the right sidebar of your editor you will see Page attributes > Template. Click on the template and select the option Homepage template. Publish it.
Navigate to Customize panel > WordPress Default > Homepage Settings. In homepage settings. Select the radio button of “A static page” and choose your homepage which you have created as front page.
Main Header
Using Header Setting you can display and customize your Website Header. For Main header setting, Go to Appearance > Customizer > Layout > Header > Main Header..
In main header your logo and main navigation will be displayed along with Menu.
To show navigation menu in your “header” first set the menus from the dashboard. Navigate to Dashboard > Appearance > Menus > Add your Menus Items.
Check to disable Category in Search Box – This option will disable Category search from the header search box.
You can Enable or Disable Wishlist, Account and Cart icon from your Mobile device.
Off Canvas Sidebar – You can Add Off canvas sidebar in your Header Before logo or After logo. Whenever you click on the Off canvas Sidebar icon button, it will open a side panel in your website.
To setup widgets in Off canvas sidebar, just go to Widgets > Off Canvas Sidebar > add widget from the Widget panel and Publish it.
Side Pan
Category – To Exclude Category, Go to Appearance > Customizer > Layout > Side pan.
Using this Option you can disable the desired Dropdown category from the Dropdown box. Simply check the box of category and exclude it from your site.
Row 1 – To Show elements like – Call to, social icons, Button, Text, Widgets. Go to Appearance > Customizer > Layout > Side pan.
Just choose the desired element and fill all the details.
Row 2 – To Show elements like – Call to, social icons, Button, Text, Widgets. Go to Appearance > Customizer > Layout > Side pan.
Just choose the desired element and fill all the details.
Sidebar
You can also display sidebar in your Home page or Inner pages. To display sidebar, Go to your Dashboard > Pages > In the right hand panel you’ll see Dynamic sidebar > Select Left or Right sidebar from here.
Now to your Customize panel > Widgets > Primary sidebar option will be enabled here. Now choose desired widgets from the widget poanel, and showcase sidebar on your site pages.
Blog Setting
For Blog setting, Go to Appearance > Customizer > Layout > Blog. In Blog page you can show collection of post grouped by category, author, date and tag etc.
Blog Post content – In blog post content you can show your full content, No content and Excerpt length. Excerpt length allows you to set content length you want to show in your blog page.
Read More Text – In read more text, put the text you want to display for your Read more button.
Post Pagination – It will provide you Numbered, Load More and Infinite navigation for your blog page.
Footer Setting
Footer setting is specially used to display and customize your website footer. In footer area you can add important content and navigation option. For this setting, Go to Appearance > Customize > Layout > Footer.
Above Footer
It appears right above the Main Footer and allows you to show multiple elements like – social icons, menu, search, Text, Widgets. You’ll get three layouts. One Column layout, Two Columns layout and Three Columns layout.
Using None Layout, you can disable Above Footer from your site.
You can also style your above footer by using options like height, bottom border and border color.
Widget Footer
For this setting, Go to Appearance > Customize > Layout > Widget Footer.
Footer Layouts – In Footer Widget there are eight different Footer Layout. You can add unlimited widgets in your footer by selecting the layout.
Note – You’re absolutely free to add unlimited widgets in each widget area. Just click on “Go to Widget” button and add widgets.
Below Footer
For this setting, Go to Appearance > Customize > Layout > below Footer.
It appears Below the footer widget and allows you to show multiple elements.
It appears below the Main Footer and allows you to show multiple elements like – social icons, menu, search, Text, Widgets. You’ll get three layouts. One Column layout, Two Columns layout and Three Columns layout.
Using None Layout, you can disable below Footer from your site.
You can also style your below footer by using options like height, bottom border and border color.
Move to Top
For Move to Top, Go to Appearance > Customize > Layout > Move to Top.
You can add Move to Top button on your site. This button will easily scroll your site to the top of the page in just one click on the button.
You can change the icon size. Pick color for Icon and icon background.
You can also disable the Move to Top button by checking the box.
Typography
Go to Appearance > Customize > Typography. You can add typography on your site with multiple Google & standard fonts. Using different fonts on your site makes it a creative website.
Base Typography
For Typography, Go to Appearance > Customizer > Typography > Base Typography. Typography is the best way to show your content in a unique and attractive way. You can add multiple Google & standard fonts using typography in your site. Using different fonts on your site make it a creative website.
Choose Font family for body text. Adjust the font size, line height and letter spacing. This will be applicable for overall sites body.
You can also adjust “Text Transform” set your body text as Capitalize, Uppercase, Lowercase, default or none.
You can choose the “Font Weight” for your text.
Title
Choose font of your title. This will set typography for overall site titles.
You can also customize “Text Transform” set your title as Capitalize, Uppercase, Lowercase, default or none.
You can choose the “Font Weight” for your text.
Content
This will set the overall typography of single page from heading H1 to H6.
Heading (H1) – Applicable for for all h1 headings like page title, product title. Choose font family and adjust the font size, line height & letter spacing.
Heading (H2) – Applicable for h2 headings. Choose font family and adjust the font size, line height & letter spacing.
Heading (H3) – Applicable for h3 headings. Choose font family and adjust the font size, line height & letter spacing.
Heading 4 (H4) – Applicable for h4 headings. Choose font family and adjust the font size, line height & letter spacing.
Heading 5 (H5) – Applicable for h5 headings. Choose font family and adjust the font size, line height & letter spacing.
Heading 6 (H6) – Applicable for h6 headings. Choose font family and adjust the font size, line height & letter spacing.
Frontpage Sections
Top Slider
Go to Appearance > Customizer > Frontpage Sections > Top slider.
There are six layouts in Top Slider. You can add slider content like images, Title, Sub title, Text and link. You can add unlimited Slider in the layout.
You can On/Off the slider.
You can Disable or enable the section anytime you want.
Highlight Section
To add Highlight, Go to Appearance > Customizer > Frontpage Sections > Highlight Section.
In this section you can display highlighted content like Icon, Title and Subtitle. You can pick Icon from the Icon Panel.
You can Disable or enable the section anytime you want.
Tabbed Product Carousel
To add Tabbed Product Carousel, Go to Appearance > Customizer > Frontpage Sections > Tabbed Product Carousel.
First Create Categories and Assign Products to them to display Products in your site. Follow this.
You can showcase your products category wise in tabbed format.
You can show recent, random & featured products in this section.
You can also enable Single Row Slide or show the default one. Enable the Slide auto play.
You can Disable or enable the section anytime you want.
Woo Category
To add Woo Category, Go to Appearance > Customizer > Frontpage Sections > Woo Category.
First Create Categories and Assign Products to them to display Products in your site.Follow this.
Add the Section title in text area.
There are three slider layouts in Woo Category, you can show categories using these amazing layout slider. Also select the No. of column to show.
You can also enable Single Row Slide or show the default one. Enable the Slide autoplay.
You can Disable or enable the section anytime you want.
Product Tab Image Carousel
To add Product List Carousel, Go to Appearance > Customizer > Frontpage Sections > Product List Carousel.
First Create Categories and Assign Products to them to display Products in your site. >Follow this.
Your Products will be display in List Way by selecting the Category. You can show recent, featured or random product in this section. You can also upload a Banner image and choose its alignment Left or Right.
Add the Section title in text area.
You can set the Autoplay slider speed. Default value is 3000 Milliseconds.
You can Disable or enable the section anytime you want.
Ribbon Section
To add Ribbon Section, Go to Appearance > Customizer > Frontpage Sections > Ribbon Section.
You can show ribbon background image or Video, text, button text and button link.
By default it will take theme color in the background.
You can Disable or enable the section anytime you want.
Product Carousel
To add Product Carousel, Go to Appearance > Customizer > Frontpage Sections > Product Carousel.
First Create Categories and Assign Products to them to display Products in your site. Follow this.
With Product Carousel you can display any specific shop category product or All Category products using slider.
You can show Recent, Random and Featured products in this section.
You can also enable Single Row Slide or show the default one. Enable the Slide autoplay.
You can set the Autoplay slider speed. Default value is 3000 Milliseconds.
You can Disable or enable the section anytime you want.
Testimonial Section
To add Testimonial Section, Go to Appearance > Customizer > Frontpage Sections > Testimonial Section.
You can add unlimited client testimonials here. Just click on Add new testimonial and fill the content which is required.
You can Disable or enable the section anytime you want.
Product List Carousel
To add Product List Carousel, Go to Appearance > Customizer > Frontpage Sections > Product List Carousel.
First Create Categories and Assign Products to them to display Products in your site. Follow this.
Your Products will be display in List Way by selecting the Category. You can show recent, featured or random product in this section.
Add the Section title in text area.
You can set the Autoplay slider speed. Default value is 3000 Milliseconds.
You can Disable or enable the section anytime you want.
Banner Section
To add Banner Section, Go to Appearance > Customizer > Frontpage Sections > Banner Section.
There are six banner layouts in this section. You can add banner images with their URL respectively.
You can Disable or enable the section anytime you want.
Brand Section
To add Brand Section, Go to Appearance > Customizer > Frontpage Sections > Brand Section.
You can upload brand images with their URL.
You can Disable or enable the section anytime you want.
Tabbed Product list Carousel Section
To add Tabbed Product list Carousel Section, Go to Appearance > Customizer > Frontpage Sections > Tabbed Product list Carousel Section..
First Create Categories and Assign Products to them to display Products in your site.
Your Products will be display in List Way and your Category will show in Tabbed format. You can show recent, featured or random product in this section.
You can Disable or enable the section anytime you want.
Single Product Carousel Section
To add Single Product Carousel Section, Go to Appearance > Customizer > Frontpage Sections > Single Product Carousel Section..
First Create Categories and Assign Products to them to display Products in your site.
In this section your product item will be display. Two different layouts are given to display your products
You can Disable or enable the section anytime you want.
Custom Section
To add Custom Section, Go to Appearance > Customizer > Frontpage Sections > Custom Section..
There are Four Custom section available. In Each Custom section you can add Widgets from the Widget panel. You can Choose single column layout, two column layout, Three column layout or four column layout to show your widgets in your site.
You can Disable or enable the section anytime you want.
Blog Section
To add Blog Section, First Go to your Dashboard > Blog > Create a Post and publish it. Now Navigate to Appearance > Customizer > Frontpage Sections > Blog Section.
Here Add heading, Choose the blog category, Enter the No. of Post to Show and publish it. This will show your blog posts on Homepage.
You can Disable or enable the section anytime you want.
Section Ordering
For Section Ordering setting, go to Appearance > Customize > Frontpage Sections > Section Ordering. You can Change the order of any particular section.
How To add Product Category and Create Products ?
To display Products on your website first you have to create Product Category. To create Category, Navigate to Dashboard > In the left side panel you’ll see Products > Categories.
Click on Category, Add new Product category name and upload thumbnail image here. Click on “Add New Category” Button.
To edit a pre-existing category, select a category on the right side of the screen.
Now Navigate to Products > Select the product to which you are assigning a category. Under Product Categories you can also check a pre-existing category.
Total Color & BG Option
For Color & Background, Go to Appearance > Customize > Color & Background. You can pick color for every element and upload background image.
Global Color –
For Global colors option, Go to Appearance > Customize > Global Colors.
You can change the default color all over the site using Theme Color.
You can pick color for link, link hover color, text color, title color, background color & Background image.
Header Color
For Header color option, Go to Appearance > Customize > > Total color & BG options > Header Colors.
Main Header
You can pick Current Background header & color for your Main Header, Site title color, Title hover color, Tagline color, Main header content color, link color and icon color.
Search Box
You can pick color for Search box Background color, text color and Button Background color, Text color.
Footer Color
For Footer color option, Go to Appearance > Customize > > Total color & BG options > Footer Colors.
Above Footer
You can pick color for Above footer background color, Text color, Link color and Link hover color.
Widget Footer
You can pick color for Widget footer background color, Widget Title color, Text color, Link color and Link hover color.
Below Footer
You can pick color for Below footer background color,Text color, Link color and Link hover color.
Side pan / Mobile Color
For Side pan/ Mobile color, Go to Appearance > Customize > > Total color & BG options > Side pan / Mobile Color.
You can pick color for Side pan/ Mobile view Background color, Border color, Title color, Title Active color, Text color, Link color, Link Hover color.
Menu/ Category – You ca pick color for Link & Link hover color.
Sub Menu/ Sub Category – You can pick color for Link, Link hover, Icon and icon hover color.
Close Button – You can pick color for Close button Background color & Icon color.
WooCommerce Color
For WooCommerce Color, Go to Appearance > Customize > > Total color & BG options > WooCommerce Color.
Product Style – You can pick color for Product elements like Product Title, Price, Icon Background color, Icon color, Sale Color, Sale background color, Text color, Background color and Border color.
Shopping Cart – You can pick for Shopping cart Background, Title color, Link color, Content color, Button Bg Color, Button color and Close link color.
Frontpage Color
For Frontpage Color, Go to Appearance > Customize > > Total color & BG options > Frontpage Color.
Global Section Color
You can pick color for elements like Section title color, Title border color, Category Tab color, Tab Active color, View all Button/ Slider navigation Background color and text color.
Top Slider
You can pick Overlay color, Heading color, Sub heading color, Button Bg color, Button text color.
Ribbon color
You can pick Overlay color, Heading color, Button Bg color, Button text color, button bg hover, button text hover color.
Highlight Color
You can pick Background color, icon color, Title color, Sub title color, border color.
Blog Section Color
You can pick Blog Background color, Border color, Title color, Text color.
Testimonial Color
You can pick Testimonial Background color, Image Border color, Text color and Navigation Icon color.
Custom Color
You can pick Title color, section global color, widget title color, widget text color and widget link color.
Woo Section
Product Style – Here you can choose color for all Products and its elements in the site. this will work for front page as well as for shop page. You can pick color for Product title, Price, Icon Background, Icon Color, Sale background, Sale Color, Background and border color.
Category Section – This color option is for Category Section. You can pick color for Category Title color, title hover color.
Single Product Section – This color option is for Single Product Section. You can pick color for Background, Product title, Border, price and content. You can also pick color for Add to cart background & Text and for Wishlist/ Compare icon Background & Text.
Preloader
For Pre loader, Go to Appearance > Customizer > Pre Loader.
For enabling the loader, check on the box “Enable loader”. Preloader will be shown when you load or refresh your site.
You can upload a GIF or an image as a preloader or you can pick background color instead of image.
Social Icon
To add social icons in header & footer, just navigate to Appearance > Customizer > Layout > Side pan > Row 1. Select layout > from Setting choose social media. Same you can do for Row 2 and Footer area.
For adding social profile links, Go to Appearance > Customize > Social icon.
You can show these social icon in the header as well as at the footer. To show social icons just put the links in the text area.
By default it will follow the color scheme but You can also set the “original color” for each social icon.
WooCommerce Setting
For WooCommerce setting. First you have to Install WooCommerce Plugin and activate it.
Now Set Shop page, Cart Page, Checkout page and My Account Page in your site. To Know how you can easily set these pages in your site. Navigate to this Post.
For WooCommerce Setting, Navigate to Customize > WooCommerce. Here you’ll get all the Woo Setting for your Shop Products.
Product Style
For Product Style, go to Customize > WooCommerce > Product Style .
Product Image Hover Style – You can display your product in “Zoom” hover style and “Swap”. Or you can select None if you don’t need any hover style.
Zoom – It is a kind of basic magnify effect on your product, it will zoom out your product while hovering the mouse over it.
Fade Swap & Slide Swap– In Fade swap condition your product gallery images will be displayed while hovering or clicking the mouse over the Product. It will exchange the product image and show other images of product which have some different look.
Quick View – You can Enable or Disable Quick View of your product. Using Quick View you’ll get a quick look of products without opening the product page.
No. of product to show in Front Page – Using this option you can limit the no of products you want to display in your Product sections. Just add the Number in the text box and show your products in sections.
Single Product
For Single Product Page Setting, go to Customize > WooCommerce > Single Product.
Up Sell Product – These are the items that your customer might prefer instead of the product currently viewed. Items which is offered as an up-sell might be more popular, have better profit margin or a higher quality.
Check the box “Display upsell product”. If you check this box you can now set the Number of Column and Number of up-selling Product you want to show.
To setup Up sell Product, Go to WooCommerce > Products and select the product on which you’d like to show in Up-sell. Scroll down to the Product Data panel. Select the Linked Products tab in the left menu. Add the product you wish to link to by searching for it.
Related Product – Related product are the items which are similar to the product your customer is viewing. Products which are added in Cross sell, Up- sell Or relate to Any Category or Tag.
Check the box “Display related product”. If you check this box you can now set the Number of Column and Number of related Product you want to show.
Cart Page
For Cart Page Setting, go to Customize > WooCommerce > Cart Page.
In cart page you’re free to showcase your Cross sell product. You can also set the number of Cross Sell Product to show with columns.
To setup Cross Sell Products. Go to WooCommerce > Products and select the product on which you’d like to show in cross-sell. Scroll down to the Product Data panel. Select the Linked Products tab in the left menu. Add the product you wish to link to by searching for it.
Shop Page
For Shop Page Setting, go to Customize > WooCommerce > Shop Page.
Shop page Pagination – Choose Numbered, Load More or Infinite pagination and it will provide you better navigation for your Shop page.
Display Product View – Using this option you can display your product in Grid and List View Style. Grid view is the WooCommerce default layout to display products and List view arranges products in a vertical list.
How to Add Sidebar in WooCommerce pages & add widgets in them ?
To add sidebar in Shop page, first go to Dashboard > Pages > Shop page.
Now edit your Shop page > in the right hand panel you’ll see “Dynamic sidebar” option. From here you can choose Right sidebar & left sidebar to show in your shop page & other woo pages.
Now navigate to Appearance > Widgets. In the widget panel rightmost side you’ll see “WooCommerce sidebar”. Drag & drop Product widgets here.
To add sidebar in Single Product page. Go to Products > Edit your Product in the right hand panel you’ll see “Dynamic sidebar” option. From here you can choose Right sidebar & left sidebar to show in your Product single page.
Now navigate to Appearance > Widgets. In the widget panel rightmost side you’ll see “Product sidebar”. Drag & drop Product widgets here.
Additional CSS
For adding Additional CSS Code in your site. Navigate to Appearance > Customizer > WordPress default > Additional Css.
Now simply put your CSS code in the text area and Publish it.
