Documentation for SuperShop – Multipurpose WooCommerce WordPress Theme

SW Supershop

View demoMore detail

1GETTING STARTED

1.1 Introduction

First of all, I would like to thank you for purchasing this theme, your support is truly appreciated. This document covers the installation and use of this theme, reveals some answers to common problems and issues. We encourage you to read this document throughtly 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 Tickets System.

1.2 System Requirements

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

  • Apache 2.x or Microsoft IIS 7
  • PHP 5.3.x
  • MySQL 5.0.4 or higher
  • WordPress 3.9+, 4.0+

Note: Recommended PHP Configuration Limits 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

2INSTALLATION

2.1 Files Structure

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

  • Data folder – Contains the “slideshow-1.zip” file, “slideshow-2.zip” file.
  • Theme installation files- Contains the sw_supershop_theme_version1.0.0.zip (the newest version) file and sw_supershop-child-theme.zip file. The child theme is a recommended way of modifying your existing theme.

2.2 Theme Installation

When you are ready to install a theme, you must first upload the theme files and then activate the theme itself. The theme files can be uploaded in two ways:

  • FTP Upload:
  • WordPress Upload:

Note: If the theme files’ size is larger than 8M, please upload via FTP (File Transfer Protocol).

2.2.1 Theme Installation via FTP

To add the new Theme to your WordPress installation, follow these basic steps:

  • Download the Theme archive and extract the file named themename_version.zip, for example here: sw_supershop_theme_version1.0.0.zip. You may need to preserve the directory structure in the archive when extracting these files.
  • Load your FTP client, such as FileZilla.
  • Use your FTP program to access your host web server, create a directory to save your Theme in the wp-content/themes directory provided by WordPress.For example, the theme named SW Supershop Version 1.0.0 should be in wp-content/themes/sw_supershop_theme_version1.0.0. The theme may provide this directory as part of the archive.
  • Upload the Theme files to the new directory on your host server

To select the Theme for your site:

  • Log in to the WordPress Administration Panels
  • Select the Appearance panel, then Themes to find the new theme uploaded.
  • From the Themes panel, roll over the Theme thumbnail image for the Theme you are interested in to see options for that theme.
  • You can view more information about any theme by clicking Theme Details.
  • A live preview of any Theme (using your blog’s content) can be seen by clicking Live Preview.
  • To activate the Theme click the Activate button.

Your selection will immediately become active.

Note: If the Theme preview is blank, do not activate the new Theme without investigating further. Your site may not be displayed correctly, otherwise.

2.2.2 Theme Installation via WordPress Admin Panel

Step 1 – Open the wp-admin panel (Navigate through web browser to the folder where you have installed the WordPress, for example: www.your_domain.com/wp-admin/).

Step 2 – Login to your WordPress Dashboard and navigate to Appearance >> Themes. At the top of the page, click the Add New button.

Step 3 – Click the Upload Theme button >> Choose File to import the theme from your computer. Select your sw_supershop_theme_v1.0.0.zip file and click Install Now.

Step 4 – You have a few minutes to wait till you see the message announcing that Theme installed successfully.

Step 5 – After that, you will be able to activate the theme.

Step 6 – Press “Save Changes” to complete the theme activation.

 

Once theme is installed, you need to install Required Plugins to get full features working.

2.3 Required Plugins Installation

    After installing and activating the theme you will see a yellow popup at the top of the page. The message says that: “This theme requires the following plugins…”, and you need to click the ‘Begin Installing plugins’ link.

    You will be redirected to ‘Install Required Plugins’ page, here you will find all of the theme required plugins. To install them just check all of them. In the dropdown menu, select Install to activate them.

  • Note: When installing plugins, if you see a notice that some plugins have unsuccessful installation, please choose each plugin to install again. This case usually occurs as you select all plugins to install at once.

    • 2.4 Import Demo Data

    Step 1 - In the Administrator page, please navigate to Appearance >> Import Demo Data.

    Step 2 - Please click “Import Demo Data” button.

    The process will take a couple of minutes. After receiving a message which shows “Importing all done!”, please follow the next part of this document to import “media.xml” file.

    2.5 Import Media file

    Step 1 - In the Administrator page, please navigate to Tools >> Import.

    import

    Step 2 - Please choose "WordPress" to import.

    wordpress

    Step 3 - In Import WordPress page, click "choose file" button to select file "media.xml" to upload.

    import-media-file

    2.6 Import Revolution Slider

    Step 1 – In the Administrator page, please navigate to Revolution Slider >> Revolution Slider and click Import Slider button.


    Step 2 – You will have a pop-up window like the following image:

    Step 3 – In the window, please choose the “slideshow-1.zip” file (in the “revslider” folder) and press “Import Slider“ button.

    Note: Do the same to import “slideshow-2.zip” file. After importing sliders completely, you could see the result like this:

    2.7 Change Product Image Sizes

    You can change the image size in “Woocommerce > Settings > Products > Display” section.

    woocommerce

    After change the images sizes, you should regenerate all the thumbnails. For this, you should install and activate “Regenerate Thumbnails” plugin.

    2.8 MailChimp for WordPress

    SW Supershop This theme uses MailChimp Plugin.

    Frontend Appearance

    Backend Settings

    1. In your Administrator page, please navigate to MailChimp for WP >> Forms

    2. And copy the code here to the form mark-up field in the page.

    You can click Here to read more about this plugin.

