Space - Minimalist, Clean Opencart Theme

Version: 1.0.0 | Released: 28 July 2016

Table of Contents

Current Chapter: Overview

About Space Themes

Space Themes is a premium Opencart theme for creating shoppingcart, content managerment system, and referral services with tons of useful features. This powerful tool offers unprecedented control over the entire store content and appearance. You can build complex layouts in minutes. Hundreds of styling and functionality options will allow you to adapt the theme to your specific needs. It is easy and fast to setup any kind of web store.

The OpenCart theme is developed with Ave Framework, it integrates Bootstrap 3, Font Awesome, supports HTML5 and CSS3.

We would like to thank you for purchasing Opencart Space Themes and chosen it for your website. We outline all kinds of good information, and provide you with all the details you need to use Opencart Space Themes.

If you are unable to find your answer here in our documentation, feel free to ask for help from our support team, all you have to do is create a email and send it to support@finalthemes.com.

Create a support email


Convert to Opencart by: FinalThemes
Design by: MagicalTheme
Facebook: facebook.com/finalthemes
Website: http://www.finalthemes.com
Created On: 28 July 2016

Template Structure

Template Structure

All template files have fixed structure consisting of Header top, Navigation, Main Content and Footer structured as below:

Beginning of Page

Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version and set a spesific class applied to Internet Explorer versions. 

<!doctype html>
<!--[if lt IE 7 ]> <html class="ie ie6 ie-lt10 ie-lt9 ie-lt8 ie-lt7 no-js" dir="ltr" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7 ie-lt10 ie-lt9 ie-lt8 no-js" dir="ltr" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8 ie-lt10 ie-lt9 no-js" dir="ltr" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9 ie-lt10 no-js" dir="ltr" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" dir="ltr" lang="en"><!--<![endif]-->

Page Head

Page head contains metadata, javascript and css files: 

