Oceanic Store

  • Created: 2012.05.28
  • Latest Update: 2018.11.16
  • Author: Kos

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Features

  • Responsive Design
  • Google Web Fonts
  • Unlimited number categories of top-level
  • boxed and full width layout
  • 14 Full Layered PSD files
  • Great documentation
  • Custom footer (Multi language)
    • Section Contact Us
    • Column About Us
    • Column Shop news
    • Column Twitter
    • 8 Social Buttons (Facebook, Twitter, RSS , Dribbble, Vimeo, Linked In, Youtube, vk.com)
  • Compatible with all major browsers (Chrome, Firefox, Edge, Safari, Opera, IE11)
  • Grid / List products view
  • Used HTML5 and CSS3
  • Easy to install and customize

Changelog

2018.11.15 — Version 1.1.0 (Latest)

  • Update to Opencart 3.0.2.0;
  • Fix: buttons are not working on checkout page on iOS devices (iPad/iPhone);
  • Dropped support for Internet Explorer version 10-;
  • Updated some JavaScript libraries.

2013.08.17 — Version 1.0.8

  • Added: Support Twitter API 1.1;
  • Update to Opencart 1.5.6.

2013.02.23 — Version 1.0.7

  • Added two social buttons YouTube and Vkontakte (vk.com);
  • Fix: news not saved in a module Oceanic Custom Footer;
  • Fix: not updated basket when adding of goods in different currencies;
  • Update to Opencart 1.5.5.1.

2012.12.12 — Version 1.0.6

  • Added multi store support for module "Oceanic Custom Footer".

2012.11.20 — Version 1.0.5

  • Fixed errors displaying quick shopping cart.

2012.08.29 — Version 1.0.4

  • Updated to Opencart 1.5.4.1.

2012.06.07 — Version 1.0.3

  • Added support for IE7.

2012.06.04 — Version 1.0.2

  • Added ability to change theme settings from a store;
  • Added two color settings;
  • Fixed css bugs.

2012.05.31 — Version 1.0.1

  • Fixed language bags in Admin Panel;
  • Fixed broken buttons "Compare" and "Wish list".

2012.05.29 — Version 1.0.0

  • Release.

Installation

Create a backup before installing theme.
  1. Download and unpack Oceanic Store. The file structure will look like this (Fig. 1);
Fig. 1) The file structure of the Oceanic Store package.
  1. Open the Opencart admin panel and go to Extensions (1) -> Installer (2) and click to Upload button (3) (Fig. 2);
Fig. 2
  1. Select oceanic-store.ocmod.zip from the unpacked Oceanic Store package and wait for the installation process to complete (Fig. 3);
Fig. 3
  1. Go to Extensions (1) -> Extensions (2) -> Themes (3) -> Install (4) (Fig. 4);
Fig. 4
  1. Then click to Edit button (1) (Fig. 5);
Fig. 5
  1. Select Enabled status (1) and click to save button (2) (Fig. 6);
Fig. 6
  1. Go to System (1) -> Settings (2) -> Edit (3) (Fig. 7);
Fig. 7
  1. Select Oceanic Store theme (1) and click to save button (2) (Fig. 8);
Fig. 8
  1. It's all :)

Theme Settings

The theme settings contains a four tabs:

  • Products - here your can set "Default Items Per Page" and "List Description Limit";
  • Images - here your can set image sizes (by default the correct image sizes are already set);
  • Theme Settings - this tab contains the parameters responsible for appearance (colors, fonts, etc.);
  • Custom Footer - Custom Footer related parameters.

In this section, we will only look at the Theme Settings tab.

How to enable live editing?

  1. Go to Extensions -> Extensions -> Themes -> Edit;
  1. Select Yes for the parameter Show In Store and click to save button;
  1. Go to storefront and click to the icon in the left side;

Module Settings

This section describes the recommended settings for built-in Opencart modules.

If the module position is:

  • Content Top or Content Bottom then the recommended image sizes are 190x190.
  • Column Left or Column Right then the recommended image sizes are 40x40.

Slideshow

Recommended image sizes: 940x360.

HTML Structure

This theme is a fixed layout with two columns (main content with left sidebar or right sidebar). All of the information within the main content area is nested within a div with an id of "content-center". The sidebar's (column #2) content is within a div with an id of "content-left". The sidebar's (column #3) content is within a div with an id of "content-right".The general template structure is the same throughout the template. Here is the general structure.

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

#content-right a {
    color: #ff0000;
}

CSS Files

Here is a list of CSS files used in this theme:

  • css/markup.css - it is main css which control structure and columns of website;
  • css/elastislide.css - carousel of images;
  • css/flexslider.css - styles for image slider;
  • js/colorbox/css/colorbox.css - styles for live editing the theme settings;
  • vendor/jquery-ui-1.12.1/jquery-ui.min.css - jquery ui style;
  • vendor/jquery.colorbox-1.6.4/jquery.colorbox.css - here you can change the style of popup image viewer;
  • vendor/jquery.flexslider-1.8.0/flexslider.css - base styles for image slider;
  • vendor/colorpicker/css/colorpicker.css - style for color picker;
  • vendor/jquery-ui-timepicker-addon-1.6.3/jquery-ui-timepicker-addon.min.css - styles for time picker.

The markup.css contains all the basic styles for the pages. The file is separated into sections, for example:

/*
------------ BODY ------------
*/

    some code

/*
------------ LAYOUT ------------
*/

    some code

/*
------------ MENU ------------
*/

    some code

Javascript

Here is a list of javascript files used in this theme:

  • js/main.js - used to display the effects;
  • js/tabs.js - tabs plugin.
  • js/colorbox/colorbox.js - for live editing the theme settings;
  • vendor/colorpicker/colorpicker.js - jQuery plugin for adding color selection features;
  • vendor/jquery.colorbox-1.6.4/jquery.colorbox.min.js - popup image viewer;
  • vendor/jquery.cycle-1.7.0/jquery.cycle.js - simple plugin to switch banners;
  • vendor/jquery.elastislide/jquery.elastislide.js - carousel plugin;
  • vendor/jquery.flexslider-1.8.0/jquery.flexslider.min.js - slider plugin;
  • vendor/jquery.tweet/jquery.tweet.min.js - twitter widget;
  • vendor/jquery-3.3.1/jquery.min.js - popular javascript library to manipulate DOM and etc.
  • vendor/jquery-ui-1.12.1/jquery-ui.min.js - set of UI controls for jQuery;
  • vendor/jquery-ui-timepicker-addon-1.6.3/jquery-ui-timepicker-addon.min.js - jQuery UI plugin for adding time selection features.

PSD Files

Oceanic Store package includes 12 different PSD pages:

  1. Home (Index) - Home.psd
  2. About Us - AboutUs.psd
  3. Shopping Cart - Cart.psd
  4. Checkout - Checkout.psd
  5. Contact Us - ContactUs.psd
  6. View products in a grid - Grid.psd
  7. View products in a list - List.psd
  8. Account Login - Login.psd
  9. Order Information - Order.psd
  10. Order History - Orders.psd
  11. Product view - Product.psd
  12. Sitemap - Sitemap.psd

and 2 special pages:

  1. Full layout - FullWidth.psd
  2. Mobile layout - Mobile.psd