HyperCommerce Pro

HyperCommerce Pro is a premium theme aimed at E-Commerce sites.
This documentation aims to provide guidance and aid you through the installation process as well as shed a light on different features of the theme.
If you have any questions or queries, please feel free to email us at support@themethread.com

Following through this documentation, first we setup a theme ready wordpress installation. Then, we proceed to install the theme itself. So, let’s get started.

Contents

GETTING STARTED

HyperCommerce Pro has been tested and is compatible with WordPress version 4.9 and above. Please make sure that your version of WordPress is at least 4.9.
However, for reasons like security and added features, update your WordPress to the latest available version.

If you haven’t downloaded WordPress already, you can download it from the WordPress repository via https://wordpress.org/download/.

CHECKING AND UPDATING WORDPRESS VERSION

Make sure you are connected to the internet.
Login to WordPress admin panel
If update is available, a prompt will be shown just click the UPDATE button.

Next, download HyperCommerce Pro theme and save it on your PC. The download includes the following files:
WordPress Theme Files: A compressed theme file which consists of all the necessary files and extra assets such as images and icons.

THEME INSTALLATION AND ACTIVATION

Installation can be done in any of the two ways:

FTP/Cpanel
WordPress Dashboard

Installing via WordPress Dashboard is recommended:

INSTALLING VIA WORDPRESS DASHBOARD

Go to Appearance > Themes
Click on Add New button
Click on Upload Theme
Click on browse and select the hypercommerce-pro.zip file from your PC
Click Install now

INSTALLING VIA FTP/CPanel

Unzip “hypercommerce-pro.zip” and keep the folder in an accessible location on your PC
Login using FTP Client such as FileZilla or CPanel
Locate the folder “wp-content/themes” in your WordPress files
Upload the unzipped HyperCommerce Pro folder into “themes” folder

For More Information about installing theme using FTP visit : http://codex.wordpress.org/Using_Themes#Adding_New_Themes

ACTIVATING THE THEME

Log in to the WordPress Admin Panel
Go to Appearance > Themes in the WordPress Menu
Hover over the theme thumbnail and click the Activate button.

SITE IDENTITY

Enables you to edit the name and logo of your site.

Go to Appearance > Customize > Site Identity
You can add or remove site logo and edit site information as shown.

HOMEPAGE SETTINGS

Hypercommerce Pro includes a dedicated woocommerce based homepage.
You must install and enable woo-commerce for this homepage to work.

You can enable the homepage by following these steps:

Create a new page with a title.
Choose “Homepage” as the page template.

Setting the page as homepage

Click on Homepage Settings > Default Settings in customizer.
Select “A Static Page”.
Under Homepage, select the page created in previous step.
Click on publish to save settings.

Slider

This option enables user to Activate the homepage slider and adjust it according to the user’s needs.

Setting up the slider.

Click on Slider of Homepage Settings within the customizer.
Click on Slider Options.
Toggle the slider settings as needed.
Select a slider layout. There are three provided.
Choose a slider animation.
Click Publish to save the settings.

Slider type

Click on Slider Preferences within the Slider options panel.
Choose the type of posts you want to display in the sliders.
You can choose default blog posts. This will allow you to select upto six woocommerce products that will be featured in sliders.
Choosing category will allow you to show products within a certain category in the slides.
Choosing featured products will show the woocommerce featured products in the slides.
Choosing custom will allow you to add your own slides. Click “Add new slides” > Upload Image > Enter title and description
Click publish to save

FEATURED CATEGORIES SETTING

This option allows users to choose multiple woocommerce category to be featured on the homepage.

Click on “Featured Categories Settings” within the customizer homepage settings.
Select the categories that you want to feature on the homepage. You can choose upto six categories.
Enter the title for the section.
Choose a layout. HyperCommerce Pro allows you to choose from four different layouts.
Click publish to save the settings.

TESTIMONIAL SETTINGS

This option allows users to configure the testimonial slider section on the homepage.