<head>
    <!-- Important stuff for SEO, don't neglect. (And don't dupicate values across your site!) -->
    <title>Your Store</title>
    <base href="yourdomain" />
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--[if ie]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><![endif]-->
    <!--[if ie]><meta http-equiv="cleartype" content="on"/><![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="author" content="" />
    <meta name="description" content="" />

    <meta name="description" content="My Store" />
    <!--  STYLESHEET FILES COME HERE -->

    <!--  JAVASCRIPT FILES COME HERE -->
</head>

Stylesheet Files from head


<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
<!-- concatenate and minify for production -->
<link rel="stylesheet" href="assets/plugins/bootstrap/bootstrap.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/theme/css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/theme/css/navigation.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/theme/css/heading.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/theme/css/buttons.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/plugins/fontawesome/css/font-awesome.css" type="text/css" media="all">
<link rel="stylesheet" href="assets/plugins/magnific-popup/magnific-popup.css" type="text/css" media="all" />
    
    <!-- ADDITIONAL STYLE FROM EXTENSION PUT HERE -->

Javascript Files from head

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="assets/plugins/jquery.js"><\/script>')</script>
	<script src="assets/plugins/global-plugins.js"></script>
	<script src="assets/plugins/magnific-popup/magnific-popup.js"></script>
	<script src="assets/editor/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
	<script src="assets/plugins/owl-carousel/owl.carousel.min.js" type="text/javascript"></script>
	<script src="assets/plugins/flexslider/flexslider-min.js" type="text/javascript"></script>

    <!-- ADDITIONAL SCRIPT FROM EXTENSION PUT HERE-->

Header top

Header top contains of logo and top menu bar and it used in all pages. HTML code of header container shown below: 

  <div class="header-top">
    <!-- class ( header-top-colored  ) -->
    <div class="content clearfix">


        <!-- SOCIALS LINK -->
        <!-- CURRENCTY -->

        <!-- LANGUAGES-->
        <!-- TOP LINKS -->


    </div>
    <!-- End content -->
    <span class="top_expande not_expanded">
				<i class="no_exp fa fa-angle-double-down"></i>
				<i class="exp fa fa-angle-double-up"></i>
			</span>
</div>
<!-- End header-top -->

Navigation

Header contains of logo and top menu bar and it used in all pages. HTML code of header container shown below: 

        <!-- BEGIN NAVIGATION -->
       <nav id="main_nav">
    <div id="menu_navigation">
        <span class="mobile_menu_toggler">
            <a href="#" class="nav_trigger"><span></span>
        </a>
        </span>
        <ul id="navigation" class="clearfix">


            <li class="elem_menu mobile_menu_toggle "><a>Menu link</a>
            </li>
            <li class="elem_menu mobile_menu_toggle "><a>Menu link</a>
            </li>
            <li class="elem_menu mobile_menu_toggle "><a>Menu link</a>
                <ul>

                    <li class="elem_menu mobile_menu_toggle "><a>Sub menu link</a> </li>
                    <li class="elem_menu mobile_menu_toggle "><a>Sub menu link</a> </li>
                    <li class="elem_menu mobile_menu_toggle "><a>Sub menu link</a> </li>
                    <li class="elem_menu mobile_menu_toggle "><a>Sub menu link</a> </li>
                </ul>

            </li>
        </ul>
    </div>
</nav>
        <!-- END NAVIGATION -->

Content

Content consists of page title, breadcrumbs and page's main body. HTML code of Content container as shown below: 

<section class="section page_title">
    <div class="content clearfix">
        <h1>About Us</h1>
        <!-- BREADCRUMB -->
        <ul class="breadcrumb">
            <li><a>Home</a>
            </li>
            <li><a>Page link</a>
            </li>
        </ul>
    </div>
</section>
<section class="section">
    <div class="content content_spacer clearfix">
        <div class="content_row clearfix">
            <div id="content" class=" column-fix col-md-12 col-sm-12 col-xs-12 ">
                <div class="heading_title centered upper">
                    <h2><span class="line"><i class="fa fa-info"></i></span>Page title</h2>
                </div>
                <div>
                    <!-- Content Here -->
                </div>
            </div>
            <!-- //content row-->
        </div>
        <!-- //content spacer-->
</section>
<!-- //main section-->

Footer

  <footer id="footer">
    <div class="container split-col content_spacer clearfix">
        <div class="content_row clearfix ">
            FOOTER CONTENT
        </div>
        <!--//row -->

        <!-- end row -->
    </div>
    <!-- end container-->
    <div class="footer_copyright">
        <div class="content clearfix">
            <div class="content_row clearfix">

                <div class="col-md-6 col-sm-6 col-xs-12 pull-left">
                    <span class="footer_copy_text">Powered</span>
                </div>
            </div>
            <!-- end row -->
        </div>
        <!-- end container-->
    </div>
    <!-- end footer_copyright-->
</footer>
<!--//footer -->

End Of Page(Javascripts)

Javascript file loaded in the end of page.

   <script type="text/javascript" src="assets/theme/js/theme_init.js"></script>

Font

By default, Space Themes uses OpenSans font imported in main css file: assets/global/css/global.css

OpenSans Font load code

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url('../font/OpenSans/Normal.woff') format('woff');
}

You can choose any Font you want from google font at Control Panel

Google Font load code

<link href='http://fonts.googleapis.com/css?family=Font+You+Choose&subset=all' rel='stylesheet' type='text/css'>

Javascript Initialization

Core javascript initialization implemented in assets/theme/js/theme_init.js through Layout object as shown below. This approach enables an easy modular implementation to initialize jquery plugins and other application logics. 

$.fn.initTheme = function(options) {
    var localVariable; //local variable
    function megaMenuTop() {
        //sample function code
    }

};
$("#menu_navigation").initTheme({});

Javascript Plugins & Resources

Select Plugin Or Resource:


Bootstrap

Space Themes based on Twitter Bootstrap

CSS Files


<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

JS Files


<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

Official Documentation

http://getbootstrap.com

OWL Carousel

Fully loaded, responsive content slider

CSS Files


<link href="assets/plugins/jquery-owl-carousel/owl-carousel/owl.carousel.css" rel="stylesheet">

JS Files


<script src="assets/plugins/jquery-owl-carousel/owl-carousel/owl.carousel.min.js" type="text/javascript"></script><!-- slider for products -->

