General

We would like to thank you for purchasing LuckyShop! We are very pleased that you have chosen LuckyShop 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 LuckyShop. LuckyShop 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 LuckyShop

The minimum requirements for LuckyShop 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 LuckyShop.zip file is the Installable WordPress Theme and what you need to use to get the theme installed. There are two ways to install LuckyShop, 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 LuckyShop files from your ThemeForest account. Navigate to your downloads tab on ThemeForest and find LuckyShop. Click the download button to see the two options; The Main Files and the Installable WordPress Theme.

WordPress Installation

How To Install LuckyShop via WordPress

Step 1 – Navigate to Appearance > Themes.

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

Step 3 – Navigate the LuckyShop.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 LuckyShop. 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.

FTP Installation

Install LuckyShop Via FTP

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

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

Step 3 – Upload the extracted LuckyShop 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 LuckyShop, you will then see a notification message to install the required plugins: LuckyShop Core, WooCommerce…

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

LuckyShop Options

LuckyShop 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 > LuckyShop Options these options are global options that affect everything within the theme.

General Settings

Manage the general logo (in case of no logo is chosen in the header), site favicon, main menu breakpoint, vertical menu breakpoint, main menu sticky, site base color, site body background image/color, smooth scroll, custom css, custom javascript and the way to load custom css on the frontend.

1 – General logo. This logo will be shown if not found the header logo.

2 – Manage site favicon. Favicons are small square images usually 16×16 pixels which are used by web browsers to show a graphical representation of the site being visited at the left side of the browser’s address bar.

3 – Set main menu breakpoint. It means the screen width main menu layout switch to mobile layout.

4 – Set vertical menu breakpoint. It means the screen width vertical menu layout switch to mobile layout.

5 – Turn main menu sticky on/off. It has no effect on mobile layout.

6 – Site agent color (base color).

7 – Change boby background image/color.

8 – Change background image/color of inner body.

9 – Enable/disable smooth scroll.

10 – The way to load custom css.

11 – Custom CSS code.

11 – Custom Java Script code.

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 – Header layout style

2 – Header logo

3 – Turn header product search form on/off

4 – Turn header account link on/off

5 – Turn header settings area (languages switcher) on/off. Only work if WPML plugin is installed and activated.

6 – Turn header mini cart on/off

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

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

9 – Turn header checkout link on/off.

10 – Custom Hero section. Turn on/off or manage it. You can be a Revolution Slider, or background image. Hero section also support 2 advertisement images with text and link.

Footer Settings

Manage:

1 – Footer background color

2 – Footer layout. With LuckyShop you can build unlimit number of footers.You can also set each page a difference footer. See more here.

3 – Turn footer bottom on/off

4 – Custom your copyright text as you want

5 – Manage you footer images.

Blog Settings

Manage:

1 – Blog sidebar position: Left, Right, Fullwidth

2 – Blog layout style: Default, list, grid, masonry

3 – Continue reading text on the read more button of blog page.

4 – The excerpt max char lenght if blog is allowed to show the axcerpt.

5 – Turn placehold image on/off. Placehold image is an empty image that will be shown if there is no featured image of post.

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

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

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

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 – Single product sidebar position

6 – Background image/color on the top of shop page.

7 – Shop/products archive banner height.

8 – Turn single product image zoom on/off.

9 – Product tabs layout style: Horizontal, vertical.

10 – Turn single product categories tab on/off

11 – Turn single product tabs tab on/off

12 – Turn product share links on/off

13 – Manage list of social share links on single product

Newsletter Settings

Manage:

1 – Mailchimp API key

2 – Mailchimp list ID

3 – Title of subscribe form

4 – Placeholder of email input field

5 – Submit text

6 – Message after subscribe email is added successfully.

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

Coming Soon Settings

Manage:

1 – Turn coming soon mode on/off

2 – Site title on coming soon mode

3 – Image show on coming soon page

4 – Coming soon text for more information

5 – The end date of coming soon mode

6 – Turn newsletter form on/off

7 – Disable coming soon mode when the end date is reached or not?

404 Settings

Manage:

1 – Change/Remove 404 image.

2 – The title of 404 page

3 – Subtitle of 404 page.

4 – Description of 404 page.

5 – Show search form or not on 404 page.

Shortcodes For Visual Composer

LuckyShop 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:

LK Simple Title

sc_simple_title
Frontend display of sortcode LK Simple Title

Params:

Titletitle. Yes, as it’s name – the title.

Title Tag – title_tag Html tag wrap the title: h1, h2, h3, h4, h5, h6, span, label, p. Default: h3.

Linklink The title link url.

Title Colortitle_color Default #444. You can change this param value to custom title color.

Show Underline – show_underline If “Yes” the title will has an underline.

Text Aligntext_align Set text align: left, right, center or inherit.

LK Simple Title 2

