Legenda - Responsive Multi-Purpose Ecommerce Theme

Compatible with: WooCommerce 2.2.x

Dear customers!
We strongly recommend to read this documentation attentively to save your time during further setting up of our theme.

Video tutorials

You may watch our video tutorials for your easy and quick installation of our theme trough WordPress / FTP, import demo pages, slider or dummy products etc.

Installation

Before you start

Current documentation was created to help you with quick installation and configuration of  Legenda theme. Please, read it carefully to avoid most of potential problems with incorrect configuration.

Once you will have activated the theme you will need to change some of the pages and settings for optimal performance. That's why, please, do not contact Support center beforehand. Read firstly the documentation, implement all the steps following the instructions and only after that, if the issues persist, contact us.

Before installing Legenda theme, it is assumed that you have a working WordPress already installed. You should also install WooCommerce plugin for the correct work of our theme. The link for the plugin is provided below. 

For detailed Wordpress installation instructions visit http://codex.wordpress.org/Installing_WordPress

For detailed WooCommerce installation instructions or for more information visit http://www.woothemes.com/woocommerce/

Theme Package

After theme purchase from ThemeForest, please, download the theme from ThemeForest. For that you need to enter Downloads area in your account on ThemeForest, where you will see all your purchased themes. Find Royal theme among them and click on the Download button on the right from the main content. In the provided list you will see the opportunity to download the whole theme package with all additional files or the theme .zip file directly.

If you have downloaded the whole theme package, you will find there such files after extracting:

Requirements for Legenda:

To use Legenda, you must be running WordPress 3.9 or higher and PHP 5.3 or higher.

Theme Installation

You can install the theme in two ways:

WordPress

FTP:

If you get error:

This usually occurs when either the PHP memory limit or max post size for WordPress has been reached.

The easiest workaround for this is to install theme through FTP (see above).

Alternatively you'll need to change a number of settings either on Wordpress or on your web host. 

Theme Upgrade

While the theme update the theme files will be rewritten and if you made any changes directly in them, the changes will be lost.  

So, if you are planning to customize your template, we insistently advise you to use Child Theme or custom.css file, if your changes affect only css styles.  All the detailed information about custom.css file can be found in Legenda Theme Options.

The theme update affects only the theme files and do not influence the data base. But, to avoid any difficulties, please, do the backup of theme files and data base before any update.

Follow the steps below to update theme through FTP:
  1. Download the zipped package from ThemeForest and extract to your desktop.
  2. In the extracted package you will find archive Legenda_v2.4.1.zip, which is the WordPress theme.
  3. Extract zip file and upload only extracted legenda folder to /wp-content/themes/ folder on your server with overwriting.

Please, re-save your Legenda options after upgrading the theme. Navigate to admin panel > Theme Options and hit Save changes.

External Plugins

General information

First of all, we would like to specify that we do not guarantee the compatibility of our theme with all the third-party plugins for WordPress and WooCommerce. Our template is fully compatible only with the plugins that are included in our theme and also WooCommerce, WPML, Contact Form 7, and Mail Chimp plugin. You often (not always) need to customize the extension to make it work properly with your theme. It's impossible for theme author to make the theme compatible with all existing extensions. Please, take that into your consideration and treat with understanding!

Included plugins

Royal theme includes a number of perfect third-party plugins that greatly increase the theme opportunities and open new horizons for your blog. The following plugins are attached to Royal theme:

As we are not these plugins developers, you may find on their developers’ web-sites all the set up information and documentation for them.

Installation

The installation of every previously mentioned plugins will be required once after the theme activation.

Install them and Activate them.

In case if automatic plugin installation fail (as a rule it is because of your server settings), you can install them manually via your Dashboard: Plugins > Add New > Upload Plugin > Browse plugins archives.

Or via FTP, by uploading and extracting the plugin zip files into wp-content/plugins folder. You can find the zip files for plugin installation in the theme folder legenda/framework/plugins.

Update

Plugins authors regularly release the updates and in order to use all the features or fix already found issues, we recommend you to follow the plugins versions and update them on your installations. To update the plugins, switch to your server with FTP. Copy extracted plugins folders into wp-content/plugins/ folder

Activation and Purchase Codes

All the included in our theme plugins are external and we do not have the right to build them into our theme as we purchase the Extended License for each of these plugins. The plugins run perfectly and are fully functional.

