Top Store Pro

Installing Theme

  • First, download the Top Store pro theme zip file from the Member’s Area.

member-login-top-store-pro

  • Login to your WordPress dashboard.
  • Navigate to “Appearance > Theme”.
  • Here you’ll see “Add new” button, click on it. Now Upload the theme zip file which you have downloaded.
  • After installing it, Activate the theme.

install-top-store-pro

  • To set Menus in your site. First go to your Dashboard > Appearance > Menus.
  • Click the “Create a New Menu” button & Write a menu name on the field. Now Click the “Create Menu” button.
  • From the “Add menu items” you can add menu items to your menus. You can add pages, Create Custom links, categories, posts etc. Select your menu item by checking the box and Add Menu items in your Menu by Clicking on the “Add to Menu” Button.
  • Now you have created your Menu, you need to set it to a Menu location.
  • From the Menu Settings, you can display your Menu items in Header, Footer area.
  • You can Select Location by checking the Box of Header Above Menu, Main ( Frontpage Menu ), Sticky Header and Footer Menu ( Above Footer, Widget footer and Below footer ). Check them according to your requirement.
  • Click “Save Menu“ button to save the changes.

menu-in-top-store

How to Import Demo

  • For more information follow this link.

WordPress Default Setting

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-top-store-pro

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-settings-top-store-pro

Layout Setting

Header Setting

Using Header Setting you can display and customize your Website Header. There are many Customization options available which will help you in setting up your header.

For header setting, Go to Appearance > Customizer > Layout > Header.

Above Header

  • It appears right above the Main header and allows you to show multiple elements. You’ll get four layouts. None layout, One Column layout, Two Columns layout and Three Columns layout.
  • Using None Layout, you can disable Above Header from your site.
  • In other layout columns you can show elements like social icons, menu, search, Text, Widgets. There are styling options also like height, bottom border and border color. Use them and Style your Above Header.

above-header-top-store-pro

Main Header

  • There are different layouts in Main Header. You can modify your overall header by adding layout with other content.
  • 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.
  • Menu Alignment – You can choose the menu alignment in your Main Header. You can align the menu left, right and center.
  • Right Column – Here you can add call to action Button text, number and Email details.
  • Mobile Menu Open – Choose the Mobile menu alignment left. right or center.
  • Sticky Header – Make your header stick to your site by enabling sticky header.
  • Enable or Disable Wishlist, Account and Cart from your Mobile device.

main-header-top-store-pro

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 – You’ll get Numbered, Load and Infinite Scroll navigation for your blog page.
  • Note – To set Blog page. Go to dashboard > Reading Settings. You’ll see this option their “Blog pages show at most”. Enter the number of posts you want to show on your blog page.

blog-top-store-pro

For this setting, Go to Appearance > Customize > Layout > Footer. Footer setting is specially used to display and customize your website footer. In footer area you can add important content and navigation option.

  • It appears right above the Main Footer and allows you to show multiple elements. You’ll get four layouts. None layout, One Column layout, Two Columns layout and Three Columns layout.
  • Using None Layout, you can disable Above Footer from your site.
  • In other layout columns you can show elements like social icons, menu, search, Text, Widgets. There are styling options also like height, bottom border and border color. Use them and Style your Above Footer.

above-footer-top-store-pro

  • In Footer Widget there are eight different Bottom Footer Layout. You can add unlimited widgets in your footer by selecting the layout.
  • Note – You’re absolutely free to add unlimited widgets in each widget area. Just click on “Go to Widget” button and add widgets.

widget-footer-top-store-pro

  • It appears Below the footer widget and allows you to show multiple elements.
  • It appears below the Main Footer and allows you to show multiple elements. You’ll get four layouts. None layout, One Column layout, Two Columns layout and Three Columns layout.
  • Using None Layout, you can disable below Footer from your site.
  • In other layout columns you can show elements like social icons, menu, search, Text, Widgets. There are styling options also like height, bottom border and border color. Use them and Style your below Footer.

