Fortuna – OpenCart 2

Installation

Fortuna is an advanced and beautifully designed Premium theme for OpenCart new version 2.0.1.x.

The package contains one custom module, which controls the functionality added to OpenCart by Fortuna.

All of this custom functionality is controlled by the admin area. You don’t need to edit all of the settings to get started with the shop, the default parameters are just fine.

Fortuna has been designed to take advantange of the latest OpenCart features. If you plan to upgrade from OpenCart v.1.5.x follow the OpenCart recommendations and BACKUP YOUR SITE FIRST

Before installing this theme, it is assumed that you have working opencart installation. If not, please refer to the official documentation.

Upload theme files

From your Themeforest account download and unzip the package “…Fortuna-responsive-and-clean-opencart-theme.zip”.

Upload the contents of folder OpenCart 2.0.1

Inside the folder with the right version you will find four directories: admincatalogimage and vqmod. Upload those folders to the root directory you have installed OpenCart in.

Don’t worry, it won’t replace any core files 🙂

Install Vqmod

Fortuna makes use of plugins to add custom features. These plugins need Vqmod installed on your site.

The theme package already include vqmod. So, just visit yoursite.com/vqmod/install to run the installer. That’s it!

Theme activation

Log in the OpenCart administration and activate the theme System > Settings > Store tab > Template (third row)

Also, in this tab make sure Default layout is selected.

Fortuna theme module installation

Go to Extension > Modules > Theme Options (Fortuna).

There you must install (click on the ‘install’ link). This module will ONLY work with Fortuna theme.

Then enable (click on ‘edit’ icon to change the status to “enabled” and then click ‘Save’) the ‘Theme Options (Fortuna)’ module.

IMPORTANT – If your admin panel language is other than English…

This module includes English language files. If you want to use your admin panel in a different language, you will need to copyadmin/laguage/english/module/fortuna.php to admin/laguage/YOUR_LANGUAGE/module/fortuna.php.

Then, open fortuna.php from your own language folder and make the required translations if you wish. Otherwise, leave it in English, you won’t have any problems.

The theme version is indicated in the header module when you edit the settings. This is the theme version, not OpenCart version.

Now the template should be activate and you should see the new design on the frontend.

Image size adjustment

Go to your System > Settings, select the Image tab and adjust the image settings with the following recommended values:

Featured, latest, bestsellers

For other modules, such as featured productslatest productsbestsellers, etc. adjust the image settings with the following recommended values:

To preserve the elegant design when you add modules to the layout (Bestsellers, Latest, Featured, Specials, etc.) you should choose ‘column left‘ or ‘column right‘ as their position, but not both in the same layout.

If you want to display one of these modules in carousel format, the limit should be greater than 4 to get the slide effect. And enable the option as shown here

There are layouts wich do not support left of right positions, such as Cart, Checkout and Login.

Category Accordion

To display the whole list of categories in accordion format, install and enable the module “Category Accordion”. It works the same way as the default Category module.

1. Enable the module in Extensions > Modules > Category Accordion and save.

2. Click on the link ‘here’ on top of the modules list

link_to_layouts

3. On the Layouts list edit Category and use these values

On your frontend the result is:

Category Accordion

Tabbed Products

If you want to save space and show more products to your customers, install and enable the module Tabbed Products. It can display Latest, Featured, Bestseller and Special products.

It’s possible to configure the options for each tab and instance of the module.

On your frontend the result is:

Banners Carousel

First, create another group of banners in System > Design > Banners.

Then, if you want to place banners at the bottom like the demo site, use the following settings in carousel module:

carousel_settings

Carousel enabled

 

carousel_frontend

Update

To update the theme, grab the new package from your Themeforest account. On the Downloads tab the latest version will be always available.

Then, upload again the files to your server replacing the old ones. And make sure to save again your settings in the Fortuna Theme Options module.

If a new feature has some requirements it will be explained in the release.

Theme Options module

Fortuna ships with one module with some options you must take a look at. In order to get the most from this theme, read carefully the descriptions and instructions below.

theme_options

Layout

General layout

