intro

1GETTING STARTED

1.1 Introduction

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

SW Ilove 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 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:

  • PHP version 5.6 or greater
  • MySQL version 5 or greater
  • WordPress 4.7.x or higher (Please note that it has the best performance on the latest version of WordPress)

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 = 600
  • 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

    • files, including:

 

    • Plugin – contains js_composer.zip, one-click-install.zip, revslider.zip, sw-responsive-post-slider.zip, sw-core.zip, sw-woocommerce.zip file
    • revslider – contains slider1.zip, slider-2.zip, slider-3.zip, slider-4.zip, slider-5.zip, video-bg.zip, video-bg-mobile.zip, video-bg-home6.zip,header-video-home7.zip, slider-home8.zip file
    • media.xml

Theme installation files, including:

  • sw_ilove_quickstart_vvx.x.x.zip file (The latest version) is used for quickstart installation (Please note that this file is not included in the Themeforest package).
  • sw_ilove_theme_versionx.x.x.zip file (The latest version) is used for manual installation
  • sw_ilove-child-theme.zip file (The child theme is a recommended way of modifying your existing theme.)

There are two ways to install a WordPress Theme:

  • Quickstart Installation: Suitable if you have your first installation and want to get a whole new fresh site as our Demo.
  • Manual Installation (including Theme Installation): Suitable if your store is full with content that you don’t want to overwrite.

2.2 Quickstart Installation:

We provides SW Quickstart package for each theme which aims to ease the installation for users. Please note that with Quickstart, all your existing data will be overwritten. Thus, if you plan to start your site from the beginning, it will help you save much time of installing and configuring.

Please follow steps HERE for quickstart installation process.

2.3 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.3.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_ilove_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 Ilove Version 1.0.0 should be in wp-content/themes/sw_ilove_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.3.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 go to Appearance >> Themes.

Then, click the Add New button or Add New Theme button

Step 3 – Click the Upload Theme button >> Choose File to import the theme from your computer. Select your sw_ilove_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.
import-media-file
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.4 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.

 

When you choose to install these plugins, 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.

When you have installed required plugins successfully, you will see a yellow popup at the top of the page noticing that you need to activate the plugins. You should go to Plugins >> Installed Plugins to activate the required plugins by choosing all of them and selecting Activate mode in the dropdown menu.

Note: After activating the plugins successfully, please go to the Dashboard to see the changes in the Admin Panel and to continue styling your website.

2.5 Import Demo Data

To understand how this theme works quickly and clearly, you could select to import demo data that we give you such as all pages and posts, portfolio, products, etc. This is recommended to do on fresh installs. To import our demo content, please see the steps below.
Step 1 – In the Administrator page, please go 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.6 Import Media file

Step 1 – In the Administrator page, please go 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.7 Import Revolution Slider

Step 1 – In the Administrator page, please go 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 “slider1.zipfile (in the “data\revslider” folder) and click onImport Slider button.

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

2.8 MailChimp for WordPress

This theme uses MailChimp Plugin.

Frontend Appearance

Backend Settings

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

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

You can click Here to read more about this plugin.

3PAGES

3.1 How To Create A New Page

Step 1 – go to Pages in your admin sidebar and click Add New option.

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

Step 3 – Set your Parent page. It’s usually set to No Parent.

Step 4 – 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.

3.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 – go to Settings >> Reading tab.

Step 2 – Select A Static Page option.

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

Step 4 – Choose the blog page as the Posts page.

3.3 Page Templates

SW Ilove have 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 – This is the About Us page template. Choose this template when you want to give the customers the information about yourself website.
    • 404 – This is the 404 page template that you could choose.

3.4 Edit Page with Visual Composer

The SW Ilove 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 ‘Raw HTML’ Settings.

4POST

4.1 Creating/Editing Posts

Step 1 – Navigate to Posts in your WordPress admin sidebar.

Step 2 – Click on the Add New option to make a new post. Create a title, and insert your post content in the editing field. You can use visual composer or Ya shortcodes elements inside the post.

Step 3 – Select Post Format from the right side.