below-footer-top-store-pro

  • Go to Customizer > Layout > Sidebar.
  • In sidebar setting you can enable and disable sidebar from front-page and inner pages.
  • Sticky Sidebar – By enabling this option your sidebar will stick to site which means whenever you scroll the site, it will stick with it. It will work for both Primary and Secondary sidebar.
  • Front page Sidebar Setting – Using this option you can Activate Sidebar in both Left and right side. Or you can Disable it for particular side.
  • Inner page Sidebar Setting – Using this option you can Activate Sidebar in both Left and right side. Or you can Disable it for particular side. You can also set No Sidebar for your Inner pages.

sidebar-top-store-pro

  • To Add widgets in Sidebar, Go to Customizer > Widgets. You can add widgets in Primary Sidebar and Secondary Sidebar. You can add widgets which are already registered, WooCommerce widgets and Top Store widgets in your sidebar
  • Primary Sidebar will display on Left side and Secondary Sidebar will display on the Right Side of your website.

primary-and-secondary-sidebar-top-store-pro

  • Sidebar in Shop page – To display sidebar in your Shop page. First go to your Shop page and after that Navigate to Customize > Widget.
  • In the widget panel you’ll see “WooCommerce Sidebar”, click on it. You can Add widget in your WooCommerce Sidebar and Secondary Sidebar. From widget panel add widget in your sidebar. WooCommerce Sidebar widgets will display on the “Left Side” and Secondary Sidebar widgets will display on the “Right side” of your site.
  • Note – Primary and Secondary sidebar will work for Homepage, Blog Page, Blog post single page, Cart, Checkout, Wishlist and Product single page.
  • If you don’t want to show Sidebar in your Shop page you can disable it from Customize > WooCommerce > Shop Page > Check the Disable Sidebar box.

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 it by checking the box.

move-to-top-top-store-pro

Typography

You can add typography on your site with multiple Google & standard fonts. Using different fonts on your site makes it a creative website.

  • Base Typography – For Typography, Go to Appearance > Customizer > Typography > Base Typography. Typography is the best way to show your content in a unique and attractive way. You can add multiple Google & standard fonts using typography in your site. Using different fonts on your site make it a creative website.
  • Choose Font family for body text. Adjust the font size, line height and letter spacing. This will be applicable for overall sites body.
  • You can also adjust “Text Transform” set your body text as Capitalize, Uppercase, Lowercase, default or none.
  • You can choose the “Font Weight” for your text.

typography-top-store-pro

  • Title – Choose font of your title. This will set typography for overall site titles.
  • You can also customize “Text Transform” set your title as Capitalize, Uppercase, Lowercase, default or none.
  • You can choose the “Font Weight” for your text.

title-typography-top-store-pro

  • Content – This will set the overall typography of single page from heading H1 to H6.
  • Heading (H1) – Applicable for for all h1 headings like page title, product title. Choose font family and adjust the font size, line height & letter spacing.
  • Heading (H2) – Applicable for h2 headings. Choose font family and adjust the font size, line height & letter spacing.
  • Heading (H3) – Applicable for h3 headings. Choose font family and adjust the font size, line height & letter spacing.
  • Heading 4 (H4) – Applicable for h4 headings. Choose font family and adjust the font size, line height & letter spacing.
  • Heading 5 (H5) – Applicable for h5 headings. Choose font family and adjust the font size, line height & letter spacing.
  • Heading 6 (H6) – Applicable for h6 headings. Choose font family and adjust the font size, line height & letter spacing.

Frontpage Sections

Top Slider

  • To add Top slider, Go to Appearance > Customizer > Frontpage Sections > Top slider.
  • One Layout is given in Top slider in which you can add slider content like images, Logo images, Title, Sub title, Text and link. You can add unlimited Slider in this section.
  • You can On/Off the slider.
  • You can Disable or enable the section anytime you want.

