Colibri Interactive Logo

Manual for Organic Web Shop Premium WordPress Theme

First of all: Thank you for purchasing one of our Premium WordPress themes! We really appreciate that and hope you enjoy working with it.

If you want to get news about themeupdates, new releases as well as other important news sign up to our Email newsletter or follow us at Facebook or Twitter.

Table of Content


About this manual

This document describes the abilities of the Organic Web Shop WordPress theme and helps you to set up the themedemo. Please read it carefully and post in our dedicated support forum at http://support.colibri-interactive.com if you have an unanswered question.

Setup: WordPress

Before you can set up this theme you need a working version of WordPress installed. For further information about how to set up WordPress please see the WordPress Codex Website.
The latest version of WordPress is available for download at: https://WordPress.org.


Setup: Theme

First you need to upload the theme files and then activate it.

To upload the files you can choose between uploading the files with a FTP application and the WordPress Uploader.

FTP Application
Upload the unzipped theme files via an FTP application to your server into your WordPress installation to /wp-content/themes.

WordPress Uploader
Alternatively, you can use the WordPress Uploader you'll find at Appearance > Themes > Add New > Upload Theme. Then click the browse button and select the theme zip file. After that click 'Install Now.

Please note: If you get the error that the style.css file can not be found you have uploaded the wrong zip file. Please make sure that you're uploading the theme zip file and not the "complete theme pack" zip file! If you've downloaded the theme pack zip file you need to unzip it first and use the theme zip file which is included.


Activate the theme
To activate the theme navigate to Appearance > Themes, hover the themes thumbnail and click Activate.

Themesettings

The theme settings give you the opportunity to chance the appearance of the theme and to customize it to your needs. Navigate to > Appearance > Customize to open the customization panel.

General Settings


Navigation


Header Settings


Color Scheme


Social Networks

Enter the full URL to your account to show a linked icon of the service in the header of your page.
Make sure you don't miss the http:// at the beginning of the URL, otherwise the link will not work! E.g: http://twitter.com/colibrithemes
Leave the field of a network empty to hide it's icon.

Custom Code


Shop Settings


Catalogue Settings


Footer Settings


Themedemo

To set up the themedemo you need to install three plugins. One is to import the content of the themedemo such as pages, the navigation and the products, one is to import the content of widget used in the themedemo, the third is to import the details to the customisation page - depending on the themedemo you choose to install.
Please install the WordPress Importer, the Widget Importer & Exporter and the Customizer Export/Import plugin. They are also recommended plugins of the theme and can be disabled and removed after the setup of the themedemo.

Democontent & General Settings
The democontent can be found in the "All files & documentation" version of the theme. You can redownload the theme at any time from your download page at Themeforest. Unzip that file and look for the folder "themedemo-content". Then pick the folder of the themedemo you want to import. If you're using a fresh WordPress with demo content you have some default widgets that we need to remove first. Navigate to > Appearance > Widgets and remove all widgets from all widget areas.

After the installation of the above mentioned plugins navigate to > Tools > Import and click on 'WordPress' in the list of import tools. On the next page click the browse button and select the content.xml file that came with the theme. Then click on 'Upload file and import'. Tick the checkboxes to download the media and assign the users to your one. Downloading all the media can take a while so please be patient.
Depending on your server speed and your server settings it can be that the import process takes longer that allowed. If the server stops the importing before it's successfully completed please restart the process untill all content has imported. Already imported content is usually skipped - however, in some cases duplicated content is possible.

Widgets
To install the widget content go to > Tools > Widget Importer & Exporter and click the browse button to select the widgets.wie file that came with this theme. Then click the 'Import Widgets' button.

To set the startpage and the blog page navigate to > Settings > Reading and click the radiobutton for 'A static page'. Then select the 'Home' page in the Front page dropdown and the page 'Blog' from the Post page dropdown. Then click 'Save Changes'.

Customisation Settings
Most default settings in the theme option panel are already set to the themedemo, but, depending on the themedemo you choose you need to adjust some colors and options. To do that navigate to > Appearance > Customize.
Then open the section Export/Import and select the maindemo-customiser-settings.dat or cleandemo-customiser-settings.dat file and tick the "Download and import images files?" checkbox. Then click > Import. If the importing of the customisation settings go wrong or you just don't want to do it, here are the most important settings:

Revolution Slider Slides
Import the Revolution Slider at >Revolution Slider

When you've imported the shop pages too and installed & activated the WooCommerce plug in for the shop make sure you assign the page "Shop" at > WooCommerce >Settings > Product tab > Display to the "Shop Page". Just select the page "Shop" from the dropdown.
The details to set up the rest of the WooCommerce can be seen here.

Setup of the navigation

This theme comes with four menus:
To set up the menu navigate to Appearance > Menus. Click the 'Create a new menu' button at the top and enter a menu name for the menu, than click Create Menu. After that you have to assign it to the positions you want it to appear at. If you're importing the themedemo content the mainmenu will also be imported and you only need to assign it to the Primary Menu position.

Use the Primary Menu location for your main navigation and the language switch for the language switch that is created by your translation plugin. Please note, the theme comes with an optimised version of the language switch for the very popular WPML plugin. If you are using another translation plugin you might need to customise the CSS.