Official Documentation

OWL Carousel

Font Awesome 4.0.3

The iconic font designed for use with Twitter Bootstrap

CSS Files


<link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" />

Official Documentation

http://fortawesome.github.com/Font-Awesome/

Font Awesome 4.0.3

GMaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.

CSS Files


No CSS file

JS Files


<script src="assets/plugins/gmaps/gmaps.js" type="text/javascript"></script>

Official Documentation

http://hpneo.github.com/gmaps/

Revolution Slider

Revolution Slider is a premium multi-purpose slider for creating image galleries, content sliders, and mind-blowing slideshows with must-see effects

CSS Files


<link type="text/css" href="assets/plugins/slider-rs/rs-plugin/css/settings.css" media="screen" rel="stylesheet"/>
<link type="text/css" href="assets/plugins/slider-rs/rs-plugin/css/settings-ie8.css" media="screen" rel="stylesheet"/>

JS Files


<script type="text/javascript" src="assets/plugins/slider-rs/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="assets/plugins/slider-rs/rs-plugin/js/jquery.themepunch.tools.min.js"></script>

Official Documentation

http://revolution.themepunch.com

Slider Range

Set the range option to true to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.

CSS Files


<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

JS Files


<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Official Documentation

http://jqueryui.com/slider/#range

Elevate Zoom

A plugin to zoom images on touch, click, or mouseover.

JS Files


<script type="text/javascript" src="assets/plugins/jquery-elevatezoom/elevatezoom.min.js"></script>

Official Documentation

http://www.elevateweb.co.uk/image-zoom/examples/

Download packages

The instruction is to help you with installation of the Space Themes. It includes quickstart installation, theme installation and modules installation.

Download packages

To download Space Themes, please check it out at: Themeforest Downloads

Once the download is complete, unzip the file and you would see the following packages:

  • Documentation - our detail documentation guidelines for the theme
  • Licensing - the theme license
  • start_here.html - online documentation guidelines
  • quickstart_upload.zip - for quickstart installation
  • theme_upload.zip - install theme for available Opencart version 2 store

System Requirement

OpenCart requires certain technical requirements to be met for the store to operate properly. First, a web server must be created to make the OpenCart store publicly available on the web. Domain names and hosting services can easily be purchased for an affordable price.

When selecting a hosting service, you should check to see that these server requirements are provided and installed on their web servers:

  • Web Server (preferably Apache)
  • PHP (at least 5.2)
  • MySQL
  • Curl

Quickstart Installation

Installing in Localhost or installing on your hosting is almost the same. Here is the quick guide to install Quickstart in localhost.

The Quickstart Package includes Opencart core, Space Themes, Extensions supported for the theme, and Sample data. Quickstart is the best choice for beginner to explore back-end settings and for new site building. Installing the Quickstart steps is just like Opencart installation, after the step, you will have a site that is exactly the same as our demo site.

The preparation

  • Step 1 - Create a folder in htdocs folder for Xampp, www folder for Wamp

  • Step 2.a - Unzip the quickstart_upload.zip package then copy all the files and folders to the new created folder.

  • Step 2.b - please rename config-dist.php to config.php and admin/config-dist.php to admin/config.php


    Tips: Please upload quickstart_upload.zip to your server then unzip this file, it's hundreds of times faster than the traditional way (uploading each folder after unzip to your server).

  • Step 3 - Create database: You can create a database in your hosting provider's control panel, for example cPanel. It may also be possible to do so in phpMyAdmin. Remember to take note of the details that you use as you'll need them for the next step.
  • Step 4 - Auto-installer: the final step is to run the auto-installer. Open your favourite web browser and add "/install" to the end of your site's website address. When doing this you should see with the following page:

Installation

STEP 1 - licence agreement

Please read the OpenCart licence agreement

STEP 2 - check set-up correctly

Check your server is set-up correctly

STEP 3 - enter database details

Important

Enter your database and administration details and select your sapmle data version.

STEP 4 - success

Ready to start selling!

Install Space Themes pakage only