3THEME OPTIONS

In your Admin Panel, navigate to Appearance >> Theme Options to configure.

 

3.1 General

general

  • Color Scheme – Choose your desire color
  • Background Image – Browse to select image file to be your website’s background image.
  • Color Option – Choose a color validation in the field type
  • Background Repeat – Choose to repeat background image or not (Used for boxed layout).
  • Favicon Icon - Use the Upload button to upload the new favicon and get URL of the favicon.
  • Responsive Support – Support responsive layout (If you do not want to use this function, please uncheck)
  • Logo Image - Use the Upload button to upload the new logo and get URL of the logo.

3.2 Layout

layout

  • Box Layout – Select Layout Box or Wide.
  • Background Box Image – Browse to select image that you want. You could browse to the /wp-content/uploads/2015/10 folder to get the image named Bg.jpg like the demo.
  • Left Sidebar Expand – Select width of left sidebar.
  • Right Sidebar Expand – Select width of right sidebar medium desktop.
  • Left Sidebar Medium Desktop Expand – Select width of left sidebar medium desktop.
  • Right Sidebar Medium Desktop Expand – Select width of right sidebar.
  • Left Sidebar Tablet Expand - Select width of left sidebar tablet.
  • Right Sidebar Tablet Expand – Select width of right sidebar tablet.

3.3 Header

header

  • Header Style – Select Header style: style1 / style2.
  • Seach Form – Hide or show search form
  • Header Shortcode – Insert the shortcode to the header
    Copy and paste the following line to the blank field:

3.4 Navbar Options

navbar

  • Menu Type – Select “Mega Menu” or “Dropdown Menu” type.
  • Theme Location – Select theme location to active mega menu.
  • Responsive Menu Visible – Select option to show responsive menu visible.
  • Select Menu Style – Allow to select menu style: Default / Fixed Menu.

3.5 Blog Options

navbar

  • Sidebar Blog Layout – Select style sidebar blog: Full Layout / Left Sidebar / Right Sidebar / Left Right Sidebar.
  • Layout blog – Select style layout blog: Default / List Layout / Grid Layout.
  • Blog column – Select style number column blog: 2 colums / 3 columns / 4 columns.

3.6 Product Options

product-options

  • Product Listing column Desktop – Select number of column on Desktop Screen.
  • Product Listing column Medium Desktop – Select number of column on Medium Desktop Screen.
  • Product Listing column Tablet – Select number of column on Tablet Screen.
  • Sidebar Product Layout – Select style sidebar product.

3.7 Portfolio Options

portfolio-options

  • Portfolio image intro – Select portolio image intro. You could browse to the /wp-content/uploads/2015/10 folder to get the image named portfolio_intro.jpg like the demo.
  • Portfolio Categories – Select Portfolio Category.
  • Portfolio style – Select portfolio style: Default Column(s)/Fitrows/Masonry.
  • Portfolio column Desktop – Select number of column on Desktop Screen.
  • Portfolio column Medium Desktop – Select number of column on Medium Desktop Screen.
  • Portfolio column Tablet – Select number of column on Tablet Screen.
  • Portfolio column Smartphone – Select number of column on Smartphone Screen.

3.8 Typography

typo

  • Use Google Webfont – Insert font style that you actually need on your webpage.
  • Webfont Weight – For weight, see Google Fonts to custom for each font style.
  • Webfont Assign to – Select the place will apply the font style headers, every where or custom.
  • Webfont Custom Selector – Insert the places will be custom here, after selected custom Webfont assign.

3.9 Social Share

Turn on/turn off sharing buttons appearing in Home page

social

  • Social share – Enable Social share button.
  • Facebook – Enable Facebook Share button.
  • Twitter – Enable Twitter Share button.
  • Linked_in – Enable LinkedIn Share button.
  • Google+ – Enable Google+ Share button.

3.10 Advanced

advanced

  • Show cPanel – Turn on/off Cpanel.
  • Widget Advanced – Turn on/off Widget Advanced.
  • Developer Mode – Turn on/off preset.
  • Back to top - Turn on/off back to top
  • Active sticky menu – Turn on/off sticky menu.
  • Direction – Left To Right / Right To Left.
  • Active Effect Scroll – Check to active effect scroll in hompage .
  • Custom CSS/JS – Insert your own CSS into this block. This overrides all default styles located throughout the theme.

