Jms 4life - Responsive WooCommerce WordPress Theme

Created by Joommasters

Jms 4Life is creative multi-purpose WordPress theme with a unique cool design, modern, stylish for creating your best online store. All these amazing features are blended together in Jms 4Life – your powerful, stylish and attractive responsive WordPress Theme. Make your business with our theme. We are sure that it will satisfy all your needs!

Quick Access

Before Getting Started

If you are not familiar with WordPress, please get accustomed with it before proceeding to using our theme. Here are some links that will help you to become more confident with WordPress:

Requirements & Compatibility


To run WordPress your host just needs a couple of things:


Our theme is compatible with these browsers:


Wordpress Core

You download and install WordPress version 4.3 or later

Theme Package

To download, you need to log into your ThemeForest account and go to your page. Locate the theme that you purchased in your Downloads list and click on the Download button

If you download All files & documentation, you will unzip it. Then, you find the installable file inside.

You can also download only the Installable Wordpress file.

WordPress Installation

Follow the steps below to install via WordPress:

  1. In your WordPress Admin Panel, go to Appearance > Themes
  2. Click on the Add New and Upload Theme buttons
  3. Click on the Choose File button and navigate to find the file on your computer and click on the Install Now button
  4. Wait while the theme is uploaded and installed
  5. Activate the newly installed theme
  6. Then you will get a notification about installing the required plugins. Follow the steps to install and activate the plugins
WordPress Installation
Please note that some hostings have a restriction on a size of a file that you are uploading. If you have any warning, you will contact your hosting provider. They should increase your maximum upload size.

FTP Installation

Follow the steps below to install via FTP:

  1. Log into your hosting space via an FTP software
  2. Unzip the file and ONLY use the extracted jms-4life folder
  3. Upload the extracted jms-4life folder into wp-content > themes folder
  4. Go to Appearance > Themes and activate Jms 4life theme
  5. Then you will get a notification about installing the required plugins. Follow the steps to install and activate the plugins
FTP Installation

Required Plugins

After activating the theme, you will get a notification about installing the required plugins. You go to Appearance > Install Plugins to install them.

Install Required Plugins

After click that link go to list plugin required. You should select all plugins and set action to install:

List Required Plugins

After Install and Active completed. Click on Return to the Dashboard

Install Completed Plugins
Please note that you do not purchase directly King Composer plugins. So you can not update them by yourself. It is also not recommended. When they have a new version, we will be careful to test and release the new theme's version.
We also notice that you should not update other plugins without updating the theme. Please see our changelog to make sure the current theme's version is compatible with the new plugin's version.

Updating The Theme

Manual Update

Follow the steps below to manually update the theme:

  1. First, you download the new theme package from themeforest. You have to log into your themeforest account and navigate to Downloads tab. You find the Bigshop theme in your purchased themes list.
  2. You can delete the current theme. Don't worry about this. Your data won't be lost.
  3. You upload the new theme package via Wordpress or FTP software.
Please ensure that you only upload the installable wordpress file. If not, you may get an error message: The package could not be installed. The theme is missing the style.css stylesheet.

Automatic Update

You update the theme through the Envato Toolkit plugin. Follow the steps below to set up this plugin:

  1. Download and install the Envato Toolkit plugin
  2. You log into your Themeforest account. Under Settings > API Keys, you generate an API key. Get it.
  3. In WordPress admin panel, you find the section called Envato Toolkit. You input your envato username and API key.

Please read this tutorial to get more information.

Import Samples Data

Jms 4life support 3 type of import sample data : Single Import, Full Data Import and Manual Import

1. Single Import

IMPORTANT: The included plugins need to be installed and activated before you install a demo. Follow the steps to install and activate the plugins

We can import all content, slideshows, widgets, menu items, theme options, menu localtion by only one click.

Oneclick to import data
- The menu items can not be imported on php7.
- Megamenu must be re-setting to make same demo.

2. Full Data Import

IMPORTANT: The included plugins need to be installed and activated before you install a demo. Follow the steps to install and activate the plugins

We can import all content, slideshows, widgets, menu items, theme options, menu localtion by only one click.

- We can import all content, slideshows,products, widgets, menu items, theme options, menus localtion by only one click and 100% like demo.
- all old data will be lost.
Oneclick to import data

3. Manual import

All post content

You can import content for projects, contact form,..

Login to your WordPress dashboard, navigate to Tools - Import. Click on WordPress link on the table then click Install Now button on popup window to install WordPress Importer.

