Documentation for TopZ – Multipurpose WooCommerce WordPress Theme

1GETTING STARTED

1.1 Introduction

First of all, I would like to thank you for purchasing this theme, your support is truly appreciated.

SW TopZ is a modern and beautiful WordPress Theme. Both developers and non-trained users can use it easily. This document covers the installation and use of this theme, reveals some answers to common problems and issues. We encourage you to read throughout this document if you are experiencing any difficulties.

If you have any questions that are beyond the scope of document, please feel free to contact us via our Support Page.

1.2 System Requirements

At the basic level, this theme will require the following conditions:

PHP version 5.6 or later
MySQL version 5 or later
WordPress 4.7.x or later (Please note that the latest WordPress version is prefered.)

Note:
The Recommended PHP Configuration Limits should be paid attention. In several cases, you may deal with problems related to low PHP configuration limits, such as: white screen, demo content fails when importing, empty page content and other similar issues. The solution is to increase the PHP limits. You can do this on your own by editing the following lines in php.ini file in your root directory. This is not a file that comes with WordPress so if you are unfamiliar with it you should contact your web host about increasing those limits to a minimum as follows:

max_execution_time 360

memory_limit 128M

post_max_size 32M

upload_max_filesize 32M

2FILE STRUCTURE

At first, you need to download the package to your computer and then unzip it. The package includes files listed as follows:

Data files, including:

plugins: js_composer.zip, one-click-install.zip, one-click-install-index2.zip, one-click-install-index3.zip, revslider.zip, sw-core.zip, sw-woocommerce.zip
revslider: slideshow-1.zip, video_bg.zip, slideshow-2.zip, slideshow-3.zip .
media.xml, media-index2.xml, media-index3.xml

Theme Installation files, including:

sw_topz_quickstart_vx.x.x.zip for quickstart installation
sw_topz-child-theme.zip
sw_topz_theme_vx.x.x.zip for manual installation

Note:

Please note that this file sw_topz_quickstart_vx.x.x.zip is not included in the Themeforest package. You can contact Support Page if you need any help.

The child theme allows you to modify or add to the functionality of the parent theme instead of modifying the core theme files directly, which makes it easy to update the parent theme without erasing your changes. If you plan on making any updates or additions to this theme, you will definitely need to set up this child theme on your site)
To have more information about this topic, please go Here for more detail.

3INSTALLATION

There are two ways to install this SW TopZ Theme:

Quickstart Installation: This one is suitable for the first installation and want to get a whole fresh site as in the Demo. Please note that the quickstart file is not included in the Themeforest package. You could contact us via our Support Page to be supported.
Manual Installation (including Theme Installation): If you want to build your site based on available content with SW TopZ, this one will be suitable. It won’t overwrite your old data.

3.1 Quickstart Installation

Please follow the steps in the Quickstart Installation Instruction for WordPress Theme .

3.2 Theme Installation

Before starting the Theme Installation process, please make sure that your host meets all following requirements:

Your web host meets the minimum requirements to run WordPress

This theme is built up and tested with WordPress Version 4.7.3. Therefore, this WordPress version should be used to have best performance. Besides, this theme is also compatible with WordPress 3.x.x and 4.x.x.

3.2.1 Theme Upload

Please follow the steps in Theme Installation Instruction for WordPress Theme .

3.2.2 Theme Installation Types

In this theme, we offer a useful feature to choose the way to install this theme: Import Demo Data or not. Two methods are provided for two different case. When you want to start a new website, or use our demo contents for easily customization, save your time and your energy. In this situation, we recommend using the Import Demo Data method. If you do not use this way, you must be adept in WordPress customization and theme development

After installing theme, there are two ways for you to choose to custom this theme: create everything by yourself or import our demo data

