Top Store

Installing Theme & Plugin

  • First, download the “Top Store” zip file.
  • Login to WP admin.
  • Go to “Appearance > Theme”.
  • Click on “Add new” button and then click on “Upload theme” button. Here upload theme zip file.
  • Activate the theme.
  • Installation-Top-Store

Demo Import

  • “Go to your WP dashboard. Navigate to Appearance > Top Store options. Install and activate “Recommended Plugins”.
  • In the recommended plugin “Hunk Companion“, “WooCommerce” and “One click Demo Import” activation is mandatory.
  • As soon as you activate these recommended plugins “Site Library” link will display under “Import Demo Site”.
  • Click on Import Demo, Wait for few minutes your demo will import successfully.

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.

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

  • 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.

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-doc

Main Header

  • 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.
  • With Main header setting, You’ll get One Layout. You can modify your overall header by adding layout with other content.
  • Menu Alignment – You can choose the menu alignment. 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 – This will show Wishlist, My Account icon and Cart icon on your Header
  • Header-layout-top-store

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 – It will provide you Numbered navigation for your blog page.
  • Note – 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.

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.
  • In Footer Widget there are eight different Bottom Footer Layout. You can add unlimited widgets in your footer by selecting the layout.
  • In Layout 4 – In Four column widget area, Widgets will occupy 25% widget area in each column. You can use different Widgets in it. Other layouts you’ll get with Pro Version.
  • Note – You’re absolutely free to add unlimited widgets in each widget area. Just click on “Go to Widget” button and add widgets.
  • 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.
  • Go to Customizer > Layout > Sidebar.
  • In sidebar setting you can enable and disable sidebar from front-page and inner pages.
  • 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.
  • To Add widgets in Sidebar, Go to Customizer > Widgets. You can add widgets in Primary Sidebar and Secondary Sidebar. You can also add WooCommerce widgets.
  • Primary Sidebar will display in Left side and Secondary will display in Right Side of your website.

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.

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.

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 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.
  • 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.

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.

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.

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.
  • You can Disable or enable the section anytime you want.
  • To add Banner Section, Go to Appearance > Customizer > Frontpage Sections > Banner Section.
  • There are Two different banner layouts. You can upload desired images with their URL.
  • You can Disable or enable the section anytime you want.

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.

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

Total Color & BG Option

For Color & Background, Go to Appearance > Customize > Color & Background. You can pick color for every element and upload background image.

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.

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.

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.

WooCommerce Setting

For WooCommerce setting. Go to Appearance > Customize > WooCommerce
First Setup your WooCommerce. Go to your WP dashboard. From the Recommended plugins, Install WooCommerce Plugin and activate it.

Product Style

  • Product Image Hover Style – You can display your product in “Zoom” 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.

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

  • 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.

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.
  • cross-sell-products-cart-page-top-store

Shop Page

  • Post Pagination – Choose Numbered post pagination and it will provide you better navigation for your blog page.
  • Disable Sidebar – If you don’t want Sidebar in your Shop Page, Check Disable Sidebar option. This will hide sidebar from Shop page.

Multiple Widgets

  • There are Three different Widgets which can be used in Sidebar Homepage and Inner-pages too.
  • 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.
  • 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.
  • Testimonial Widget – Using Testimonial widget you can showcase your clients testimonials with Image, Title and Description. This will be display in slide way.

    Note – You can use these in Footer area, header area too. As per as your requirement.