Visual Composer Elements List

Click on Activate Plugin & Run Importerlink to begin

Visual Composer Elements List

Click "Browse..." button and select XML files in "exported_files" folder. :

Click on Upload file and import button

Visual Composer Elements List

On the next interface, select existing user on dropdown, check on Download and import file attachments to download sample images.

Click on Submit button to import.

All the content blocks are for sample, after importing finished, you have to edit them. Go to Content Blocks menu to see all, click on each block to edit.

If the process Import Data fails , you can import the data again


You can import all widgets for theme using by follow steps:

- goto widget import/export
- select "widget_data.json" file in exported_files folder (in package downloaded)
- Click import button


Theme Options

After activating our theme, you can go to Theme Options or Appearance >> Customize to configure the theme. Below will explain what you can do with Theme Options.

General Setting

- Change logo, Favicion, set site loader, select loading style, Smooth Browser Scroll and Back to Top.

General Setting

Header Setting

- we can select header layout, there are 8 layouts of header, change header text and set menu Sticky or not Sticky ...

Header Setting

Blog Setting

- We can select Blog Style, it has 3 blog style, Enable/Disable Latest Post Slider, and select Blog Layout, it has 3 blog layouts...

Blog Setting

Portfolio Setting

- We can set Portfolio title, set Page style (color , background,...), set columns number, Gutter or No Gutter, number of items per page.

Portfolio Setting

Woocommerce Setting

1. Shop/Category Setting(Products List Page)

- We can set Shop Title, Page Style(background, color, ...) , Product box hover, Show Product desc, number of products per Page, number of products per Row, select Product List Style (Grid, mansonry), Product List Layout (left sidebar, right sidebar, no sidebar), choose Pagination Style,...

Category Setting

2. Single Product Setting(Product Page)

- We can set Product Page layout (left sidebar, right sidebar, no sidebar).Note : You can select product page style in product edit page.

Product Setting

Theme Styling

- We can set Primary Color, Background Color, Body Color, Heading Color, Header Background, Header Color, Header Top Background, Header Top Color, Footer Background, Footer Title Color, Footer Color.

Theme Styling Setting


- You can set font, font size, color for Body, Heading, Menu, ...

Typography Setting

404 Page

- You can set Page title, heading, Show Previous Page Link, Page Tag Line and Button Link Title, ...

404 Page Setting

Social Network

- You can set link for social network

Social Network


- You can set Maintenance mode, heading, message, Maintenance time and background for maintainance Page


Custom Code

- You can enter CSS Code and JS Code, it will add like custom code to site.

Custom Code


- Paste your Google Analytics (or other) tracking code here. This will be added into the footer template of your theme.



- You can import/export theme option in this tab.

Import Export

Widgets & Sidebars

To manage widgets, you go to Appearance > Widgets. Just drag and drop widgets over to the sidebar.

Jms 4life comes with many custom widgets and 5 sidebars. You can also easily add a new sidebar.

To create widgets for this theme quickly, we use a tool to import all widgets from exported files in exported_files folder.

Login to your WordPress dashboard, navigate to Tools >> Widget Settings Import

Widget Area

Click on "Browse..." or Choose File button then select widget_data.json, click on Import Widgets to finish.

Widget Area


Jms 4life comes with King Composer plugin and powerful. The following sections will explain how to create a new page and make it look like our demo. If you use our One Click Import Demo functionality, you can ignore this.

Create A New Page

Follow the steps below to create a new page:

  1. In admin panel, go to Pages and click on the Add New button
  2. Input the page title and page content
  3. On the Page Attributes section, choose the page template from dropdown list

Home Pages

Setting up a home page

Navigate to Appearance >> Customize >> Static Front Page Tab

Set "Front page displays" to "A static page" and select one Home page for "Front page" select box.

Reading Settings
In Jms 4life we has 2 home page, We build it with king composer. Below is our demo home pages. To build a home page look like our demo, first you create new page then copy the page content into the Text editor and click to Update button.

Home Page 1(Default)

Page Content: you can copy it from pages_content/homepage1.txt file

Home Page 2

Page Content: you can copy it from pages_content/homepage2.txt file

Home Page 3

Page Content: you can copy it from pages_content/homepage3.txt file

Home Page 4

Page Content: you can copy it from pages_content/homepage4.txt file

Home Page 5

Page Content: you can copy it from pages_content/homepage5.txt file

Home Page 6