sc_simple_title_2
Frontend display of sortcode LK Simple Title 2

Params:

Titletitle. Yes, as it’s name – the title.

Short Descriptionshort_desc. Short description show below the title.

Title Tag – title_tag Html tag wrap the title: h1, h2, h3, h4, h5, h6, span, label, p. Default: h3.

Linklink The title link url.

Title Colortitle_color Default #222. You can change this param value to custom title color.

Short Description Color – short_desc_color Default #888. It determines the color of the short description.

Text Aligntext_align Set text align: left, right, center or inherit. Default: center.

LK Simple Text Area

sc_simple_text_area
Frontend display of sortcode LK Simple Text Area

Params:

Titletitle. Yes, as it’s name – the title.

Title Tag – title_tag Html tag wrap the title: h1, h2, h3, h4, h5, h6, span, label, p. Default: h3.

Contentcontent Text content.

Linklink The title link url.

Title Colortitle_color Default #444. You can change this param value to custom title color.

Text Colortext_color Default #666. Determines the color of the conten.

Text Aligntext_align Set text align: left, right, center or inherit.

LK Simple Contact Info

Params:

Titletitle. Title show on top of the contact information. You can define any kinds of contact title like: address, phone number, email… Default: Address.

Information – short_info Contact information. Default: Chicago, IL, 55030, 8500 Grand Street

Icon library, Icon icon_type, icon_{icon_type} Choose icon library then choose an icon in this library.

Title Colortitle_color Color of the contact title. Default: #444.

Icon Coloricon_color Color of icon. Default: #888.

Information Colorinfo_color Short information color. Default: #888.

Contact infomation with icon
Contact infomation with icon
Contact information has no icon
Contact information has no icon

LK Custom Menu

LuckyShop 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/vertical menu up. If you need information on how to create a regular menu, please read our Setting Up The Menu article here.

“LK Custom Menu” is useful for showing any menu on the frontend, specially it’s useful for mega/vertical menu building. Shortcode params:

Titletitle. The menu title.

TItle Color title_color. Color of the title. Default: #444.

Menu – nav_menu Menu slug.

Mega menu backend editor
Mega menu backend editor

LK Simple Image

“LK Simple Image” is useful for advertisement banners. It allows you custom image size, custom link, hover effect… Shortcode params:

Image img_id. Image id.

Image Size img_size. Set the image size. Defautl: 1170×100.

Link – link. Set the image link.

Hover Effect hover_effect. Set the image hover effect.

LK Simple Image on  the frontend
LK Simple Image on the frontend

LK Images Carousel

images_carousel
Images carousel frontend

Params:

Images img_ids. List of image ids.

Image Size img_size. Set the image size. Defautl: 170×80 pixel.

Slider Speed slider_speed. It determines the speed of the carousel. Default: 4000 (ms).

Items Per Slide items_per_slide. Number of images display at the same time on large screen.

Custom Links image_links. Link of images. Each link per line.

Link Target – link_target. Open link when click in the same window or new tab?.

Hover Effect – hover_effect. Image hover effect.

LK Members Carousel

Shortcode to display members carousel. Each member information can be managed by edit it in the backend. Params:

Members member_ids. List of meber ids to display.

Image Size img_size. Set the member image size. Defautl: 180×180.

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

Members carousel
Members carousel

LK Testimonials Carousel

“LK Testimonials Carousel” is used to display testiminials. Each testimonial details can be managed by edit it in the backend. :

Testimonials testimonial_ids. List of testimonial ids to display.

Text Color text_color. Set the testimonial text color.

Text Background Color text_bg_color. Set the text background color.

Name Color name_color. Set the testimonial author name color. Name of testimonial author is the title.

Max Width max_width. Testimonial text max width. Default: 684 (pixel).

Text Align text_align. Testimonial text alignment. Default: center.

Testimonial carousel
Testimonial carousel

LK Banner Text

Banner Text
Banner Text

“LK Banner Text” is useful for advertisement banners with text. It allows you custom image, image size, custom link, text… Shortcode params:

Image img_id. Image id.

Image Size img_size. Set the image size. Defautl: 390×214.

Title title. Title show on the banner.

Title Color title_color. Color of the title. Default: #444444

Sub Title sub_title. Sub title show on the banner.

Sub Title Color sub_title_color. Color of the subtitle. Default: #666666.

Show Banner Link show_banner_link. It determines the display of banner link: show or not.

Link link. Banner link. Dependency on “Show Banner Link”.

Link Icon link_icon. It determines show or not show link icon. Dependency on “Show Banner Link”.

LK Banner Text 2

Banner Text 2
Banner Text 2

“LK Banner Text 2” is useful for advertisement banners with text. It allows you custom image, image size, custom link, text, flash text… Shortcode params:

Style style. Banner text style: Text Top, Text Bottom, Text Left, Text Right, Text Middle. Default: Text Right (text-right).

