Note : First Step Configer WooCommerce >> Settings >> Product >> Display Catalog Images/Product Image Recommended Stander Size (275x335)

Online-eStore-Pro

Theme Installation

There are two methods to install Online-eStore-Pro theme.  You may either upload the zipped theme file using the WordPress theme installer (Recommended), or you can upload the unzipped theme folder via FTP (Advanced).

Method 1 ( Recommended) : Install Using the WordPress Theme Installer

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Appearance > Themes in the WordPress Dashboard.
  3. Click on the Add New button.
  4. Search for Online eStore.
  5. Select the Online eStore theme
  6. Click Install Now

Method 2: Install Using File Transfer Protocol (FTP)

  1. Unzip “Online-eStore.zip” file on your computer.
  2. Login using FTP client to access your host web server.
  3. Locate the wp-content folder in your WordPress install files.
  4. Upload the un-zipped Online-eStore folder into the: wp-content/themes folder.

Activate the theme

  1. Log in to the WordPress Administration Panel.
  2. Go to Appearance > Themes in the WordPress menu
  3. Hover over the theme thumbnail and click the Activate button.

Installing Plugins

To install a plugin in your WordPress admin panel and follow the following steps.

Plugin Installing Method

  1. Login into your WordPress site and open the Administration Panel.
  2. Click Navigate to Plugins > Add New in the WordPress Dashboard.
  3. Search for the name of the plugin you wish to install which will return a list of potential plugins.
  4. Click Details to read more about a plugin.
  5. Click “Install Now” if you wish to install the plugin.
  6. It may ask if you are sure, and you may proceed. The installation will commence once you confirm to proceed.
  7. After the plugin is downloaded. Go to Plugins>Installed Plugins. Click “Activate Plugin” to make it available for use.

Recommended Plugins : We recommend you to download the following plugins when necessary:

  1. Jetpack by WordPress.com, by: Automattic (The plugin provides a variety of complementary features for your Theme.)
  2. Regenerate Thumnails by Alex Mills (Viper007Bond) (If you have existing content, this will help you update your image thumbnails sizes.)
  3. WooCommerce by woocommerce.com, by: Automattic (The most customizable eCommerce platform for building your online siness. Get started today for free.)
  4. YITH WooCommerce Quick View by yithemes.com, by: YITHEMES (This plugin adds the possibility to have a quick preview of the products right from product list)
  5. YITH WooCommerce Compare by yithemes.com, by: YITHEMES (YITH WooCommerce Compare allows you to compare more products of your shop in one complete table.)
  6. YITH WooCommerce Wishlist by yithemes.com, by: YITHEMES (YITH WooCommerce Wishlist add all Wishlist features to your website. )
  7. WooCommerce Grid / List toggle by: James Koster (Adds a grid/list view toggle to product archives)

Import Demo Data(Contents)

One Click To Install Demo Data

  1. Go to Appearance > Customize
  2. Click On > Import Data Demo Section
  3. Open Import Data Demo & Click on 'Import Demo' button
  4. When Your Demo Data have Import Sucessfully then you have to get one Popup Message(Demo Data Sucessfully Imported).

Note :- It might take few minutes for importing the demo contents so please have patience. Importing demo will override all the existing customizer themes options, widget value/settings which is irreversible so please proceed with caution. .

Preloader Settings

Configer Preloader Settings

  1. Go to Dashboard > Appearance > Customize
  2. Open > Customize > Preloader Settings
  3. Manage Preloader Settings/Options per as you choice
  4. Click on Button (Save & Publish)

General Settings

Logo/Site Title/Favicon (To set up Site Identity)

  1. Go to Appearance> Customize > Header Builder / Settings > Header Elements
  2. Click on Site Identity
  3. Upload and select the desired image.
  4. Enter the Site Title and Tagline
  5. Check Display Header Text for the Site title and Tagline to appear on your homepage.
  6. Click Select Image under Site Icon
  7. Upload and select the desired image. (The Site Icon/ favicon is used as a browser and app icon for your site. The recommended Site Icon size is 512*512 pixels.)
  8. Click Save & Publish.