Click on “Testimonial Settings” within the customizer homepage settings.
Choose the number of testimonials to be shown.
Choose a background image for the section.

Note:: This setting will be enabled only if you have some posts in the testimonial post type.

NEW ARRIVALS SETTINGS

This option allows users to display latest woocommerce products on the homepage.

Click on “New Arrivals Settings” within the customizer homepage settings.
Enter the title for the homepage section.
Choose a layout from four different layouts
Select the number of products to display. Maximum of 12 products can be displayed.
Choose what types of products to feature. Eg. choosing category will display list of categories, upon choosing a category, the products based on that category will be displayed.
Click publish to save settings.

BANNER SETTINGS

This options allows users to configure and customizer the call to action banner in the homepage.

Click on “Banner Settings” within customizer homepage settings.
Choose the type of banner.
Choose whether you want to enable a full width variation of the banner.
Enter a label text for the button.
Choose a custom background image.
Click publish to save settings.

STAT COUNTER

This option allows user to customize the statistics counter section in the homepage.

Click on “Stat Counter” within customizer homepage settings.
Choose a background image for the section.
Click on “Add New Counter” to add a stat counter. You can add as many counters as you wish but still the recommended number of counters is four.
Add the number input for the counter.
Choose a label for the counter box.
Click publish to save settings

ABOUT US SECTION

This option allows users to configure the “About Us” block in the homepage.

Click on “About Us Section” within the customizer Homepage Settings.
Enter the title for this section.
Enter a label for the section button
Choose what to display in the section. You can enter custom data or choose data from an existing post.
Click publish to save settings.

OUR TEAM

This option allows users to customizer the our team section in the home.

Click on “Our Team” within the customizer Homepage Settings.
Enter the title of the section.
Choose the number of team members to show.

GOOGLE MAP

This option allows users to configure the google map/contact section

Click on “Google Map” within the customizer Homepage Settings.
Enter the title of the section
Choose a background color for the form section.
Enter the Google Form Embed code to insert your own google map.
Click “Add Social Links” to add different social media links. Choose an icon and enter the media link.
You can include your own form. Enable the plugin “Contact Form 7”. Just paste the Contact Form 7 shortcode in the given field.
Click publish to save settings.

LATEST BLOG

This option allows users to configure the homepage latest blog section.

Click on “Latest Blog” within the customizer Homepage Settings.
Enter the section title.
Choose a category to feature the posts from. (Posts that belong to the selected category will be displayed )
Choose the length of the post except.
Click publish to save settings

SUBSCRIBE SECTION

Click on “Subscribe Section” within the customizer Homepage Settings.
Choose a background image for the section.
Enter the form title.
Enter the form code.
Click publish to save settings.

INSTAGRAM SECTION

Click on “Instagram Section” within customizer Homepage Settings.
Enter the title for the section. Default is “Our Instagram”.
Enter your instagram username. Make sure your account is public.
Enter the button label.
Click publish to save settings.

SORT/RE-ORDER HOMEPAGE

This option allows user to use a drag and drop interface to re-allocate the existing homepage sections

Click on “Sort/reorder homepage” within the homepage customizer
Drag and drop the panels to rearrange the sections according to your need.
Click the small eye infront of the panels to hide the corresponding section.
Click publish to save settings.

GENERAL SETTINGS

Includes options such as DNS Prefetch, Pagination and Lightbox which applies to the entire theme.

Click on “General Settings” in Customizer.
Choose a default site layout. Boxed or Full-Width.
DNS Prefetch can be toggled. It improves site loading time.
Lightbox can be toggled which allows viewing larger version of images without leaving the page.
The type of PAGINATION can be chosen.
HEADER CODE enables you to add your custom scripts on to the header of the site.
FOOTER CODE enables you to add your custom scripts on to the footer of the site.

HEADER SETTINGS

Includes options for selecting different site header layouts and other header specific settings.

Header Layout