Image img_id. Image id.

Image Size img_size. Set the image size. Defautl: 780×328 (pixel).

Title title. Title show on the banner.

Title Color title_color. Color of the title. Default: #555555.

Sub Title sub_title. Sub title show on the banner.

Sub Title Color sub_title_color. Color of the subtitle. Default: #888888.

Flash Text flash_text. Flash text show on the banner. Default: HOT.

Flash Text Color flash_text_color. Color of the flash text. Default: #ffffff.

Flash Text Background Color flash_text_background_color. Background color of the flash text. Default: #ff9081.

Flash Text Position flash_text_pos. Position of the flash text. Default: Top.

Link link. Set banner link.

Enable Text Hover Effect enable_text_hover_effect. Turn banner hover effect on or off.

LK Banner Text 3

Banner Text  3
Banner Text 3

“LK Banner Text 3” is useful for advertisement banners with text. It allows you custom image, image size, custom link, text… Shortcode params:

Style style. Set banner text style.

Image img_id. Image id.

Image Size img_size. Set the image size. Defautl: 570×292.

Title title. Title show on the banner.

Title Color title_color. Color of the title. Default: #ffffff

Sub Title sub_title. Sub title show on the banner.

Sub Title Color sub_title_color. Color of the subtitle. Default: #ffffff.

Link link. The banner link.

Link Text link_text. The banner link text.

Link Text Color link_text_color. The banner link color. Default: #ffffff

Text Align text_align. Set text align: Left, Right, Center. Default: Right

Enable Text Hover Effectenable_text_hover_effect. Turn the banner hover effect on/off.

LK Banner Text 4

Banner Text 4
Banner Text 4

“LK Banner Text 4” is useful for advertisement banners with text. It allows you custom image, image size, image link, text, text color… Shortcode params:

Image img_id. Image id.

Image Size img_size. Set the image size. Defautl: 390×410.

Background Color background_color. The banner background color. Default: #d3b6c2.

Title title. Title show on the banner.

Title Color title_color. Color of the title. Default: #ffffff

Sub Title sub_title. Sub title show on the banner.

Sub Title Color sub_title_color. Color of the subtitle. Default: #ffffff

Link link. The banner link.

Link Text link_text. The banner link text. Default: Show now!

Link Text Color link_text_color. Color of the banner link text. Default: #ffffff

Text Position text_pos. Position of banner text. Default: Center

Text Align text_align. Banner text alignment. Default: Center

Enable Text Hover Effect enable_text_hover_effect. Turn banner hover effect on/off.

LK Single Product

Display single product with product title, short description, pricing, image gallery tab, sale time countdown… Shortcode params:

Product product_id. Product id to display.

Single Product Shortcode
Single Product Shortcode

LK Product Carousel

Display products caorusel (1 product per slide), each product chosen will show title, short description, pricing, sale countdown (if is on sale product)… Shortcode params:

Products product_ids. List of product ids you want to show

Product Carousel
Product Carousel

LK Products Carousel 2

Display products carousel. Shortcode params:

Products product_ids. Product ids list to display on the carousel.

Items Per Slide items_per_slide. How many items (products) show at the same time on the large screen? Min = 1, max = 4.

Margin Between Productsproducts_margin. Spacing between products. Default: 10 (pixel).

Products Carousel 2
Products Carousel 2

LK Products Carousel 3

Products Carousel 3
Products Carousel 3

Display products carousel with header title, short header description, number of products per item, items per slide… Shortcode params:

Style style. Carousel style.

Products product_ids. List of product ids you want to show.

Items Per Slideitems_per_slide. Items per slide on the large screen. Min = 1, max = 4. Default: 4.

Products Per Item products_per_item. Products per item. Default: 2.

Border Container border_container. Show carousel container border or not. Default: no.

Title title. Carousel heading title.

Short Description short_desc. Carousel heading short description.

Hidden Short Description Onhidden_short_desc_on. You may want to hidden heading short description on smaller screen for nice responsive. Default: Extra small devices (hidden-xs).

Heading Background Colorheading_bg_color. Carousel heading background color. Default: #4e4e4e.

Title Colortitle_color. Carousel heading title color. Default: #ffffff.

Sort Description Colorshort_desc_color. Carousel heading short description color. Default: #ffffff.

Mega Menu & Vertical Menu

LuckyShop 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 – After setting up your menu, scroll down to the bottom of the page to assign the menu to the location you want. Noted: The best location for mega menu is ‘Primary Menu’. The best location for vertical menu is ‘Vertical Menu’. Currently vertical menu location only available on header layout style: style_2, style_5 and style_7.

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

Add mega/vertical menu item to the menu
Add mega/vertical menu item to the menu
Edit mega/vertical menu item
Edit mega/vertical menu item
Mega menu item display on the frontend
Mega menu item display on the frontend