Website Container Max-Width

  1. Go to Appearance > Customize > General Settings > Website Container Max-Width
  2. Enter the Container Max Width
  3. Click Save & Publish.

Background Image

  1. Go to Appearance > Customize > General Settings > Background Image
  2. Click Select Image.
  3. Upload and Select a Background Image & Manage the image position & other settings
  4. Click Save & Publish.

WebLayout Options

  1. Go to Appearance > Customize > General Settings
  2. Open General Settings > WebLayout Options
  3. Select the WebSite Layout Options (Boxed Layout, FullWidth Layout) per as you want
  4. Click Save & Publish.

To set the Header Image

  1. Go to Appearance > Customize > General Settings > Header Image
  2. Upload the header image from the Add new image button. After selecting the header image, it will ask you to crop. If you like to crop it, then, you can crop else leave it as you want for your site to best suit it.
  3. Click Save & Publish.

Theme Colors Settings

Configer Theme Colors Settings

  1. Go to Dashboard > Appearance > Customize
  2. Open > Customize > Themes Colors Settings
  3. Manage Theme Primary Color, Header title colro & Background Colors Options per as you choice
  4. Click on Button (Save & Publish)

Header Builder / Settings

Configure Drag and Drop Header Builder

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Customize
  3. Open > Header Builder / Settings
  4. Follow the instruction below in the image shown and build your awesome header
  5. Click Save & Publish.

Note: Header Builder Capibality and Limits

  • We have added this new feature 'Drag and Drop Header Builde' to make our visitors and client more easy and convienent to make the awesome header
  • By using this header builder not only layout decided manu can be made but you can customize and make any kind of header as you wish.
  • You can customizer top header as you desiger
  • you can now custumize each item by dragging and droping in any postion inside the header
  • This Builder let you use customize each section setting like each section controls Listed Below
  1. custome height and width of each section
  2. custome color choosing option for each section
  3. custome margin and pading option for each section
  4. custome positioning for each section
  5. option to add the bg color and image in each section

Custom Menu

By default, the menus will fallback to Pages. That means just after activation of the theme, you will see all the pages as menus. If you want selective menus with combination of links, pages, categories then custom menu is what you should be looking for.

Set up Custom Menu

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Appearance > Menus in the WordPress menu
  3. Click on Create a new menu link
  4. Give a name to your menu in Menu Name and click Create Menu button
  5. Now choose the pages, categories, custom links from the leftside of your screen by selecting the checkbox and click on Add Menu
  6. Choose the menu Theme Location per as requirement.
  7. Click Save Menu after adding required pages, categories in the menu

Additional information : WordPress Custom Menu

Configure Slider Settings

Add New Slider

  1. Login into your WordPress site and open the Administration Panel.
  2. First of all, create a Page for slider
  3. Add Page Title,Excerpt/Content and feature Image for slider in Page field.
  4. Click Save > Publish.

Configure Slider Section

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Customize
  3. Open > Main Slider Settings
  4. Main Slider Settings > Manage all Other Slider Settings/Options with (Slider Type & Slider Layout) Per as You Want.
  5. Click Save > Publish.

Configure HomePage Settings

Online eStore Provides a "Home Page" template for your home page. Please follows these steps to configure your home page with "home page" template.

HomePage Setting

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Pages > Add New
  3. Enter the Page Title for the Page. You do not require to enter anything in the content section for creating a home page.
  4. Select the Home Page Template from the Page Attributes section.
  5. Click Publish

Configuring the front Page display setting

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Appearance > Customize > Static Front Page.
  3. Select A static page under Front Page displays.
  4. Click Save & Publish.

Note : Remember that Online eStore WooCommerce themes fully base on Widget so first configer home page using widget.

WooCommerce Category Collection

Configure WooCommerce Category Collection

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Widgets
  3. Open > Widgets > Sparkle : Main Widget Area or SP: Top FullWidth Widget Area (Pro) or SP: Buttom FullWidth Widget Area (Pro)
  4. Drag & Drop "SP : Woo Category Collection" & Manage woocommerce category collection options per as you want
  5. Click Save > Publish.

SP: Single Product Offer (Pro)