top-slider-top-store-pro

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.
  • Add the Section title in text area.
  • You can show Recent, Featured and Random 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-top-store-pro

  • To add Product Carousel, Go to Appearance > Customizer > Frontpage Sections > Product Carousel.
  • First Create Categories and Assign Products to them to display Products in your site. Follow this.
  • Add the Section title in text area.
  • With Product Carousel you can show your shop category products using slider.
  • You can show Recent, Random and Featured products in this section.
  • 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.

product-carousel-top-store-pro

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.
  • 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-top-store-pro

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 Disable or enable the section anytime you want.

product-list-carousel-top-store-pro

  • To add Big Featured Product, Go to Appearance > Customizer > Frontpage Sections > Big Featured Product.
  • First Create Categories and Assign Products to them to display Products in your site. Follow this.
  • In this section you can showcase your Featured product in the big Column. To set your Product as Featured Product, Go to Dashboard > Products > Select the Star in the featured column. Or you can select Quick Edit and then the Featured option.
  • In small columns your Recent, Featured and Random products will display which you have set in your particular category.
  • Add the Section title in text area.
  • You can Disable or enable the section anytime you want.

big-featured-product-top-store-pro

Tabbed Product List Carousel Section

  • To add Tabbed Product List Carousel, Go to Appearance > Customizer > Frontpage Sections > Tabbed 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 and your Category will show in Tabbed format. You can show recent, featured or random product in this section.
  • Add the Section title in text area.
  • You can Disable or enable the section anytime you want.

tabbed-product-list-carousel-top-store-pro

Ribbon Section

  • To add Ribbon Section, Go to Appearance > Customizer > Frontpage Sections > Ribbon Section.
  • You can show ribbon background image, 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-top-store-pro

  • To add Banner Section, Go to Appearance > Customizer > Frontpage Sections > Banner Section.
  • One banner layouts is given in which you can show two Banner Images left and right respectively. You can upload desired images with their URL.
  • You can Disable or enable the section anytime you want.

banner-layout-top-store-pro

Brand Section

  • To add brand, Go to Appearance > Customizer > Frontpage Sections > Brand Section.
  • Upload brand images, link and show them in your site.
  • You can Disable or enable the section anytime you want.
  • You can also Auto play your Brand slider.

brand-section-top-store-pro

Highlight Section

  • To add Highlight Section, 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.

hightlight-section-top-store-pro

Custom Section

  • To add Custom Section, Go to Appearance > Customizer > Frontpage Sections > Custom Section.
  • There are five Custom section available. In Each Custom section you can add Widgets from the Widget panel. You can Choose single column layout, two column layout or Three column layout to show your widgets in your site.
  • Top Custom Section will appear on the top of your site whereas you can place other four custom section anywhere on the site.
  • You can Disable or enable the custom section anytime you want.

Section Ordering

  • For Section Ordering setting, go to Appearance > Customize > Frontpage Sections > Section Ordering. You can Change the order of any particular section.

section-ordering-top-store-pro

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

Inner page Template

Faq Page

  • For Faq template option, Create a page, Go to Dashboard > Pages > Create new page and select Faq template from Page Attributes. After that Navigate to Appearance > Customize > Innerpage Template > Faq Template.
  • In Faq template, You can add elements like Title & Text by adding New Faq.
  • You can also pick color & background for each element.

faq-innerpage-top-store-pro

Contact us Page

  • For Contact template option, First you need to Install & activate Lead form Builder plugin after that create a Contact form.
  • Create a page, Go to Dashboard > Pages > Create new page and select Contact template from Page Attributes. After that Navigate to Appearance > Customize > Innerpage Template > Contact Us Template.
  • In contact template, You can add elements like Big heading, small heading, Address, Mobile Number, Email and Working hours. Just add the shortcode of form which you have created using Lead form builder plugin.
  • You can also pick color & background for each element.contact-us-innerpage-top-store-pro