Keep in mind, we are constantly including the plugin updated versions and while every theme update you may find the actual plugin version in the theme folder. There is no doubt that you can get the current plugin version directly from us. For that, it will be enough to contact us via contact form on ThemeForest or our site( http://www.8theme.com/contact-us/ ) or create the topic at our Forum ( http://www.8theme.com/forums/ ) and we will send you the necessary zip file ASAP.

These plugins registration is not obligatory! The plugins are functioning perfect without any activation. The plugin activation option was added in the plugin only for the customers to get automatic updates and support directly from plugin developers. Only in case you need this features you will need to purchase and register the plugin. This is not only our practice but all the theme authors from ThemeForest.

 

 

WooCommerce

Our theme is fully compatible with WooCommerce plugin, but it's not included in theme package. You should install WooCommerce plugin before theme installation:

After succesfull plugin installation you should change some WooCommerce options.

Go to WooCommerce > Settings > General and disable Lightbox.

Visual Composer

Our theme uses page builder, that provides the composition of your page easy and handy. You may find the main documentation from plugin developers with detailed information about features and functions in Visual_Composer_documentation folder, and also by watching video tutorial.

The installation of Visual Composer would be provided for you after theme activation.

Install and activate plugin.
Go to Settings > Visual Composer and select for which content types Visual Composer should be available during post creation/editing.
 
In this item we will show only some effects, which were implemented in our theme and most of those you are interested in. They are:

Parallax effect

Create page (Pages > Add New). Ensure the Visual Composer is enabled and add Row.

Edit the Row you wish to add the parallax background to.

  1. Enable Full width section.
  2. Enable Parallax if you wish to apply the parallax effect.
  3. Go to Design options tab. Add a background color if required.
  4. Select a background image from your media library.

Video background for page

Ensure the Visual Composer is enabled and add Row. Edit the Row you wish to add the video background to.

 

  1. Enable Full width section.
  2. Add links to your video.
  3. Select a poster image from your media library.

Arrangement of the project page content as on our demo

Frontend:

Backend:

  1. Add Row.
  2. Select layout 2/3 + 1/3
  3. Add Image Gallery element. Select images from media library, set Gallary type > Flex slider fade and other options if required. 
  4. Add Text Block elements and place neccessary content: text, table. 

Enlarge effect for the banner (shown on the Home Page)

  1. Add Visual Composer Banner element.
  2. Select a banner image from your media library.
  3. Set Banner size.
  4. Scroll down to Hover effect and select Zoom.

Demo Data Installation

The next step gives the opportunity to install automatically:

Go to Theme Options > Import/Export, select desired version and press Install Demo Data button.

Be attentive, such pages as Shop, Cart, Checkout, My account etc are WooCommerce pages and should be provided for you after WooCommerce plugin activation. If you didn't install them automatically, create pages manually using special WooCommerce shortcodes.

You can make installation of some our pages manually as well

Follow the steps below and you will be adding content in no time.

To import one of 8 additional theme variants, you need after main import, import additional Home Pages, sliders and theme settings.

How to import Home Page?

- In the theme package you may find XML data folder. There are subfolders with different theme variants with files needed for import inside. You need home.xml

- Next, go to Tools > Import > WordPress > upload chosen home.xml file, press Upload File and import

- Check Download and import file attachments and press Submit button

- Go to Settings > Reading, and change the "Front page displays" setting to "A static page", set the front page to your homepage.

How to import slider:

You may get more details about that in SlideShow item.

How to import theme settings:

- In the subfolders of XML data folder, find settings.txt file. Code for import is saved there. Copy it.

- Proceed to Theme Options > Import/Export > Import link and paste import code.

- Press Import button and save settings.

Blog

Create a page called "Latest News" (or whatever you want your blog called) and leave the page template as default.

Go to Settings -> Reading, set the Posts page to your just created blog page.

You can adjust Blog page layout in Theme Options > Blog Layout.

Manual import

You may import XML files, where some demo data from our site are, which can facilitate your work with theme. XML files (Legenda_demo_data.xml and home page examples in Demo_Pages folder) you can find in the archive.

For this you need:

  • Navigate to Tools > Import and install WordPress import plugin.
  • Select the XML file and upload it.
Do not forget: 
- Folder wp-content/uploads should have permissions 777. 
- Download and import file attachments should be checked. 
 

Primary Menu

Legenda supports custom WordPress menu. Navigate to WP Admin > Appearance > Menus page and create menu.

There is possibility to use different menu for desktop (Main menu) and mobile (Mobile menu) versions and for Authorized User (Account menu). Select the newly created menus on the Manage Locations tab as it mentioned on screenshot and press Save button.

Menu types

Starting from theme version 1.2  you can use 3 different types of menu in one main menu simultaneously. You should add CSS Class for first level menu item and set what type of menu it will use (see screenshot).

To activate CSS Classes and Description, open Screen Options and select these items.

Allowed CSS Classes:

If any of CSS Casses would not being set, then the menu will be shown in  default drop-down style.

Colums in menu

If you use full width or open by click menu you need to create subitems. To set different width for subitems you may add special CSS Classes.

Allowed CSS Classes: from et-col1 to et-col12

 

Menu images

Also you can use image in menu.

To add Image add Links subitem to your item. Fill in fields:

URL - destination url of your image;

CSS Classes - should be image-item for image; 

Description - insert path to your image.

To add New or Sale label for menu item  add CSS Class badge-new, badge-sale or badge-hot:

SlideShow

Theme supports Revolution Slider, the installation of which would be provided for you after theme activation.

After that you may create the sliders and use them on the site according to the plugin documentation. We have included folder called "documentation_Revolution_Slider" that contains the documentation from the authors of the slider. Please, refer to it for further information about slider settings. Slider can be added to any page.

Revolution Slider

To setup Revolution Slider follow the next steps:

1) If you want, you may use our demo slides by importing the revslider_import.zip and full_width.zip archives, as it mentioned on the screenshot.