Step 4 – Add Categories from the right side. To assign it to the post, check the box next to the Category name.

Step 5 – Add Tags from the right side. Type the name of the tag in the field, separate multiple tags with commas.

Step 6 – For a single image, click the first Featured Image Box, select an image and click the Set Featured Image button.

Step 7 – Once you are finished, click Publish or Update to save the post.

Here Is A Screenshot That Shows The Various Areas Of The Post Page Described Above.

create-posts

5THEME OPTIONS

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

 

5.1 General

general

    • Color Scheme – There are various color available in the theme. Also, this feature will be updated in the next versions.
    • Favicon Icon – Use the Upload button to upload the new favicon and get URL of the favicon.

Note:This option is compatible with one for WordPress Version 4.2 or previous versions. To add a Favicon in WordPress 4.3 or later versions, please go to Appearance >> Customize >> Site Identity >> Site Icon to set a favicon icon

  • Logo Image – Use the Upload button to upload the new logo and get URL of the logo.
  • Change image banner on listing page and single page – Use the Upload button to upload the new image banner.

5.2 Layout

layout

  • Box Layout- Select Layout Box or Wide for Home 1
  • Background Box Image- Choose background box image
  • 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.

5.3 Mobile Layout

layout

Specially, this theme allows you to enable mobile layout for your site. When you choose to display the mobile layout, you also can select its Content, Header and Footer style for the Mobile Layout.

Note:

To use the mobile layout, it should be chosen the option Enable Mobile Layout. After that, you can continue to configure option Sticky Mobile, Mobile Layout Content and select the Header Mobile Style and Footer Mobile Style as you want.

If you disable the option Enable Mobile Layout, your site will be automatically applied the Responsive Mode on mobile device.

Please don’t forget to configure Mobile Menu first then it will appear in the mobile layout.

5.4 Header & Footer

header
This Framework allows you to build the header and footer style in all pages (except the homepages).

  • Header Style – There are 08 Header Styles for you to choose: Style 1 / Style 2 / Style 3 / Style 4/ Style 5
  • Footer Style – This theme now also supports 04 Footer Styles: Footer 1 / Footer 2 / Footer 3/ Footer 4/ Footer 5 / Footer 6/ Footer 7
  • Copyright text – Enter your copyright

5.5 Navbar Options

navbar

  • Menu Type – Select “Mega Menu” or “Dropdown Menu” type.
  • Theme Location – Select theme location to active mega menu.
  • Active sticky menu – Turn on/off sticky menu

5.6 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 / Right Sidebar / Grid Layout.
  • Blog column – Select style number column blog: 2 colums / 3 columns / 4 columns.

5.7 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.
  • Quickview – Turn On/Off Product Quickview

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

5.9 Advanced

advanced

  • Show cPanel & Customize – This option is for theme development purpose only. You don’t need to check this one.
  • Widget Advanced – Turn on/off Widget Advanced.
  • Developer Mode – Turn on/off preset.
  • Social Share – Turn on/off social share
  • Direction – Left To Right / Right To Left.
  • Active Popup Subscribe – Allow to active popup subscribe
  • Popup Shortcode – Allow to insert the popup shortcode here
  • Custom CSS/JS – Insert your own CSS into this block. This overrides all default styles located throughout the theme.

5.10 Import/Export Options

social

  • Import Options- This will overwrite any existing options, please proceed with caution!
  • Export Options- Here you can copy/download your themes current option settings.

The Backend Settings: Please click Here for more detail.

6.3 Mobile Menu

This is the menus for mobile versions. Firstly, you need to create these menu, then when configure in the Theme Options, it will be available in your site.

1. Mobile Footer Menu:

The Frontend Appearance:

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

The Backend Settings: Please click Here for more detail.

2. Mobile Vertical Menu:

The Frontend Appearance:

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

The Backend Settings: Please click Here for more detail.

7THEME CONFIGURATION

7.1 SW Ilove Home Page 1

home-default