Total Color & BG Option

For Color & Background, Go to Appearance > Customize > Color & Background. You can pick color for every element and upload background image.
total-color-bg-top-store-pro

Global Color

  • For Global colors option, Go to Appearance > Customize > Global Colors.
  • Color Scheme – You can choose Light or Dark scheme for your site.
  • Dark will make your site background black in color and the website content will be white. Whereas the light will make your overall site background White and the website content will be Black.
  • 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-top-store-pro

Header Color

  • To change Color in your Header, Navigate to Appearance > Customize > Color > Background > Header. You can pick color for your overall header which includes “Main Header”, “Above header”, “Below header”, “Sticky Header”, “Mobile Color”, “Off Canvas Sidebar”

Above Header –

  • Background Color & Image – Pick color for your above header background or you can upload image there.
  • Above Header Menu – Pick color for link, hovered link and Hovered Background Color. These will be applied for Above header Menu item only.
  • Above Header Sub Menu – Pick color for link, hovered link and Hovered Background Color. These will be applied for Above header Sub Menu item only.
  • Above Header Content – Pick color for text, link and hovered link. These will be applied for Above Header Content only.

Main Header –

  • Site Title – Pick color for your site title, title Hovered Color and Tagline.
  • Background Color & Image – Pick color for your header background or you can upload image there. These will be applied for Main Header Background only.
  • Main Header Content – Pick color header text, link and hovered link. These will be applied for Main Header Content only.
  • Main Menu – In Main Menu option you can pick color for each Menu item and for menu background area. Individual Color options are given for Menu and Sub menu. These will be applied for Main menu items only.

Mobile –

  • Header and Background Color – Pick color for your Mobile/Pan background and Header Color.
  • Mobile Content Color – Pick color for Menu link, Link hover. Close button background color and icon color.

Sticky Header Color –

  • You can do all the above setting for Sticky Header too. You can pick color for Background, Site Title, Menu, Sub menu and Sticky Icon Color

Off Canvas Sidebar Color –

  • You can pick for each element like Icon color, Sidebar Background color, whole Content Color.

header-color-top-store-pro

Primary Sidebar

  • Navigate to Appearance > Customize > Total Color & BG options > Primary Sidebar. From here you can pick for Primary Sidebar content like Background Color, Widget Title Color, Text, Link and Link Hover color.

primary-sidebar-top-store-pro

Secondary Sidebar

  • Navigate to Appearance > Customize > Total Color & BG options > Secondary Sidebar. From here you can pick for Secondary Sidebar content like Background Color, Widget Title Color, Text, Link and Link Hover color.

secondary-sidebar-top-store-pro

To change color in your Footer Area, Navigate to Appearance > Customize > Total Color & BG options > Footer. You can pick color for your overall Footer which includes “Footer Widget”, “Above & Below Footer”.

Above Footer –

  • Background Color & Image – Pick color for your Above Footer background or you can upload image there.
  • Above Footer Content Color – Pick color for Text, link and hovered link. These will be applied for Above Footer content items only.

Footer Widget –

  • Background Color & Image – Pick color for your Footer Widget background or you can upload image there. You can choose widgets from Appearance > Customize > Layout > Footer Widget.
  • Content Color – Pick color for Widget Title, text, link and hovered link. These will be applied for Footer Widget content items only.

Below Footer –

  • Background Color & Image – Pick color for your below Footer background or you can upload image there.
  • Below Footer Content Color – Pick color for Text, link and hovered link. These will be applied for below Footer content items only.footer-color-top-store-pro

Content Color

  • For this option Navigate to Appearance > Customize > Total Color & Background > Content. From this option you can pick color for Heading h1 to h6 and also change Background color.

content-color-top-store-pro

WooCommerce Color

Product Color –

  • For this option Navigate to Appearance > Customize > Total Color & Background > Products. From this option you can pick color for Product elements on Shop page.

