E Storefront Pro Documentation
Your awesome theme / template documentation
Introduction
- Theme Name : E Storefront Pro
- Author : misbahwp
- Support Forum : https://www.misbahwp.com/support/misbahwp/
- License : GNU General Public License v3 or later
- Discription : E Storefront Pro WordPress theme will let you create the best online store as it has all the advance options available to customize your site. Our top premium theme comes with an advanced slider, featured products section, top brands, Featured Products, bestselling products, blog post, about us, category slider, and gender-specific product Best Sellersections, contact us, testimonials and so on. The theme is highly responsive and works speedily across all platforms and is compatible with every browser. Your traffic will improve undoubtedly and the enhanced user experience will see a bump in sales. It is SEO-ready too with the help of which your store will rank soon on all major search engines like Google. It is responsive enough to fit well in all devices screen sizes so you will not miss any buyers. Ecommerce Mega store WordPress theme has advance slider to create a stunning slider with multiple images upload option available. It is integrated with font awesome icon and 100+ font family options are available to select from.
How to Establish the Theme
Setup Theme
Template installation is very simple process.
You can also install your theme using WP Admin
he first task is to log in to your WordPress admin area. Next, click on
1. In dashboard click on Appearance >> Themes
2. Click on the Add New button at the top of the themes page once page is loaded
3. Click the button labelled as 'Upload Theme'.
4. Select the e-storefront-pro.zip theme from the Browse Button, then click the Install Now button
5. WordPress will now install your theme and display a success message, as well as a link to activate or to see the live preview. Congratulations on completing the installation of your theme.
Demo Importer -
Follow below instructions to setup e-storefront-pro theme.
In the Dashboard, go to Appearance >> E Storefront Pro Themes Setup
Once you are on the E Storefront Pro themes setup, click on the start button.
As the demo importer process finish then check your site, all the content will imported and theme will display like live demo.
Necessary Plugins
When you initially activate the theme, you'll be asked to install these plugins on your Dashboard. You can ignore the message if you don't want to install these plugins on theme activation, and if you change your mind later, you can install them manually.
In the Dashboard, click on Plugins >> Install Plugins.
Kirki
Plugin download link kirki
Contact Form 7
Plugin download link contact-form-7
WooCommerce
Plugin download link WooCommerce
Setup Menu
Setup Menu
In the dashboard, go to Appearance >> Menu
From the 'Appearance' menu on the left-hand side of the Dashboard, select the 'Menus' option to bring up the Menu Editor.
Select Create a new menu at the top of the page. Enter a name for your new menu in the Menu Name box. Click the Create Menu button.
Your new custom menu has now been defined.
Adding Items to a Menu
Select the Pages that you want to add by clicking the checkbox next to each Page's title.
Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.
Click the Save Menu button once you've added all the menu items you want.
Your custom menu has now been saved.
In front end, it will look like this.
E Storefront Pro Theme Setup
Header Section
In order to proceed with you can set social icons, text content so follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Options >> Header Settings
You can set Wellcome Text Call text and phone no.
You can set Location Text and Social Icon.
In front end, it will look like this.
Logo Setup
In order to proceed with Theme Logo setup, you can set site title and tagline, follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Site Identity >> Logo Or Set Title and Tagline You can also Enable / Disable Site Title and Tagline
In front end, it will look like this.
Home Banner Section
Home Banner Settings
In order to proceed with Theme Home Banner Settings , you can set slide show , follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Options >> Home Banner Settings
Select number slides to show. You can set heading, content, icon, button text and button url. You can choose from this options for each Home Banner option.
You can set Card Background Image1, Card Background Image2 heading, content, button text and button url. You can choose from this options for each slider option.
In front end, it will look like this.
Top categories Section
Top categories Settings
In order to proceed with Top categories Settings follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Options >>Top categories Settings
You can set Top categories Counter Section Image heading of section. You can choose from this options for each Top categories settings.
In front end, it will look like this.
Featured Products Section
Fetch Categories
This screen is divided into the Add New Category and category table sections.
This table lists all of your categories. Categories are displayed hierarchically and alphabetically.
Follow the instructions given below to setup Category Settings.
In the Dashboard, go to Product >> Categories >> Add New
Once you have done with this you will see the categories on your theme customize.
In this section, you have to add new category for each post.
Fetch Product
In the Dashboard, go to Product >> Add New
To proceed with Product, you should first choose the post title, content, and featured image, and then choose the category in which you want your post to appear.
Follow the instructions given below to setup Product Settings.
In the Dashboard, go to Product >> Add New
You can make multiple posts for category.
Once you have done with this you will see the product on your front page.
Featured Products Product Settings
You can set sub heading , heading and Discount Text Offer Text other Text and button of section. You can choose from this options for each Featured Products settings.
You can set heading of section. You can choose from this options in Featured Products settings.
In order to proceed with Theme Featured Products Product Settings , you can set tab post , follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Options >> Featured Products Settings
Select the number of posts to view. You have the choice of picking Category. You can choose from this options for each Featured Products Product Settings.
Once you have done with this you will see the product on your front page.
Deals Section
Deals Settings
Fetch Categories
In the Dashboard, go to Products >> Categories >> Add New
This screen is divided into 2 sections, the Add New Category and category table sections.
All of the categories are listed in this table. Categories are organized alphabetically and hierarchically.
Follow the instructions given below to setup Category Settings.
Once you have done with this you will see the categories on your theme customize.
In this section, you have to add new category for each product.
Fetch Products
In order to proceed with Products Settings, You can set product titel, product description, price and image. And select which category you want this product to show.
Follow the instructions given below to setup product settings.
In the Dashboard, go to Products >> Add New
You can make multiple Deals for category.
In order to proceed with Deals Settings follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Options >> Deals Settings
You can heading and Button and counter Text, skill number for section. You can choose from this options for each Deals settings.
You can select category to display product choose from this options for each Deals settings.
In front end, it will look like this.
Our Collections Section
Our Collections Settings
In order to proceed with Shop Category Settings follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Options >> Our Collections Settings
You can set Image Sub heading main heading for each Our Collections settings
You can set Price text and button for each Our Collections settings
In front end, it will look like this.
Best Seller Section
Best Seller Settings
Fetch Categories
All of the categories are listed in this table. Categories are organized alphabetically and hierarchically.
Follow the instructions given below to setup Category Settings.
Once you have done with this you will see the categories on your theme customize.
In the Dashboard, go to Products >> Categories >> Add New
In this section, you have to add new category for each product.
Fetch Products
In the Dashboard, go to Products >> Add New
In order to proceed with Products Settings, You can set product titel, product description, price and image. And select which category you want this product to show.
Follow the instructions given below to setup product settings.
In the Dashboard, go to Products >> Add New
You can make multiple Best Seller for category.
In order to proceed with Our Collection Settings follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Options >> Best Seller Settings
You can set heading and Button for section. You can choose from this options for each Best Seller settings.
In front end, it will look like this.
Brand List Section
Brand List Settings
In order to proceed with Brand List Settings follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Options >> Brand List Settings
You can set Brand List Counter section Image and Url for each Brand List settings
In front end, it will look like this.
Offer Section
Offer Settings
In the Dashboard, go to Appearance >> Customize >> Theme Options >> Offer Settings
You can set Image1 main heading, Text and Button of Offer settings
You can set the Image2 Main Heading and button for each Offer settings
Important Step:- Contact Form-7 plugin is necessary for creating a contact form.
In front end, it will look like this.
Computer Accessories Section
Fetch Categories
This screen is divided into the Add New Category and category table sections.
This table lists all of your categories. Categories are displayed hierarchically and alphabetically.
Follow the instructions given below to setup Category Settings.
In the Dashboard, go to Product >> Categories >> Add New
Once you have done with this you will see the categories on your theme customize.
In this section, you have to add new category for each post.
Fetch Product
In the Dashboard, go to Product >> Add New
To proceed with Product, you should first choose the post title, content, and featured image, and then choose the category in which you want your post to appear.
Follow the instructions given below to setup Product Settings.
In the Dashboard, go to Product >> Add New
You can make multiple posts for category.
Once you have done with this you will see the product on your front page.
Computer Accessories Product Settings
You can set heading and Discount Text Offer Text other Text and button of section. You can choose from this options for each Computer Accessories settings.
You can set heading of section. You can choose from this options in Computer Accessories settings.
In order to proceed with Theme Computer Accessories Product Settings , you can set tab post , follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Options >> Computer Accessories Settings
Select the number of posts to view. You have the choice of picking Category. You can choose from this options for each Computer Accessories Product Settings.
Once you have done with this you will see the product on your front page.
Month Deals Section
Month Deals Settings
In order to proceed with Shop Category Settings follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Options >> Month Deals Settings
You can set heading , content , Button and counter section and for each Month Deals settings
You can set Image1 and Image2 for each Month Deals settings
In front end, it will look like this.
Instagram Section
Instagram Settings
In order to proceed with Instagram Settings follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Options >> Instagram Settings
You can set Main heading, Sub heading and Instagram Counter Section for section. You can set for each Instagram settings
In front end, it will look like this.
Top Brands Section
Top Brands Settings
In order to proceed with Top Brands Settings follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Options >> Top Brands Settings
You can set Main heading, Sub heading and Top Brands Counter Section for section. You can set for each Top Brands settings
In front end, it will look like this.
Sale Ads Section
Sale Ads Settings
In order to proceed with Sale Ads Settings follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Options >> Sale Ads Settings
You can set Sale Ads Counter Section and Image for section. You can set for each Top Brands settings
In front end, it will look like this.
Recently Viewed Section
Recently Viewed Settings
Fetch Categories
All of the categories are listed in this table. Categories are organized alphabetically and hierarchically.
Follow the instructions given below to setup Category Settings.
Once you have done with this you will see the categories on your theme customize.
In the Dashboard, go to Products >> Categories >> Add New
In this section, you have to add new category for each product.
Fetch Products
In the Dashboard, go to Products >> Add New
In order to proceed with Products Settings, You can set product titel, product description, price and image. And select which category you want this product to show.
Follow the instructions given below to setup product settings.
In the Dashboard, go to Products >> Add New
You can make multiple Recently Viewed for category.
In order to proceed with Our Collection Settings follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Options >> Recently Viewed Settings
You can set heading and Button for section. You can choose from this options for each Recently Viewed settings.
In front end, it will look like this.
Newsletter Section
Newsletter Settings
In order to proceed with Newsletter Settings follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Options >> Newsletter Settings
You can set Background Image heading for section. You can also set the Contact Form Shortcode for each Newsletter settings
In front end, it will look like this.
Clearance Product Section
Clearance Product Settings
Fetch Categories
All of the categories are listed in this table. Categories are organized alphabetically and hierarchically.
Follow the instructions given below to setup Category Settings.
Once you have done with this you will see the categories on your theme customize.
In the Dashboard, go to Products >> Categories >> Add New
In this section, you have to add new category for each product.
Fetch Products
In the Dashboard, go to Products >> Add New
In order to proceed with Products Settings, You can set product titel, product description, price and image. And select which category you want this product to show.
Follow the instructions given below to setup product settings.
In the Dashboard, go to Products >> Add New
You can make multiple Clearance Product for category.
In order to proceed with Our Collection Settings follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Options >> Clearance Product Settings
You can set heading and Button for section. You can choose from this options for each Clearance Product settings.
In front end, it will look like this.
Latest Blogs Section
Fetch Categories
This screen is divided into the Add New Category and category table sections.
This table lists all of your categories. Categories are displayed hierarchically and alphabetically.
Follow the instructions given below to setup Category Settings.
In the Dashboard, go to Product >> Categories >> Add New
Once you have done with this you will see the categories on your theme customize.
In this section, you have to add new category for each post.
Fetch Product
In the Dashboard, go to Product >> Add New
To proceed with Product, you should first choose the post title, content, and featured image, and then choose the category in which you want your post to appear.
Follow the instructions given below to setup Product Settings.
In the Dashboard, go to Product >> Add New
You can make multiple posts for category.
Once you have done with this you will see the post on your front page.
Latest Blogs Product Settings
You can set heading and content of section. You can choose from this options in latest news settings.
In order to proceed with Theme Latest Blogs Product Settings , you can set tab post , follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Options >> Latest Blogs Settings
Select the number of posts to view. You have the choice of picking Category. You can choose from this options for each Latest Blogs Product Settings.
Once you have done with this you will see the post on your front page.
Footer Setup Section
There are four columns in the footer. Any widget can be added there.
1. In the Dashboard, go to Appearance >> Widgets
To add widgets to the footer, see the screenshot below.
You can add footer columns by selecting widgets such as text, images, Recent posts and so on, which allow you to quickly add text or images of your choice.
In order to manage content for footer and add some widgets, navigate to, follow the instructions given below.
2. In the Dashboard, go to Appearance >> Widgets >> Footer Sidebar
Your footer will appear like this once you have added widgets to it.
Footer Bottom Settings
Footer Bottom Settings
In order to proceed with Footer Bottom Settings, You can set Heading Image and Text.
In front end, it will look like this.
Footer Copyright Text
Copyright Text
In order to proceed with footer Settings, You can also set footer logo , social icon. You can fill the copyright content to footer copyright Settings.
In front end, it will look like this.
Theme Color / Font Option
Setup Background
Background Settings
In order to proceed with Background Settings follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Options >> Background Settings >> Newsletter Section
You can set background color for section. You can choose from this options for each Background Section.
In front end, it will look like this.
Setup Theme Font Style
Typography Options
In order to proceed with Typography Options, you can change complete font style just one click. follow the instructions given below.
You can change heading and body font style
In the Dashboard, go to Appearance >> Customize >> Typography Options
In front end, it will look like this.
Setup Theme Color
Color Options
In order to proceed with theme color option, you can change complete font color and button background and border color on just one click. follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Color Option
In front end, it will look like this.
Page Templates Settings
Setup Contact Page -
Follow these instructions to setup contact page.
Make a page to set the template: In dashboard, click on Pages >> Add New Page
Name it "Contact" or whatever you want. Then, from the template dropdown, select the "contact page template."
The Page Attributes section provides your page a parent page and a template.
How to Construct a Contact Form -
The Contact Form 7 plugin is installed in the usual way. Click Plugins > Add New in the WordPress dashboard and type Contact Form 7 in the Search box. From the search result, select the plugin and click the Install Now option.
From the admin panel, just go to Contact > Contact Forms to create a Contact Form. There is a list of the forms that are available, though there are none, at now
You may also create your own contact form by clicking on the Contact >> Add New
Building a new form of contact -
Scroll to Form and give this new contact form a name. You can make modifications to contact form template from here.
The multiple fields which will display on your form, as well as the labels that will be next to those fields, are defined by the template.
When you are done with changes, click Save.
A key step is to copy the Shortcode that displays next to your contact form. This is displayed in the form editor as well.
Contact Form and Location Section
In the Dashboard, go to Appearance >> Customize >> Contact Page Settings >> Contact Form and Location Section
You can set heading, content and location. You can choose from this options for each Contact Page Settings.
Place the Contact Form-7 shortcode code in customize option.
You can set location
In front end, it will look like this.
Setup Blog Page
Set Up Product Right Sidebar
Follow these instructions to setup post right sidebar page.
1. Make a page to set the template: Go to Dashboard >> Pages >> Add New Page
Caption it "Product Right Sidebar" or anything you want to. Then, from the template dropdown, chose "Product Right Sidebar.
The options of this page template (like sections content, images and number of posts they display) can be controlled it.
The Page Attributes section provides your page a parent page and a template.
1. Make a page to set the template: In dashboard, click on Pages >> Add New Page
In front end, it will look like this.
Set Up Product Left Sidebar
Follow these instructions to setup post left sidebar page.
1. Make a page to set the template: In the Dashboard, go to Pages >> Add New Page
Title it "Product Left Sidebar" or anything you like. Then, from the template dropdown, pick "Product Left Sidebar".
The options of this page template (like sections content, images and number of posts they display) can be controlled it.
The Page Attributes section provides your page a parent page and a template.
1. Make a page to set the template: In dashboard, click on Pages >> Add New Page
In front end, it will look like this.
Setup Page Template
Set Up Page Right Sidebar
Follow these instructions to setup page right sidebar page.
1. Make a page to set the template: In the Dashboard, go to Pages >> Add New Page
"Label it "Page Right Sidebar" or anything as you like". Then, from the template choices, select "Page Right Sidebar".
The options of this page template (like sections content, images and number of posts they display) can be controlled it.
The Page Attributes section provides your page a parent page and a template.
1. Make a page to set the template:In dashboard, click on Pages >> Add New Page
In front end, it will look like this.
Set Up Page Left Sidebar
Follow these instructions to setup page left sidebar page.
1. Make a page to set the template: In the Dashboard, go to Pages >> Add New Page
Label it "Page Left Sidebar" or anything as you want. Then, from the template choices, select "Page Left Sidebar.
The options of this page template (like sections content, images and number of posts they display) can be controlled it.
The Page Attributes section provides your page a parent page and a template.
1. Make a page to set the template: In dashboard, click on Pages >> Add New Page
In front end, it will look like this.
Shop Page Template
Fetch Categories
Important Step: Install WooCommerce plugin in your wordpress.
In the Dashboard, go to Products >> Categories >> Add New
This screen is divided into 2 sections, the Add New Category and category table sections.
All of the categories are listed in this table. Categories are organized alphabetically and hierarchically.
Follow the instructions given below to setup Category Settings.
Once you have done with this you will see the categories on your theme customize.
In this section, you have to add new category for each product.
Fetch Product
In the Dashboard, go to Products >> Add New
In order to proceed with Products Settings, You can set product titel, product description, price and image. And select which category you want this product to show.
Follow the instructions given below to setup product settings.
In the Dashboard, go to Products >> Add New
You can make multiple product for category.
In front end, it will look like this.
WooCommerce Theme Settings
WooCommerce Product Settings
WooCommerce Product Settings
In order to proceed with WooCommerce Product Settings follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme WooCommerce Settings >> WooCommerce Product
You can set number product show in page and show the number of row in section. You can choose from this options for each Theme WooCommerce Settings.
In front end, it will look like this.
WooCommerce Product Page Layout
WooCommerce Product Page Layout
In order to proceed with you can change shop page layout settings. follow the instructions given below.
You can set page on left sidebar, right sidebar and full-width . You can choose from this options for each Theme WooCommerce Settings.
In the Dashboard, go to Appearance >> Customize >> Theme WooCommerce Settings >> WooCommerce Page Layout
In front end, it will look like this.
WooCommerce Single Product Page Layout
WooCommerce Single Product Page Layout
In order to proceed with you can change shop page layout settings. follow the instructions given below.
You can set page on left sidebar, right sidebar and full-width . You can choose from this options for each Theme WooCommerce Settings.
In the Dashboard, go to Appearance >> Customize >> Theme WooCommerce Settings >> WooCommerce Page Layout
In front end, it will look like this.
Theme Post & Page Settings
Post Admin, Comments and Date settings
Post Admin, Comments and Date settings
In order to proceed with Post Admin, Comments and Date settings follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Options >> Post Settings
You can Enable / Disable post of admin, comments and date. You can choose from this options for each Post Settings.
In front end, it will look like this.
Post Content Settings
Post Content Settings
In order to proceed with you can set post content lenght, follow the instructions given below.
In the Dashboard, go to Appearance >> Customize >> Theme Options >> Post Settings
In front end, it will look like this.
Post and Page Banner Settings
Post and Page Banner Settings
In order to proceed with you can change banner background image and color . follow the instructions given below.
You can change also page and poste title color. You can choose from this options for each Post Settings.
In the Dashboard, go to Appearance >> Customize >> Theme WooCommerce Settings >> WooCommerce Page Layout
In front end, it will look like this.
Section Reorder Settings
Section Reorder Settings
In order to proceed with you can change or reorder the section . follow the instructions given below.
You can change also hide the section. You can choose from this options for each section reorder Settings.
In the Dashboard, go to Appearance >> Customize >>Theme Options >> Header Settings >> Section Reorder Settings
In front end, it will look like this.
