General

We would like to thank you for purchasing Xshop! We are very pleased that you have chosen Xshop for your website, you will not be disappointed! Before you get started, please be sure to always search our Documentation and Knowledgebase, and also watch our Video Tutorials. The large search field at the top of each page allows you to quickly and easily search through our resources to find answers. We outline all kinds of good information, and provide you with all the details you need to use Xshop. Xshop can only be used with WordPress and we assume that you already have WordPress installed and ready to go. If you do not, please follow this link to see our section on WordPress to help you get started.

WordPress Information

wp_logoTo install this theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex.

Requirements For Xshop

The minimum requirements for Xshop is WordPress 4.4.0 or highter, PHP 5.4 or highter and MySQL 5.4 or highter.

Recommended PHP Configuration Limits

Many issues that you may run into such as; white screen, demo content fails when importing, empty page content with Fusion Builder and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:

  • max_execution_time 180
  • memory_limit 128M
  • post_max_size 32M
  • upload_max_filesize 32M

Installation

You can install the theme in two ways: through WordPress, or via FTP. The Xshop.zip file is the Installable WordPress Theme and what you need to use to get the theme installed. There are two ways to install Xshop, via WordPress or via FTP. Click here for the WordPress method video tutorial, and here for the FTP method video tutorial. But first, you need to download the Xshop files from your ThemeForest account. Navigate to your downloads tab on ThemeForest and find Xshop. Click the download button to see the two options; The Main Files and the Installable WordPress Theme.

FTP Installation

Install Xshop Via FTP

Step 1 – Log into your hosting space via an FTP software like File Zilla.

Step 2 – Unzip the Xshop.zip file and only use the extracted Xshop theme folder.

Step 3 – Upload the extracted Xshop theme folder into wp-content > themes folder.

Step 4 – Activate the newly installed theme by going to Appearance > Themes and clicking the Activate button.

Step 5 – Once you activate Xshop, you will then see a notification message to install the required plugins: Xshop Core, WooCommerce…

Step 6 – Follow the the notification message to install and activate required & recommended plugins.

WordPress Installation

How To Install Xshop via WordPress

Step 1 – Navigate to Appearance > Themes.

Step 2 – Click Install Themes and click the Upload button.

Step 3 – Navigate the Xshop.zip file on your computer and click “Install Now”

Step 4 – Activate the newly installed theme by going to Appearance > Themes and clicking the Activate button.

Step 5 – Once you activate Xshop. You will then see a notification message to install the required plugins: Lucky Shop Core plugin and some others. Follow the notification message to install all required plugins. These plugins will automatic activate after installation is finished.

Xshop Options

Xshop options give you full control over your website and allow you to customize the design without touching a single line of code. Located in WP Dashboard > Appearance > Xshop Options these options are global options that affect everything within the theme.

Typography Options

Manage font families, size, weight, line heights, font color for body, main menu, headers and widgets. Choose either standard fonts or Google fonts.

Header Settings

Manage:

1 – Turn header product search form on/off

2 – Turn header account link on/off

3 – Turn header settings area  on/off.

4 – Turn header my account   on/off.

5 – Turn header compare on/off. Only work if YITH Compare plugin is installed and activated.

6 – Turn header wishlist on/off. Only work if YITH Wishlish plugin is installed and activated.

7 – Turn header checkout link on/off.

8 – Turn header mini cart on/off

– Custom Hero section. Turn on/off or manage it. You can be a Revolution Slider, or background image.

Footer Settings

Manage:

1 – Footer layout.

2 – Footer Menu.

3 – Select logo footer.

4 – Custom your copyright text as you want

5 – Turn footer bottom on/off

Blog Settings

Manage:

1 – Blog sidebar position: Left, Right, Fullwidth

2 – Bog loop content (Show the blog content or the excerpt on loop).

3 – Manage blog metas show on the blog loop: Author, date time, comment, category, tag.