Note:
In the Admin Panel, please navigate to Page >> All Page >> Home to custom this home page’s settings.

  • Backend Setting: Please click Here for more detail..
  • Checkout the following code in the Content field:
     

  • Page Metabox – Custom your homepage settings here
    • General – Please click Here for more detail..
      • Custom Logo – Upload custom Logo for your homepage
      • Home Template – Select home template
      • Color Scheme – Select one color scheme for this page
    • Typography – Please click Here for more detail..
      • Google Fonts – Insert font style that you actually need on your webpage. Each font seperate by commas
      • 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.
    • Header – Please click Here for more detail..
      • Hide header – Choose to show or hide the header.
      • Header Style – Select header style
    • Footer – Please click Here for more detail..
      • Hide Footer – Choose to show or hide the footer.
      • Footer Page Select – Chose to select footer page content for this page.
    • Sidebar – Please click Here for more detail..
      • Sidebar Layout – Choose layout sidebar for page
      • Sidebar – Chose sidebar to show.

In your Administrator Page, please go to Appearance > Widgets and select the part to configure its structure.

The Backend Settings: Please click Here for more detail.

In your Administrator Page, please go to Appearance > Widgets and select the part to configure its structure.

The Backend Settings: Please click Here for more detail.

My Account

In your Administrator Page, please go to Appearance > Widgets and select the part to configure its structure.

The Backend Settings: Please click Here for more detail.

Note: If you want to change the elements in this menu, please go to Appearance > Menus, choose the menu, and edit it as your desire.

My Cart

In your Administrator Page, please go to Appearance > Widgets and select the part to configure its structure.

The Backend Settings: Please click Here for more detail.

Revolution Slider

Frontend – After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

revolution-slider

The pop-up window will display Backend Setting ,so you can configure the item as you want.

To configure these slides in Home 1 Slider, you need to follow these steps:

  • Step 1: In your Administrator Page, please go to Revolution Slider > Revolution Slider, click on “pencil” symbol .
  • Step 2: After opening Slide Editor Panel, you could configure your slides such as editing images, text, animation, etc.
    Backend Setting: Please click Here for more detail..
  • Go Here or Here to readmore about Revolution Slider.

Single Images

single-image1
To configure this part, please go to Pages > All pages > Home Page 1 and choose the component named Single Image to edit. The second way to custom this part is to open the Home Page 1 with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display the backend settings,so you can configure the item as you want:

  • General: Please click Here for more detail.
  • Design Options: Please click Here for more detail.

Note: You could configure other single images by yourself

SW Woocommerce Categories Slider

Frontend Editor – After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

countdown-slider

The pop-up window will display Backend Setting ,, so you can configure the item as you want:

Raw HTML


To configure this part, please go to Pages > All pages > Home Page 1 and choose the component named Raw Html to edit. The second way to custom this part is to open the Home Page 1 with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display the backend settings,so you can configure the item as you want:

    • General: Please click Here for more detail.

Copy & paste the code into your editor:

  • Design Options: Please click Here for more detail.

SW WooCommerce Slider

Frontend – After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display Backend Setting ,so you can configure the item as you want.

SW WooCommerce Slider

Frontend – After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display Backend Setting ,so you can configure the item as you want.

Text block


To configure this part, please go to Pages > All pages > Home Page 1 and choose the component named Text block to edit. The second way to custom this part is to open the Home Page 1 with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display the backend settings,so you can configure the item as you want:

    • General: Please click Here for more detail.

Copy & paste the code into your editor:

  • Design Options: Please click Here for more detail.

YA Reponsive Post Slider

Frontend – After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display Backend Setting ,so you can configure the item as you want.

Text block


To configure this part, please go to Pages > All pages > Home Page 1 and choose the component named Text block to edit. The second way to custom this part is to open the Home Page 1 with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display the backend settings,so you can configure the item as you want:

    • General: Please click Here for more detail.

Copy & paste the code into your editor:

  • Design Options: Please click Here for more detail.

7.2 SW Ilove Home Page 2

home-2