Do NOT import demo data	Import demo data
Strong points It means that you could create everything by yourself from its beginning You could configure each part of this theme singly according to our suggested theme position	Strong points This process certainly helps you save your time and energy It is ideal for beginners to advanced developers Our Import Demo Data provides you a good way to import the demo content, widgets and theme settings with one click.
Weak points If you are a newbie, it could be an extremely time-consuming process and a tough challenge You are certainly adept in WordPress customization and theme development	Weak points Category ID is different between “your database in your server” and “our database in our server”. It’s all different from servers. That is the reason why you need to change the category ID on your site by checking it out in our theme configuration part of this documentation.
Work Process When choosing this method, your process with this theme could be: 1.Theme Installation (including: Theme Upload – checking if you have any post, page, product, or revolution slider; if not, you have create all by yourself before continue customizing this theme) >> 2. Setting your homepage >> 3. Mailchimp for WordPress >> 4. Menu Configuration >> 5. Theme Configuration	Work Process When choosing this method, your process with this theme could be: 1.Theme Installation (including: Theme Upload – Import Demo Data – Import Media File- Import Revolution Slider) >> 2. Setting your homepage >> 3. Mailchimp for WordPress >> 4. Menu Configuration >> 5. Theme Configuration

3.2.3 Required Plugins Installation

Step 1 – After installing and activating the theme you will see the message about installing required plugins at the top of the page.
Step 2 – You need click Begin Installing plugins link in order to install needed plugins for TopZ theme
Step 3 – You will be redirected to Install Required Plugins page, here you will find all of the theme required plugins. In order to install these plugins, you just need to check all of them and select “Install” then “Apply”.

Note: When installing plugins, if you see a notice that some plugins have unsuccessful installation, they should be install manually one by one. This case usually occurs as you select all plugins to install at once.
Step 4 – After installing these plugins, you need to Activate them by checking all of them and select “Activate” then click “Apply”

Below are list of required plugins along with SW TopZ theme:

Contact Form 7
Image Widget
MailChimp for WordPress
Regenerate Thumbnails
Slider Revolution
SW Core
SW Woocommerce
WooCommerce
WooCommerce PayPal Powered by Braintree Gateway
WooCommerce Stripe Gateway
WordPress Importer
WordPress Less
WPBakery Visual Composer
YITH WooCommerce Compare
YITH WooCommerce Wishlist
Yoast SEO

4IMPORT DEMO CONTENTS

Please go here to have more detail about Importation in TopZ WordPress themes.

5POST

Please go here to have more detail about customing a post in our WordPress themes.

6PAGES

Please go here to have more detail about customing a page in our WordPress themes.

After setting up this theme, you should set up your homepage to view your achivement. Please go to Settings >> Reading area and look for the Front Page display area. Change the radio button “A static page” and select the front page and blog page from the dropdown menus, then save changes.

7MAILCHIMP FOR WORDPRESS

In this section, we will bring you some steps to configure MailChimp for your site.

Frontend Appearance:

Backend Settings:
1.Go to MailChimp for WP >> MailChimp to access general setting page of MailChimp. You should connect to your mailchimp account by entering API Key.

2.Also, in order to make MailChimp Form work effectively, you should navigate to MailChimp for WP >> Forms in admin sidebar, fill in the forms. After making the changes, remember to click Save Changes button.

Form Fields: Please click to see the Backend Settings.

Copy the code here to the form mark-up field in the page.

<div class="frm-input">
   <input class="frm-email" type="email" name="EMAIL" placeholder="Email Address..." required />  
   <button class="frm-submit" type="submit" value="subscribe">Subscribe</button>
</div>

<button class="frm-submit" type="submit" value="subscribe">Subscribe</button>

</div>

Form Messages: Please click to see the Backend Settings.
Form Settings: Please click to see the Backend Settings.
Form Appearance: Please click to see the Backend Settings.

You can click Here for more information about this plugin.

8THEME OPTIONS

Note: After both Import demo data and Not import demo data method, the theme options are available, so this section is to showed you what we provide and how they are set.

Our stunning TopZ theme provides an advanced Theme Options panel that is loaded with many options to customize your page effectively. These options are organized into logical tabbed sections which will be very easy for you to navigate. Each option also has a short description of what it will do on the front end. Because of the sizable amount of options, we cannot go over them in full detail in this documentation. We encourage you to please take some time and navigate through each tab to see what we offer.

To access the theme options panel, please go to Appearance >> Theme Options in your WordPress admin. After that, you will see a logical tabbed sections including a lot of tabs for you to discover.

Below sections will go through each tab in detail for you.

