360° WEB Development

Electro Opencart 3 theme Documentation

 

Install

 

Step 1. Extract theme zip file. There is a folder called “upload” and a zip file “electro.oc3x.ocmod.zip”. Upload all content of upload folder to your opencart root directory. *Not the “upload” folder itself, but the contents of that folder.

Step 2. Login to your opencart admin and navigate to “Extensions>Installer” on the left sidebar, hit “Upload” Button and upload the “electro.oc3x.ocmod.zip” file.

 

 

Step 3. Navigate to “Extensions>Modifications” on the left sidebar and hit the refresh button on top right.

 

 

Step 4. Navigate to “System>Settings>Usergroups” on the left sidebar, select your admin usergroup (eg. Administrators) and click “Select All” for both “Access Permission” and “Modify Permission”. Then click save button on top right.

 

Step 5. Navigate to “System>Settings” and click the edit button on your store to open settings. Finally, select electro theme on “Theme” Section and save.

Import Demo

Step 1. Backup your database.This is highly recommended. Go to “System>Maintenance>Backup” on admin  sidebar and click the “Select All” button. Then click on “Export” to download the backup.

Important: Demo import will delete any layout modules (not installed modules), so backup is important.

 

Step 2. Click on electro menu on admin sidebar and go to “Import Demo” tab, select the demo that you need to import and hit “import” button. The process will take seconds.

 

 

Step 3. Go to admin dashboard and click on gear button on top right, then click on both refresh buttons for theme and SASS.

 

 

Step 4. Since demo is imported, moldues are imported for each layout (home, category etc.) you need to edit each module adding your products, banners etc. To do that, go to “Design>Layouts” and edit modules on each layout by hitting the blue pencil button. An important notice here is that electro theme has updated the layouts and there is also “Top” and “Bottom” section for each layout.

Modules

Electro theme comes with tons of features and modules.

Modules:

All electro modules can be found on “Extensions>Modules” page on admin panel.After creating a module, you must add it to a layout (like homepage) on “Design>Layouts”.

 

Menus:

Electro menus can be found on “Extensions>Modules” page on admin panel.After creating a menu, assign it on theme panel to a section (like header or footer menu).

 

Banners & Sliders:

Banners and Sliders can be created on “Design> electro Banner” and “Design> electro Slideshow” pages on admin panel and then assigned to a module “Extensions>Modules>electro Banner” or “Extensions>Modules>electro Slideshow”.

 

Demo import will automatically create the menus, modules and sliders the electro demo imported.

 

 

 

Header

 

Header Options

Electro theme comes with top bar, top tabs and 8 headers to choose. On theme panel, you cah choose to show or hide top bar, enter top bar text and link and choose header.

 

Menus

Main menu:

Electro theme, can automatically create mega menu or drop down menu from categories and show information pages and contact on menu also. Categories must have checked the “Top” checkbox in order to be shown. To do that, edit your category, go to “Data” tab and check the “Top” option for each category. Beside categories, information and contact that can be added aytomatically, you can add your own menu items.

To Menu:

The top menu, is shown on to bar, you can create a top menu and link it on theme settings.

Secondary menu:

Secondary menu is icons/text menu shown on header, you can create a top menu and link it on theme settings.

Veritcal menu:

Some headers offer vertical menu also, you can enable it and make it expanded on homepage.

Mobile menu:

Mobile menu logic is same as main menu. You can add categories, information, contact and also create more menu items. On some headers, mobile menu can be added to desktop header too.

 

Language & Currency:

You can enable or disable language and currecy (shown on top bar)

 

Login & Social login:

Electro uses a fast and easy login system for Opencart. Login/Register button is shown on top bar and user can login directly from side login menu. Social login is also supported using google login or facebook login.

PWA

Progressive Web App or PWA, is an application (APP) that can be installed directly from browser. Electro theme offers PWA and configuration is very easy.

You can configure PWA settings on Theme panel adding your App name, description and color. For APP icon, theme uses the Logo set on opencart settings.

PWA is not supported by all browsers, but almost all modern browsers support it. On google chrome, installation is much faster.

 

After configuring the settings, PWA APP install button is displayed on footer (for supported browsers)

Pressing that button Chrome browser will ask you to install the app.

 

 

For Firefox, installation is different, Firefox does not support install prompt, you need to click on Firefox menu and click the “Add to home screen” option on mobile.

 

 

 

Contact Page

 

Electro theme cones with 2 contact page styles, map on top and map on side. You can change the option on theme panel. Also you can add your map embed code.

 

 

MAP ON SIDE:

 

 

MAP ON TOP:

 

 

Footer

 

On theme panel footer settings, there are options to show or hide newsletter section (footer top), show logo, show secondary menu and select menu. Menu must first created on “Extensions>Modules>Electro secondary menu”.

Social icons can be also enabled my adding the link on each social network. To disable a social network, just leave empty the link section.

Footer menu (footer 3 columns) can be added also for each column. Payment icons can be seleted after creating them on “Design>Electro Banner” Section. Finally you can enter your copyright text that is HTML enabled.

Product Page

Product page has 2 option for displaying the product tabs (description, reviews, Specs). Expanded or none. Expanded tabs means that all tabs will be shown at first pace, second option means that tabs will be displayed as normal tabs (click each tab to show).

Product page also has 2 styles. Style with sidebar and without sidebar. Each style is aytomatically activated if sidebar is active or not.

Category Page

You can set to show or not the subcategories on top on each category page.

Theme Colors

Electro theme colors can be easily changed on theme panel. Set your color for Top Bar, Header and main color.

SEO & Performance

Electro theme comes with powerful SEO and Performance features. OpenGraph, Lazy Load images, PWA and WebP Compression.

These features can be easily enabled on theme panel. NOTICE: WEBP is an important feature but if enabled, all the images on server will be also created in webp format, this means that you may need disk extra space on server if you have many many products. Also when you visit the page or product page (first time), it will be bit slow first time since webp images are created on the fly.

Custom Code

Custom code section in an important feature that allows users to add their custom code. You can add HTML (header), CSS and JS.

mages & Webp

On theme panel, you can set the dimensions for images. There is also an option to enable WebP image compression for better performance. To enable WebP, go to “SEO & Performance” Tab.

NOTICE: WEBP is an important feature but if enabled, all the images on server will be also created in webp format, this means that you may need disk extra space on server if you have many many products. Also when you visit the page or product page (first time), it will be bit slow first time since webp images are created on the fly.