Note:
In the Admin Panel, please navigate to Page >> All Page >> Home 2 to custom this home page’s settings.

  • Backend Setting: Please click Here for more detail..
  • Checkout the following code in the Content field:
     

  • Page Metabox – Custom your homepage settings here
    • General – Please click Here for more detail..
      • Custom Logo – Upload custom Logo for your homepage
      • Home Template – Select home template
      • Color Scheme – Select one color scheme for this page
    • Typography – Please click Here for more detail..
      • Google Fonts – Insert font style that you actually need on your webpage. Each font seperate by commas
      • 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.
    • Header – Please click Here for more detail..
      • Hide header – Choose to show or hide the header.
      • Header Style – Select header style
    • Footer – Please click Here for more detail..
      • Hide Footer – Choose to show or hide the footer.
      • Footer Page Select – Chose to select footer page content for this page.
    • Sidebar – Please click Here for more detail..
      • Sidebar Layout – Choose layout sidebar for page
      • Sidebar – Chose sidebar to show.

Revolution Slider

Frontend – After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

revolution-slider

The pop-up window will display Backend Setting ,so you can configure the item as you want.

To configure these slides in Home 2 Slider, please follow the same steps as Home 1 Slider:

  • Go Here or Here to readmore about Revolution Slider.

SW WooCommerce Slider

Frontend – After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display Backend Setting ,so you can configure the item as you want.

Raw HTML


To configure this part, please go to Pages > All pages > Home Page 1 and choose the component named Raw Html to edit. The second way to custom this part is to open the Home Page 1 with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display the backend settings,so you can configure the item as you want:

    • General: Please click Here for more detail.

Copy & paste the code into your editor:

  • Design Options: Please click Here for more detail.

SW WooCommerce Categories Slider

Frontend – After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display Backend Setting ,so you can configure the item as you want.

YA Reponsive Post Slider

Frontend – After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display Backend Setting ,so you can configure the item as you want.

Text block


To configure this part, please go to Pages > All pages > Home Page 1 and choose the component named Text block to edit. The second way to custom this part is to open the Home Page 1 with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display the backend settings,so you can configure the item as you want:

    • General: Please click Here for more detail.

Copy & paste the code into your editor:

  • Design Options: Please click Here for more detail.

7.3 SW Ilove Home Page 3

home-3

Note:
In the Admin Panel, please navigate to Page >> All Page >> Home 3 to custom this home page’s settings.

  • Backend Setting: Please click Here for more detail..
  • Checkout the following code in the Content field:
     

  • Page Metabox – Custom your homepage settings here
    • General – Please click Here for more detail..
      • Custom Logo – Upload custom Logo for your homepage
      • Home Template – Select home template
      • Color Scheme – Select one color scheme for this page
    • Typography – Please click Here for more detail..
      • Google Fonts – Insert font style that you actually need on your webpage. Each font seperate by commas
      • 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.
    • Header – Please click Here for more detail..
      • Hide header – Choose to show or hide the header.
      • Header Style – Select header style
    • Footer – Please click Here for more detail..
      • Hide Footer – Choose to show or hide the footer.
      • Footer Page Select – Chose to select footer page content for this page.
    • Sidebar – Please click Here for more detail..
      • Sidebar Layout – Choose layout sidebar for page
      • Sidebar – Chose sidebar to show.

Revolution Slider

Frontend – After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

revolution-slider

The pop-up window will display Backend Setting ,so you can configure the item as you want.

To configure these slides in Home 3 Slider, please follow the same steps as Home 1 Slider:

  • Go Here or Here to readmore about Revolution Slider.

SW WooCommerce Slider

Frontend – After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display Backend Setting ,so you can configure the item as you want.

Raw HTML


To configure this part, please go to Pages > All pages > Home Page 1 and choose the component named Raw Html to edit. The second way to custom this part is to open the Home Page 1 with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display the backend settings,so you can configure the item as you want:

    • General: Please click Here for more detail.

Copy & paste the code into your editor:

  • Design Options: Please click Here for more detail.

Text block


To configure this part, please go to Pages > All pages > Home Page 1 and choose the component named Text block to edit. The second way to custom this part is to open the Home Page 1 with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display the backend settings,so you can configure the item as you want:

    • General: Please click Here for more detail.

