Legenda - Responsive Multi-Purpose Ecommerce Theme

Compatible with: WooCommerce 2.1.x


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

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.

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/

Download the zipped package from ThemeForest and extract to your desktop. In the extracted package you will find Legenda_WordPress_Theme.zip file which is the WordPress theme.

You can install the theme in two ways:

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.

Our theme uses the built-in 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.

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

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

  1. Add a background color if required.
  2. Select a background image from your media library.
  3. Enable border for section if required.
  4. Enable Parallax if you wish to apply the parallax effect.

Video background for page

Ensure the Visual Composer is enabled and add Sections and edit the Section you wish to add the video background to.

  1. Select a poster image from your media library.
  2. Add link to your video.

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.

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. 

 

Before you begin the Legenda updating process, we recommend to do the backup of all your files!

You can 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_theme.zip, which is the WordPress theme.
  3. Extract zip file and upload the extracted folder to /wp-content/themes/ folder on your server with overwriting.

Important!

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

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

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 activate CSS Classes and Description, open Screen Options and select these items.

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

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:

General

Color Scheme

Typography

Header

Shop

Products Page Layout

Single Product Page

Quick View

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

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 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 lock 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 has such features as:

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.

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.

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.

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.

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>

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.

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.

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 > Pages and select your Wishlist Page.

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

Then check Use buttons instead of a simple anchors.

Other settings you may adjust at your option.

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 define the WPLANG prefix with your language name which should be similar to the translation file name.

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

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: cteate topic on forum or submit ticket. Our forum 8theme.com/forums 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