By default Fortuna has a responsive layout but you can choose additional options

Main Layout

Category

Rollover images

Swap image effect. This feature requires vQmod and the xml files included in the theme. They should be installed by default

rollover_images

Subcategories

The subcategories (Refine Search)will display as links by default, you can hide them or display them as thumbnails.

subcategories

Product details

Select if you want to display your product details in tabs or accordion format

product_details

Products Image Zoom

Add a cool zoom effect to your product images.

This feature requires vqmod

Cloud Zoom is integrated in the theme. If you want to display your product images with this beautiful effect, just check this option.

cloud_zoom

This is the result on your site:

Cloud zoomCloud Zoom active

Quick View

Here you can configure the Quick View window

Screen Shot 2015-01-31 at 12.43.47 AM

Extras

Enable/disable the Sale tag on your special products and Wishlist and Comparison buttons

extras

Carousel

Check he modules you wan to display as carousel. If unchecked if will be displayed as static boxes.

carousel_mod

If you want automatically rotate the carousel check the following option

carousel_autoplay

Backgrounds

Skins

There are 3 predefined skins:

  • Default. A clean style with a border around the main content.
  • Dark. A version with the body in dark color and central content in white.
  • All Black. A completeley black version

Choose one of those skins.

Select skinSkins

Background/Patterns

In the Background/Patterns section you can select a pattern from the default lis or upload your own pattern or full background image.

Images will be used in the following order:

  1. Single background image, if not present then
  2. Custom pattern, if not present then
  3. One of the default patterns if selected, else
  4. None

patterns

Full page background

If you want to use a full background covering the whole page there’s a new option:

full_bg

Colors

If you enable this option, your selected skin will be overwritten with the changes you make here.

custom_colors

Feel free to try different combinations and personalize your own site. The first time it will load the colors from the default theme.

If you want to return to default value, just clear the desired field.

custom_color_options

NOTE: Change the SALE text to other languages. Copy catalog/laguage/english/module/fortuna.php to catalog/laguage/YOUR_LANGUAGE/module/fortuna.php. Then, open fortuna.php from your own language folder and make the required translations.

Menu

This is the mega menu configurator. All options are pretty straightforward.

The tag and  fields

tag_bg

will produce this result on the front end

tag_frontend

If you see some error messages under the Brands and Information links it means there’s a problem with vQmod. Check that all the .xml files included in the theme are on your server and that other extensions aren’t in conflict.

Fonts

If you want to speed up your site use one of the common fonts instead of the fonts from Google.

fonts

The default fonts are indicated in case you want to switch back to the original style

Options to change the header look.

Its default position is center, but you can move the logo to the leftlogo_position

By default a only a search icon is displayed on the header. But you can show a regular input search box if you want.

search_box

Footer

Here you can change information displayed on the site’s footer.

You can point to your social network profiles. Just those options you write will show in frontend. Fortuna doesn’t overload your shop with multiple posts from Facebook or Twitter.

It has been designed to make your site more profitable and lightweight.

Social

You can display a Facebook Like button on the footer. Paste everything after www.facebook.com/.

For example, if my Facebook page is at www.facebook.com/everthemes I need to paste everthemes in the box.

facebook

 

If you want to show an additional Facebook icon check the box.

Also, include links to other social profiles…

social_icons

Advanced Slideshow (Revolution Slider)

Fortuna includes the fantastic Revolution Slider in an additional module called Advaced Slideshow – Fortuna.

Setup

Install and enable the module Extensions > Modules > Advanced Slideshow. If you enable this slider disable the default Slideshow module.

adv_slider_status

Number of slides

Choose the number of slides and elements on each slide

NOTE: Only enable the number of slides you need otherwise it will slow down the module.

slides_qty

Add slides

You can upload one banner for each language

slide_banner

and place a link for each one, too.

slide_url

Slide elements

With each slide you can add additional elements (images, text, video, custom HTML)

Images

For images just select the images and upload as usual.

element_image

Video

For video paste the full URL from YouTube or Vimeo and it will be extracted automatically.

Copy