Configure SP: Single Product Offer (Pro)

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Widgets
  3. Open > Widgets > Sparkle : Main Widget Area or SP: Top FullWidth Widget Area (Pro) or SP: Buttom FullWidth Widget Area (Pro)
  4. Drag & Drop "SP: Single Product Offer (Pro)" & Manage All Single Product Offer(Pro) Widget Options Per as You Want
  5. Click Save > Publish.

SP: Woo Products List (Pro)

Configure SP: Woo Products List (Pro)

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Widgets
  3. Open > Widgets > Sparkle : Main Widget Area or SP: Top FullWidth Widget Area (Pro) or SP: Buttom FullWidth Widget Area (Pro)
  4. Drag & Drop "SP: Woo Products List (Pro)" & Manage All SP: Woo Products List (Pro) Widget Options Per as You Want
  5. Click Save > Publish.

SP: Woo Product Type (Pro)

Configure SP: Woo Product Type (Pro)

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Widgets
  3. Open > Widgets > Sparkle : Main Widget Area or SP: Top FullWidth Widget Area (Pro) or SP: Buttom FullWidth Widget Area (Pro)
  4. Drag & Drop "SP: Woo Product Type (Pro)" & Manage All Woo Product Type (Pro) Widget Options Per as You Want
  5. Click Save > Publish.

SP: Woo Special Offer Deal (Pro)

Configure SP: Woo Special Offer Deal (Pro)

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Widgets
  3. Open > Widgets > Sparkle : Main Widget Area or SP: Top FullWidth Widget Area (Pro) or SP: Buttom FullWidth Widget Area (Pro)
  4. Drag & Drop "SP: Woo Special Offer Deal (Pro)" & Manage All SP: Woo Special Offer Deal (Pro) Widget Options Per as You Want
  5. Click Save > Publish.

WooCommerce Category Collection in Tabs

Configure WooCommerce Category Collection in Tabs

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Widgets
  3. Open > Widgets > Sparkle : Main Widget Area or SP: Top FullWidth Widget Area (Pro) or SP: Buttom FullWidth Widget Area (Pro)
  4. Drag & Drop "SP : Woo Category Tabs" & Manage woocommerce category collection tabs options per as you want
  5. Click Save > Publish.

WooCommerce Category Features Image With Related Product

Configure WooCommerce Category With Product Section

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Widgets
  3. Open > Widgets > Sparkle : Main Widget Area or SP: Top FullWidth Widget Area (Pro) or SP: Buttom FullWidth Widget Area (Pro)
  4. Drag & Drop "SP : Woo Category With Product" & Manage woocommerce category with product section options per as you want
  5. Click Save > Publish.

WooCommerce Product Type Section (Latest, Features, Upsell, OnSale or Category)

Configure WooCommerce Product Type Section

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Widgets
  3. Open > Widgets > Sparkle : Main Widget Area or SP: Top FullWidth Widget Area (Pro) or SP: Buttom FullWidth Widget Area (Pro)
  4. Drag & Drop "SP : Woo Product Area" & Manage woocommerce product area sections options per as you want
  5. Click Save > Publish.

Blogs Widget Section

Configure Blogs Widget Section

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Widgets
  3. Open > Widgets > Sparkle : Main Widget Area or SP: Top FullWidth Widget Area (Pro) or SP: Buttom FullWidth Widget Area (Pro)
  4. Drag & Drop "SP : Blogs Widget Section" & Manage blogs widget section options per as you want
  5. Click Save > Publish.

SP:Team Member Widget (Pro)

Configure SP:Team Member Widget (Pro)

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Widgets
  3. Open > Widgets > Sparkle : Main Widget Area or SP: Top FullWidth Widget Area (Pro) or SP: Buttom FullWidth Widget Area (Pro)
  4. Drag & Drop "SP:Team Member Widget (Pro)" & Manage All SP:Team Member Widget (Pro) Widget Options Per as You Want
  5. Click Save > Publish.

SP: Testimonial Widget (Pro)