Sale Badge Color –

  • For this option Navigate to Appearance > Customize > Total Color & Background > Sale Badge. From this option you can pick color for Sale badge Text color and Background color.

Single Product Color –

  • For this option Navigate to Appearance > Customize > Total Color & Background > Single Products color. From this option you can pick color for every single Product elements on Shop page.

woo-color-top-store-pro

Frontpage Sections Color

  • For this option Navigate to Appearance > Customize > Total Color & Background > frontpage color. From this option you can pick color for every single element present on Frontpage sections.

frontpage-section-color-top-store-pro

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.pre-loader-top-store-pro

Social Icon

  • For adding social profile links, Go to Appearance > Customize > Social icon.
  • You can show these social icon in the header as well as at the footer. To show social icons just put the links in the text area.
  • By default it will follow the color scheme but You can also set the “original color” for each social icon.

social-icon-top-store-pro

WooCommerce Setting

For WooCommerce setting. First you have to Install WooCommerce Plugin and activate it from the Recommended plugins available in Top Store 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-setting-top-store-pro

Product Style

  • Product Image Hover Style – You can display your product in “Zoom” hover style and “Swap” 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.
  • Swap – In swap condition your product gallery images will be displayed while hovering or clicking the mouse over the Product. It will exchange the product image and show other images of product which have some different look. For “Product Gallery option” Go to a single product page on the rightmost side you can set your product gallery images.
  • 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.

product-style-top-store-pro

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-page-top-store-pro

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.

cart-page-top-store-pro

Shop Page

  • Post Pagination – Choose Numbered, Load more and Infinite post pagination and it will provide you better navigation for your shop page. You can also add Load More text.
  • Disable Sidebar – If you don’t want Sidebar in your Shop Page, Check Disable Sidebar option. This will hide sidebar from Shop page.
  • To set up Sidebar in your Shop page, Go with this Link.

shop-page-top-store-pro

Multiple Widgets

  • There are Four different Widgets which can be used in Sidebar of Homepage and Inner-pages.
  • Each widget has its own setting and functionality. All widgets are available in Customize Widget Panel. To add Widgets, Go to Appearance > Customize > Widgets.
  • Post Widget Slider – Using this widget you can show posts images with caption in a carousel/slider. You can Add Number of Post Show and also Select Specific Option To Display Post. Display Random, Recent and Popular post in your sidebar area.

post-slider-widget-top-store-pro

  • Highlight Widget – Using Highlight widget you can showcase services about your company using Font Awesome Icons. You can add title, Description for particular highlighted services. You can also add Widget Title for your Mobile device.

highlight-widget-top-store-pro

  • Testimonial Widget – Using Testimonial widget you can showcase your testimonials with Image, Title and Description. This will be display in slide way.

testimonial-widget-top-store-pro

  • About Us Widget – Using About us widget you can display about yourself or about your company. You can showcase elements like Title, Image, Read more text and Link.about-us-widgte-top-store-pro
  • Product list Slider Widget – In Product List Slider Widget you can showcase your Shop products in list slide way. You can display this widget in Custom sections, sidebar and Footer area.

product-list-slider-widget-top-store-pro (1)

  • Product Slider Widget -In Product List Slider Widget you can showcase your Shop products in slide way. You can display this widget in Custom sections, sidebar and Footer area.product-slider-widget-top-store-pro (1)
  • Single Category Slider Widget – Using this widget you can showcase Single Category with a slider. You can display this widget in Custom sections, sidebar and Footer area.

single-category-slider-widget-top-store-pro

  • Single Product Slider Widget – Using this widget you can showcase Single Product with a slider. You can display this widget in Custom sections, sidebar and Footer area.

single-product-slider-widget-top-store-pro

Note – As per as your requirement, You can use these widgets in any Widget area like Custom sections, Footer area, header area etc.