Thank you for choosing Emart theme to build your WooCommerce website.
To create a site with Emart, you must install the Emart theme and WooCommerce plugin.
Installation
↑ Back to top- In your Dashboard go to Appearance > Themes.
- Click on the Add New button on top.
- Click Upload New button on top.
- In the new interface click Choose File and browse your computer to locate emart.zip file you downloaded.
- Click Install Now.
- After installation Activate the theme.

Required Plugins
↑ Back to top- Woocommerce: The official WooCommerce plugin is required to display the modal cart and products. It includes many other necessary blocks for any website.
- WP Form : The plugin is recommended for creating contact forms.
- Safe SVG: is the best way to Allow SVG Uploads in WordPress! It gives you the ability to allow SVG uploads whilst making sure that they’re sanitized to stop SVG/XML vulnerabilities affecting your site. It also gives you the ability to preview your uploaded SVGs in the media library in all views.
- Install One Click Demo Import plugin from Appearance > Install Plugins.

Import Demo Site
↑ Back to topAfter installation and activation of the theme and required plugins. You can now install the demo content to get you started.
Importing demo content does not delete any existing content. It also imports WPForms.
Importing demo data (post, pages, images, theme settings, …) is the easiest way to setup your theme. It will allow you to quickly edit everything instead of creating content from scratch.
Before Import
↑ Back to topPlease make sure that all the required plugins are installed and activated.
- No existing posts, pages, categories, images, custom post types or any other data will be deleted or modified.
- Posts, pages, product, images, widgets, menus and other theme settings will get imported.
- Please click on the Import button only once and wait, it can take a couple of minutes.

Click Import Demo Data

Click Continue & Import
On confirmation, the importer will import the content specified. It may take 5-10 minutes to import all the demo content.

After import, you’ll be notified about the import completion.
Note :
- Product might not appear immediately due to cache
- Please open any single product and update to clear the product cache
Setting a homepage
↑ Back to topAfter import is completed, you can set one of the pages imported as your homepage. To set your home page:
- In your admin panel, go to Settings > Reading
- Select A Static Page option for the Your homepage displays option.
- In the dropdown, choose the page you want set as home.

Installation Video:
↑ Back to topNavigation Setup
After installation & One click demo import go and check home page if navigation is broken(see below image) then follow below steps.

Header Default
↑ Back to topGo to Appearance > Editor > Template Parts > Header v1

Click the 3 dot dropdown menu

From the drop-menu choice primary-menu-v1.

Assign same menu(primary-menu-v1) as mobile menu.
Result
↑ Back to top
Header v1
↑ Back to topGo to Appearance > Editor > Template Parts > Header v1

Assign primary-menu-v1 for mobile menu.

Assign primary-menu-v1 next to the mobile menu.

Assign Vertical-menu to this marked location.

Assign Primary-menu-v2.
Result
↑ Back to top
Header v2
↑ Back to topGo to Appearance > Editor > Template Parts > Header v2

Assign primary-menu-v1 for mobile menu.

Assign primary-menu-v1 next to the mobile menu.

Assign Vertical-menu to this marked location.

Assign Primary-menu-v2.
Result
↑ Back to top
Header v3
↑ Back to topGo to Appearance > Editor > Template Parts > Header v3

Assign primary-menu-v1 for mobile menu.

Assign primary-menu-v1 next to the mobile menu.

Assign primary-menu-v2
Result
↑ Back to top
Footer Menu
↑ Back to topGo to Appearance > Editor > Template Parts > Your Choice ( ex. Footer-v1, Footer-v2, Footer-v3 ).

Assign Footer-menu-v1.

Assign Footer-menu-v2.

Assign Footer-menu-v3.

Assign Footer-menu-v4.

Assign Footer-currency-switcher.
Primary-menu-v1
↑ Back to topDetail view of Primary-menu-v1.

Megamenu setup
↑ Back to top
Assign a class name (“has-mega-menu“) in additional class name field for mega-menu item.

Assign a class name (“mega-menu-container“) in additional class name field.

Add a class name (“col-span-2“) in additional css class name field for the mentioned columns ( col-1, col-2, col-3 ) under mega menu.

Add a class name (“col-span-2“) in additional css class name field for the mentioned columns ( col-4, col-5 ) under mega menu.

Add a class name (“mega-menu-title“) in additional css class name field for the mentioned menu title under every columns
Vertical-menu
↑ Back to topDetail view of Vertical-menu.

Class name “vertical-menu” added in additional class name field.

Class name “vertical-menu-container” added in additional class name field.

Primary-menu-v2
↑ Back to topDetail view of primary-menu-v2.

Footer Menu
↑ Back to topGo to Appearance > Editor > Template Parts > Your Choice ( ex. Footer-v1, Footer-v2, Footer-v3 ).

Assign Footer-menu-v1.

Assign Footer-menu-v2.

Assign Footer-menu-v3.

Assign Footer-menu-v4.

Assign Footer-currency-switcher.
Template & Template parts
Template
↑ Back to top- Home v1
- Home v2
- Home v3
- About Us
- 404
- Single Product
- Contact US
- Single
- Search
- Product Catalog
- Index
Template Parts
↑ Back to top- Header – Default
- Header – v1
- Header – v2
- Header – v3
- Footer – Default
- Footer – v1
- Footer – v2
- Footer – v3
- Product Filter
- Post Meta
- Comments
- Contact Form
Blocks & Patterns
Blocks
↑ Back to topUsing Blocks
↑ Back to topBlocks are the components used in the theme for adding content to the posts/pages. The Emart theme support all WordPress and WooCommerce blocks that you can use to add text, media assets, and layout components, allowing you more freedom to create content.
To get access to the Block, you can follow the step below:
- Go to Pages and choose your desired page
- Now, you can click the plus (+) icon at the top left inside the toolbar to insert blocks
It will display a list of blocks available. You can use the appropriate block that suits your site requirements. For example, You can use the Site Title Block to add the site title on the header area.

Patterns
↑ Back to top- Home-v1 – Hero
- Home-v1 – Brand
- Home-v1 – 2-column-Banner
- Home-v1 – 4-column-Banner
- Home-v1 – Banner
- Home-v1 – Best-selling-products
- Home-v1 – Popular-search
- Home-v1 – Top-selling
- Home-v1 – tv-cat
- Home-v1 – Viewed-Products
- Home-v1 – You-like
- About – Content
- About – Brand
- About – Heading
- Home-v2 – Hero
- Home-v2-3 – Column Banner
- Home-v2 – Deals of the day
- Home-v2 – Banner-1
- Home-v2 – Best selling products
- Home-v2 – Banner-2
- Home-v2 – Blog Query
- Home-v3 – Hero
- Home-v3 – New Products
- Home-v3 – Banner With Products-1
- Home-v3 – Banner
- Home-v3 – Banner with Products
- Home-v3 – Apps
Patterns – Blog
Output
↑ Back to top
Editor
↑ Back to topThis pattern built by using following Gutenberg blocks,
- Heading Block
- Query Loop ( Gutenberg Block )