Before you install this theme:

  1. Read our complete instruction to install theme
  2. Make sure you have installed and running the correct version of OpenCart: 2.0.1.1, 2.0.2.0, 2.0.3.1 and 2.1.0.1 or higher.
  3. Take a FULL BACKUP for your site

We recommend to use this theme on a new, clean installation or existing shops without custom core modifications.

Unzip the theme package: theme_upload.zip:

Tips: Please upload theme_upload.zip to your server then unzip this file, it's hundreds of times faster than the traditional way (uploading each folder after unzip to your server).

Steps to install Space Themes manually:

STEP 1 - upload all theme pakage files

Step 1 - Upload theme to your OpenCart site root directory

STEP 2 - active Theme Control Panel

Step 2 - Active Theme Control Panel

Once the theme is uploaded, access your admin panel, navigate to: Admin > Modules > Δ - Shortcode components, click Install, Theme Control Panel that will be installed, import the default 12 colors skin.

STEP 3 - Success

Step 3 - Access Space Themes Features

Congratulation, you have successfully installed Spcae Themes to your store! Nothing simpler than!

Now you can seen links to the function of Space Themes the left menu navigation.

Theme Control Panel

Space Themes is support multi skins, that means you can create unlimited theme with different setting, and activate skin you want.

Please acces Admin > Space Tool > Theme Manager to manage Theme skins.

Being active Active state of skin for this store.

Active Active: Click on the "Active" button to Active skin for this store.

Preview Preview: Click on the "Preview" button to preview this skin.


Note: This function backup all your settings for this Skin without backup the image file in stylesheet file or custom logo in this Skin.

Edit Edit: Click on the "Edit" button to edit this skin, you will be directed to "Theme Design Editor" to customize this skin.

Reset active skin Every time you "View" or "Edit" a skin from Theme Design Editor, server will remember this skin ID, therefore, when you access the frontend, theme will be displayed according to the option of this skin (only show this skin this your browser).
Click to this button to reset to Default active skin.

Copy Please check to the skin you want to copy and click "Copy" button), skin you choose will be duplicated.

Insert Click on the "Insert" button, a new theme with default settings is created with the name "-Draft-", you will be directed to "Theme Design Editor" to customize this skin.

Delete Please check to the skin you want to delete and click "Delete" button, skin you choose will be deleted.

About Theme Control panel

After installation, we have 12 imported color skins, please click to Edit button to edit skin, or click to Add new button to create new skin, the browser will navigate to Theme Control Panel.

Theme Control Panel is visual design editor, help us create unlimited settings, colors and layout and storage with a friendly name, following we call as "Theme Skin".

Theme Control Panel consists of 5 separate settings group, option settings will be displayed in the appropriate context, we will detailed instructions in the next step.

Theme supports powerful custom functions, support customize every detail of the site, but us do not have to customize all, when we click to Add new, all default parameters are set correctly, we just need just need enter New skin name and replace mainstream color with new color then a new color skin has been created and ready to work..

 

1 Please enter Skin name to manage.

2 Default mainstream color of skin, to replace mainstream color with new color.

Theme Setting

Developer Option: Some settings to enhance system performance as: Minify HTML, Put Javascript to Bottom of page, Minify Css & Javascript and Database Query Optimize.

General Setting: At here, we can switching between existing skins, setting general info for Skin as: Skin name, Color scheme, Box style... and see all the changes right away.

Skin name: Name of current Skin.

Color Scheme: Universal color of Skin

Setting for all element in header as: Navigation style (Dark, Light), Header fixed, Header transparent, ...

Tabs "Navigation": Setting link groups displayed on the navigation bar as: Catalog menu, Content menu, Pin brand logo, Pin Featured product, Pin information ...

Tabs "Header social": Setting Social link displayed in Header Top.

Navigtion setting:

Header social:

Setting for all element in footer as: Footer style (Dark, Light) and Footer link ...

Tabs "Custom Footer": Setting link groups displayed on the navigation bar as: Catalog menu, Content menu, Pin brand logo, Pin Featured product, Pin information ...

Tabs "Powered & Payment Logo": Setting Powered & Payment Logo.

Custom Footer

Just drag and drop the installed modules into the desired position and Save your setting.