4 – Enable/disable the author bio on the single post.

5 – Enable/disable social share links on the single post.

Social Settings

Manage social links for Social widget

1 – Twitter links

2 – Facebook links

3 – Google Plus links

4 – Dribbble links

5 – Behance links

6 – Tumblr links

7 – Instagram links

8 – Pinterest links

9 – Youtube links

10 – Vimeo links

11 – Linkedin links

12 – RSS

Newsletter Settings

Manage:

1 – Enable popup newsletter

2 – Add background for popup ( only show when enable popup newsletter).

3 – Mailchimp API key

4 – Mailchimp list ID

5 – Title of subscribe form

6 – Placeholder of email input field

7 – Submit text

8 – Message after subscribe email is added successfully.

WooCommerce

Manage:

1 – Shop/products archive page (product category pages, products tag pages…) sidebar postion: Left, right, fullwidth (no sidebar)

2 – Shop default layout style. There are two shop layout styles: grid, list.

3 – Number of columns on large screen. Only effective with shop layout style grid.

4 – Turn product star rating on shop/products archive page on/off.

5 – Turn List categories on shop/products archive page on/off.

6 – Background imageon the top of shop page.

7 – Shop/products archive banner height.

404 Settings

Manage:

1 – Change/Remove 404 image.

2 – The title of 404 page.

3 – Description of 404 page.

One Click Import

Shortcodes For Visual Composer

Xshop has over 30 powerful shortcodes for Visual Composer. They will help you build a website as you want with ease. Let’s see what can we do with them:

XS Simple Title with Description

This shortcode allows you to show a title with description, we have three available styles for this. Let see some settings of this shortcode in the backend and styles on front-end.

Params:

1 – Type : Click on drop-down button to select one of three available styles.

2 – Title: Leave a title here.

3 – Short Description: Leave a short description of title here.

4-  Title Tag: Select a title tag for your title

5 – Link: Click on “Select Url” to put your url link here. When clicking on the title, it will link to the address on front-end that you have put before.

6 – Title Color: Configure color for title.

7 – Short Description Color: Configure color for short description.

8 – Text Align: Align text to center, left or right.

9 – CSS Animation: Select one of CSS animation for style.

10 – Animation Delay: Set delay time for CSS Animation.

11 – Save Change: Don’t forget to save the settings above.

Style 3

Style 1

XS Block Ads

This shortcode is just used to display the image or video advertisment of products that you want every one to be more interested in.

Params for Image format:

1 – Ads type: Select what type would you like to use, video or image type. Image type is shown as the next image.

2 – Image: Click on “+” icon to upload your image.

3 – Image size: Set width, height for your image.

4 – Sku Product: Enter a product code that you want to advertise.

5 – Description Ads: Enter a short description to advertise here.

6 – Desc Ads Align: Align description to the right or left.

7- Title: Enter a title here.

8 – Title Color: Configure color for title.

9 – Sub Title: Enter a sub title.

10 – Sub Title Color: Configure color for sub title.

11 – Link: If you would like to show a text link with custom url or available link, click on “Select Url”, then configure some settings on the popup.

12 – CSS Animation: Select one of CSS animation for style.

13 – Animation Delay: Set delay time for CSS Animation.

14 – Save change: DON’T forget to save all your settings

Params for Image Video:

1 – Ads type: Select what type would you like to use, video or image type. Video type is shown as the next image.

2 – Image: Click on “+” icon to upload avatar.

3 – Image size: Set width, height for your image.

4 – Video type: Select video type, we support vimeo and youtobe.

5 – Video Url: Add video url here.

6 – Sku Product: Enter a product code that you want to advertise.

7 – Description Ads: Enter a short description to advertise here.

8- CSS Animation: Select one of CSS animation for style.

9 – Animation Delay: Set delay time for CSS Animation.

10 – Save change: DON’T forget to save all your settings

Image format

Video format