To add pages to your navigation tick the checkboxes at the pages (in the 'Pages' Box) that you have already created. Then click the 'Add to Menu' button. To generate a sub-navigation element drag it below the parent element and a bit to the right. It will snap in as a child of the parent navigation element. See http://support.WordPress.com/menus/ for further details.

Setup of the blog

To set up the blog page navigate to Pages > Add New. You can name it as you like and give it any content. Then navigate to Settings > Reading, select 'A static Page' and select the page you have just created as 'Posts page'. If you've imported the democontent, a page named 'Blog' is already created and you only need to assign it as described before.

To add a new blog post navigate to Posts > Add New. Give it the name you like and insert your content. If you want to display an image in the list of posts add it as featured image. To set up the featured image click 'Set featured image' and select an image from your Media Library or upload a new one. Click 'Use as featured image' to use it as featured image for the blog post. It is best to use featured images with a dimension of at least 720px width.

To add a Rev Slider or Video add the Rev Slider shortcode or YouTube/Vimeo embed code in the field for the "Postheader Content". It will then replace a featured image if both are set.

Multilingual

The theme is prepared to be translated into different languages. It comes with a language switch anker as well as .mo and .po files for easier translation. For the translation itself you need a 3rd party plugin. We recommend to use the very popular and famous WPML plugin that we've used for the development too.
As there are hundreds of translation plugins available on the internet we can't optimise the theme for every single plugin. Please note that the following language setup instructions are only valid for the WPML plugin. However, for some other plugins it will be similar.

After you have installed the WPML plugin and activated it create a new navigation for each of the languages you want to use and set the up as a 'translated version' of your navigation in the default language. See here how to do that.
Next navigate to > WPML > Languages and scroll down to 'Language switch options'. Tick the checkbox for 'Display the language switch in the WP Menu' and select the navigation you have created preveously for your default language. (The menu on the language switch position.) Then save the settings.

You should now see the language switch in your frontend listing all available languages for the currently view site. Please note that you might not see all languages to select if you have set up WPML to hide the language selections for pages that are not translated. See the WPML documentation for further details.

WooCommerce

If you want to use the shop functionality of the theme you need to install the WooCommerce plugin. Read here if you don't know how.

Please set up the WooCommerce plugin according to its manual and make sure you've selected the right page (e.g. "Shop") from the "Shop Page" dropdown. You find this at > WooCommerce > Settings > Products tab > Display.

Furthermore, you need to set the pages for the cart page, checkout page and the terms and conditions. This can be done at > WooCommerce > Settings > Checkout tab. The only theme specific setting are the image sizes.

Image Sizes
To set the theme specific image sizes make sure you have installed the WooCommerce plugin. Then navigate to > WooCommerce > Settings, click the 'Products' tab and select the "Display" category. Set the following:

Catalogue Images: 240 x 240 - Check the 'Hard Crop' option
Single Product Images: 500 x - 500 Check the 'Hard Crop' option
Product Thumbnails: 90 x 90 - Check the 'Hard Crop' option

Please note, that WordPress generates images in a new size only when they are uploaded. This means, that when you import images from an existing system or when you install the theme on an existing system you need to regenerate all shop images in the new size. You can easily do that with a plugin like this: Regenerate Thumbnails.

Currency switch

To use the currency switch for your WooCommerce shop you need to use the WooCommerce plugin as well as the WooCommerce Multilingual. Please have a look if the WooCommerce Multilingual asks you to set up further plugins.
After you have installed and activated all plugins go to > WPML > WooCommerce Multilingual and scroll down to 'Manage Currencies'. Select the 'Multiple currencies, independent of languages' option and add the currency and exchange rate. Then save. The currency switch automatically appears in the frontend as soon as the required plugins are installed and activated.

Plugins

To get the most out of the theme we recommend you to use the following plugins. You will also find a notice in the backend that let's you easily install all the required and recommended plugins at once.


Installing Plugins

To install a plugin go to > Plugins > Add New. If you already have a file with that plugin, click Upload at the top. Then hit the Browse button, select the .zip file you've downloaded and click 'Install Now'.
After the file has been uploaded to your server you have to activate it by clicking Activate.
You find the installed Plugins at > Plugins > Installed Plugins. If you want to remove a Plugin you have to click the Deactivate button of that plugin first. After that a Remove button appears.

Widgets

Widgets are little items you can use to display all kind of content in specified areas of your website without writing a single line of code.
Navigate to Appearance > Widgets and drag & drop the widget you like onto the area on the right you want it to appear at. (If accessibility mode is disabled.) Otherwise use the 'Add' button.

Existing widget areas
This theme comes with nine widget areas.
The startpage has six of the nine widget areas. One below the other. The other three are located in the footer of every page and in the general sidebar as well as the dedicated shop sidebar.


Shortcodes

Shortcodes are a handy way to present and 'pimp' your content. They let you create column layouts for your text, let you create buttons and all sort of other things. To do that you need the themespecific plugin "Shortcodes" that can be downloaded via the required plugins panel in the backend.
For information on how to install a plugin see Installing the plugins.
A full list of the available shortcodes and its look can be found in the themedemo.


If you have questions that are not answered in this manual post in our Support Forum.