2) If you want to create new slider navigate to Revolution Slider > Create New Slider.

Legenda Theme Options

General

Color Scheme

Typography

Header

Shop

Products Page Layout

Single Product Page

Quick View

Promo Popup

Blog Layout

Portfolio

Contact Form

Responsive

Custom CSS

All the CSS styles placed in this file will not be lost after upgrading the theme in the future!

Import/Export

Newsletters

There is no such functionality by default in our theme as Newsletters.

But you can use additional plugin to implement it. We recommend MailChimp for WP http://wordpress.org/plugins/mailchimp-for-wp/

Step 1: install MailChimp for WP plugin

Step 2: create custom sidebar (Apearance > Widgets) and add MailChimp Sign-Up Form widget

Step 3: use Widgetized Sidebar visual composer element to add it on page. Extra class name should be back-white.

Static blocks

Static blocks are a great Legenda theme feature that makes adding content to your site easy and convenient. Static blocks allow you to add additional content for product, create footer layout, facilitate creation of promo popup etc. Static blocks can be used anywhere on your site to display text, images, sliders, widgetised sidebars etc. Below is a simple tutorial on how to create promo popup window.

Promo Popup

To recreate such popup window on your site, you will need first to create Static Block (content for this area actually), next - enable this function in Theme Options (Theme Options > Promo popup) and specify that we will show just created block. So go to Static block > Add new. 

  1. Add row and select custom row layout 2/3+1/3.
  2. Add Text Block element to first column. We have used following code for this element:
    <h4><span class="active">Merry Christmas</span> from 8theme</h4>
May the wonder of Christmas shine in your hearts and bring warmth to those you love.[contact-form-7 id="7863" title=""]
Keep in mind: to create form for this window we have used additional plugin Contact Form 7

Once static block was created go to Theme Options > Promo popup:

  1. Enable promo popup
  2. Add your static block by using shortcode [block id= " "].
  3. Save changes.

 

Single Product Page

Single product page has such features as:

Video in product image gallery

While create your products just upload your Video in 3 formats: MP4, OGG and WEBM in Product Video section. Or you can use YouTube or Vimeo iframe code.

Brands

Go to Products > Brands and create necesary brands.

While create your products just select desired brands at the Brands section

Our offers slider

This is upsell products. Add up-sells for your product when you are editing the product data on a “Linked Products” tab:

Then go to Theme Options > Single product page > Location of upsell products and select desired location.

Social icons

To enable social icons on Single Product Page go to Theme options > Singe Product Page > Show share buttons > On.

Size guide

You can upload size guide image in Additional product options area and it wil appear on frontend.

Custom tabs

You may create two additional custom tabs for product: 

Additional information block

Besides Product description and Additional tabs you can add other additional information such as details, video, images etc and display it below product tabs by using Additional Information Block feature. 
 
Navigate to Static Blocks and create block where place all desired content. Then edit your product and in Additional product options area > Additional information block select necessary static block.