Configure SP: Testimonial Widget (Pro)

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Widgets
  3. Open > Widgets > Sparkle : Main Widget Area or SP: Top FullWidth Widget Area (Pro) or SP: Buttom FullWidth Widget Area (Pro)
  4. Drag & Drop "SP: Testimonial Widget (Pro)" & Manage All SP: Testimonial Widget (Pro) Widget Options Per as You Want
  5. Click Save > Publish.

SP: Promo Video widget (Pro)

Configure SP: Promo Video widget (Pro)

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Widgets
  3. Open > Widgets > Sparkle : Main Widget Area or SP: Top FullWidth Widget Area (Pro) or SP: Buttom FullWidth Widget Area (Pro)
  4. Drag & Drop "SP: Promo Video widget (Pro)" & Manage All SP: Promo Video widget (Pro) Widget Options Per as You Want
  5. Click Save > Publish.

SP: Promo Widget (Pro)

Configure SP: Promo Widget (Pro)

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Widgets
  3. Open > Widgets > Sparkle : Main Widget Area or SP: Top FullWidth Widget Area (Pro) or SP: Buttom FullWidth Widget Area (Pro)
  4. Drag & Drop "SP: Promo Widget (Pro)" & Manage All SP: Promo Widget (Pro) Widget Options Per as You Want
  5. Click Save > Publish.

SP: Full Promo Widget (Pro)

Configure SP: Full Promo Widget (Pro)

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Widgets
  3. Open > Widgets > Sparkle : Main Widget Area or SP: Top FullWidth Widget Area (Pro) or SP: Buttom FullWidth Widget Area (Pro)
  4. Drag & Drop "SP: Full Promo Widget (Pro)" & Manage All SP: Full Promo Widget (Pro) Widget Options Per as You Want
  5. Click Save > Publish.

Promo Widget Section

Create Page for Promo Widget Section

  1. Login into your WordPress site and open the Administration Panel.
  2. First of all, create a Page for Promo Widget Section
  3. Add Page Title,Excerpt/Content and feature Image for Promo Widget Section section in page field.
  4. Click Save > Publish.

Configure Promo Widget Section

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Widgets
  3. Open > Widgets > Sparkle : Main Widget Area or SP: Top FullWidth Widget Area (Pro) or SP: Buttom FullWidth Widget Area (Pro)
  4. Drag & Drop "SP : Promo Widget Section" & Manage promo widget section options per as you want
  5. Click Save > Publish.

Full Promo Widget Section

Create Page for Full Promo Widget Section

  1. Login into your WordPress site and open the Administration Panel.
  2. First of all, create a Page for Full Promo Widget Section
  3. Add Page Title,Excerpt/Content and feature Image for Full Promo Widget Section in page field.
  4. Click Save > Publish.

Configure Full Promo Widget Section

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Widgets
  3. Open > Widgets > Sparkle : Main Widget Area or SP: Top FullWidth Widget Area (Pro) or SP: Buttom FullWidth Widget Area (Pro)
  4. Drag & Drop "SP : Full Promo Widget" & Manage Full promo widget options per as you want
  5. Click Save > Publish.

Quick Services Area Settings

Quick Services Area Settings

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Customize
  3. Open > Qucik Services Area
  4. Quick Services > Manage all the options per as you want.
  5. Click Save & Publish.

WooCommerce Settings

In this theme, we have included Advance Options of WooCommerce Archive/Category Product Single Page, etc.

Products Pages Settings

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Customize > WooCommerce Settings.
  3. Open > WooCommerce Settings
  4. You can now customize all the setting from here as shown in below image.
  5. Click Save & Publish.

Single Products and Category Page

  1. Login into your WordPress site and open the Administration Panel.
  2. Go to Dashboard > Appearance > Customize > WooCommerce Settings
  3. Open > WooCommerce Settings > Single Products and Category Page
  4. Single Products and Category Page > Manage Product Single Page all the options per as you want. (you can see the image reference below)
  5. Click Save & Publish.

Advanced Settings

This theme supports the Custom CSS, which overwrites the CSS of the main stylesheet file, so that you can apply some CSS to change the look of the site as you desire. Also, this changes will still remain even if you update the theme.

Additional CSS

  1. Go to Appearance > Customize > Additional CSS
  2. Open > Additional CSS > Add Custom CSS per as you want
  3. Click Save & Publish.