Page Content: you can copy it from pages_content/homepage6.txt file

Home Page 7

Page Content: you can copy it from pages_content/homepage7.txt file

Home Page 8

Page Content: you can copy it from pages_content/homepage8.txt file

Contact Us

It is easy to make your contact page look like our demo. First create new page then copy the page content and paste into the Text editor and click to Update button.

Page Content: you can copy it from pages_content/contactpage.txt file

Note: Contact Page use Contact Form 7 plugin, you need make sure that plugin installed and actived.

Translate Theme

Try installing the 'Loco Translate' plugin. ( Can be found in 'Plugin > Add New' section ) or You can download plugin at

- After installed plugin go to 'Loco Translate' section. And Click to "Theme > New Language"

To translate click to Loco Translate >> Themes >> click to Theme Name >> click to Language Name

You can learn more about how to localize / translate the wordpress string from as well

Multiple Currencies

1. Navigate to Jms Currencies

You can add new Currency (New Currency Button) and Update Currency Rate (Update Rate Button) from Yahoo.

Configure Plugins

MailChimp for WordPress

Use this plugin to make the newsletter sign up form on footer. Navigate to MailChimp for WP.Click on MailChimp link

On MailChimp tab, enter your MailChimp API key choose other options.

Click on Forms tab, there is a form named Subscribe

copy following code paste to editor then save changes it

<div class="newsletter-wrap"> <p>Enter your email and we’ll send you a coupon with 10% off your next order</p> <div class="newsletter-form"> <label class="hidden">SUBSCRIBE</label> <input type="email" name="EMAIL" placeholder="Your email address" required /> <button type="submit"><i class="icon-paper-plane"></i><span class="hidden">SUBSCRIBE</span></button> </div> <p class="dontspam">Don't worry, we don't spam</p> </div>

Products Compare

Navigate to YIT Plugins -> Compare.

Products Wishlist

Navigate to YIT Plugins -> Wishlist.

Products Quickview

Navigate to YIT Plugins -> Quickview.

Yith Popup

1. Navigate to Popup >> Create New Popup.

2.Navigate to Yith Plugins >> WC Popup.

Image Swatch

You can add Image swatch flowing steps below :

1. Navigate to Image Swatch.

You can set Attributes avaiable for Swatch, Attribute show on Product Detail

2. Go to a Product edit page.

Then click to Tab Attribute, select attribute from select box then click to add.

3. Click to Variations Tab to add Variations for Attribute.

Then you can edit variation and upload image swatch image for variations.

4. Click to Variations Thumbnail to manage thumbs icon for Variations.

You can add/upload swatch icon for each variations.

King Composer

Visual Composer will help you manage your content at the WordPress sites and build any layout you can imagine in few minutes without coding. You can read King Composer Documentation to get more details.

Please note that you do not purchase directly King Composer plugin. So you can not update it by yourself. It is also not recommended. When it has a new version, we will be careful to test and release the new theme's version. If you see the notification below, you can dismiss it.

How to add new row

To add new row, you scroll to bottom of page, click the Toolbar on bottom

King Composer Add New Row

How to add new element

To add new element, First you need click to Edit icon on colum then click to + button

King Composer Add New Element

Then, you choose an element from King Composer elements list

King Composer Elements List
All our addons are in Jms Addons tab.

Jms Slider

Jms Slider is slideshow plugin, help you create sliders. You can create unlimited slider, then use Jms Slider Layer shortcode to show one slider on page.

Jms Slider Manager

Click to Jms Slider Menu

Product Data

With each slider you can create unlimited slides

Product Data

Click to Edit slide icon to edit it, you can change background image or color, title, link and class for it

Product Data

Each slide you can add unlimited layers, Click to Layer Manager icon on Slides List to go to Layers Page

Product Data

Using Jms Slider

There are 2 ways to use Jms SLider

1.Paste shortcode to page or post content

  1. Create or edit a page/post
  2. Copy shortcode from slider List
  3. Paste into Text Editor
  4. Finally, Click Update to Save

2.Use Jms Slider Layer Short Code

On page you want to add Slider please Click on the Add Element button to open Visual Composer elements list and change to Jms Element tab.

Visual Composer Elements List

Click to Jms Slider Layer select slider to show then click Save.


Megashop theme is fully compatible with the latest version of WooCommerce plugin. We customized and added many features, shortcodes and widgets for this plugin. In the following sections, you will know how to install and set up WooCommerce plugin. You can also refer WooCommerce Documentation to get more information.