Copy & paste the code into your editor:

  • Design Options: Please click Here for more detail.

7.4 SW Ilove Home Page 4

home-3

Note:
In the Admin Panel, please navigate to Page >> All Page >> Home 4 to custom this home page’s settings.

  • Backend Setting: Please click Here for more detail..
  • Checkout the following code in the Content field:
     

  • Page Metabox – Custom your homepage settings here
    • General – Please click Here for more detail..
      • Custom Logo – Upload custom Logo for your homepage
      • Home Template – Select home template
      • Color Scheme – Select one color scheme for this page
    • Typography – Please click Here for more detail..
      • Google Fonts – Insert font style that you actually need on your webpage. Each font seperate by commas
      • 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.
    • Header – Please click Here for more detail..
      • Hide header – Choose to show or hide the header.
      • Header Style – Select header style
    • Footer – Please click Here for more detail..
      • Hide Footer – Choose to show or hide the footer.
      • Footer Page Select – Chose to select footer page content for this page.
    • Sidebar – Please click Here for more detail..
      • Sidebar Layout – Choose layout sidebar for page
      • Sidebar – Chose sidebar to show.

Revolution Slider

Frontend – After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

revolution-slider

The pop-up window will display Backend Setting ,so you can configure the item as you want.

To configure these slides in Home 4 Slider, please follow the same steps as Home 1 Slider:

  • Go Here or Here to readmore about Revolution Slider.

Raw HTML


To configure this part, please go to Pages > All pages > Home Page 1 and choose the component named Raw Html to edit. The second way to custom this part is to open the Home Page 1 with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display the backend settings,so you can configure the item as you want:

    • General: Please click Here for more detail.

Copy & paste the code into your editor:

  • Design Options: Please click Here for more detail.

SW WooCommerce Slider

Frontend – After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display Backend Setting ,so you can configure the item as you want.

Raw HTML


To configure this part, please go to Pages > All pages > Home Page 1 and choose the component named Raw Html to edit. The second way to custom this part is to open the Home Page 1 with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display the backend settings,so you can configure the item as you want:

    • General: Please click Here for more detail.

Copy & paste the code into your editor:

  • Design Options: Please click Here for more detail.

SW WooCommerce Slider

Frontend – After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display Backend Setting ,so you can configure the item as you want.

Raw HTML


To configure this part, please go to Pages > All pages > Home Page 1 and choose the component named Raw Html to edit. The second way to custom this part is to open the Home Page 1 with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display the backend settings,so you can configure the item as you want:

    • General: Please click Here for more detail.

Copy & paste the code into your editor:

  • Design Options: Please click Here for more detail.

SW Categories Slider

Frontend – After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display Backend Setting ,so you can configure the item as you want.

7.5 SW Ilove Home Page 5

home-3

Note:
In the Admin Panel, please navigate to Page >> All Page >> Home 5 to custom this home page’s settings.

  • Backend Setting: Please click Here for more detail..
  • Checkout the following code in the Content field:
     

  • Page Metabox – Custom your homepage settings here
    • General – Please click Here for more detail..
      • Custom Logo – Upload custom Logo for your homepage
      • Home Template – Select home template
      • Color Scheme – Select one color scheme for this page
    • Typography – Please click Here for more detail..
      • Google Fonts – Insert font style that you actually need on your webpage. Each font seperate by commas
      • 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.
    • Header – Please click Here for more detail..
      • Hide header – Choose to show or hide the header.
      • Header Style – Select header style
    • Footer – Please click Here for more detail..
      • Hide Footer – Choose to show or hide the footer.
      • Footer Page Select – Chose to select footer page content for this page.
    • Sidebar – Please click Here for more detail..
      • Sidebar Layout – Choose layout sidebar for page
      • Sidebar – Chose sidebar to show.

Revolution Slider

Frontend – After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

revolution-slider

The pop-up window will display Backend Setting ,so you can configure the item as you want.

To configure these slides in Home 5 Slider, please follow the same steps as Home 1 Slider:

  • Go Here or Here to readmore about Revolution Slider.