XS Member carousel

This shortcode allows you to show members in carousel.

Params:

1 – Members: Input member Ids or member name to see suggestion.

2 – Image Size: Set the member image size. Default: 370 x 377

3 – Member Per Slide: How many members per slide on the large screen? Min = 1, max = 4. Default: 3.

4- CSS Animation: Select one of CSS animation for style.

5 – Animation Delay: Set delay time for CSS Animation.

6 – Save change: DON’T forget to save all your settings

All member information are managed in the back- end, you can edit them in Dashboard >> Members >> All members. Or click on “Add New” to create a new member.

XS Products carousel by category

Display products in category by carousel format, each product chosen will show title,  pricing…

Shortcode Params:

1 – Product slide type: Select slide type that you would like in dropdown box, we support two types: Style 1 & Style 2.

2 – Category: Select any category that you would like to show products.

3 – Items per slide: Set number of items that you would like to show per slide. Default: 3

4 – Maximum products number: How many products will be loaded? Min = 1.

5 – Show Category Link: Choose “Yes” if you would like to show category link, or “No” to disable it.

6 – Image Size: Set width, height for image, default: 370 x 444

7 – CSS Animation: Select one of CSS animation for style.

8 – Animation Delay: Set delay time for CSS Animation.

9 – Save change: DON’T forget to save all your settings

XS Products Grid Tabs

This shortcode is used to display the featured products that you want to advertise much more. The products in this shortcode are shown in tab and each tab just displays some products of category.

Params:

1 – Number of tab: Choose how many tabs would you like to show on this block. We support to show at least 1 tab and a maximum of 4 tabs.

2 – Title color: Set title color

3 – CSS Animation: Select one of CSS animation for style.

4 – Animation Delay: Set delay time for CSS Animation.

5 – Save Change: Don’t forget to save the settings above.

Tab Settings:

1 –  Tab title: Enter title tab here, this title will be shown on front-end.

2 – Product tab 1: Input product categories ID or product title to see suggestions. You can do the same manipulation to other product (Product tab 2, Product tab 3…)

3 – Heading text: Enter a short Heading text, it will be shown on front-end.

4 – Heading color: Set color for heading text.

5 – Description: Enter short description for heading text, this will be shown below Heading text.

7 – Link view more: If you would like to show “View more” link below the Description,

8 – Text left: This text will be shown on the left of block.

9 – Text right: This text will be shown on the right of block.

10 – Ads Image 1: Upload your first advertise image.

11: Image Size 1: Set image site for the first advertise image.

12 – Link Ads 1: Click on “Select URL” to input link to the first advertise image.

13 – Product Animation When Change Tab

14 – Don’t forget to save the above settings.

XS Postslide

This shortcode allow to show posts in slideshow. Let see some setting of it  below.

Params:

1 – Latest Post Type: Select post type that you would like to use. We support 5 post types.

2 – Show The Post Author: If you would like to show Author, select “Yes”. If not, select “No”

3 – Show The Post Date: If you would like to show Post Date, select “Yes”. If not, select “No”

4 – Show Post Comment Count: If you would like to show Post Comment Count, select “Yes”. If not, select “No”

5 – Show Read More Button: If you would like to show “Read More” button, select “Yes”. If not, select “No”

6 – Max Char Length  of Post: Maximum Char length of posts will load

7 – Number of Post: Maximum number of posts will load

8 – Post Per Slide: Number of posts per slide on the large screen

9 – Loop: If you select “Yes”, the posts will be shown in loop.

10 – Auto Play

11 – Auto Play Timeout

12 – CSS Animation: Select one of CSS animation for style.

13 – Animation Delay: Set delay time for CSS Animation.

14 – Save Changes: Don’t forget to save the settings above.

XS Simple list with icon

This shortcode allow to show Title, short description, icon. Let see some setting of this shortcode.

Params:

1 – Icon library: Select icon library in dropdown box.