Footer Payent Logo

Just choose Payment Logo and Save your setting.

Page Layout is a powerful feature, support drag and drop module to available position, after assigning module into position, we can change the module position, edit, delete.

Step 1: Click to "Page layout" section.

Step 2: Choose layout to assign module.

Step 3: Drag installed module to available position.

Step 4: Save setting.

Tab General Layout
Setting general layout for all page layout.

What is "Page Layout Setting"?
Page layout supports resize (based Bootstrap 12 column) and arrange the opencart columns (Left, Content, Right) under the arrangement as follows:

  • Column Left - Main Content - Column Right
  • Column Left - Column Right - Main Content
  • Main Content - Column Left - Column Right
  • Main Content - Column Right - Column Left
  • Column Right - Main Content - Column Left
  • Column Right - Column Left - Main Content

Tab Different Layout
Select a layout you need setting different column size or different arrangement, all page of of this layout will be appear as your setting.

1/Translate: Supports the definition and transformation some text - phrase added by this theme that previously not available in the system language file.

2/Custom CSS: Support insert css to web page but do not need to open the source code file.

3/Custom Javascript: Support insert javascript to web page but do not need to open the source code file.

Product Setting: Setting the parameters: font (size, weight, style, text transform..), color, background for product item element: Name. Price, Rating start, Ribbon Label. Set image View mode for product details page: Manific Popup or Elevate Zoom...

Category Setting: Set display: Special label, Button "Add to cart", "Add tho whist list", "Add to compare" for the following pages: Category page, Manufacturer Info page, Search page, Special Page.

 
We don't need configuration everything, default value is available for theme working nomal, Control panel only shows the settings available for custom configuration.

About Content/Blog

Content / Blog is an integral part of the "Space" theme, Content / Blog with powerful customization capabilities provided the following controller

  • Category: At content category, we can choose type of category: Custom link, Frequently asked questions, Blog's category, Navigation custom html.
  • Article: Provides articles displayed under the following content: Blog - publish your blog post, Porfolio - Introduce the projects you have implemented, Gallery - Publish content as photo gallery.
  • Author: Create author profile and publish content under the author's name has selected.
  • Polls: Implementation of the poll on your post or any position on your site.
  • Free download: Provides downloadable files for purpose you want (monthly quotations, user guide... etc).
  • Comment: Manage customer reviews about the article.
  • Sevice offer: Create and manage the services (without fixed prices) that you can offer on your system.
  • Client request: Manage customer's request quote about the services offer on your store.
  • Client testimonial: Manage customer tesimonial about the services offer on your store.

Installation/Configuration

1Install Content/Blog

Go to: Admin »Extras » Install Blog, you will be directed to the installation wizard.

In the first installation Content/Blog, Content wizard will ask to confirm the "Install Sample Data".

If select: "YES" - Content wizard will install a some sample "Service categories, Blog categories, Gallery categories" and "Articles" so you can easy learn how to "content" work, or change the title - description of category, article to your content, this saves your time.

Recommended: Please practice install - uninstall Content/Blog many times with Demo data to not manipulate mistakes when working with Real data.

» This helps us to quickly become familiar with Blog work way and how to setting the Blog module.

If select: "NO" - Blog will create the necessary Database tables and initializes the default settings to get ready for your work.

Content Setting

Go to: Admin » Extras » Blog Manager » Settings to Configuration your Content/Blog.

We don't need configuration everything, default cofiguration is available for Content/Blog working nomal, Content/Blog setting only shows the settings available.

Content Category

Content category is multi purpose category

Go to: Extras » Blog Manager » Content Category

Content category is multi purpose category , you can set it as:

  • Category: Traditional content categories
  • FAQs: Frequently asked questions.
  • Custom Link: The links in categories will navigate to any link you put.
  • Navigation Custom Content: As an custom content, only displayed on the navigation bar.

Item Display: Set the posts to display in this category as: Blog Post List, Project Portfolio, Photo Gallery

In the theme of the store front, Content parent categories are listed in the top menu of the home page. This navigational feature is used to guide customers to similar content within the same category.