Click on “Header Settings” in customizer.
Click on “Header Layouts”.
Choose a header layout from among seven different layouts.
Click publish to save settings.

Header Options

Click on “Header Options” within the “Header Settings” in customizer.
Toggle the search bar. Doing this will either show or hide the search bar in site.
Depending the layout you select, you can see additional settings.
For Layout Three and Six you can choose header icons.
- Click on “Add new Icon”.
- Choose an icon.
- Enter the label.
- Enter a subtext.
- Enter the url.
- Choose a color.
- Click publish to save settings.
  You can add multiple icons. However, the recommended number is three.
For layout Six and Five you can choose Header Contact icons
- Click on “Add new icon”
- Choose and icon
- Choose a label
- Click publish to save settings
  You can add multiple icons.

TYPOGRAPHY SETTINGS

This option allows users to choose fonts for the site. You can select a font for site headers and another font for site body.

Base font

Click on “Base Font” within “Typography Settings” in customizer.
Choose a font family.
Select the font variant.
Click publish to save settings

Header Font

Click on “Header Font” within “Typography Settings” in customizer.
Choose a font family
Select the font variant
Click publish to save settings

STYLING OPTIONS

This options includes general styling for the theme.

Click on “Styling Options” in the customizer.
Select a layout style.
Choose Primary theme color.
Choose Secondary theme color.
Choose a background color.
Select a background image. If this is selected then the background color will be overridden.

SINGLE POST SETTINGS

This option includes configuration options for single pages

Post Page Settings

Click on “Post Page Settings” within “Single Post Settings” in customizer.
Select the post meta that you want to display.
Toggle tag list display.
Toggle featured image display.
Toggle comments display.
Toggle author comment highlighting.

Layout Settings

Click on “Layout Settings” within “Single Post Settings” in customizer.
Choose a layout. You can choose fro upto four unique layouts.
Toggle “Trending Posts” section in single pages.
Enter the tag to feature. The posts that has the given tag will be displayed.
Select the number of posts to be displayed.
Enter the title for the section.

BREADCRUMB SETTINGS

This option contains general breadcrumb settings

Click on “Breadccrumb Settings” in the customizer.
Toggle whether to show or hide the breadcrumb.
Enter the breadcrumb home text. Defaults to “Home”.
Enter the breadcrumb selector. Defaults to “/”

POST PAGE LAYOUT

This option contains various layouts for the blog listing pages.

Click on “Post Page Layout” in the customizer.
Select the desired layout
Click publish to save settings.

SOCIAL SETTINGS

Allows users to manage the social media settings.

Social Media Links

Click on “Social Media Links” within the “Social Settings” in customizer.
Choose to whether show or hide social media icons in the header.
Click “Add new link” to add a social link. You can add multiple links.
Choose social icon.
Enter the social media link.
Click publish to save settings.

Social Share Settings

This setting allows users to control the share behavior.

Click on “Social Share Settings” within the “Social Settings” in customizer.
Enable/Disable the social share settings.
Select the layout for the sharer.
Select the location of the sharer
Rearrange the order of the social icons.
Click publish to save settings

FOOTER SETTINGS

This setting allows user to control various elements in the site footer.

General Settings

Includes basic footer settings.

Click on “General settings” within the “Footer Settings” in customizer.
Enter the copyright text.
Toggle author link.
Toggle WordPress link.
Click publish to save settings.

Footer Features

Allows user to add elements to the footer.

Click “Footer Features” within “Footer Settings” in customizer.
Click “Add new row” to add a footer feature.
Choose an image. Select a small image.
Enter the title.
Enter the description.
Click publish to save settings.

WOOCOMMERCE OPTIONS

This setting contains options for woocommerce pages.

Click on “WooCommerce Options” in the customizer.
Toggle whether to show related products in the shop page.
Choose how many products to show per row in shop page.
Toggle header cart.
Enter the label for the header cart. Defaults to “My Cart”.
Click publish to save settings.

Share on Facebook