YouTube URL

… and paste

element_video

 

Text or HTML

Put any text with HTML tags. For example, if you want to add a button using predefined styles:

<span class ="button green">BUY NOW</span>

Change the green color with your preferred one. Available colors: green, blue, red, orange, darkgrey and lightgrey.

element_html

Elements configuration

Choose a style for the content. Some styles only will appear if yo use Text or HTML

element_style

Start is how many milliseconds after the banner is loaded this element will appear

element_start

The final position of the element (image, text or HTML) on the slideshow. Set these values to 0 if you add a video.

element_position

Normal Slideshow

If you don’t want to use the Revolution Advanced Slideshow you still can use the default slideshow function from OpenCart.

Bear in mind that this slideshow doesn’t support multiple language, custom HTML or video.

Group of banners

First, go to System > Design > Banners.

Insert a new group of banners. Use a related name as “Slideshow”

Add as many banners as you want. The recommended banner size for a full width slider is 1140 x 380 pixels.

regular_slider

Slideshow module

Then, go to Extensions > Modules > Slideshow.

Select the banner group you created in the previous step and adjust the image settings with the following recommended values:

slide_settings
Now your slideshow is displaying on the frontpage of your site.

Extensions

You can add new functionality to your site activating some extensions. Note that you need the xml file of the vqmod extension on your server.

If you don’t have vqmod installed get it here http://code.google.com/p/vqmod/ and follow the instructions.

Advanced customization

NOTE: It’s highly recommended to install the vqmod extension custom_body_classes.xml

Custom CSS

Almost all design changes can be acomplished using CSS. To make custom changes to the theme and keep the update process easy, use the custom.css file. It’s on catalog/view/theme/fortuna/stylesheet/

Activate the custom stylesheet checking the box:

custom_stylesheet

 

If your changes are minimal and you don’t to touch any file on your server, paste your custom code in the box below (and deactivate the above option).

custom_css

Custom JavaScript

If you need to include a JavaScript snippet on your site like a cookie policy script you can do it easly with the following option.

Don’t forget to include the <script> </script> tags
custom_js

HTML structure

Column positioning is based on the great Bootstrap Framework with responsive layout.

Code is well commented so you can easily make your changes (if any is needed).


CSS files and structure

List of CSS files used in Fortuna:

  • bootstrap.min.css – Base stylesheet from Bootsrap Framework
  • stylesheet.css – Fortuna main stylesheet
  • stylesheet-responsive.css – Media queries up to 960px
  • stylesheet-responsive-large.css – Media queries for large screens >1200px
  • stylesheet.rtl.css – Stylesheet for RTL languages
  • custom.css – Put here your own CSS code
IMPORTANT! To add your own styles, create /catalog/view/theme/fortuna/stylesheet/custom.css. This way your customizations will be preserved in future upgrades.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file (use Firefox extension called ‘Firebug’ to do that or Chrome/Safari inspector), and then scroll down until you find the appropriate style that needs to be edited.

The structure of the CSS file is marked by comments, indicating the sections of the theme.

If you are new to CSS, here is a good starting point http://www.csstutorial.net


Javascript code

Fortuna includes the following libraries:

  • bootstrap.min.js
  • jquery.themepunch.plugins.min.js
  • jquery.themepunch.revolution.min.js
  • modernizr.full.min.js
  • respond.min.js
  • cloud-zoom.1.0.3-min.js
  • selectivizr.min.js
  • jquery.flexslider.min.js
  • camera.min.js
  • jquery.validate.min.js
  • jquery.ui.totop.js
  • jquery.dcjqaccordion.js
  • jquery.easing-1.3.min.js
  • custom.js (put your own code here)

Sample data

Sample data from the demo site.

  1. Run the SQL file from System > Backup/Restore.
  2. Upload the data folder to your image directory replacing the existing folder.

Changelog for OpenCart 2.x series

Ver. 1.5.5

Release: 12/03/2014

  • Added OpenCart 2.0 compatibility

Still don’t have Fortuna theme?

Get theme now

Short URL: http://goo.gl/1SqBqw