When adding a content article without a content category, the content will not show up under any categories in the front end of the store. The content page can only be accessible if the customer types in the content title, one of the content tags in the search box, or visits the content through a author page. If you want this content to be more visible to your customers in the store front, we suggest that the category is created prior to adding the content article.

Category Tree

Create Blog Category

1 Category Template: Category

2 Item display: Blog post

3 Category name: Enter your category title

4 Save

Other settings are not required.

Create Gallery Category

1 Category Template: Category

2 Item display: Photo gallery

3 Category name: Enter your category title

4 Save

Other settings are not required.

Create Portfolio Category

1 Category Template: Category

2 Item display: Project portfolio

3 Category name: Enter your category title

4 Save

Other settings are not required.

Create FAQs

1 Category Template: FAQs

2 Category name: Enter your FAQs group title

3 Enter FAQs question

4 Enter FAQs answer

4+ Click to "Add" button to add new FAQs question.

5 Save

Other settings are not required.

Create Navigation Html Content

1 Category Template: Navigation Html Content

2 Content title: Enter your content title & description

3 Save

Other settings are not required.

Create Custom Link

1 Category Template: Custom Link

2 Link title: Enter your Link title

3 Custom link: Enter your Custom Link (Internal link ex: index.php?route=common/home, External link ex: https://www.facebook.com -> http(s) protocol is required)

4 Save

Other settings are not required.

Author list

The Author feature is used to categorize article by author

Go to: Admin » Extras » Blog Manager » Author

This section can be accessed under Blog manager » Author.

The Author names below came with the install. They can be deleted, and new Author information can be added in its place. The Author information should be created before articles are added, so the author category can be selected when adding the article. Saving a article without including the author isn't advised, because customers can search for articles in the store front through their author page.

The provision author information is required, if you do not need a specific author, please create one author as "Store Name".

Author Form

Article

Article is multi purpose content, we can set article as: Blog post, Photo gallery, Project portfolio.

Go to: Extras » Blog Manager » Article

Article List

The Article section, accessed under Catalog, will display all the articles available in the store.

Every row of article will contain the following information:

  • Image
  • Article Title
  • Category
  • Status: Selecting "Enabled" lets the article be visible in the store's store front. Selecting "Disabled" will remove the article from view.
  • Sort Order

Checking an individual box in the first column will select the article information within the same row. Once selected, you can choose to "Copy" or "Delete" the article. "Copy" will duplicate the article and it's information categories. "Delete" will remove the article selection (including its information) completely.

If you would like to look up a article in the article list, you can use "Filter" as a shortcut to search for it. For more information on the Filter tool, visit Filter. Pressing "Insert" in the top right corner will direct the administrator to a form to add new articles.

Managing and adding articles

The complete list of store articles can be found under Content Management > Articles. If this is your first time in the Article section, you will notice the default articles left over from the installation. These articles can be used to experiment with and explore the OpenCart features before launching your store. You will eventually need to delete these articles to make room for your store's articles.

To delete the default articles:

  1. Check the box left of the "Image column" in the list. This should select all the articles on the page.
  2. Click the "Delete" button on the top right side.
  3. Press "OK" when a window pops up asking "Delete/Install cannot be undone! Are you sure you want to do this?".

Article Form

The format of the General tab is identical to the General tab when creating a product , with the addition of the Content Tags feature:

  • Article Title
  • Meta Tag Description: A summary to describe the product page to search engines.
  • Meta Tag Keywords: Similar to meta tag description, but asks for a single keyword to describe the product.
  • Description: Text that will describe this product on the product page, to be viewed by the customers in the store front of the shop.
  • Article Tags: A tag to describe the product to the customers. If a customer types in this tag in the search box found in the header, the product will be displayed in the search results.
  • Admin

  • Frontend

    • Download

    You can use the to providing weekly quotation, monthly quotation or or share any files you want. Simultaneously, you can assign a free file to any article, project portfolio, or photo gallery if you want.

    Go to: Extras » Blog Manager » Downloads

    Download List

    Download Form

    Assign download to blog post

    Comment manager

    Management comments from visitors.

    Go to: Extras » Blog Manager » Comments

    Comment List

    Comment Form

    Layout composer

    Layout Composer will be shown available position on column left and Installed Modules on column right, you just drag module and drop to the available positions, it's easy.

    Go to: Extras »Layout Composer

    How to use Layout composer?

    1 Select page layout (Default is Home page)

    2 Go to "Modules List", drag Installed module to layout position.

    3 Save

    Click to "trash icon" to remove module form layout.

    Click to "pencil icon" to edit module form layout.

    Image Manager++

    Support upload multi image at the same time and manage your images with much higher performance with standard Image manager.

    Image Manager++

    Notice: You can simultaneous upload maximum of 20 images.

    View access and upload log at tabs Access Log.

    Set access permission at tabs Access Setting.

    Keyword generator

    Gives the ability Automatic Generate Seo Keyword for Product, Category, Manufacturer & Information based different ways that you want, including: Prefix, Suffix, Page Extension based on ID, Model, Brand Name, Meta Tag Title...

    When you agree to use "SEO Keyword Generator", please "Enable" option "Replace standard SEO keyword", standard SEO keyword feature will be replace with SEO keyword generator feature, SEO keyword queries will be reduce to a minimum (at least 50% queries).

    This feature support for Standard Opencart controller and Enar Content/Blog controller.

    Important Notice:

    1 After configuration and save your rules, each time you add a new item, url alias (SEO keywords) will be created based on your rules. But the first time after setting the rules, please click to "Create" button to update the url alias (SEO keywords) for the group.

    2 Should clearly identify your friendly SEO url rules from the outset, avoid repeated changes, because this may affect the index results from the search engines (Google, Bing, ...etc).

    3If you encounter any problem with SEO keyword generator tool, simple way to fix that is "Disable" option "Replace standard SEO keyword", standard SEO keyword feature will work again.

    4 SEO keyword generator tool not support url alias (SEO keywords) for controller develop by 3rd party developer.
    If you encounter any problem with url alias (SEO keywords) for controller develop by 3rd party developer, please use standard SEO keyword feature, if the problem still exists, this is problem of self controller.

    Keyword Group Config

    You can set up rules for the group:

    • Product
    • Product Category
    • Manufacturer
    • Information
    • Content Category
    • Article
    • Author

    Modification editor

    Gives the ability to create, edit and delete modification override "scripts" for included files in a controller-based web application.

    Revolution slider

    Revo Slider is a premium multi-purpose slider for creating image galleries, content sliders, and mind-blowing slideshows with must-see effects.

    1 Preview: Click on the "Preview" button to preview this slideshow.

    2 Export: Click on the "Export" button to export this slideshow.
    Note: This function backup all your settings for this slideshow without backup the image file this slideshow, you need to store the images in this slideshow separately via FTP.

    Tip: You should store all the images in the same slideshow in one folder as: your_store_path/image/data/your_slideshow_name/
    you can upload or download images through Image Manager ++ exenstion.

    3 Edit: Click on the "Edit" button to edit this slideshow, you will be directed to "Revo Slideshow Editor" to customize this slideshow.

    4 Import: Click on the "Choose file" and choose your backup slideshow then click on the "Import" button to import your slideshow.

    5 Copy: Please check to the slideshow you want to copy and click "Copy" button), slideshow you choose will be duplicated.

    6 Insert: Click on the "Insert" button, a new theme with default settings is created and directed to "Revo Slideshow Editor" to design your slideshow.

    7 Delete: Please check to the slideshow you want to delete and click "Delete" button, slideshow you choose will be deleted.

    General

    • Title: Please enter your Slideshow Title.
    • Configuring the slideshow: Set up your own options or or skip this step, slideshow will use the default settings.

    Manager Slider

    Manager Layers

    Subscriber list

    Manager subscriber list.

    How to sent email to Newsletter Subscriber?

    Go to: Maketing »Mail

    Shortcode components

    At Extension » Modules , please select module with name: Δ - Shortcode components

    Click to: to add new Shortcode element, we have about 30 shortcode elements, each element need enter different content, but basically involves the following steps:

    Step 1: Select Shortcode element

    Step 2: Enter Module name

    Step 3: Go to bottom of page and enter Shortcode element data.

    Step 4: Save your module setting

    Extras » Layout Composer and assign recently added module to page layout you want.

    Categories

    Category Accessories

    Category Indoor Furniture

    Category Outdoor Furniture

    Contact Us

    Get In Touch

    Help

    Product By Category

    Product Tabs

    Quick Links

    Recent Posts

    Shop Menu

    Tag Cloud

    Vina Banner Wall

    Vina Newsletter

    Vina Newsletter Popup

    Vina Slide Wall

    Vina Social Share

    Vina View More

    Release log

    Initial Release - Version: 1.0.0

    • Theme Features

      • Create and store unlimited skins
      • Fully responsive & multiple layouts support
      • High compatibility with many fallback features for old browsers
      • Very detailed documentation with examples
      • Free updates & support
      • SEO friendly
      • Mega menu and Multi level menu
      • Product detail layout option
      • Product list layout option
      • Header and footer layoout option
      • Live theme editor
      • Product quick view
      • Product image zoom
      • Product image lightbox

    • Content managerment system

      • Content category (Multi-purpose: Content category, FAQs, Navigation custom content block)
      • Content article (Multi-purpose - display as: Project Portfolio, Content blog post, Photo Gallery)
      • Content author
      • Comment manager
      • Community Polls (multi polls activities)
      • Free download file (Multi-purpose: Quotations, guides manual or file any)
      • Service offer

    • Modules

      • Post by Category
      • Post by Type
      • Custom Category
      • Custom Html
      • Product Tabs
      • Product by Type
      • Filter Product
      • Product by Category

    • Extra tools

      • Layout Composer
      • Image Manager++
      • Keyword Generator
      • Modifications Editor
      • Banner Builder
      • Subscriber list

    • Compatibility

      • Working in Chrome, Firefox, Safari, IE9-11, Opera
      • Working in mobile browsers

    • Bonus features (Optional)

      • Compression HTML
      • Put stylesheet in body to head
      • Put all javascript to bottom
      • Compression stylesheet & javascript
      • Combine stylesheet & javascript to least number of files

    Credits

    We are extremely grateful for the people working on the projects below. These guys are making our lives much easier, thus we can focus on building high quality products.

    Third party credits

    Project Homepage Comment
    jQuery jquery.com The most popular JavaScript library for building complex web apps.
    JSMin crockford.com JSMin (php class) is a filter which removes comments and unnecessary whitespace from JavaScript files..
    Bootstrap getbootstrap.com Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
    jquery-slimscroll jquery-slimscroll A small jQuery plugin that transforms any div into a scrollable area.
    Google Fonts google.com/fonts Open-source fonts optimized for the web.
    elFinder elfinder.org Open-source file manager for web.
    FontAwesome fortawesome.github.io Font Awesome, the iconic font and CSS toolkit.
    owl-carousel OwlGraphic Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
    uniform uniformjs.com Sexy form elements with jQuery.
    elevateZoom elevateweb.co.uk A Jquery Image Zoom Plugin.
    revolution-slider revolution-slider The highly acclaimed slide-based displaying solution.
    transparenttextures transparenttextures.com Background pattern image for website.
    Demo Images Purchased from the digital market: Images used in preview are for demo purpose, not provided in the theme.

    Support

    If you get stuck...

    Before contacting us, please make sure that you:

    If you didn't find answer to your problem, please ask your question on the item discussion page or send us a private message from our Themeforest profile page (Search for the "Email Legendtheme" box on the bottom right - in this case we will reply via email).

    We can answer your support questions only in these ways (priority).

    IMPORTANT! For the fast troubleshooting, please send us detailed informations about the issue and make sure that you don't forget to send us your site url where you are using / want to use the item. Please note, that we cannot troubleshoot from screencast videos or screenshots.

    Please take some time until we respond (usually in 24 - 48 hours).

    Useful pages

    site you can find here...
    The website of the item demo and examples.
    Documentation Documentation online version.
    Support ticket Submit a Support ticket if you get stuck
    FAQ of the item. a detailed FAQ with answers for the most commonly asked questions and reported issues