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

LK Products Carousel By Category

Display products carousel by chosen category. Shortcode params:

Categoryluckyshop_select_product_cat_field_2. Product category id.

Items Per Slide items_per_slide. How many items per slide on the large screen? Min = 1, max = 4. Default: 1.

Products Per Itemproducts_per_item. How many products per item? Min = 1, max = 10. Default: 3.

Maximum Products Number max_products_num. Maximum number of products.

Show Category Link show_cat_link. Show link to chosen category.

Category Link Text cat_link_text. Text of the link to chosen catefory. Dependency on “Show Category Link”.

Show Category Image show_cat_img. Show category image on the top of carousel.

Category Image Size cat_img_size. Size of the category image. Default: 285×724 (pixel). Dependency on “Show Category Image”.

Products carousel by category
Products carousel by category

LK Products Carousel By Categories Tabs

Products carousel tabs by categories
Products carousel tabs by categories

This is a complex shortcode. Show products in each category chosen as a carousel. Group the categories (carousels) into tabs. Supported up to 8 tabs, category image, eleveto.. Shortcode params:

Number Of Tabsnum_of_tabs. Set number of tabs want to show. Default: 3 tabs.

Tabs Heading title. The tabs heading (title).

Tabs Heading Colortitle_color. The tabs heading color. Default: #444.

Show Categories Link show_cat_link. Show chosen categories link.

Categories Link Textcat_link_text. The category link text. Default: View all. Dependency on “Show Categories Link”.

Show Categories Image show_cat_img. Show the categories image.

Categories Image Size cat_img_size. Categories image size. Default: 285×274 (pixel).

Set Tabs ID tabs_id. Set tabs custom ID (Note: make sure it is unique and valid according to w3c specification).

The tabs:

Each tab setting is the same as “LK Products Carousel By Category” setting.

Elevator and floor:

This shortcode supported “elevator and floor”, it is the same as a floor with has an elevator, so you could move to any floor you want by pressing a button on the elevator. There are two buttons for elevator, they are called. It has these parameters:

The Floor IDfloor_id. Enter the floor ID (Note: make sure it is unique and valid according to w3c specification).

Elevator 1 elevator_1_type. It determines the floor of the elevator will move to when click on the first button of the elevator. By default the elevator will move to the previous floor.

Elevator 1 Targetelevator_1_target. The floor id (or any html element id) you want elevator move to when click on the first button. Dependency on “Elevator 1” value = “custom_id”.

Elevator 2 elevator_2_type. It determines the floor of the elevator will move to when click on the second button of the elevator. By default the elevator will move to the next floor.

Elevator 2 Targetelevator_2_target. The floor id (or any html element id) you want elevator move to when click on the second button. Dependency on “Elevator 2” value = “custom_id”.

LK Products Grid

Products Grid
Products Grid

Display products grid style by category. Shortcode params:

Category cat_slug. Category of products want to display as a grid.

Per Pageper_page. Number of products want to show.

Columnscolumns. How many columns per row on the large screen? Min = 2, max = 4. Default: 4.

Margin between products products_margin. There are two options: “Margin” or “No margin”. Default: No margin.

Order By orderby. Select how to sort retrieved products.

Sort Orderorder. Designates the ascending or descending order.

LK Products Carousel Tabs

Display products carousel by tabs. This shortcode setting is the same as “LK Products Carousel By Categories Tabs” and “LK Products Carousel 3″.

Products Carousel Tabs
Products Carousel Tabs

Products Categories Grid

Products Categories Grid
Products Categories Grid

Display product categories as a grid, each categoy item can show category image, hover effect, title, description… Shortcode params:

Categoriescat_slugs. List of categories will display.

Title Colortitle_color. Set the category name color. Default: #333.

Description Colordesc_color. Set the category description color. Default: #666.

Overlay Color overlay_color. Set overlay color.

Enable Hover Effect (Hoverdir) enable_hover_effect. Turn hover effect on the category image on/off.

Hover Effect Colorhover_effect_color. Color of hover overlay effect. Only available when hover effect is turned on.

Items Per Rowitems_per_row. How many categories per row on the large screen? Min = 1, max = 4. Default: 4.

Items Heightitems_height. Set the items (the categories) height. Default: 170 (pixel)

Image Sizeimg_size. The categories image size. Default: 300×185 (pixel).

LK Products Categories Grid Tabs

Product Categories Grid Tabs
Product categories grid tabs

Display product categories in tabs, grid layout. This shortcode setting is similar to “LK Products Carousel By Categories Tabs” and “Products Categories Grid“.

LK Posts Slide

Posts slide
Posts slide

“LK Posts Slide” shortcode automatically pulls your blog posts, titles, comments count, thumbnail, post date, read more button… into a slideshow. Shortcode params:

Posts Categorycat_slug. Select a category of posts to display.

Thumbnail Sizeimg_size. Set the post thumbnail size. Default: 370×253 (pixel).

Show The Post Authorshow_post_author. Show the post author name.

Show Post Comments Countshow_post_comments_count. Display post comments count or not.

Show Read More Button show_read_more_btn. Display read more button (link to single post) or not.

Number Of Postsnumber_of_items. Maximum number or posts to show.

Posts Per Slideitems_per_slide. Number of posts per slide on the large screen.

Looploop. Set to “Yes” if you want the posts slide loop.

Autoplay autoplay. Set to “Yes” if you want the posts slide auto play.

Autoplay TImeout autoplay_timeout. Time delay between each translation when autoplay is set to “Yes”. Default: 5000 (ms).

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