2 – Icon: Select icon that you would like to use.

3 –  Title: Leave a title here. It will be shown on front-end.

4 – Short description: Enter short description here, this will be shown below the title.

5 – Link: If you want the link for title, click on “Select URL” then set some configures on popup form.

6 – Title Color: Select color for title.

7 – Icon color: Select color for icon.

8 – Short description color: Select color for short description.

9 – Text Align: Align text on the left, right, center or inherit.

10 – CSS Animation: Select one of CSS animation for style.

11 – Animation Delay: Set delay time for CSS Animation.

12 – Save Changes: Don’t forget to save the settings above.

XS Google map

This shortcode allow to show the address information of your company on google map. Let see some settings of this shortcode.

Params:

1 – Map Type: Click on drop-down box to select one of these map types. ROADMAP displays the default road map view. SATELLITE displays Google Earth satellite images. HYBRID displays a mixture of normal and satellite views. TERRAIN displays a physical map based on terrain information.

2 – Hue: Set color for map. An RGB hex string. indicates the basic color.

3 – Lightness: A floating point value between -100 and 100. Indicates the percentage change in brightness of the element.

4 – Saturation: A floating point value between -100 and 100. Indicates the percentage change in intensity of the basic color to apply to the element.

5 – Address: Enter your company address.

6 – Information Title: Title of infomation box will show when click on pin icon.

7 – Phone: Company phone

8 – Email: Company email

9 – Website: Website of your company.

10 – Latitude: Open Google Maps, right-click the place or area on the map, select What’s here, Under the search box, an info card with coordinates will appear.

11- Longitude:  Open Google Maps, right-click the place or area on the map, select What’s here, under the search box, an info card with coordinates will appear.

12: Pin icon: Upload pin icon here. If not choose, default pin icon will show.

13: Zoom: Most roadmap imagery is available from zoom levels 0 to 18.

14 – Map Height: Map height unit is pixel.

15 – CSS Animation: Select one of CSS animation for style.

16 – Animation Delay: Set delay time for CSS Animation.

17 – Save Changes: Don’t forget to save the settings above.

XS Iconbox

This shortcode allow to show title, short description, icon…Let see some settings of this shortcode.

Params:

1 – Icon library: Select icon library.

2 – Icon: Select icon from library.

3 – Icon Color: Select color for icon

4 – Icon Hover Color: Set hover color for icon

5 – Ads Type: Select one of three types of block display.

6 – Title Color: Set color for title.

7 – Short Description: Enter short description.

8 – Short Description color: Set color for short description.

9 – Link:  If you would like to show a text link with custom url or available link, click on “Select Url”, then configure some settings on the popup.

10 – CSS Animation: Select one of CSS animation for style.

11 – Animation Delay: Set delay time for CSS Animation.

12 – Save Changes: Don’t forget to save the settings above.

XS Newsletter

Params:

1 – Style: Select one of these available styles that you want.

2 – Title: Enter a title here.

3 – Short Description: Enter short description. It will be shown below title.

4 – Placeholder text: Enter placeholder text here, it will be shown in the text box.

5 – Success Massage: Enter a success massage here.

6 – Submit Text: Enter a submit text here.

7 – Title Color: Set color for title.

8 – Short Description color: Set color for short description.

9 – Input Text Color: Set color for text.

10 – Input Background Color: Set color for background.

11 – Submit button color: Set color for submit button.

12 – Text Align: Align text on the left, right, center or inherit.

13 – CSS Animation: Select one of CSS animation for style.

14 – Animation Delay: Set delay time for CSS Animation.

15 – Save Changes: Don’t forget to save the settings above.

Newsletter style 1
Newsletter style 2
Newsletter style 6

Simple contact info

This shortcode allow to show address, phone, email, time work of company. These attributes can be shown in some awesome styles. Let see its settings.

Params:

1 – Title: Enter a title here.

2 – Title color: Set color for title.