Raw HTML


To configure this part, please go to Pages > All pages > Home Page 1 and choose the component named Raw Html to edit. The second way to custom this part is to open the Home Page 1 with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display the backend settings,so you can configure the item as you want:

    • General: Please click Here for more detail.

Copy & paste the code into your editor:

  • Design Options: Please click Here for more detail.

Raw HTML


To configure this part, please go to Pages > All pages > Home Page 1 and choose the component named Raw Html to edit. The second way to custom this part is to open the Home Page 1 with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display the backend settings,so you can configure the item as you want:

    • General: Please click Here for more detail.

Copy & paste the code into your editor:

  • Design Options: Please click Here for more detail.

SW WooCommerce Categories Slider

Frontend – After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display Backend Setting ,so you can configure the item as you want.

Raw HTML


To configure this part, please go to Pages > All pages > Home Page 1 and choose the component named Raw Html to edit. The second way to custom this part is to open the Home Page 1 with Visual Composer, click on “pencil” button at center of this part to configure its backend settings

The pop-up window will display the backend settings,so you can configure the item as you want:

    • General: Please click Here for more detail.

Copy & paste the code into your editor:

  • Design Options: Please click Here for more detail.

7.6 SW Ilove Home Page 6

homepage

Note:
In the Admin Panel, please navigate to Page >> All Page and choose this page to custom as your expectation.

  • Backend Setting: Please click Here for more detail..
  • Checkout the following code in the Content field:
     

  • Page Metabox Please click Here for more detail.
  • This home page use Header Style 7 and Footer Style 6.

[Video] SW iLove Page Settings – Home 6

First of all, please see the video about row, column and image settings in this page from the front end when editing with Visual Composer.

Please pay attention to the Extra class name and Design Options including margin, padding for each block.

Top Header6

Frontend

This is a Widget. Please go to Appearance >> Widgets and choose this one to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

Top Search

Frontend

This is a Widget. Please go to Appearance >> Widgets and choose this one to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

My Account

Frontend

This is a Widget. Please go to Appearance >> Widgets and choose this one to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

My Cart

Frontend

This is a Widget. Please go to Appearance >> Widgets and choose this one to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

SW Woocommerce Categories Slider

Frontend
– After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings.

The pop-up window will display Backend Setting ,so you can configure the item as you want.

SW Woocommerce Categories Slider

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

SW Woocommerce Slider

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

Single Image

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

Text Block

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

Text Block

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

SW Woocommerce Categories Slider

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

Single Image

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail. The Extra class name image-home6 should be added to have the same style as in the demo.

Single Image

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

Single Image

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

Single Image

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail. The Extra class name image-home6 should be added to have the same style as in the demo.

YA Responsive Post Slider

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

Footer Style 6

Frontend

This page use Footer Style 6. Please go to Appearance >> Widgets and choose this one to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

7.7 SW Ilove Home Page 7

homepage

Note:
In the Admin Panel, please navigate to Page >> All Page and choose this page to custom as your expectation.

  • Backend Setting: Please click Here for more detail..
  • Checkout the following code in the Content field:
     

  • Page Metabox Please click Here for more detail.
  • This home page use Header Style 7 and Footer Style 6.

[Video] SW iLove Page Settings – Home 7

First of all, please see the video about row, column and image settings in this page from the front end when editing with Visual Composer.

Please pay attention to the Extra class name and Design Options including margin, padding for each block.

Header Video Bg

Frontend
This page use Footer Style 6. Please go to Appearance >> Widgets and choose this one to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

Header Home 7

Frontend
These elements are the same in Home 1. You can see the configuration Here for more detail.

SW Woocommerce Slider

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.
  • Row Settings: Please click Here for more detail. The Extra class name banner-image-home7 should be added to have the same style as in the demo.

Single Image

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.
  • Row Settings: Please click Here for more detail. The Extra class name banner-image-home7 should be added to have the same style as in the demo.

Raw HTML

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

Copy & Paste the code into your editor:

 

SW Woocommer Slider

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

SW Woocommerce Countdown Slider

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.
  • Row Settings: Please click Here for more detail. The Extra class name coundown-slide-home7 should be added to have the same style as in the demo.

SW Banner Slider

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.
  • Row Settings: Please click Here for more detail. The Extra class name banner-slide-home7 should be added to have the same style as in the demo.

SW Testimonial

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.
  • Row Settings: Please click Here for more detail.

YA Responsive Post Slider

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.
  • Row Settings: Please click Here for more detail.
  • Column Settings: Please click Here for more detail.

Footer Style 6

Frontend

This page use Footer Style 6. Please go to Appearance >> Widgets and choose this one to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

7.8 SW Ilove Home Page 8

homepage

Note:
In the Admin Panel, please navigate to Page >> All Page and choose this page to custom as your expectation.

  • Backend Setting: Please click Here for more detail..
  • Checkout the following code in the Content field:
     

  • Page Metabox Please click Here for more detail.
  • This home page use Header Style 8 and Footer Style 7.

[Video] SW iLove Page Settings – Home 8

First of all, please see the video about row, column and image settings in this page from the front end when editing with Visual Composer.

Please pay attention to the Extra class name and Design Options including margin, padding for each block.

Header Home 8

Frontend
These elements are the same in Home 1. You can see the configuration Here for more detail.

Revolution Slider 5

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

Raw HTML

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.
  • Row Settings: Please click Here for more detail. The Extra class name banner-image-home7 should be added to have the same style as in the demo.

Copy & Paste the code into your editor:

 

SW Woocommer Categories Slider

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

SW Woocommer Categories Slider

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

Single Image

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here and Here for more detail.

SW Woocommer Slider

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

Testimonial Slider

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.
  • Row Settings: Please click Here for more detail.

Responsive Post Slider

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

SW Instagram

Frontend

After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

Footer Style 7

Frontend

This page use Footer Style 7. Please go to Appearance >> Widgets and choose this one to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

7.6 SW Ilove Home Mobile 1

home-mobile1

Note:

1. Firstly, to use Mobile layout, it should be enabled first in the Appearance > Theme Options > Mobile Layout > Enable Mobile Layout. Here, you can also choose the Mobile Layout Content, Mobile Header Style and Mobile Footer Style. This Page uses Header Style 1 and Footer Style 1.

2. After that, in the Admin Panel, please navigate to Page >> All Page >> Home mobile 1 to custom this home page’s settings.

3. Please don’t forget to configure Mobile Menu first then it will appear in the mobile layout.

  • Backend Setting: Please click Here for more detail..

Ilove IMG Slider

Frontend
mobile1
After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

Single Image

Frontend
mobile1
After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail. The Extra class name banner should be added to have the same style as in the demo.
  • Row Settings: Please click Here for more detail.
  • Column Settings: Please click Here for more detail. The Extra class name wrap-banner-mobile should be added to have the same style as in the demo.

SW Woocommerce Slider

Frontend
mobile1
After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

Single Image

Frontend
mobile1
After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.
  • Row Settings: Please click Here for more detail. The Extra class name wrap-banner-mobile should be added to have the same style as in the demo.

SW Woocommerce Slider

Frontend
mobile1
After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.
  • Row Settings: Please click Here for more detail.

Single Image

Frontend
mobile1
After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

7.7 SW Ilove Home Mobile 2

home-mobile2

Note:

1. Firstly, to use Mobile layout, it should be enabled first in the Appearance > Theme Options > Mobile Layout > Enable Mobile Layout. Here, you can also choose the Mobile Layout Content, Mobile Header Style and Mobile Footer Style. This Page uses Header Style 2 and Footer Style 2

2. After that, in the Admin Panel, please navigate to Page >> All Page >> Home mobile 2 to custom this home page’s settings.

3. Please don’t forget to configure Mobile Menu first then it will appear in the mobile layout.

  • Backend Setting: Please click Here for more detail..

Single Image

Frontend
mobile2
After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

SW Woocommerce Slider

Frontend
mobile2
After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail. The Extra class name banner should be added to have the same style as in the demo.

Single Image

Frontend
mobile2
After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

7.8 SW Ilove Home Mobile 3

home-mobile

Note:

1. Firstly, to use Mobile layout, it should be enabled first in the Appearance > Theme Options > Mobile Layout > Enable Mobile Layout. Here, you can also choose the Mobile Layout Content, Mobile Header Style and Mobile Footer Style. This Page uses Header Style 3 and Footer Style 2

2. After that, in the Admin Panel, please navigate to Page >> All Page >> Home mobile 3 to custom this home page’s settings.

3. Please don’t forget to configure Mobile Menu first then it will appear in the mobile layout.

  • Backend Setting: Please click Here for more detail..

SW Woocommerce Categories Slider

Frontend
mobile3
After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

Single Image

Frontend
mobile3
After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.
  • Row Settings: Please click Here for more detail. The Extra class name banner-mobile3 should be added to have the same style as in the demo.

SW Responsive Page Listing

Frontend
mobile3
After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.

Single Image

Frontend
mobile3
After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail. The Extra class name banner should be added to have the same style as in the demo.
  • Row Settings: Please click Here for more detail. The Extra class name wrap-banner-mobile3 should be added to have the same style as in the demo.

Single Image

Frontend
mobile3
After opening the homepage with Visual Composer, click on “pencil” button at center of this part to configure its backend settings and then you can configure as you want.

  • General: Please click Here for more detail.
  • Row Settings: Please click Image 1Image 2Image 3 for more detail. The Extra class name banner-mobile3-1, mobile-banner3 and banner-mobile3 should be added for each row of the items here to have the same style as in the demo.

8RECOMMENDATION

8.1 WooCommerce

SW Ilove Theme is fully compatible with WooCommerce plugin. WooCommerce is external plugin and all info about this awesome plugin you can find plugin’s author page.

Firstly, please have a look at the WooCommerce Documentation to see the this plugin’s Installation and Settings and other basic knowledge.

After installing the WooCommerce and having some products in your WordPress website, please go to Woocommerce > Settings > Products to custom your product settings to meet this SW Ilove theme. Please remember to click Save Changes button after the change you make.

  • To change the General Settings, please go to “Woocommerce > Settings > Products > General” section.
    woocommerce
  • To change the Image Size, please go to “Woocommerce > Settings > Products > Display” section.
    woocommerce
  • Before changing the Images Sizes, firstly please regenerate all the thumbnails. For this one, you should install and activate “Regenerate Thumbnails” plugin in your site.
    woocommerce
  • To change the Inventory Settings, please go to “Woocommerce > Settings > Products > Inventory” section.
    woocommerce
  • To change the settings of Downloadable Products, please go to “Woocommerce > Settings > Products > Downloadable Products” section.
    woocommerce

8.2 Image Dimensions In Posts

For SW Ilove theme, we recommend using some dimensions for your image in posts. Please go to Settings >> Media and set up these dimensions:

woocommerce

8.3 Visual Composer

The SW Ilove Theme uses the Visual Composer 5.0. This is a really powerful page buider plugin that let you customize your pages in the frontend and backend and save you tons of time working on the site content. You will be able to take full control over your WordPress site, build any layout you can imagine without any code changing. Moreover, now you can choose either work on a backend or move your page building process to frontend and instantly see the changes you make.

You can see some Tutorial Videos or Tutorials for Beginner to get more details about this plugin.

8.5 Translation

This theme is compatible with WPML plugin.

WPML is the most popular plugin for multi language support. Below you will find documentation their team created for using WPML plugin. If you’ve purchased WPML and have any questions or issues, please check the links below.

  • WPML Plugin – The highly recommended plugin to manage multi-lingual sites
  • WPML Forum Support – If you bought WPML then you get free support from their amazing team
  • Translating Widgets – Tutorial recommended by wpml team for translating widgets

9SUPPORT

  • SUPPORT: If there is any questions that are beyond the scope of this help file, please feel free to contact our team via: Support Tickets System for help.
  • FAQs: Besides, you can check the Frequently Asked Questions for better understading about the theme.

×