Install WooCommerce

There are 2 ways to install WooCommerce plugin

  1. After activating our theme, you go to Appearance > Install Plugins. You install WooCommerce plugin from the required plugins list.
  2. Install WooCommerce plugin from the Plugins page
Install WooCommerce
Install WooCommerce
You should install WooCommerce from the required plugins list. Because we tested that version and it is compatible with the current theme's version. To make sure our theme is compatible with the new version of WooCommerce, you should see our changelog or contact us

Adding WooCommerce Pages

There are 2 ways to add WooCommerce pages

  1. After activating WooCommerce plugin, you will get a notification as the screenshot below. Simply click the Install WooCommerce Pages button to create all WooCommerce pages
  2. Use the WooCommerce shortcodes. You can get them here
Adding WooCommerce Pages

Setting Up WooCommerce

To set up WooCommerce, you go to WooCommerce > Settings in admin panel.

Currency Options

  1. In WooCommerce Settings page, you select the General tab
  2. You find Currency Options section and configure your currency

List of currencies that you can choose

Currency Options
You can also add a custom currency symbol. Please refer this document

Product Image Sizes

  1. In WooCommerce Settings page, you select the Products tab. Then you select the Display sub tab
  2. You find Product Images section and configure your product image size
  3. Our demo is configured as the screenshot
  4. After save new size. You must run "regenerate your thumbnail" link to update on front-end.
Product Image Sizes

Page Settings

After you create WooCommerce pages. You will go to the Settings page to assign them.

  • To assign the Shop page, you select the Products tab and then select the Display sub tab
  • To assign the My Account page, you select the Accounts tab
  • To assign the Cart and Checkout pages, you select the Checkout tab
  • After change page settings, you must go to permarlink setting to save one again for update new urls.
Setting Pages
Please note that: if you install WooCommerce pages by clicking on the WooCommerce notification, WooCommerce will automatically assign for you

Registration Options

You also make sure that you allow your customers to register on your site. You select the Accounts tab and find the Registration Options section as the screenshot.

Registration Options

Adding Product

Follow the steps below to add a new product

  1. In admin panel, you go to Products and click the Add Product button
  2. Input the product title and product content
  3. Select Product Category, Product Tag
  4. Add Featured Image and Product Gallery
  5. In the Product Options section, you can override some options in Theme Options
  6. Next is the Product Data section. This is where the majority of the product data is input

Product Options

This section allows you to override some options in Theme Options. You can set layout for individual products. You can also override custom tab content

Product Options

Product Data

You should also read WooCommerce Documentation to get more details. We only have some notes that we think you need to know.

Product Data Product Data - Shipping Tab
  1. Adding a product on sale and a deal:
    • With the Simple Product, you select General tab. You add a Sale Price and click the Schedule button to set up date.
    • With the Variable Product, after setting up Product Attributes in the Attributes tab, you can go to the Variations tab and add New Variation. With each Variation Product, you also click the Schedule button next to the Sale Price field. Please note that product only displays the time of first Variation Product.
  2. Adding Additional Information: You go to the Shipping tab. You set value of Weight and Dimensions options. You can change the unit by going to WooCommerce > Settings > Products tab
  3. Enable/Disable Product Review: You go to the Advanced tab. You will see Enable reviews option. Just check/uncheck it.

Instagram Shop

Jms 4life provides a special shop style, it is Instagram Shop

1. To create Instagram Shop first you need connect to Instagram account following 2 steps below :

Step 1 : Go to
Step 2 : Sign up & connect your Instagram account ( )

2. Embeds - installing your feed onto any page of your website

There is 2 way to embed your feed on to site

Way 1 : Add Shortcode to wordpress Pages/Posts

You go to Page or post edit page you see embed button click to it to embed.

Embed Shop
Way 2 : Embeds Page

Sign into your Snapppt account, then visit the Embeds page. Grab your shoppable embed code, and paste this into the page or theme of your store, wherever you'd like it to appear.

Embed Shop


Jms 4life comes with several addons which can be used to display your content. To use our addons, you go to page editor and change to King Composer Live Editor. Click on the Add Element button to open King Composer elements list and change to Jms Addons tab.

King Composer Elements List

In this all field except Mailchimp for WP : We can setting title,Number of columns,Number of row, select option show: Grid or Carousel, Add Extra class name, Set Columns count desktop small, set Columns count tablet small , set Columns count mobile, Margin: set spacing between intems.