3 – CSS Animation: Select one of CSS animation for style.

4 – Animation Delay: Set delay time for CSS Animation.

5 – Save Changes: Don’t forget to save the settings above.

Address tab

6 – Icon Library: Click on dropdown button to select one of the two icon libraries.

7 – Icon: Click on the arrow pointing down, It will expand a popup that contains a lot of icons that you can choose.

8 – Icon color: Set color for icon.

9 – Title Address: Enter a short address title here.

10 – Title color: Set color for title.

11 – Description: Enter a short description here.

12 – Save Changes: Don’t forget to save the settings above.

Phone tab

13 – Icon Library: Click on drop-down button to select one of the two icon libraries.

14 – Font Awesome: Click on the arrow pointing down, It will expand a popup that contains a lot of icons that you can choose.

15 – Icon color: Set color for icon.

16 – Title Phone: Enter a short phone title here.

17 – Title color: Set color for title.

18 – Description: Enter a short description here.

19 – Save Changes: Don’t forget to save the settings above.

Email tab

20 – Icon Library: Click on drop-down button to select one of the two icon libraries.

21 – Font Awesome: Click on the arrow pointing down, It will expand a popup that contains a lot of icons that you can choose.

22 – Icon color: Set color for icon.

23 – Title Email: Enter a short Email title here.

24 – Title color: Set color for title.

25 – Description: Enter a short description here.

19 – Save Changes: Don’t forget to save the settings above.

Time work tab

27 – Icon Library: Click on dropdown button to select one of the two icon libraries.

28 – Icon: Click on the arrow pointing down, It will expand a popup that contains a lot of icons that you can choose.

29 – Icon color: Set color for icon.

30 – Title Time Work: Enter a short time work title here.

31 – Title color: Set color for title.

32 – Description: Enter a short description here.

32 – Save Changes: Don’t forget to save the settings above.

Mega Menu & Vertical Menu

Xshop has a built-in mega menu and vertical menu that can be enabled on every first level menu item of main menu or vertical menu location in the Appearance > Menus tab. You can build any layout of mega menu or vertical menu item by using Visual Composer to edit them. It can have 1-12 columns, have custom column width settings, take any shortcode or widget, have icons or images next to menu items and more. Please see below for information on how to set the mega menu and vertical menu up.

Building mega/vertical menu item:

Step 1 – Navigate to Mega Menu section of your admin sidebar and select the ‘Add New’ link to create a new mega/vertical menu item, or edit a current one.

Step 2 – Edit the content using WordPress editor as you want. For beautiful layout and layout building you can using Visual Composer to edit the content. If Visual Composer edit options does not show please see how to enable edit custom post type with Visual Composer.

Step 3 – Save mega/vertical menu item when you finished.

Step 4 – Navigate to Appearance > Menus section of your admin sidebar and select the ‘Create A New Menu’ link to create a new menu, or edit a current one.

Step 5 – To add a mega/vertical menu item, select one of your created mega/vertical menu items on the left hand side and click the ‘Add to Menu’ button.

Step 6 – Using the drag and drop functionality to manage menu items possition.

Step 7 – Once its all done, make sure you click the ‘Save’ button.

edit_mega_menu_item_1
edit_mega_menu_item_2-423x353
mega_menu_item

Home Layouts

X-shop is premium responsive WordPress theme which comes with 16 Unique Home layouts. It is a clean and modern layouts with many functions and suits any of your shop. X-shop used both of the default WordPress shortcodes and our X-shop to build unique home layouts. In this section we will show you all layouts and which X-Shop shortcodes are used on them.

Home 1

Frontend: Pls click here to view live demo

#1 – Header layout (style1)

#2 – Revolution slider (x.Shop-opt1)

#3 – Custom Heading

#4 – Text Block

#5 – XS-Block Ads (Image type)

#6 – XS-Block Ads (Video type)

