Setup

1. Configuration

Once you successfully install and activate Lusion theme, Lusion Dashboard will be added to your WordPress menu. Now you can get started to set up your site with Lusion. You will walk through the following steps:

  • Name your website and site description
  • Install and activate required and recommended plugins
  • Import Demo Content
  • Sign in your Envato account to get updates
  • Customize your site
  • Get support resources
Getting Started

2. Import demo

ArrowTheme Core is a required plugin for the Lusion theme. This plugin is a demo importer that imports all posts/pages, sample sliders, widgets, customization, and more.

Follow these steps below to import demo via ArrowTheme Core:

  • Visit Dashboard > Lusion > Import Demo
  • Hover on the demo you want and click Install

The importing process may take up to 3 minutes.

Import Demo

3. Plugin Configuration

  • Elementor

You can see here for more details.

– After installing the Elementor, please go to Elementor > Settings. In the post types field, you should check all post type as the screenshot below.

– Easily apply a Style to every page of your site automatically using the drag and drop editor. You can apply style as the screenshot below

  • MailChimp for WP

Go to MailChimp for WP > MailChimp to access general setting page of MailChimp. You should connect to your MailChimp account by entering API Key.

After that, navigate to MailChimp for WP > Forms and create a form with the content below:

< input type="email" name="EMAIL" placeholder="Type your email" required />

<input type="submit" value="Subscribe" />

If a MailChimp form is already existed, you can do nothing or change the form content and click Save changes to display the form in the front end.

For detail instruction, please click MailChimp for WP.

  • Contact Form

Go to Contact > Form and create the form you want or edit existing form.

When you want to add a form which displays the same as in our demo site, you should change the content of the contact form in Contact > Form so the form can have a similar style. After changing form content, you can adjust the text or the field to what you want.

Below is the contact form content we used in our demo site. Each form can have a different style based on the content in the contact form. If you import demo content successfully, you can skip this step.

– Contact form in Contact Us

After that, you need to set up Mail tab. Please see this guide for more details. Mail setting

  • Woocommerce

WooCommerce is the most popular WordPress eCommerce plugin. Packed full of features, perfectly integrated into your self-hosted WordPress website.

You can see here for more details and woocommerce documentation.

Plugin Advanced AJAX Product Filters

Go to BeRocket > Product Filters to access general setting of BeRocket

After that, in tab JavaScript/CSS, you must add js:

jQuery(".bapf_stylecolor .bapf_head h3").append('<span class="theme-icon theme-icon-upload"></span>');

var $title_color = jQuery(".bapf_stylecolor .bapf_head h3 "); var $div_color = jQuery(".bapf_stylecolor .bapf_body"); $div_color.addClass('open_color'); $title_color.click(function () { $div_color.slideUp(); if ($div_color.hasClass('open_color')) { $div_color.removeClass('open_color'); $div_color.addClass('remove_color'); $title_color.append('<span class= "theme-icon theme-icon-upload"></span>'); $title_color.css('margin-bottom', '10px'); jQuery(this).find('span.theme-icon').remove(); jQuery(this).append('<span class= "theme-icon theme-icon-download"> </span>'); } else { $div_color.slideDown(); $div_color.removeClass('remove_color'); $div_color.addClass('open_color'); jQuery(this).find('span.theme-icon').remove(); jQuery(this).append('<span class= "theme-icon theme-icon-upload"></span>'); $title_color.css('margin-bottom', '27px'); } }); var $rtl = false; if (lusion_params.lusion_rtl == 'yes') { $rtl = true; } var wdw = jQuery(window).width(); jQuery(window).resize(function () { var li = jQuery('.woocommerce ul.products.columns-2 li.product'); for (var i = 0; i &lt; li.length; i++) { var widthPrice = jQuery('.' + jQuery(li[i].className.trim().replace(/\s+/g, '.') + ' .product-desc .product-price .top-desc span.price').selector).width() + 15; if (wdw &gt; 1024) { if ($rtl == false) { jQuery('.' + li[i].className.trim().replace(/\s+/g, '.') + ' .product-desc .woocommerce-loop-product__title').css('padding-right', widthPrice + 'px'); } else { jQuery('.' + li[i].className.trim().replace(/\s+/g, '.') + ' .product-desc .woocommerce-loop-product__title').css('padding-left', widthPrice + 'px'); } } else { if ($rtl == false) { jQuery('.' + li[i].className.trim().replace(/\s+/g, '.') + ' .product-desc .woocommerce-loop-product__title').css('padding-right', '0px'); } else { jQuery('.' + li[i].className.trim().replace(/\s+/g, '.') + ' .product-desc .woocommerce-loop-product__title').css('padding-left', '0px'); } } } }); var li = jQuery('.woocommerce ul.products.columns-2 li.product'); for (var i = 0; i &lt; li.length; i++) { var widthPrice = jQuery('.' + jQuery(li[i].className.trim().replace(/\s+/g, '.') + ' .product-desc .product-price .top-desc span.price').selector).width() + 15; if (wdw &gt; 1024) { if ($rtl == false) { jQuery('.' + li[i].className.trim().replace(/\s+/g, '.') + ' .product-desc .woocommerce-loop-product__title').css('padding-right', widthPrice + 'px'); } else { jQuery('.' + li[i].className.trim().replace(/\s+/g, '.') + ' .product-desc .woocommerce-loop-product__title').css('padding-left', widthPrice + 'px'); } } else { if ($rtl == false) { jQuery('.' + li[i].className.trim().replace(/\s+/g, '.') + ' .product-desc .woocommerce-loop-product__title').css('padding-right', '0px'); } else { jQuery('.' + li[i].className.trim().replace(/\s+/g, '.') + ' .product-desc .woocommerce-loop-product__title').css('padding-left', '0px'); } } } //Woocommerce pagination jQuery('.woocommerce-pagination ul.page-numbers li a').each(function () { var woocommerce_pagination = jQuery(this).attr('href'); if(woocommerce_pagination == '#'){ jQuery(this).css({'pointer-events':'none','opacity':'0.5'}); } });

After that, in tab Selectors, you must add class:

– Change Image Sizes

You can change the product image sizes in Appearance > Customizer > Woocommerce > Product Image on admin sidebar.

– Product image in Shop page: You could change Thumbnail width

– Product image in single product page: You could change Main Image width

– Change Product Catalog

You can change the product catalog in Appearance > Customizer > Woocommerce > Product Catalog on admin sidebar.

– Enable store notice

Navigate to Appearance > Customizer > Woocommerce > Store Notice, check the box Enable store notice

You can change text in this field

– Change Checkout

You can change the product catalog in Appearance > Customizer > Woocommerce > Checkout on admin sidebar.

– Enable registration in My Account page

Navigate to Woocommerce > Settings > Accounts, check the box Enable registration on the “My Account” page

4. Revolution Slider Configuration

Configuration custom font.

You can download webfonts. Then, You need to unzip folder and upload fonts in wp-content\webfonts.

You can go to Revolution Slider -> Globals -> Edit Custom Font -> Add font name and font css URL

For example: font css URL:https://demo.arrowtheme.com/lusion-sample/wp-content/webfonts/stylesheet.css

install-plugins-04
install-plugins-04