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
- Disable Responsive Version
Tick this checkbox to disable the mobile optimised version of the theme. You will then show your website visitors only the desktop version of the theme no matter what device they are using.
- Enable Right-To-Left Design
Tick this checkbox to switch the theme to the Right-To-Left version. You only need this when you're writing from right to left!
- Disable Fullwidth Slider on Homepage
Tick this checkbox to display the slide on the homepage not fullwidth and inside the design grid.
- Disable Content Background
Tick this checkbox to remove the background behind the content area.
- Disable Grunge Background
Tick this checkbox to remove the grunge party in the background which overlay the background image.
- Disable Logo
Tick this checkbox to hide the logo.
- Enable Sticky Menu
Tick this checkbox to enable a menu that "sticks" to the top of the browser even when scrolling down.
- Fav Icon
Upload your sites fav icon here which is used e.g. in the bookmark of the browser.
- Logo
Upload your sitelogo here.
- HiDPI (Retina) Logo Width in Pixels
Enter the width in pixels if you've uploaded a HiDPI Version of your Logo. E.g. upload a Logo with 400 x 150 and enter 200 for the width to show it scaled down and crisp on retina devices.
- HiDPI (Retina) Logo Height in Pixels
Enter the height in pixels if you've uploaded a HiDPI Version of your Logo. E.g. upload a Logo with 400 x 150 and enter 75 for the width to show it scaled down and crisp on retina devices.
- Hide Background Image
Tick this checkbox to hide the sites background image.
- Enable Background Image Cover
Tick this checkbox to stretch the background image to cover the browsers full width.
- Background Image
Upload your sites background image.
- Background Color
Set a solid background color for your site. Please note that a set background image will cover the color.
Navigation
- Language Switch
Assign the Menu that holds your available languages
- Custom Header Menu
An optional menu you can use to show items that you don't want in the main menu
- Shop Menu
Assign all the pages that belong to the shop like, 'My Account' and 'Wishlist'
- Main Menu
The mainmenu of your page. Assign the most important items here.
Header Settings
- Enable Header Background Color
Tick this checkbox to set the a background color to the header.
- Header Background Color
Set the background color via colorpicker. Make sure the checkbox 'Enable Header Background Color' is ticked
- Enable Boxed Header
Tick this checkbox to display the header in boxed layout. Untick to display it full-width.
- Enable Header Bottom Shadow
Tick this checkbox to show a box shadow at the bottom of the header.
- Sticky Menu Background Color
Set the background color for the sticky menu that appears when you scroll down.
- Sticky Menu Background Transparency
Set the transparency for the sticky menu background color. It appears when you scroll down.
Color Scheme
- Text Color
The default color of your text
- Keycolor 1 to 7
Most of the elements of the theme are grouped and uses the same colors. Use this option to change the colors of all elements in this group.
- Content Background Color
The background color of the content area
- Testimonial Text Color
The text color of the testimonials that can be used with the testimonial plug in and the Visual Composer.
- Testimonial Background Color
The background color of the testimonial container that can be used with the testimonial plug in and the Visual Composer.
- Infobox Text Color
The text color of the infobox that can be used for notifications within the content. Create a 'MessageBox' element with Visual Composer and add the CSS class ci-infobox in the 'Extra class name' field.
- Infobox Background Color
The background color of the infobox that can be used for notifications within the content. Create a 'MessageBox' element with Visual Composer and add the CSS class ci-infobox in the 'Extra class name' field.
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
- Custom CSS
Paste custom CSS code that you want to get included right in front of the closing body tag at the end of all pages. Don't forget to wrap it in style tags!
<style>
YOUR CSS CODE
</style>
- Google Analytics Code
Past the complete Google Analytics Javascript Code (or the tracking Code of any other service). It will be inserted after the custom CSS block right before the closing body tag on all pages.
- Custom Code
Past any other custom code that you want to get inserted on all pages right after the custom CSS and Google Analytics Code on every page before the closing body tag.
Shop Settings
- Hide Categories on Productstream
Tick this checkbox to hide the display of the categories for products. Categories will then only be listed in the detail page of a product. Use this option if your have very long product names and need more space on the shop stream page.
- Hide Productimages
Tick this checkbox to hide all the product images. Use this option if you don't want to use product images in your shop.
- Enable Long Price Mode
Tick this checkbox display the prices not next to the product name and category on the shop stream page but one line below. This allows you to enter much longer amounts and currency symbols. By default the theme is optimised to display a max of 5 signs. E.g. "$99,50".
- Display Productdetails Fullwidth
Tick this option to display the products description, review etc tabs and the upsell and related products fullwidth, on the product detail page and not only in the right column.
- Hide Productbox shadow on Productstream
Tick this option to hide the shadow of the box of a product on the shop stream page.
- Show Productbox border on Productstream
Tick this option to display a 1 pixel solid outline around the box of a product on the shop stream page.
- Productbox Bordercolor
Select the color of the border around the productbox.
- Number of related products to display
Set the number of related products you want to display on the product detail page. Set 0 to hide the section completely.
- Number of products per page
Set the number of products you want to display per page in your shop.
- Height in px of product meta
Enter the height for the product meta container in pixels. Enter only a number like '60'. No additional unit is allowed!
Increase this value if your products have multiple lines of product name or category name which breaks the product float on the shop stream page.
Catalogue Settings
- Hide Cart button in header
Tick this checkbox to hide the cart button in the header (top-right).
- Hide "Add to Cart" button on product page
Tick this checkbox to hide the "Add to cart" button on all product detail pages.
- Hide "Add to Cart" button and price on Stream page
Tick this checkbox to hide the prices and the moving cart to quickadd the product to the cart on the shop stream page.
- Hide prices (Stream page + Widgets)
Tick this option to hide the price of the products in all widgets and the productboxes on the shop stream page.
- Hide price on product detail page
Tick this option to hide the price on the product detail page.
Footer Settings
- Number of columns in the extended footer
Select the number of columns you want in the extended footer for your widgets. Select 'none' to hide the extended footer completely
- Number of columns in the footer
Select the number of columns you want in the footer for your widgets. Select 'none' to hide the footer completely
- Enable Extended Footer Background Color
Tick this option to enable the option to set the color for the background of the extended footer.
- Extended Footer Background Color
Select the color for the background of the extended footer.
- Footer Headline Color
The color of the footer Headline
- Footer Background Color
The color of the footer background. Make sure no background image is set if you want to use the background color.
- Footer Background Image
The background image you want to use in the footer. It's repeated vertically and horizontally.
- Footer Text Color
The color of the footer text
- Disable Copyright Bar
Tick the checkbox to hide the copyright bar below the footer area.
- Copyright Text Color
The color of the copyright text
- Copyright Background Color
The color of the copyright background area
- Payment gateway logos
Tick the checkboxes of the payment gateways that you want to display as a logo in your copyright bar
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:
- Upload the favicon
- Upload the logo
- Set the width to 235
- Set the height to 44
- Upload the background image
- Assing the navigations to it's position
- Assign the 'Front Page' to "Home" and the 'Post page' to "Blog"
- Add the social network account URLs if required
- Add the following text to the "Copyright Text" in the Footer Settings: A Premium WordPress Theme by <a href="http://colibri-interactive.com" target="_blank">Colibri Interactive</a>
- Tick the payment gateways you offer
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:
- Language Switch
Assign the Menu that holds your available languages
- Custom Header Menu
An optional menu you can use to show items that you don't want in the main menu
- Shop Menu
Assign all the pages that belong to the shop like, 'My Account' and 'Wishlist'
- Main Menu
The mainmenu of your page. Assign the most important items here.
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.
- Colibri Interactive Slides
A theme specific plugin to display the slides on the homepage.
- Colibri Interactive Shortcodes
A themespecific plugin to use the Colibri Interactive shortcodes.
- Revolution Slider
A very popular slider that comes free with this theme.
- Visual Composter
A very handy plugin that lets you creat your content with drag & drop. Comes free with this theme.
- WooCommerce
A plugin to implement a webshop into your existing WordPress installation. Download
- YITH WooCommerce Wishlist
A plugin to add a wishlist feature to your woocommerce shop. Download
- WooCommerce Multilingual
A Plugin that lets you create a currency switch together with the WPML plugin. Download
- WPML Multilingual
The state of the art plugin when you need to translate your WordPress site. Download
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.
- Header Left
Widgets appear always on the left side of the header.
- Header Right
Widgets appear always on the right side of the header.
- Blog
Widgets appear on the blog pages only.
- General
Widgets appear on all 'general pages' in the sidebar. General pages are pages that doesn't belog to the shop, portfolio, and blog.
- Portfolio Single
Widgets will appear on the portfolio detail pages only.
- Shop
Widgets will appear on the shop sidebar only.
- Checkout Sidebar
Widgets will appear on pages with pagetype 'Checkout sidebar' only.
- Extended Footer
Widgets will appear at the end of every page above the footer.
- Footer
Widgets will appear at the end of every page in the footer.
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.