SOME NOTES ABOUT THE THEME OPTIONS:

Customize & Cpanel option: This is only used for the Demo development. Due to the risk of loosing your customization in CSS file, the option Demo Mode is not recommended.

Reset to Defaults option: Please DO NOT use it if you do not want to loose your configuration. When the theme is reset to default, all the value here will be back to the default without saving any your configuration.

Before configuring, you can also backup your theme options by clicking on the Import/Export tab. This is a great way to move your custom options from site to site.

The configuration here will be applied to the pages in your site if there is no change in the Page Metabox. You can refer to the Theme Options & Page Metabox to master the framework before going on.

8.1 General

In this tab, you will see options for Logo Image, Favicon, Option for Taxonomy and Title Length of Item Listing Page. .

Logo Image: You can easily upload your desired logo image and get URL of the logo.
Favicon: You also can upload custom Favicon for your site.
Select Taxonomy: You can freely select taxonomy to show custom term metabox.
Title Length Of Item Listing Page: This one let you to choose the Title Length if you want to trim word for the Item Listing Page.

8.2 Schemes

In this tab, you will see options for Color Scheme, Develop Mode and Color option for Body, Border and for the Custom one .

Color Scheme: We plan to update more color schemes for this theme in next versions.
Developer Mode: If you want to configure option Color, this option should be chosen. However, this will turn on the compile less to css in your site. Due to the risk to loss of custom CSS, this is not recommended.
Color: You also can select main custom color here.

8.3 Layout

SW TopZ gives you multiple selections for this theme layouts. You can change sidebar positions (left, right) with wide or boxed version for many kind of devices. SW TopZ supports boxed and wide layout, with boxed version you can easily customize the background image to meet your expectation. Let’s look at the screenshot for more detail about these ones.

8.4 Header & Footer

These options enable you to change page appearance with various Header and Footer Styles. In addition, SW TopZ allows you to customize your Phone Number, Email and Copyright text in your footer. Moreover, you can check to disable the Search and Cart on the header of your site.

Header Style: Currently, this theme currently supports 04 Header Styles ( Header Style 1, Header Style 2, Header Style 3, Header Style 4) . We will update more in the next versions.
Footer Style: Currently, this theme supports 04 Footer Styles (Footer Style 1, Footer Style 2, Footer Style 3). We will update more in the next versions.
Copyright text: It lets you to change the Copyright text. If there is no change here, the demo data will be applied.

Note:

Header: To configure Header, you can go to Appearance > Widget then choose one and configure as your expectation.

Footer: To configure Footer, you can go to Page > All pages, choose a Footer Style to then configure as your expectation.

SW TopZ supports mega menu and dropdown menu. There is options for you to choose with Menu Type, Theme Location. In addition, you can active sticky menu by choose option Active sticky menu for your site here.

Menu Event: This option is applied to the Event Menu. You can choose Hover Event or Click Event to hover or click on parent menu to appear child menu.

8.6 Blog Options

SW TopZ gives you multiple selections for Blog page with many features for Sidebar Blog Layout (Full Layout / Left Sidebar / Right Sidebar), Layout Blog and Blog Column .

8.7 Product Options

SW TopZ allows you to change number of Products Column to display on different devices, select Sidebar Style for product and display Quickview Option. You can also change the number of product in Listing Product pages.
In addition, you can configure the Product Categories Widget with number of item and text showing.

Select Banner: You can choose to use Listing Banner or Category Product Image to appear as the banner in product page. If you want to have different banner for each category, the second one will be recommended.
Listing Banner Product: If you choose Banner as Use Banner, you can upload image here to set the banner for all product page.
Quickview: You can use this option to let user have quickview of product.
Product Zoom: You can use this option to turn on the product image zoom when hover on single product.

8.8 Typography

SW TopZ provides various options to custom the font style for your blog with Google Font.

With Social tab, SW TopZ allows you to link your social easily. You can add link of your Facebook, Twitter, Tumblr, Linkedn, Google+ and Pinterest into your site.

8.10 Maintaincece Mode

If your site has not been ready to be launch, the Maintaincece Mode will be truly useful for you. In this tab, you can enable and configure Maintaincece Mode with various options including Background, Content, Date and Form.