5MEGA MENU

In your Administrator Page, please navigate to Appearance > Menus to configure the menu structure.

5.1 Home Menu

The Frontend Appearance:

The Backend Settings:

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

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

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. – "Default": NOOP, do nothing. Sure, it is not advanced – "Use as Divider": Show any icon, title, subtitle, content. Divider style only. – "Append Advanced Content": Append content after menu title block (icon+title+subtitle) – "Append Advanced Content with Shortcode": as above, but "do_shortcode" with this before append.

  • Advanced content: Insert content, such as HTML, image, etc (not include: js & css)
  • Menu Thumbnail: Allow to upload thumbnail for menu

5.2 Shop Menu

The Frontend Appearance:

The Backend Settings:

6PAGES

6.1 How To Create A New Page

Step 1 - Navigate to Pages in your admin sidebar and click Add New option.

Step 2 ai??i?? Input a new name for your page, then find the Page Attributes box on right side.

Step 3 ai??i?? Set your Parent page. Itai??i??s usually set to No Parent.

Step 4 ai??i?? Set your page template from the Template dropdown list. See list of page templates below.

Step 5 - Content for your page goes in the editing field, use the Visual or Text editor.

Here is a screenshot that shows you the various areas and descriptions of the page settings described above.

6.2 Setting Up Home Page

Setting up your home page is the same as setting up any other regular pages, except that you need to specify in the settings which page will be your Main Home Page.

How To Set Your Home Page

Step 1 - Navigate to Settings >> Reading tab.

Step 2 ai??i?? Select A Static Page option.

Step 3 ai??i?? Choose the page you want as your home page from the Front Page dropdown list.

Step 4 ai??i?? Choose the blog page as the Posts page.

6.3 Page Templates

SW Supershop includes several page templates to choose from, and you will need to choose the page template that suits your needs. For example, if you want a page that is Contact Us Page of the browser window, then you would select the Contact page template. All of this is done in the Pages section of your WordPress admin.

There are Page Templates, each of them along with a description.

    • About Us Page – This is the About Us page template. Choose this template when you want to give the customers the information about yourself website.
    • Contact Us Page – This is the Contact page template that you should choose when you make your contact page with Google Map & a contact form.
    • FAQ Page - This is the FAQ page template. Choose this template when you make your FAQ page.
    • Our Services – This is the Our Services page template. In this page include “The Best Solution For Your Business”, “Best Services”, “Testimonials”…
    • Comming Soon – In this page uses shortcode to show countdown time for any products comming soon.

6.4 Edit Page with Visual Composer

The SW Supershop Theme uses the Visual Composer Plugin. The most powerful feature of the Visual Composer is that it gives you an easy drag and drop page builder that can be used from the standard WordPress page/post edit area or directly from the frontend.

For example: “About Us“.

  • Step 1: you click “Edit with Visual Composer” link at the frontend editor.

  • Step 2: Edit Text Block by click “pencil” icon.

  • Step 3: Edit content as you want at General tab of Text Block Settings.

7PORTFOLIO

7.1 Portfolio 2 Columns

Frontend Editor – Click on “pencil” symbol to configure the portfolio settings

frontend-portfolio-2column

The pop-up window will display the portfolio settings so that you can configure the content as you want:

config-portfolio-2column

    • Title – Input title of portfolio.
    • Description – Input Description of portfolio.
    • Category – Select Category
    • Order By – Allow to order by Name/Author/Date/title/Modified/Parent/ID/Random/Comment Count.
    • Order – Allow to order Descending/Ascending.
    • Number Of Post – Allow to display number of post. For example: “4″ – will display 4 posts.
      • Number of Columns – Allow to display number of columns on the devices:
      • Number of Columns >1200px
      • Number of Columns on 992px to 1199px
      • Number of Columns on 768px to 991px
      • Number of Columns on 480px to 767px
      • Number of Columns in 480px or less than
      • Layout – Select Layout Fitrows / Masonry style.
      • Show Tab – Allow to show tab Or not
      • Show button loadmore – Allow to show loadmore button Or not.

Note: With the Portfolio 3 OR 4 Columns Settings part do the same. If you want to set to display 3 or 4 columns, only need to select number of columns on each devices as you want. With the Portfolio Masonry, you select “Masonry” layout.

8SHORTCODE

8.1 Woo Slider

Frontend Editor – Click on “pencil” symbol to configure the Woo Slider settings

frontend-wooslider

The pop-up window will display the Shortcode Woo Slider settings so that you can configure the content as you want:

backend-wooslider

  • Title – Input title of widget.
  • Style Theme – Select style for theme There are 2 options for you: Default /Style 1.
  • Category – Allow to select category.
  • Order by – Select how to sort retrieved posts.
  • Order – Designates the ascending or descending order of the ‘orderby’ parameter.
  • Number of posts – Allow to display number of post. For example: “6″ – will display 6 posts.
  • Number row per column – Allow to select number row of per column.
  • Number of Columns – Display number of columns on devices:
    • Number of Columns >1200px
    • Number of Columns on 992px to 1199px
    • Number of Columns on 768px to 991px
    • Number of Columns on 480px to 767px
    • Number of Columns in 480px or less than
  • Speed – Set speed of slide (Faster = Slower)
  • Auto Play – Set the “autoplay” parameter to “true”, so the slider will start playing as soon as the page loads and vice versa.
  • Layout – Select Default Layout.
  • Interval – Set timer interval between slide.
  • Total Items Slided – Allow to set total item slided. For example: Set “1″ – Slider will run one by one.

8.2 Twitter Shortcode

Frontend Editor – Click on “pencil” symbol to configure the Woo Slider settings

frontend-twitter

The pop-up window will display the Shortcode Woo Slider settings so that you can configure the content as you want:

backend-twitter
Please fill out completely these information in the pop-up window:

  • Title
  • Consumer Key
  • Consumer Secret
  • Access Token
  • Access Token Secret
  • Cache Tweets (hours)
  • Twitter Username
  • Number Tweets to display
  • Number row per column
  • Exclude Reply

8.3 Woo CountDown

Frontend Editor – Click on “pencil” symbol to configure the Woo Slider settings

frontend-countdown

The pop-up window will display the Shortcode Woo Slider settings so that you can configure the content as you want:

backend-countdown

  • Title – Input title of widget.
  • Category – Allow to select category.
  • Order by – Select how to sort retrieved posts.
  • Order – Designates the ascending or descending order of the ‘orderby’ parameter.
  • Number of posts – Allow to display number of post. For example: “6″ – will display 6 posts.
  • Number row per column – Allow to select number row of per column.
  • Number of Columns – Display number of columns on devices:
    • Number of Columns >1200px
    • Number of Columns on 992px to 1199px
    • Number of Columns on 768px to 991px
    • Number of Columns on 480px to 767px
    • Number of Columns in 480px or less than
  • Speed – Set speed of slide (Faster = Slower)
  • Auto Play – Set the “autoplay” parameter to “true”, so the slider will start playing as soon as the page loads and vice versa.
  • Layout – Select Default Layout.
  • Interval – Set timer interval between slide.
  • Total Items Slided – Allow to set total item slided. For example: Set “1″ – Slider will run one by one.

8.4 Testimonials

Frontend Editor – Click on “pencil” symbol to configure the Testimonials Slider settings

frontend-testimonial

The pop-up window will display the Shortcode Testimonials settings so that you can configure the content as you want:

backend-testimonial

  • Widget title – Input title of widget.
  • Style title – Select style for title or leave blank to use default style title.
  • Number of posts – Allow to display number of post. For example: “3″ – will display 3 posts.
  • Excerpt length (in words) – Set the length of words in except.
  • Orderder way – Designates the ascending or descending order of the ‘orderby’ parameter
  • Template – Select template for testimonial. There are 5 options for you: Indicator 1 / Indicator 2 / Indicator 3 / Slide Style 1 / Slide Style 2.
  • Order by – Select how to sort retrieved posts
  • Extra class name – If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

8.5 Responsive Slider Blog

Frontend Editor – Click on “pencil” symbol to configure the Shortcode Responsive Slider Blog settings

frontend-responsive

The pop-up window will display the Shortcode Responsive Slider Blog settings so that you can configure the content as you want:

backend-responsive

  • Title – Input title of widget.
  • Header Style – Select style for header: Header Default/ Style 1/ Style 2.
  • Category filter – Category filter : Blog / All Links / Post Format
  • Excerpt length (in words) – Set the length of words in except.
  • Order by – Select how to sort retrieved posts
  • Order – Designates the ascending or descending order of the ‘orderby’ parameter
  • Number of Columns – Display number of columns on devices:
    • Number of Columns >1200px
    • Number of Columns on 992px to 1199px
    • Number of Columns on 768px to 991px
    • Number of Columns on 480px to 767px
    • Number of Columns in 480px or less than
  • Speed – Set speed of slide (Faster = Slower)
  • Auto Play – Set the “autoplay” parameter to “true”, so the slider will start playing as soon as the page loads and vice versa.
  • Layout – Select Default Layout.
  • Interval – Set timer interval between slide.
  • Total Items Slided – Allow to set total item slided. For example: Set “1″ – Slider will run one by one.

9OTHER

  • Again, thank you so much for purchasing this theme. If you have any questions that are beyond the scope of this document, please feel free to contact us via our Support Tickets System

  • FAQs – Go to Here to view more the Frequently Asked Questions.

×

×