Registration Page

First of all allow the registration. Navigate to Settings > General > Membership and mark Anyone can register. Then create Register Page and set the page template (under page attributes) to Custom Registration Page.

Contacts page

If you want to receive feedback from your visitors, having a Contact Us page on your site is an easy way to achieve that.

Go to Pages > Add new and create a page called "Contact Us" (or whatever you want your contacts page called) and set the page template (under page attributes) to Contact Page. It inserts form for feedback on page.

There are two variant of contacts page: default and custom. You can select it in Theme Options > Contact Form > Contact Page layout.

Add other content for page. We have used the following (add code on Text tab in Classic Editor mode):

Default Contact Form

<h3>Place for nice title</h3>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
<h6>Contact informations</h6>
30 South Park Avenue
San Francisco, CA 94108
USA
<strong>Phone:</strong> (123) 456-7890
<strong>Fax:</strong> +08 (123) 456-7890
<strong>Email:</strong> <a href="#">contact@companyname.com</a>
<strong>Web:</strong> <a href="#">companyname.com</a>

Custom Contact Form

[vc_row][vc_column width="1/2"][vc_gmaps type="m" zoom="13" link="https://maps.google.com/?ll=51.513331,-0.125557&spn=0.001923,0.005405&t=m&z=19" size="300" bubble="1"][vc_column_text]
<h3>London store</h3>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born.
<h6>Contact informations</h6>
30 South Park Avenue
San Francisco, CA 94108
<strong>Phone:</strong> (123) 456-7890
<strong>Fax:</strong> +08 (123) 456-7890
[/vc_column_text][/vc_column][vc_column width="1/2"][vc_gmaps type="m" zoom="12" link="https://maps.google.com.ua/maps?hl=uk&ll=34.060797,-118.249463&spn=0.002551,0.005405&t=m&z=19&layer=c&cbll=34.060797,-118.249463&panoid=aqQH-JKCWE3KL-2Qw5OAKQ&cbp=12,232.53,,0,9.81" size="300" bubble="1"][vc_column_text]
<h3>Los Angeles store</h3>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born.
<h6>Contact informations</h6>
30 South Park Avenue
<strong>Email:</strong> <a href="#">contact@companyname.com</a>
<strong>Web:</strong> <a href="#">companyname.com</a>
[/vc_column_text][/vc_column][/vc_row]

To add your email for contact form, navigate to Theme Options > Contact Form.

Portfolio

You may also use our theme as a Portfolio. It is the perfect way to share your artwork, photography, or anything visual you want to show off.

Create Portfolio Page and set the page template (under page attributes) to Portfolio. It will be the main page where will be displayed all your projects.

Then go to Theme Options -> Portfolio and set necessary options.

You may create New Projects at Portfolio -> Add New.

Legenda Shortcodes

There are several shortcodes which can be used in Legenda theme inside posts and pages. You can look at examples, grab the code and learn more on each shortcode’s individual page of our demo here.

Pricing tables

To create pricing tables you may add following code:

<div class="pricing-table columns4">
	<ul>
		<li class="row-title">Free</li>
		<li class="row-price">$19</li>
		<li>512 mb</li>
		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
		<li><a href="#" class="button">Add to Cart</a></li>
	</ul>
	<ul>
		<li class="row-title">Econom</li>
		<li class="row-price">$29</li>
		<li>1 gb</li>
		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
		<li><a href="#" class="button">Add to Cart</a></li>
	</ul>
	<ul class="selected-column">
		<li class="row-title">Premium</li>
		<li class="row-price">$59</li>
		<li>2 gb</li>
		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
		<li><a href="#" class="button">Add to Cart</a></li>
	</ul>
	<ul>
		<li class="row-title">Advanced</li>
		<li class="row-price">$79</li>
		<li>4 gb</li>
		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
		<li><a href="#" class="button">Add to Cart</a></li>
	</ul>
</div>

Key lines of code are explained below:

<div class="pricing-table columns4"> - general view of your table: namber of culumn, design. You may also use: columns3, columns5, style3, style2.

<ul class="selected-column"> - hightlights column.

<li class="row-title"> - add this class to set title for your column.

<li class="row-price"> - add this class to add row with price.

You can also use Visual Composer element Pricing Table , select desired style and following code as content:

<ul>
<li class="row-title">Free</li>
<li class="row-price"><sup class="currency">$</sup>19<sup>00</sup><sub>per month</sub></li>
<li>512 mb</li>
<li>0.6 GHz</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li><a class="button" href="#">Add to Cart</a></li>
</ul>

Custom widget areas

You can create additional sidebars to add your own content and functionality and to use different sidebars on different pages (posts). Navigate to Appearance > Widgets. Fill in Custom Sidebar title and press Add Sidebar button. See screenshot.

Place necessary widgets into newly created sidebar. Then create page (Pages > Add New) and on the right side of the Page Layout area choose Sidebar Position, necessary Sidebar Width and desired Widget Area.

Widgets

There are 10 default widget areas, which you can use to add your own content and functionality. There are 8 widgets in the sidebars, 10 in the footer areas.

Main sidebar:

- Categories
- 8theme - Recent Posts
- 8theme - Recent Comments

Shop sidebar:

- WooCommerce product categories
- Text widget with content
- WooCommerce - Price filter
- WooCommerce Layered Nav Filters
- WooCommerce Layered Nav (Attribute: color; Display Type: List)
- WooCommerce Layered Nav (Attribute: size; Display Type: List)
- 8theme - Recent Products
- 8theme - Static Block

Hidden top panel widget area:

- 8theme - Static Block:

Single Product Page sidebar:

- 8theme - Static Block
- WooCommerce Top Rated products

Right Side Panel area:

- Text widget with content
- 8theme - Recent Posts

Prefooter Row:

- Text widget with following code:

<div class="custom-info-block a-left"><span>Follow Us:</span>
<a href="#"><i class="icon-youtube"> </i></a>
<a href="#"><i class="icon-twitter"> </i></a>
<a href="#"><i class="icon-facebook"> </i></a>
<a href="#"><i class="icon-rss"> </i></a></div>
<div class="custom-info-block a-center"><a href="#">Check Out Our New Wordpress Theme !</a></div>
<div class="custom-info-block a-right"><a href="#">Our Support Is Online 24/7 <span>Support Chat</span></a></div>
Footer 1:

- 8theme - Static Block

Footer 2:

- 8theme - Static Block

How to add Twitter and Facebook like buttons read here:

- Twitter
- Facebook

Footer Copyrights:

- Text widget with following code:

<img src="YOUR_PATH/wp-content/themes/legenda/images/logo-small.png" class="logo-small">
Footer Links:

- Text widget with following code:

<p>Wordpress DEMO Store. All Rights Reserved.</p>
Twitter Feed widget

You may display your Twitter feed in the sidebar to bring more dynamic content into site, promote your Twitter feed and get new followers by using "8theme - Twitter Feed" widget.

If you get an error on frontend, please, check permissions on your wp-content/themes/legenda/code/cache folder, it should be 777 with recursion.

WishList

Your customers can browse through your store and add items to list to compile an itemization of goods or services they desire.

Firstly create WishList page if it's not created yet using following shortcode  [yith_wcwl_wishlist]

Go to WooCommerce > Settings > WishList and select "Use shortcode" for Position option.

Then check Use buttons instead of a simple anchors to display wishlist button in the form of heart.

Other settings you may adjust at your option.

How to translate

The translation file default.pot you can find in Languages_PO_files folder in theme package. Edit the .po file using POEdit, use the translation field to make replacements. Read here how to do it right.

From the file menu, save file with your language name e.g de_DE.po. It will generate both a .po and .mo file for your translation. Place these files into languages folder /wp-content/themes/legenda/languages.

Next edit wp-config.php located in the root folder of WordPress and use the $locale with prefix with your language name which should be similar to the translation file name. For example: $locale='de_DE';

Child Theme

Legenda fully supports Child Theme. 

A WordPress child theme is a theme that inherits the functionality of the parent theme. With child theme you can make modification or add additional functionality to parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes.

You may read how to create child theme here http://codex.wordpress.org/Child_Themes

Additional questions & support

Didn't find necessary information in our documentation? Check our KNOWLEDGEBASE, you may find some solution there. 

We aim to help our clients if they have any unresolved difficulties. For this reason, if you still have questions we will be happy to answer them. You can contact us in any way you like: submit ticket or create topic on forum. Our support center 8theme.com/support/ is at your service.

Our working hours (GMT, London)
Monday-Friday: 8.30 a.m. - 5.30 p.m. 
Saturday: 9.00 a.m. - 2.00 p.m. 
Sunday - Closed