#7 – XS-Block Ads (Image type)

#8 – XS simple title with description (style1)

#9 – XS Product Carousel by Category (style1)

#10 – XS Post slide (style1)

#11 – XS Newsletter (style6)

#12 – Footer layout (style1)

Home 2

Frontend: Pls click here to view live demo

#1 – Header layout (style1)

#2 – Revolution slider (x.Shop-opt2)

#3 – XS Product Grid Tabs

#4 – XS Newsletter (style2)

#5 – XS Block ads2 (style2)

#6 – XS Simple Title with Description (style1)

#7 – XS Product Carousel By Category (style2)

#8 – XS Icon Box (style1)

#9 – XS Icon Box (style1)

#10 – XS Icon Box (style1)

Home 3

Frontend: Pls click here to view live demo

#1 – Header layout

#2 – Revolution slider (x.Shop-opt3)

#3 – XS Icon Box(style 2)

#4 – XS Icon Box(style 2)

#5 – XS Icon Box(style 2)

#6 – XS Block Ads 2 (style1)

#7 – XS Block Ads 2 (style1)

#8 – XS Block Ads 2 (style2)

#9 – XS Block Ads 2 (style1)

#10 – XS Nav List Category Woocommerce()

#11 – XS Block Ads 2 (style1)

#12 – XS Product Grid by Category

#13 – XS Newsletter

#14 – Footer layout

Home 4

Frontend: Pls click here to view live demo

#1 – Header layout

#2 – Revolution slider (x.Shop-opt4)

#3 – XS Title with Description and Background(style1)

#4 – XS Simple Image

#5  – XS Simple Image

#6 – XS Simple Product

#7 – XS Simple Product

#8 – XS Title with Description and Background(style1)

#9 – XS Simple Image

#10 – XS Simple Product

#11 – Footer layout

Home 5

Frontend: Pls click here to view live demo

#1 – Header layout

#2 – Revolution slider (x.Shop-opt5)

#3 – XS Block ads3

#4 – XS Block ads3

#5 – XS Block ads3

#6 – XS Block ads3

#7 – XS Button(default)

#8 – XShop Product tabs

#9 – XS Post Slide(Style2)

#10 – Footer layout

Home6

Frontend: Pls click here to view live demo

#1 – Header layout

#2 – XS Banner Slide (style1)

#3 – XS Block Ads4 (style1)

#4 – XS Block Ads4 (style1)

#5 – XS Icon box (style2)

#6 – XS Icon box (style2)

#7 – XS Icon box (style2)

#8 – XS Block Ads3 (style1)

#9 – XS Block Ads3 (style1)

#10 – XS Block Ads3 (style1)

#11 – XS Product Carousel

#12 – XS Newsletter (style 4)

#13 – XS Block Ads3

#14 – XS Product Carousel

#15 – XS Post list

#16 – Footer layout

Home 8

Frontend: Pls click here to view live demo

#1 – Header layout

#2 – XS Banner Slide (style3)

#3 – XS Icon Box (style2)

#4 – XS Icon Box (style2)

#5 – XS Icon Box (style2)

#6 – XS Block Ads4(style2)

#7 – XS Block Ads4(style2)

#8 – Custom Heading

#9 – XS Product Grid

#10 – Custom Heading

#11 – XS Post slide

#12 – Custom Heading

#13 – XS Product Grid

#14 – XS Newsletter (style3)

#15 – Footer layout

Home 9

Frontend: Pls click here to view live demo

#1 – Header layout

#2 – Revolution slider (x.Shop-opt9)

#3 – XS Simple Title with Description (style3)

#4 – XS Icon box (style3)

#5 – XS Icon box (style3)

#6 – XS Icon box (style3)

#7 – XS Service

#8 – XS Service

#9 – XS Service

#10 – XS Simple Title with Description (Style1)

#11 – XS Product Grid

#12 – XS Button (default style)

#13 – Footer layout