M Shop

Installing Theme

  • First, download the M Shop file.
  • Login to WP admin.
  • Go to “Appearance > Theme”.
  • Click on “Add new” button and then click on “Upload theme” button. Here upload theme zip file.
  • Activate the theme.

installing-m-shop-free

  • After installing “M Shop” theme in your WP dashboard. Go to Appearance > M Shop Option panel > Here all the required plugins are available install and activate ThemeHunk Customizer, WooCommerce and other recommended plugins in your dashboard.

m-shop-plugins

How to Add Cart, Compare & Swatches

  • Go to your Appearance > M Shop options > In recommended plugin you’ll see TH Variation Swatches and TH All in One Woo Cart .
  • Install and Activate plugins in your dashboard. This will display Cart and Swatches in your website.
  • To learn more about Plugins, Navigate to TH Variation Swatches Plugin, Th Product Compare and Th All in One Woo Cart
  • m shop recommeded plugins

Demo Import

    • Go to your WP dashboard. Navigate to Appearance > M Shop options. Install and activate “Recommended Plugins”.
    • In the recommended plugin “ThemeHunk Customizer“, “WooCommerce” and “One click Demo Import” activation is mandatory.
    • As soon as you activate these recommended plugins “Site Library” link will display under “Import Demo Site”. Navigate to Import Demo data.
    • Choose the demo you want to import, Click on Import , Wait for few minutes your demo will be import successfully.
    • You can also Checkout our YouTube video.

Site Identity

Using this Option panel you can display Site logo or site title tagline and site icon in your website.

    • Dashboard > Appearance > Customize > WordPress Default > Site identity.
    • 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.

    site-identity-m-shop

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.

homepage-setting-m-shop

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.

header setting m shop

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.

side-pan-category-m-shop

    • 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-1-m-shop

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

row-2-m-shop

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 navigation for your blog page.

blog-page-setting-m-shop

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 also disable the Move to Top button by checking the box.

move-to-top-m-shop

Frontpage Sections

Top Slider

    • Go to Appearance > Customizer > Frontpage Sections > Top slider.
    • One Layout is given 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.

top-slider-m-shop

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.

highlight section m shop

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.

tabbed-product-carousel-m-shop

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 is one slider layout in Woo Category, you can show categories using this 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.

woo-category-m-shop

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.

product-tab-image-carousel-m-shop

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.

ribbon-section-m-shop

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.

testimonial-m-shop

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.

product-list-carosel-m-shop

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.

blog-section-m-shop

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.

Product-categories-top-store

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

add-product-top-store

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.

global-color-m-shop

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.

preloader-m-shop

WooCommerce Setting

    • For WooCommerce setting. First you have to Install WooCommerce Plugin and activate it from the Recommended plugins available in M Shop Options. If you have already did skip this.
    • 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.

woocommerce-m-shop-doc

Product Style

    • For Product Style, go to Customize > WooCommerce > Product Style .
    • Product Image Hover Style – You can display your product in “Zoom” hover style. 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.
    • 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.

products-style-m-shop-doc

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.

single-product-m-shop

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

shop-page-m-shop-doc

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.

additinal-css-m-shop