If you want to use this Maintaincece Mode, firstly, please click on Enable Maintaincece Mode then you can configure other options in this tab.

This feature let you to configure the Newsletter popup for your website. It let you to configure the Popup Background, Popup Content and Popup Form.

If you want to use this feature, firstly, please click on Active Popup Subscribe then you can configure other options inlcuding Popup Background, Popup Content and Popup Form in this tab.

8.12 Advanced

This tab provides options for your advanced customization.

Show cPanel: Turn on/off Cpanel. This is only for Develop purpose.
Widget Advanced: You could choose Widget Advanced to display advanced configuration in widget panel for configuring by yourself.
Developer Mode: Due to the risk of losing your customization in css files, this option is not recommended to be chosen.
Active Preload and Preload Active Page(s): You could choose to active preloading for theme and select page having this action.
Back to top: You could choose to turn on “back to top” option
Direction: You could change your site’s direction from left to right or from right to left.
Custom CSS/JS: Insert your own CSS and JS into this part. These CSS and JS will override all default styles located throughout the theme.

8.13 Import/Export Options

You can also backup your current theme options by clicking on the Import/Export tab >> Export Options. Import Options is not recommended, because this action will overwrite any existing options in your site.

9MENU CONFIGURATION

This theme uses 6 menus:

Primary Menu (Primary Menu)
Left Menu (Vertical Menu)
Customer Care
Help
My Account
Our Story

If you have imported demo content, go to Existing Menu or else go to Creating a New Menu to create a new menu.

Step 1: Go to Appearance > Menus

Step 2: In the Manage Locations area, choose an Assigned Menu, which appropriates to Theme Locations then click Save Changes to save the settings.

Step 1: Go to to Appearance > Menus

Step 2: Click Create a new menu. Enter Menu Name and click Create Menu.

Step 3: Check the menu item in the boxes in the left column, click Add to Menu to add items to the menu and drag/drop to arrange them.

Step 4: Click Save Menu

Step 5: Now assign the created menu to the appropriate location

Step 1: Go to to Appearance > Menus

Step 2: Click Edit Menus. Select a Menu Name in the dropdown menu and click Select to choose a menu to edit.

Step 3: Edit the menu and its items in Menu Structure

Step 4: Click Save Menu to save your changes

Note: When editing items in these menus, the items (in a menu) having same level could have same configuration. Therefore, we encourage you read throughtly and find out the item’s level to configure it without any errors.

In your Administrator Page, please go to Appearance > Menus and choose the menu to configure its structure.

The Frontend Appearance:

The Backend Settings:

1. We call Parent Level Menu Level 0. Then, next levels are Level 1, Level 2,etc.

2. Click on the first Menu Level 0 (Parent Level Menu ) item and select Dropdown Size = “3″ in the selection box.

Click here to see the Backend Settings.

3. Click “Save” button

Description of parameters in Advanced Menu Configuration:

Active mega menu: Allow to activate/inactivate Mega Menu

Icon: Using icon-* class to display Icon for any menu item with intergrated Font Awesome.

Dropdown Size: Set the width of dropdown menu. (ex: min = 1 (= 150px); max = 6 (= 900px)).

Dropdown Align

- Only for menu items level 0 – If you need a dropdown align by right direction, configure it to “Right” instead of “Left” or “Default” – “Default” means that no class can be added to dropdown, everything follows the default css. – “Left” / “Right”: add to dropdown an utility class and float it left/ right, make it align as your desire .

Show Description as Subtitle

- Show a short description – It is an essential attribute of a menu item. You may need to select to show it in the metabox screen.

Hide Title

- When you would like to hide the title of menu, please select “Yes” value. In this case, you need to configure Icon, Subtitle or Advanced Content.

Disable Link: Allow to disable link.

Advanced: Several advanced functions are placed here.

1.”Default”: NOOP, do nothing. Sure, it is not advanced.
2.”Use as Divider”: Show any icon, title, subtitle, content. Divider style only.
3.”Append Advanced Content”: Append content after menu title block (icon+title+subtitle).
4.”Append Advanced Content with Shortcode”: as above, but “do_shortcode” with this before append.

The Frontend Appearance: