Documentation v1.10

Getting started

# Introduction

Thank you for purchasing this theme. your support is truly appreciated!

This documentation covers the installation and use of this theme, reveals some answers to common problems and issues. We encourage you to read throughout this documentation if you are experiencing any difficulties. If you have any questions that are beyond the scope of the documentation, please feel free to contact us

This theme is developed base on MazaEngine theme builder. MazaEngine is a framework to develop a high customisable and responsive theme, it contains multiple modules, widgets and many more features to provide backend support to this theme

Join discord: https://discord.gg/2xktKX2a

# Installation

Compatible with Opencart 3.x and 4.x and minimum php 8+ required

Create a .user.ini file in "admin/" folder of your opencart and add following code

memory_limit = 364M max_execution_time = 3600 max_input_time = 3600 upload_max_filesize = 999M post_max_size = 64M max_input_vars = 5000

When you unzip the downloaded file, you will find mz_poco.ocmod.zip and mazaengine.ocmod.zip file in Opencart 4.x. folder, which is the main files to install in your opencart website. Now install that file using the following steps.

  1. Open your opencart admin panel, and go to “Extension -> Installer” from the left navigation bar, and upload mazaengine.ocmod.zip and mz_poco.ocmod.zip files one by one by click on the upload button.
  2. After successfully upload, you will find two new entry in below "Installed Extensions" list. now click on install button on both entry.
  3. Go to “Extension -> Extension -> Module” and install all available module which name starts from “Maza” word.
  4. Find MazaEngine module on the same page and click on the install button and then edit button.
  5. Now you are on MazaEngine Installer page. Click on install button and wait until installation finish and then click on the continue button.
  6. Now you are on Theme installer page. Click on install button and wait until installation finish and then click on the continue button.
  7. Go to “Extension -> Extension -> Theme” and install the "Poco theme" theme. after install, click on edit button and enable status. then save it.
  8. Go to "System -> Setting" and edit store. and select "poco theme" for your store
  9. Now set a cronjob to maintain background task of theme. Go "Extension -> mazaTheme -> System" and follow this instruction.
  10. Now installation is completed, but you will see blank page on the storefront, so proceed to import demo setting.

When you unzip the downloaded file, you will find mz_poco_x.x.ocmod.zip file in Opencart 3.x folder, which is the main file to install in your opencart website. Now install that file using the following steps.

  1. Open your opencart admin panel, and go to “Extension -> Installer” from the left navigation bar, and upload mz_poco_x.x.ocmod.zip by click on the upload button. But in case if you get upload error because of upload size limit in the server, then you need to upload a file using FTP to root folder of your website. Unzip mz_poco_x.x.ocmod.zip and open upload/ folder and upload all (admin, catalog, image, system) folders and merge with the same name folder in your website.
  2. Go to “Extension -> Extension -> Module” and install all available module which name starts from “Maza” word.
  3. Find MazaEngine module on the same page and click on the install button and then edit button.
  4. Now you are on MazaEngine Installer page. Click on install button and wait until installation finish and then click on the continue button.
  5. Now you are on Theme installer page. Click on install button and wait until installation finish and then click on the continue button.
  6. Go to “Extension -> Extension -> Theme” and edit “Default Store Theme” theme. And select Theme Directory to mz_poco and save it.
  7. Now set a cronjob to maintain background task of theme. Go "Extension -> mazaTheme -> System" and follow this instruction.
  8. Now installation is completed, but you will see blank page on the storefront, so proceed to import demo setting.

# Demo import

  1. Visit our theme demo website.
  2. Visit admin panel by adding “admin” in the address bar and log in with username demo and password demo.
  3. Go to "Extension -> MazaTheme" page and go to system page.
  4. Click on the Backup tab and export settings.
  5. You will ask for username and password to export demo. so you need to add your themeforest account username and purchase code as a password. Go to themeforest account and click on download button on our theme to get your purchase code
  6. Visit your website admin panel and find the same page to import that setting.
  7. Access to your website home page and you will see the same demo structure.

# Quick Guide

Go to Extension -> mazatheme -> skin -> header and click on “customise” button on active header of active skin.

you will redirect to the layout builder of the header. so now find “image” and click on the gear icon on it to edit.

now click on SVG tab and remove demo SVG logo and add your store logo in svg or png format.

Go to Extension -> mazatheme -> layout builder page and find “Home”. After that click on red button on “Home” to edit layout builder of it. you will redirect to builder page where you can find “banner” or “carousel” or “slider”, which you can edit by click on gear icon on it.

Go to Extension -> mazaTheme -> menu page where you can add or edit existing menu. If you want to edit mega menu then find it from extension -> mazatheme -> content builder.

If you want to change layout or location of menu then edit header layout builder from Extension -> mazatheme -> skin -> header and find navbar widget.

If you want to edit footer menu links then go to Extension -> mazatheme -> skin -> footer and edit layout builder of footer where you can find “menu” design.

Pages

# Skin

The MazaEngine works base on skin layout system. The skin contains information related layout and style of the website like colour, fonts, a structure and position of modules and widget and many more. This theme contains multiple skins of a unique design.

There are two types of skin

Root skin Root skin is a skin which comes with the theme installation and it can not be add or delete
Child skin Child skin is a child of root skin and it can be add or delete. You can inherit styles of root skin by creating child skin with your own settings and layout structure. For example, you can overwrite color of root skin in child skin

The skin is divided into three part of the layout as a header, content and footer. This theme contains multiple header and footer with a unique style. You can assign any specific header and footer to a skin

You can assign skin per store or page. For example, you have two stores as the name S1 and S2. So you can assign skin A to S1 and skin B to S2. You can also assign skin per page. For example, skin A for category page and skin B for product page and skin of other pages will be the skin of the store.

Note: Settings of theme are store per skin, so make sure you have selected right skin before to change any setting. You can select a skin from a header bar in the admin panel of MazaEngine

# Style

You can control the style of skin like colour, spacing, typography like that in this page. Most settings are related to bootstrap 5 theming

Note: If you don’t understand any setting then simply change it and see the result in a storefront. And don’t forget to export the original setting before to change any settings by click on the export button at the upper right corner.
Note: Allowed size unit of value is shown as a placeholder of every input field.

General
Layout style Type of page layout. Box or full layout
Gutter width The gap(gutter) between bootstrap column. Default 30px
Page loader Enable or disable page loader. If enabled then the spinner will be showing to users until the website data not fully loaded
Back To Top Enable or disable back to top button. If enabled then a button will display at bottom corner to allow user to quicky scoll page back to top
Spinner Upload spinner image. GIF image recommended. Spinner is used as a loading icon for page loader, lazy loading of image, popup loading

The breakpoint is a fallback point for style and content to make a website responsive. It is basically the general width of the device screen where content should start to fall to adjust(fit) with the device screen. More info

XS Extra small screen. For mobile device
SM Small screen. For tablet or landscape mode of the phone
MD Medium screen. For landscape mode of the tablet
LG Large screen. For small resolution laptop screen
XL Extra-large screen. For desktop or laptop screen

Maximum width of container per breakpoint. Container width can not be more than a corresponding breakpoint width. Add 0 for full width. More info
SM Container width in SM breakpoint
MD Container width in MD breakpoint
LG Container width in LG breakpoint
XL Container width in XL breakpoint

Select a theming colour. It is a colour palette of 8 colours as a name of Primary, Secondary, Info, Success, Danger, Warning, Light and Dark. We have already given some colour palette. You can also create own colour palette using a custom colour palette. More info

Body

Color

Set background and text colour of body element.

Background

Set background image or pattern in the body element. You can set multiple layers of images.
Image position Specifies the position of the background images
Image repeat Specifies how to repeat the background images
Image attachment Specifies whether the background images are fixed or scrolls with the rest of the page

Generally, the size of 1rem is equal to 16px in browsers by default, but in a mazaEngine, 1rem is equal to 10px.

You can select font-family for the website. Only two different font-family allowed, one for general text and second is for a heading(title) text. You can also add google fonts

Visit the google official website(fonts.google.com/), and select font which you want to use to get more detail about it

Font name Name of the font.
Font family Valid font-family of the font.
Font URL Google font URL.
Parent(generic) font Generic font-family for the font. It is fallback font-family.

There are more settings available in this section to customize bootstrap4. Mostly not require to change it. And only created for the advanced users who already know CSS and bootstrap. All settings are self-explainer

# Catalog

In this page, you can control the listing structure of catalog data like products, categories and manufacturers.
Scale
  • Contain: Resize the image to make sure the image is fully visible
  • Cover: Resize the image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
  • Fit Width: Resize the image to make sure the image width fully visible, even if it has to cut height of image
  • Fit Height: Resize the image to make sure the image height fully visible, even if it has to cut width of image
Quality Quality of image after resize. add value between 1 to 100
Sold Order Status Select the Which order status should consider as a complete order.

The deal is an extended feature of the product special price in opencart. It will allow you to set order limit to sell at a special price, so when product sell reaches their limit then the special price will be disabled.
Countdown Enable or disable countdown of special price based on expire date.
Countdown showtime Show countdown only when your specified time is left at a special price to get expired. Add 0 to always show countdown.
Sold Enable to show total orders claim by customers in limited special price product.
Sold showtime Show an order claimed when specified quantity left in an order limit of special price. Add 0 to show always when an order limit is set
Sold unit Unit of the deal claimed. in percentage or quantity of order
Sale badge status Enable or disable "Sale" label on the special price product grid
Sale badge type Type of "Sale" label, Sale text or discount in percentage
New badge status Enable or disable "New" label on latest products grid
New badge timeout How many days "New" label should show on a product? Add value in days. If you add 7 days then "New" label will not visible on a product which is older than 7days
Countdown Enable or disable countdown of special price based on expire date
Sold Enable to show total deal claim by users on limited order of special price product.
Image size Width and height of product image in the list.
Responsive width Add image width per breakpoint. Height of image will auto calculated by width based on the original ratio of an image. This setting allows you to show a small image for mobile and large image for desktop.
Lazy loading Load images only when it is visible in the device screen. More images will load when users scroll down the page.
Additional images Enable or disable additional images of the product.
Additional image limit Limit of additional images if it is enabled

Product page

Image
Image size Width and height of product image in px unit.
Responsive width Add image width per breakpoint. This setting allows you to set a small size for mobile and large size for desktop
Additional Image Slides Additional image slides per view in slider. default is 4.
Brand image size Width and height of manufacture image

Options
Image size Width and height of option image in px unit.
Update price Update product price when a user selects or change options. For example, if the user selects product colour or size then product price update based on a selected option.

Related products
Image size Width and height of related products image.
Responsive with Image width per breakpoint. Height will auto-calculated based on image ratio.
Subcategory products Show or hide products of subcategories in the parent category. If it is enabled to show then products of subcategories will available in ancestors category. If disable then users have to visit subcategory to see products of it.
Category image Width and height of category image.
Refine search Width and height of subcategories images.

Enable or disable the product fields in comparison of products in compare page

Enable or disable the account related links in account page or menu

Enable or disable one page checkout of theme.

# Layout builder

Layout builder is an integration of opencart default layout and drag & drop builder. You can create a layout of existing opencart page using drag & drop builder.

There is following types of layout, every type used for a specific page and contains different types of contents for drag & drop builder.

  • Default
  • Home
  • Category
  • Product
  • Search
  • Special
  • Product quick view
  • Manufacturer products
  • Blog article
  • Blog author
  • Blog category
  • Blog search

# Page builder

Create a new page in the website using drag & drop builder.

Note: URL route of the page is: index.php?route=extension/maza/page&page_id=[page id]

General
Page name Name of a page in admin
Meta tag title HTML meta title of a page
Meta Tag Description HTML meta description of a page
Meta Tag Keywords HTML meta keywords of a page

Data
Stores Select stores for page
Status Enable or disable page

SEO

Add keyword URL of the page

# Code

You can add custom code of HTML, CSS or javascript per skin, theme or global. This section is mostly used to integrate external services

Add any valid code between <head></head> tag of HTML. You can use this to integrate any external service like Google AdSense, analytics or social media service. More info

Add any valid HTML, CSS or javascript before closing </body> element of HTML. it is also used to add the javascript code of external service.

Add any valid CSS or SCSS in this section. You can customise the style of a website using own CSS. Bootstrap theming variables, mixin and function of SCSS is also valid to use. Mostly used to style and position text on banner or image.

Add valid Javascript or jQuery code.

Here you can add external CSS and javascript files to load it in the storefront.

# Menu

A menu is a group of multiple links. It can be hierarchical or single levels group. A menu will be used with widgets or modules. For example, a navbar widget and menu design.

Create Menu

First, create a menu with any name and status. After that, open menu to add multiple types of links in it. Here we will refer menu links as a menu items

Add links

General
Name Add any name of a link. It is used only to identify a link in setting
Status Enable or disable link in the menu
Parent item Select parent link to make hierarchical menu
Sort order Sort order across siblings links in the menu

Type

There are multiple types of link. It is described as following

Link: It is a simple plain link. Add a custom link or select link from products, category, manufacturer. It is the only type which is allowed to be a parent of other links.

System: it is an opencart system data like language, currency, etc which sometimes required to use in menu

Category: Select a multi-level category for this link. Also, specify the depth of the level

Menu: Select a menu as a sub-menu of this link

Megamenu: Mega menu is a full-width sub-menu where you can place any module or widget using a content builder.

Data
Title Name of a link which will display in the storefront
Description Sort description of a link
Icon Icon for a link. Add any from image, SVG or font

Meta
Label Add a label text on link. For example, "hot" or "offer" label
Label Text color Text color of a label
Label Background color The background color of a label

Sub Menu

Add a background image or pattern to a submenu. It is also possible to set multiple background image layer-wise, maximum of 3 layers allowed.
Image position Specifies the position of the background images
Image repeat Specifies how to repeat the background images
Image attachment Specifies whether the background images are fixed or scrolls with the rest of the page

# Filter

The filter is one of the most important things for a big inventory website, which helps customers to find desired products from many numbers of products. We have a filter in an opencart but it is hard to manage as It works like first create each filter and value after that assign it to category and products, it becomes a nightmare for large numbers of a product. So we have developed custom filter in a mazaEngine which works automatically without any manual assignment to products.

A custom filter works base on key and value pair, where you need to select keys, but values generated automatically from selected key and get assigned to products

There are following types of a key in a custom filter

  • Attributes
  • Options
  • Filter group (default opencart filter)
  • Product name
  • Product description
  • Product tags

Suppose you want to create a colour filter then just select a colour attribute or product option as a key of the filter. The filter will automatically generate all values of colours from attribute or options and assign them to products. Use of Multiple key types together is very important in the case when some products contain colour as an attribute and some not, some contain colour as an option and some has a colour name only in a product name or description.

Note: Required to use a Maza filter module to show custom filter in the storefront

Add filter

Add filter group like colour, size, memory, etc

General
Name Name of the filter group
Status Enable or disable to hide or show filter
Sort order Order of the filter across filters
Filter language Select a language which should be used to compare filter values to products data
Show in category The filter will show in the selected category. If “Require category” option is disabled from a maza filter module then a filter will show even category is not selected
Sync value Disable to stop automatic generate values of the filter. If disabled then require to add filter value manually

Layout
Collapse by Default Enable to collapse filter group by default
Input Type Select the input type of filter values
Input Shape Select button to display checkbox or radio input as a button shape
List Type Type of filter value list. Show filter values as a list of value image or text or both
Image width Width of the filter value image
Image height Height of the filter value image

Key

Select filter keys to generate filter values and map with products. Values of filter will map with products data of selected keys.
Attributes Select attributes as a key to a filter. If a filter is a "RAM" then select all attributes likes "RAM", "system memory", "RAM capacity", "Memory"
Options Select product options as a key to a filter
Filter groups Select the filter group as a key to a filter. It is opencart default filter
Product name If enabled then values of filter will search in product name. If a filter is "colour" with value "red" then products will get assigned to it which name contains "red" keyword. For example, the product "women red t-shirt"
Product description If enabled then values of filter will search in the product description.
Product tags If enabled then values of filter will search in product tags

Add value

Values of filter will automatically be generated by click on the synchronise button from the upper-right corner. But sometimes if you don't want to generate values then disable "sync value" option from filter setting and add value manually as following

Name Name of a value
Status Enable or disable value
Sort order Order of value across other values
Image Image of value. If "list type" is selected "text" in filter setting then an image will not show
Value type Type of a value. Select how value should be compared with products
Value A value which will compare with products data of selected keys like attributes values, options value, product name, description and tags. Type of Comparison will be based on a value type

# Catalog Data

In this page, you can add catalog data and display it to selected products, categories or manufactuers page in form of tabs, accordion, FAQ or PopUp.

Name Add name for admin panel
Status Enable or disable data
Sort order Sorting data to each others
Title Add title to the data which displays to the customer. For example tab name
Icon Select icon for title. Supported image, SVG or font icon
Width add width of image if image or SVG format selected
Height add height of image if image or SVG format selected
Font size Add font size if font icon selected

Add data which can be displayed in tabs, accordion, popup or FAQ. Select type of data like HTML, module, content builder, widget and add data into it

Customer Display data to Guest, register or all customers
Customer Group Display to all customer group or selected
Timespan Display data between time or start from or end to selected time
Store Select opencart store

Page

Product

Assign data to product page
Type Select how to filter products
Product Display data to selected products
Category Display data to products from selected category
Sub Category Enable to display data to products from sub category of selected category
Manufacturer Display data to products from selected manufacturer
Filter Display data to products from selected product filter
Special Only Display data to special price products
Price Display data to products between price range. Add 0 price to display data only to 0 price products
Quantity Display data to products between quantity range. Add 0 quantity to display data only to out of stock products

Category

Display data on category page
Category Display data to selected category
Sub Category Enable to display data to all sub categories of selected category

Manufacturer

Display data on manufacturer page
Manufacturer Select manufacturer to display data on it
Hook Select where to display data. In tabs, accordion, FAQ or popup

# Add Metadata

Add HTML meta information to any page.

Status Enable or Disable current meta data of page
Route Enter the route of the page where you want to add this metadata. For example if you want to display metadata in a special product page then add the route “product/special”. And you can find route of any page from their URL when SEO url disabled.
Store Select opencart store

HTML Meta title, description and keyword for SEO.

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

# Newsletter

Newsletter marketing is the practice by which companies send informational and product-focused content via an emailed letter to a subscriber list that comprises potential and existing customers. Online businesses utilize newsletters to keep their brand top-of-mind for consumers, establishing authority in the space and notifying readers of products that may interest them.

In this theme, Newsletter is divided by mail, subscriber and setting section

Mail

Send mail to newsletter subscriber

From Select a store as a sender of the mail.
To Select subscribers.
Subject Subject of mail
Message Message to send in the mail

Subscriber

List of subscriber mail. It can be approved or not and confirmed or not.

Setting

General
Subscribe Confirmation Enable to send confirmation mail before to subscribe
Unsubscribe Confirmation Enable to send confirmation mail before to unsubscribe
Send Welcome Mail Enable to send welcome mail when a subscriber subscribes the newsletter
Required Approval Require approval or not after subscribe

Translate

Translate or overwrite the default message of newsletter actions. All following messages have a default message and optional to overwrite
Subscribe Success The message of success when subscriber successfully subscribe to the newsletter
Unsubscribe Success The message of unsubscribing when subscriber successfully unsubscribe to the newsletter
Subscribe Confirmation Mail Success The message of success when confirmation mail to subscribe sent successfully
Unsubscribe Confirmation Mail Success The message of success when confirmation mail to unsubscribe sent successfully
Invalid Email Id Error Message of invalid mail id
Email Id Not Found Error Message when given email id to unsubscribe not found
Email Id Already Exist Error Message, when given email id to subscribe is already available

Template
SUBSCRIBE CONFIRM MAIL The mail to send for confirmation of subscribe
UNSUBSCRIBE CONFIRM MAIL The mail to send for confirmation of unsubscribe
WELCOME MAIL The mail to send after successfully subscribe

# Testimonial

Customer testimonials can be a powerful, conversion-boosting, profit-driving tool for eCommerce companies. Happy customers can tell a story about your business and the products your business sells. That story impacts how potential customers think about your company, and may lead to additional sales

We have developed testimonial in mazaEngine as the following

Add Testimonial

Testimonial can be added by customer themself on the storefront, but sometimes if you need to add or edit testimonial then you can do it as a following

Author Name Author of testimonial
Extra Extra detail about the author like occupation, company or profession
Image Image of author
Email Email id of the author
Rating Rating by the author about your company
Description Testimonial message
Store Show testimonial on selected stores
Date Added Date of testimonial created
Sort Order Order of testimonial across others
Status Enable or disable testimonial

Setting

Submit testimonial
Status Enable to allow customers to submit testimonial by themselves on the storefront
Required approval Enable to require the approval of testimonial to show on the storefront
Thank you mail Enable to send thank you email after the customer submit a testimonial

Mail template

Thank you mail after successful testimonial submit

Form

Control the form of a testimonial submit

Rating Enable or disable the rating field in the form
Email Enable or disable email field in the form
Image Enable or disable the image field in the form
Extra Enable or disable extra field in the form
Captcha Enable or disable captcha. Enable to prevent spam submissions

Page

Testimonial page

Testimonial listing page of the storefront
Meta Title HTML meta title of a testimonial page
Meta Description HTML meta description of a testimonial page
Meta Keyword HTML meta keyword of a testimonial page

Listing
Limit Limit of testimonials per page
Thumb Size Image size of the testimonial author

Listing

Change settings to control how testimonials should list on the storefront

General
Rating Enable to show given rating on a testimonial
Timestamp Enable to show submitted time of a testimonial
Image Enable to show author image on a testimonial
Extra Enable to show an extra field's detail on a testimonial

Quote icon

Add quote icon to highlight a testimonial

Layout

Testimonial per row

How many testimonials should show per row by breakpoints

# Form

Create a form for contact us, ask for price, product Inquiry or any other type to get customers input. Create unlimited form input field with any html input type.

Add Form

General

Name Title of form. Which can be disable in the form widget.
Submit Text Submit button text
Success Add success message which will show to customer when they successfully submit form

Data

General
Captcha Select captcha which will display in a form.
Policy Select information page which will used as a policy information for this form, which is required for customer to accept before to submit form
Record When customers submit a form, you get mail of submitted data. But you can also save submitted form data in the database for record.
Field

Note: Fields will not available at the time of new form creation. So after creating fields, edit form again to select fields.
Email If email input field is available in form then select it here so it will used as a customer email to send mail
Subject If subject input field available in form then select it here so it will used for mail subject

Mail

Admin Enable to get email when customer submit form data.
Customers Enable to send email to customer when they successfully submitted form
Admin
Email Enter email id, when customer submit form, you will get email on this id. or Stay empty to use store email
Customer
Subject Enter subject of mail which they receive after form submit
Message Enter message body of mail which they receive after form submit

Add Field

General

Label Add label text for input field
Placeholder Add input placeholder text which will display into input area
Help Note Add Help note about input for customer. So they can understand what valid data they should enter in.
Error Message

Enter an error message which will display to customers if they submit invalid data which does not pass in criteria which you added for this field.

For example: Minimum or maximum number or regex pattern does not match with input data or when customer skip required field

Data

Required Enable to required this field to fill by customer for successful form submit
Sort Order Sort order of this field compare to others fields of this form
Status Enable or disable input field.

Link

Form Select form where this field belong to
Customer

Select when should field display in form

  • All: Always display
  • Guest: When a customer is not logged in
  • Logged: When a customer logged into their account
Customer Group Select which customer group belong to this field.

Input

Type Select html input type
Name Select name of input. Which should be unique in this form and without any space. Name will be used for the internal process of form to refer to field value. You can add name same as a label but replace space with _(underscore).
Format
Value Default value for this field
Validation Add a regex pattern which will be used for data validation. Stay empty to accept all type of data
Minimum Only used for number input. Add minimum number allow to add for this input.
Maximum Only used for number input. Add maximum number allow to add for this input.
Decimal Only used for number input. Number of decimal point for float number.
Options

Add multiple options for input type like select, radio and checkbox

# System

Setting

Developer mode Enable while modifying the website, it will disable all internal caches

Cache
Status Enable or Disable all caches
Partial Enable or disable partial caches. Partial caches are enabled by admin on modules or widgets into layout builder
Page Enable or disable Full page cache. Full Page cache does not work when customer logged into the website

API
Google map key Google map API key. Get it now

Asset

Combine CSS files Combine multiple CSS files into one to reduce server requests
Combine JS files Combine multiple JavaScript files into one to reduce server requests
JS load Position

Position of javascript files into a webpage. "Footer" position recommended to eliminate render-blocking.

  • Header: Add all javascript files between <head></head> tag
  • Footer: Add all javascript files just before closing </body> tag
  • Default: Remain default javascript files position given by extension developers
CSS Autoprefix Enable to automatically prefix CSS rules to make compatible with all browsers. For example -webkit-flex, -moz-flex
CDN Enable CDN to load CSS and JavaScript library like jQuery and Bootstrap from Content Delivery Network!

Minify
HTML Enable to remove all whitespace from HTML to reduce the size
CSS Enable to remove all whitespace and comments from CSS files and create minify version
JavaScript Enable to remove all whitespace and comments from JavaScript files and create minify version

Cron

Cron is a very essential task to schedule jobs and runs periodically to maintain website. It includes jobs like purge caches, synchronises filters values, generates products and articles tags, and some internal task

Use cron command tool to generate UNIX command base on your website(opencart) admin username and password. And schedule(once per day) that command into a server cron job. Setup cronjob into Cpanel, plesk.

Backup

Import/export settings of mazaEngine. Use it to backup settings or import demo layout of the theme from our demo website

Modules

# Maza Slider

Create an advanced and responsive slider using maza slider module. A slide in the slider can be image, HTML, module or content builder. You can place this module anywhere in the page by a layout builder.

Note: use a maza product listing module to create product slider and use a maza article listing for article slider
Module Name Name of the module regardless of selected skin.
Status Enable or Disable a module
Title Title of the slider
Status Enable or disable slide status.
Sort order Sort order across other slides
Type

Select the type of slide data

  • Image: Image slide
  • HTML: HTML slide
  • Module: Select module for slide content
  • Content: Select content builder for slide content
Lazy loading Enable to lazy load image in slides
URL target How to open a URL? In the same window or new
Width Width of the image in a slide
Height Height of the image in a slide
Navigation button Enable a Left and right navigation button to change slide
Pagination Enable to display pagination of the slider
Pagination type Select a style of the pagination
Autoplay Enable to auto-start sliding
Autoplay delay Delay to auto-start sliding
Speed Duration of transition between slides (in milliseconds)
Keyboard control Enables navigation through slides using a keyboard.
Mousewheel control Enables navigation through slides using the mouse wheel.
Simulate Touch Click and drag to change slides
Loop Specifies whether the slider should go through all slides continuously, or stop at the last slide.
Slide effect Select the transition effect of slide
Slide per column Number of slides per column or number of row
Space between slide Add distance between two slides. (In pixel)
Auto height If enable then slider wrapper will adapt its height to the height of the currently active slide
Slides per view Select the number of slides per view
Navigation icon Select a left navigation icon. The right icon will automatically be added as a flip version of the left icon

# Maza Brand

Create and display a list of manufacturers using this module. You can display manufacturers in a carousel or in a grid layout. You can add manufacturers manually or add filters to show manufacturers by the filter.

Module Name Name of the module regardless of selected skin.
Status Enable or Disable a module
Title Title of the brand module

Select manufacturers manually by name and display as featured manufacturers

Filter products and display manufacturer of it by following filters
Auto filter If an auto filter is enabled then manufacturers will filter based on the current category! This feature will only work if a module is placed on the category page!
Category Filter manufacturers by the selected category. This will not work in category page in case of auto filter enabled
Subcategory Include or exclude manufacturer of subcategory from selected category to filter
Filter Filter products and get manufacturers by the selected filter
Sort Sort order of manufacturers list
Order Order of sorting
Limit Maximum number of manufacturers to show
Show content Which data of manufacturers should be shown. Name, brand image or both
Image Width Width of the manufacturer image
Image Height Height of the manufacturer image
Image position Position of an image along with manufacturer name
Column The number of manufacturers per row by breakpoint
Status Enable to show manufacturers in the carousel
Pagination Enable to show pagination of carousel
Autoplay Auto start carousel on the page load. Add autoplay delay in milliseconds. Or add 0 to disable autoplay
Loop Specifies whether the slider should go through all brands continuously, or stop at the last.
Row Add the number of brands to show per column or the number of rows in the carousel
Navigation icon Select a left navigation icon. The right icon will automatically be added as a flip version of the left icon

# Maza category wall

Add module to display categories as a wall or slider in any pages.
Module Name Name of the module regardless of selected skin.
Status Enable or Disable a module
Title Title of the category wall
Category source

Which categories should be show

Featured: Select categories which you want to show. If “subcategory” is enabled then only subcategories of the selected category will show

Auto: Let module decide which categories to show. If module placed in category page then subcategories will show. If module placed in other pages then top parent categories will show
Product count Enable to show the number of products per category
Sort

Select the following option to sort categories

  • Sort order: Sort by given sort order in category
  • Name: Sort by the name of categories
  • Date added: Sort by the date of category added
  • Products: Sort by total products per categories
  • Orders: Sort by total orders per categories
Order Order of the sorting
Limit Maximum limit of categories
Show content Which data of categories should be shown? Name, image or both
Image Width Width of the category image
Image Height Height of the category image
Image position Position of an image along with category name
Column Select the number of categories to show per row
Status Enable to show categories in the carousel
Autoplay Auto start carousel on the page load. Add autoplay delay in milliseconds. Or add 0 to disable autoplay
Loop Specifies whether the slider should go through all categories continuously, or stop at the last.
Row Add the number of categories to show per column or the number of rows in the carousel
Navigation icon Select a left navigation icon. The right icon will automatically be added as a flip version of the left icon

# Maza Filter

Add module to allow customers to filter products by various types of filter.

Note: filters are only supported in a category, search, special and manufacturer's products pages only. So make sure to place this module only in that supported pages
Module Name Name of the module regardless of selected skin.
Status Enable or Disable a module
Title Title of the filter
Count products Enable to show the number of products per filter values
Cache Enable to cache filter values
Delay Add the number of seconds to wait to filter products after customer select filter

There are various types of filter in the module

  • Price: Price range filter
  • Subcategory: Filter by subcategory in category page
  • Manufacturer: Filter by manufacturers
  • Search: Filter by search keyword
  • Availability: Filter by stock status
  • Discount: Filter by the discount on special price
  • Rating: Filter by product rating
  • Filter: Filter by opencart default filter
  • Custom: Filter by custom filter
Status Enable or disable the filter type
Title Add the title of a filter type
Sort order Sort order across other filter types
Collapse by default Filter group panel is collapsible to hide or show filter values. If enabled then filter values will be collapsed by default on page load
Input type Select the input type of filter value
List type Which data of filter values should be shown? Image, text or both
Image Width Width of the filter value image
Image Height Height of the filter value image
Show search

Show search input to allow customers to search filter values. It is very useful when the number of filter values is high.

  • Always: Always show search input
  • Disabled: Never show
  • On-demand: Only show when the number of filter values exceeds the certain limit
Require category If enabled then only filters will be shown which is assigned with categories
Collapse by default

The filter module is collapsible by the title of it. If you want to collapse it by default initially then enable it otherwise disable it.

You can also enable to collapse it within the selected breakpoint only. For example, if "sm" selected then module panel will be collapsed by default in "xs" and "sm" breakpoints only and visible by default in other breakpoints
Ajax Enable to filter products without reloading the full page
Reset all Enable to allow customers to reset all selected filters
Reset per group Enable to allow customers to reset selected values per filter group
Overflow How to manage an overflow of filter values in the filter group
Sort By Sort filter value by total products or sort order

# Maza product listing

Add module to display selected or filtered products in any pages. It supports the layout of tabs and carousel. You can disable tab if you want to show only products with module title.

Module Name Name of the module regardless of selected skin.
Status Enable or Disable a module
Title Title of products
Status Enable or disable a tab
Name Name of a tab. For example the latest, Popular, Bestseller or any other name
Icon Select an icon for a tab (optional)
Sort order Sort order across other tabs
Auto filter If the auto filter is enabled then products will filter based on the current category or manufacturer! This feature only works in the category or manufacturer page!
Product from

Select the type of products to display in a tab content

  • Choose product: Select products manually by name. Used to display featured products
  • Related product: Display related products in a product detail page
  • Latest product: Display the latest products
  • Special product: Display the special price products
  • Most viewed product: Display the most viewed products by customers. Also used to display popular products
  • Bestseller product: Display bestseller products
  • Random product: Display random products
  • Filter product: Filter and display products by category, manufacturers, price range, rating, discounted or date
Width Width of the product image in a module
Height Height of the product image in a module
Responsive width Add image width per breakpoint. Height of image will auto calculated by width based on the original ratio of an image. This setting allows you to show a small image for mobile and large image for desktop.
Position Select the position of an image along with product name and price
Icon Width Width of a tab icon
Icon Height Height of a tab icon
Icon position Select the position of an icon along with a tab name
Status Enable to show a banner at the left side of products
Image Select a banner image
Width Width of a banner image
Height Height of a banner image
Banner link Select or add URL to open when customers click on the banner
Product limit Add the maximum number of products per tab
Add to cart Enable or disable “add to cart” button in products list of a tab
Add to compare Enable or disable “add to compare” button in products list of a tab
Add to wishlist Enable or disable “add to wishlist” button in products list of a tab
Quick view Enable or disable “Quick view” button in products list of a tab
Rating Enable or disable “Rating” in products list of a tab
Countdown Enable or disable “Countdown” of special price in products
Sold Enable or disable “Deal claimed” of limited special price in products
Additional images Enable to show additional images in products
Manufacturer Enable to show manufacture name in products. where user can click on manufacture link to see all products of that manufacture
ExTax Enable or disable price without tax detail from product listing
Description Enable to show a short description of the product
Tab status If there is only one tab added then disable this option to show only products with module title
Open link How products open in a web browser
Column Select the number of products per row into the breakpoint
Status Enable to show products in the carousel
Autoplay Auto start carousel on the page load. Add autoplay delay in milliseconds. Or add 0 to disable autoplay
Row Add the number of products row to show in a carousel
Navigation Icon Select a left navigation icon. The right icon will automatically be added as a flip version of the left icon

# Maza tags

Add module to display a featured, most used or most visited tags from products or articles.

Note: a cronjob is required to generate tags from products or articles, otherwise this module will not works
Module Name Name of the module regardless of selected skin.
Status Enable or Disable a module
Title Add the title of the tags, (Optional)
Tags source Show tags of products or articles
Color Colour of tag

Get tags by following options base on selected tags source in the previous setting

  • Featured: Show only manually added tags
  • Most viewed: Show most viewed tags by customers
  • Most used: Show most used tags in products or articles

Filter products and get tags by following options

Auto filter If an auto filter is enabled then tags will filter based on a current category! This feature will work only when a module is placed on the category page!
Category Filter by selected categories. Will not works if a module placed on the category page with enabled auto filter
Subcategory Include or exclude subcategories of selected categories
Manufacturer or Author Filter by manufacturer or author
Filter Filter by opencart default filter
Limit Number of Maximum tags to show

# Maza Testimonial

Use a testimonial module to display latest, featured or filtered testimonials from the store.

Module Name Name of the module regardless of selected skin.
Status Enable or Disable a module
Title Title of the testimonial
Featured Show manually selected testimonials by name
Latest Show latest testimonials
Filter Filter testimonials by rating and custom sort order
Add testimonial Enable to show add button which allows customers to submit a testimonial
View testimonial Enable to show view button, so customers can see all available testimonials in your store
Testimonial limit Maximum testimonials to show in a module
Image Width Width of testimonial image
Image Height Height of testimonial image
Column Number of testimonials per row
Status Enable to show testimonials in the carousel
Pagination Enable to show pagination of carousel
Autoplay Auto start carousel on the page load. Add autoplay delay in milliseconds. Or add 0 to disable autoplay
Loop Specifies whether the slider should go through all testimonials continuously, or stop at the last.
Row Add the number of testimonials to show per column or the number of rows in the carousel
Navigation icon Select a left navigation icon. The right icon will automatically be added as a flip version of the left icon

# Maza blog article listing

Add module to display articles of the blog in any pages. It supports the layout of tabs and carousel. You can disable tab if you want to show only articles with module title. You can display selected or filtered articles per tab.

General

Module Name Name of the module regardless of selected skin.
Status Enable or Disable a module
Title Title of articles

Tabs(Add Tab)

Status Enable or disable a tab
Name Name of a tab. For example the latest, most viewed or any other name
Icon Select an icon for a tab (optional)
Sort order Sort order across other tabs
Auto filter If the auto filter is enabled then Articles will filter based on the current category or Author! This feature only works in the category or Author page!
Article from

Select the type of articles to display in a tab content

  • Choose article: Select articles manually by name. Use to display feature articles
  • Related article: Display related articles in article page. Only works in article page
  • Latest article: Display the latest articles in a tab content
  • Most viewed article: Display most viewed articles by users. Or display as popular articles
  • Random article: Display random articles
  • Filter article: Filter articles by category, author or date

Image

Article image
Width Width of the article image in a module
Height Height of the article image in a module
Responsive width Add image width per breakpoint. Height of image will auto calculated by width based on the original ratio of an image. This setting allows you to show a small image for mobile and large image for desktop.

Tabs
Icon Width Width of a tab icon
Icon Height Height of a tab icon
Icon position Select the position of an icon along with a tab name

Banner
Status Enable to show a banner at the left side of articles
Image Select a banner image
Width Width of a banner image
Height Height of a banner image
Banner link Select or add URL to open when customers click on the banner

Articles

General
Article limit Add the maximum number of articles per tab

Grid element
Comment count Enable to show total comments on an article
Viewed count Enable to show total view on an article
Author name Enable to show the name of an author on an article
Category Enable to show the name of an category which belongs to an article
Timestamp Enable to show post date of the article
Readmore button Enable to show a Readmore button on an article
Additional Images Enable to show additional images
Description Enable to show a short description of the article
Description limit Add the maximum length of the description

Layout

Tab status If there is only one tab added then disable this option to show only articles with module tab
Open link How articles open in a web browser
Column Select the number of articles per row into the breakpoint

Carousel

Status Enable to show articles in the carousel
Autoplay Auto start carousel on the page load. Add autoplay delay in milliseconds. Or add 0 to disable autoplay
Row Add the number of articles row to show in a carousel
Navigation Icon Select a left navigation icon. The right icon will automatically be added as a flip version of the left icon

# Maza blog category

Display available categories of articles using this module.

Module Name Name of the module regardless of selected skin.
Status Enable or Disable a module
Title Title of the blog category
Article count Enable to show the number of articles per category

# Maza blog filter

Use a maza blog filter module to display filters in blog.

Module Name Name of the module regardless of selected skin.
Status Enable or Disable a module
Title Title of the blog filter
Article count Enable to show the number of articles per filter value
Widgets

# Banner

Add offer or product banner in the website using a banner widget
Status Enable or disable a banner widget
Title Title of the banner
Alt Alternative text of a banner image. It is an alt attribute of HTML. Recommended to add image text for SEO
URL URL of the banner
URL target Choose to open URL in the new or same browser tab
Banner Select a banner image
Width Width of the banner image
Height Height of the banner image
Responsive width Add image width per breakpoint. Height of image will auto calculated by width based on the original ratio of an image. This setting allows you to show a small image for mobile and large image for desktop.
Lazy loading Load banner image when it visible in the browser viewpoint

Add HTML to show over a banner

Select the effect of a banner to show when mouse arrow come over a banner

# Cart

Show Cart on the website

Status Enable or disable a cart widget
Title Text of a cart
Icon Select a cart icon
Icon width Width of an Icon
Icon height Height of an Icon

# Category

Use a category widget to display available categories

Status Enable or disable a category widget
Category of Show categories of products or blog. Select “auto switch” to show categories of products on product pages and categories of blog on blog pages

# Contact Form

Display a contact form in the layout to allow customers to contact the store owner
Status Enable or disable the contact form widget
Title Title of the contact form
Captcha Enable to prevent spam submissions by robots.
Size Select a size of form inputs and button
Color Select a color of form button

Text

Translate or change the default text of the form fields. All text is optional

# Contact Us

Use this widget to show contact details of your store which you have added in the store settings from “System -> settings -> store”
Status Enable or disable a contact us widget
Title Add the title of contact us
Icon width Width of contact icons
Icon height Height of contact icons

There is the following type of contact data which you can set in contact us widget

  • Image
  • Address
  • Email
  • Telephone
  • Geocode
  • Fax
  • Times
Status Enable or disable any contact info
Sort order Sort order across other contacts data
Icon Add contact icon

# Countdown(Timer)

Use a countdown widget to show countdown timer of any limited-time deals. You can add background image behind the countdown to make it looks nice

Status Enable or disable a countdown widget
Time start When countdown start to show
Time expire End of the countdown.
Format

The format for the countdown display. Use the following characters (in order) to indicate which periods you want to display: 'Y' for years, 'O' for months, 'W' for weeks, 'D' for days, 'H' for hours, 'M' for minutes, 'S' for seconds.

Use uppercase characters for mandatory periods, or the corresponding lower-case characters for optional periods, i.e. only display if non-zero. Once one optional period is shown, all the ones after that are also shown.

The default format indicates that days is the maximum unit to display, and then only if non-zero, and always show hours, minutes, and seconds.
Compact Enable to display a countdown in a compact format.
Direction Show countdown vertically or horizontally.

# Currency

Show dropdown to change the currency of a website

# FAQ

Frequently Asked Questions
Status Enable or disable a FAQ widget
Title Title of the FAQ
Hook Enable hook to allow other extension or theme feature to create faq
Status Enable or disable FAQ
Sort order Sort order across others
Question Add question
Icon Select icon of a question (optional)
Type Select the type of answer. Text or HTML
Answer Add an answer to the question
Accordion Show FAQ in accordion design format
Icon width Width of question icon
Icon height Height of question icon

Select how many FAQs per raw

# Form

Use a form widget to display a form from the form builder.
Status Enable or disable form widget
Form Select form which you have created from form builder
Title Enable or disable form title
Label Disable or position input field label. If label is disabled then make sure to use the input placeholder for the field label.
Size Select form size
Color Select color of form submit button
Submit How to position the submit button. Left or right at the end of a form

# HTML/Twig/PHP

Add any HTML into webpage. Also possible to add twig code which render with current page controller view data. And also possible to show any opencart controller class output by adding path of it

# Language

Show dropdown to change the language of a website

# Login

Use a login widget to display a login form in the layout where customers can login

Status Enable or disable login widget
Title Title of a login form
Size Size of the form inputs and buttons
Color Colour of the form

# Google map

Display your store location in the google map
Status Enable or disable a google form widget
Title Title of the map
Latitude Add latitude of a location which you want to show in the map
Longitude Add longitude of a location which you want to show in the map
Zoom level

The initial resolution at which to display the map is set by the zoom property, where zoom 0 corresponds to a map of the Earth fully zoomed out, and larger zoom levels zoom in at a higher resolution. Specify zoom level as an integer.

The following list shows the approximate level of detail you can expect to see at each zoom level:

  • 1: World
  • 5: Landmass/continent
  • 10: City
  • 15: Streets
  • 20: Buildings
Marker Enable to show a marker at the location
Marker icon Select an icon of a marker. It is optional and stays empty to show a default marker of the google map
Height Add a height of the map in a px unit. Add 0 to adopt a height of parent entry in the layout
Zoom Enable to displays "+" and "-" buttons for changing the zoom level of the map. This control appears by default in the bottom right corner of the map.
Map type The Map Type control is available in a dropdown or horizontal button bar style, allowing the user to choose a map type (ROADMAP, SATELLITE, HYBRID, or TERRAIN). This control appears by default in the top left corner of the map. Enable to show it
Scale The Scale control displays a map scale element.
Streetview The Street View control contains a Pegman icon which can be dragged onto the map to enable Street View. This control appears by default near the bottom right of the map.
Rotate The Rotate control provides a combination of tilt and rotate options for maps containing oblique imagery. This control appears by default near the bottom right of the map.
Full screen

The Fullscreen control offers the option to open the map in fullscreen mode. This control is enabled by default on desktop and mobile devices.

Note: iOS doesn't support the fullscreen feature. The fullscreen control is therefore not visible on iOS devices.

# Navbar

Use a navbar widget to show navigation menu in the header. You can create a horizontal or vertical navbar
Status Enable or disable a navbar widget
Menu Select a menu for the navbar. Create a menu from here
Title Title of the navbar
Title Icon Add an icon in the navbar title
Icon Width Width of an icon
Icon Height Height of an icon
URL Add URL to title or icon. Recommended to use only when title or icon is a brand name or logo and add URL of the home page. URL is optional to use
Background The background colour of the navbar
Text Select text colour light or dart as per selected background colour. If the background colour is dark then select text colour light and vice versa
Orientation The direction of the navbar menu. Show menu horizontally or vertically
Expand Expand navbar from selected breakpoint.
Collapsible Enable to make it collapsible navbar.
Collapse by default The vertical submenu is collapsible, so select default state of the menu. Enable to collapse by default. If “except home” is selected then a menu will be collapsed by default in a page except for home page
Open submenu Select how submenu should open by a mouse? on click or hover?

# Newsletter

Use a newsletter widget to allow customers to subscribe. Get more about the newsletter from here
Status Enable or disable the newsletter widget.
Note: ALso make sure, Maza newsletter module is enabled from "Extension -> module -> Maza newsletter".
Unsubscribe Allow customer to unsubscribe newsletter and show unsubscribe button
Subscribe button Display the subscribe button as an icon, text or both
Unsubscribe button Display the unsubscribe button as an icon, text or both
Subscribe button Icon of the subscribe button
Unsubscribe button Icon of the unsubscribe button
Size Size of icon in the pixel unit

Text
Title Title of the newsletter. (Optional)
Description Description of the newsletter. (Optional)
Input placeholder Placeholder text of email id input. (Optional)
Subscribe Translate or change subscribe button text. (Optional)
Unsubscribe Translate or change unsubscribe button text. (Optional)
Designs

# Accordion

Display website content in a bootstrap accordion design. Show any modules, widgets or content builder in an accordion.
Status Enable or disable an accordion design
Title Title of an accordion design
Icon width Width of an accordion panel icon
Icon height Height of an accordion panel icon
Auto close In case of enabled, if a customer opens any one panel then rests panels will be collapsed. Only one panel can be open at the same time
Hook Enable hook to allow other extension or feature to display there data to accordion
Status Enable or disable an accordion panel
Name Give a name to an accordion panel
Icon Select Icon of an accordion panel. It is optional
Sort order Sort order across other panels
Type

Select the type of panel data

  • HTML: Add HTML into panel
  • Content builder: Select a content builder which you have created from here.
  • Module: Select a module to display in a panel
  • Widget: Select a widget to display in a panel

# Alert

Create and display a bootstrap alert, which can be used to show store notice or offer to customers. Alert used to highlight any message in the store for customers

Status Enable or disable an alert
Title Title of an alert message
Color Select color of an alert
Closable Enable to allow customers to dismiss an alert message. If enabled then an alert will be closable
HTML HTML or text message for an alert

# Button

Create and display a button which can open URL, drawer, popup or collapsible item. A button will design by bootstrap button style
Status Enable or disable a button
URL

Select an action by button click

  • URL: Select URL to open when customer click on the button
  • Drawer: Add id of the drawer component which will open when customer click on the button
  • Popup: Add id of the popup component which will open when customer click on the button
  • Collapsible: Add id of the collapsible item which will open when customer click on the button
URL target How to open a URL? In the same window or new
Name Add the name of the button or stay empty to display an icon only
Icon Select an icon for the button
Icon width Width of the button icon
Icon height Height of the button icon
Color Select the colour of the button
Outline Enable to display outline button instead of solid
Size Select the size of the button.
Width

Select the width of the button.

  • Wrap content: Match width of the button text
  • Match parent: span the full width of a parent

# CKEditor

Write your own HTML markup.

# Dropdown

Create a dropdown menu of mutiple links.
Status Enable or disable status of dropdown
Type Shape of dropdown toggle. link or button
Direction The direction of dropdown menu, When open
Alignment Alignment of dropdown
Title Name of dropdown toggle
Icon Select icon for dropdown title
Icon width Width of an icon(image or SVG)
Icon height Height of an icon
Icon position Select the position of an icon along with title
Show Select What to display from title
Status Enable or disable a dropdown item
Name Add the name of an item
Description Add the description of an item (optional)
URL Add or select a URL of item link
Icon Select an icon of a link
Sort order Sort order across others links in the dropdown
Show Select What to display from dropdown item name
Icon position Select the position of an icon along with dropdown item name
Icon width Width of an icon(image or SVG) of dropdown item
Icon height Height of an icon of dropdown item
Color Select color of button if dropdown toggle is button
Size Size of button
Outline Enable or disable Outline style of button

# Horizontal Line

You can add a horizontal line anywhere in the layout using a horizontal line widget. And also possible to give a name to the line. It is work as a divider to divide something in the page

# Image

Display image and shape it with bootstrap image design
Status Enable or disable an image
Image Select an image to display
Width Width of an image or size of the font icon
Height Height of an image
Style Select a style or shape of the selected image
Alt Alternative text of an image. It is a small description of the image. Recommended to add for SEO
Caption Add a caption for an image. (Optional)
URL Add or select a URL which will open when customer click on image
URL target How to open a URL? In the same window or new

# List

Display a list of items using bootstrap list group
Status Enable or disable a list
Title Title of the list
Icon width Width of a list item icon
Icon height Height of a list item icon
Status Enable or disable an item
Name Add an item name
Description Add an item description (optional)
URL URL of an item
Icon Add the icon of an item
Sort order Sort order across other items

# Menu

Create a menu with bootstrap nav.
Status Enable or disable status of menu
Title Title of menu
Orientation The direction of menu, horizontal or vertical?
Show Show only icon, text(name) or both in a menu link
Icon position Select the position of an icon along with link name
Icon width Width of an icon(image or SVG) or size of the font icon
Icon height Height of an icon
Position Select the position of menu image along with a menu
Image Select an image for menu
Image Width Width of the menu image
Image Height Height of the menu image
Status Enable or disable a menu item
Name Add the name of an item
Description Add the description of an item (optional)
URL Add or select a URL of item link
Icon Select an icon of a link
Sort order Sort order across others links in the menu

# Parallax

Parallax is a 3d effect used in various websites to make webpages attractive. In this effect, as we scroll, the background(parallax image) moves at different speed than the foreground(caption) making it look brilliant to the eyes.

Status Enable or disable a parallax
Parallax image Select a parallax background image
Parallax Height Minimum height of a parallax
Caption Add HTML caption to show on parallax

# Table

Create an HTML table using a bootstrap table design. Very useful to show clothing sizes
Status Enable or disable a table design
Title Title of the table
Caption Add a caption to the table
Size Size of the table
Status Enable to show the first raw of the table as a header(thead)
Style Colour of header
Dark Adds a black background to the table
Striped Adds zebra-stripes to a table
Bordered Adds borders on all sides of the table and cells
Borderless Removes borders from the table
Hover Adds a hover effect on table rows

Add a comma(,) separated table column data as like CSV format! If comma(,) is a part of data then enclosure data with double quotes(").

For example:

col1, col2, col3 cell1, cell2, cell3 cell4, cell5, cell6

# Tabs

Display website content in bootstrap tabs design format. Place any modules, widgets or content builder in tabs.
Status Enable or disable a tabs design.
Title Title of the tabs
Hook Enable hook to allow other extension or theme feature to create tab
Status Enable or disable a tab
Name Add the name of a tab
Icon Add an icon of a tab
Sort order Sort order across other tabs
Type

Select the type of tab data and add data according to it

  • HTML: Add HTML into tab
  • Content builder: Select a content builder to display in a tab data.
  • Module: Select a module to display in a tab data
  • Widget: Select a widget to display in a tab data
Icon position Position of a tab icon along with a tab name
Icon width Width of a tab icon(image or SVG) or size of a font type icon
Icon height Height of a tab icon
Show Select to show only icon, text(name) or both in a tab name
Fade effect Enable to display fade effect on a tab change
Components

# Popup

Show popup on the page like banner, offer or newsletter popup. You can place any content into the popup by the layout entries

Cookie Click on reset button to remove cookie of popup in the customer browser. It is useful to show popup once again when “show only once” option enabled or customer opt-in “don’t show again”
Size Select size of a popup
Close button Enable to show close button on a popup at the right-top side.
Show only once If enabled then a popup will auto-start only once to a customer
Auto start Enable to auto-open a popup after the website load. Add delay of seconds to auto-open popup. If disabled then you need to add a button or link in the website to open popup by click on it
Auto close Enable to auto-close popup after the open. Add delay of seconds to auto-close popup
Don’t show again option If the popup is auto start with disabled “show only once” option then customer sees popup every time whenever they visit the website. You can enable this option to allows a customer to disable auto-start popup

# Drawer

Use the drawer to create a side navigation menu or add(drop) any layout entries into a drawer

Open from Select an open position of a drawer
Effect Effect of a drawer opening
Overlay content Enable to blur page when a drawer is opened

# Sticky

Sticky is used to show a sticky notice or cookie policy on the page.

Position Select the position of the sticky panel
Collapsible Enable to make a sticky collapsible
Collapsed by default Enable to collapsed by default a sticky panel and use button or link to open it
Show only once Enable to show a sticky only once to the customer
Cookie Click on reset button to remove cookie of sticky in the customer browser. It is useful to show sticky once again when “show only once” option enabled
References

# Drag & Drop builder

Create a beautiful layout using drag & drop layout builder. The builder contains 8 types of entries and 5 device breakpoints to build a scalable and responsive layout. You can edit, delete, duplicate or hide an entry by click on it. You can hide, show or resize an entry per breakpoint to make a responsive layout.

Here are the following 8 types of layout entry

Section

The section is a root container of all other entries. It can’t be a child of other entries. There are three types of section containers

  • Full width: Full-width container and full-width content
  • Fixed width: Fixed-width container and fixed-width content
  • Fixed content: Full-width container and fixed-width content
Row Row entry used to create a row-column layout. Row entry contains only column entry as a child of it.
Column

A column of a row entry. You can resize column from 1 to 12 sizes per breakpoint. For example, column size 6 is half of the row size.

All column contain default padding of 15px on the left and right side, it is a gutter of 30px in a row. You can remove that gutter by disabling it from row entry setting.

You can add(drop) multiple entries including a row in the column as a child of it
Widget There are 15+ widgets available in the layout builder. Drag and drop it in a section or column entry
Design There are 12+ designs available in the layout builder. Drag and drop it in a section or column entry
Module You can add(drop) any opencart module in the layout
Content

Content entry is a data of specific page. For example, product title and description in the product page.

It is a vary from page to page depending on the selected layout type.
Component The component is a page-level static entry. The type of components is a drawer, popup and sticky. You need to use a unique id of a component to trigger it by button or link.

The following image illustrates options of drag & drop layout builder

  1. Section
  2. Row
  3. Column
  4. Widget
  5. Design
  6. Content
  7. Module
  8. Component
  9. Edit an entry setting & style
  10. Edit an entry own setting
  11. Duplicate an entry
  12. Hide an entry
  13. Delete an entry
  14. Switch breakpoints(Screen width)
  15. add Section
  16. Display hidden entries
  17. Change skin
  18. Copy this layout from current skin to another
  19. Export layout
  20. Import layout
  21. Save layout
Note: Children entries of row and column maintain their order per breakpoint
Tips: It is a good idea to export the existing layout before to change it

Entry Setting

Status Enable or disable entry
Customer Select the type of customer who can see the entry
Customer group Select customer group for the entry
Timespan Add start and end date of entry. Stay empty to always show entry
Unique id When an entry is collapsible then use a unique id of entry to trigger it by button or link. And don’t forget to change it when you create a duplicate of an entry
Collapsible Enable to make a collapsible entry
Collapsible default Select a default state of collapsible entry
Custom class Add custom CSS class in an entry. You can use bootstrap 5 utility class or create a new one from code. Also find out theme specific custom classes.
Condition Add Twig condition rule. For example, in product layout, if you want to display any row or widget only when product quantity is more than 1 then add in condition "quantity > 0"

Entry style

Margin Add margin around an entry
Padding Add padding in an entry
Border Add borders around an entry
Minimum height Add the minimum height of an entry
Flex direction

Select the direction of child entry.

  • Row: All child entries are displayed horizontally, as a row
  • Row reverse: Same as row, but in reverse order
  • Column: All child entries are displayed vertically, as a column
  • Column reverse: Same as column, but in reverse order
Justify content

Aligns all child entries when the entries do not use all available space on the main-axis.

The main-axis depends on your selected flex-direction of an entry, it is horizontal in a row and vertical in a column

  • Start: All child entries are positioned at the beginning
  • End: All child entries are positioned at the end
  • Center: All child entries are positioned at the center
  • Between: All child entries are positioned with space between the line
  • Around: All child entries are positioned with space before, between, and after the lines
Align items

Aligns all child entries when the entries do not use all available space on the cross-axis.

The cross-axis depends on your selected flex-direction of an entry, it is horizontal in a column and vertical in a row

  • Start: All child entries are positioned at the beginning
  • Center: All child entries are positioned at the center
  • End: All child entries are positioned at the end
  • Stretch: All child entries are stretch to fit cross-axis
Flex wrap Specify whether child entries should wrap or not
Grow Specify whether an entry should grow(expand) if space is available in the parent entry
Shrink Specify whether an entry should shrink if sibling entries require space in the parent entry
Align self

Specify the alignment of an entry with other sibling entries in cross-axis.

  • Auto: An entry is positioned as per selected “align-items” of the parent entry
  • Start: An entry is positioned at the start
  • Center: An entry is positioned at the center
  • End: An entry is positioned at the end
  • Stretch: An entry is stretched to fit cross-axis
Text align Select alignment of text in an entry
Text color Select the colour of the text. Bootstrap colour variables is also valid to use like $primary, $secondary, $info
Background color Select the background colour of an entry. Bootstrap colour variables is also valid to use like $primary, $secondary, $info
Border color Select the colour of the border. Use bootstrap variable $border-color for default border colour of theme
Background Select the background image of an entry

# Custom class

Custom classes are very useful to modify the default style of any layout entry. We have created some custom classes but you can add any CSS class in the layout entry.

Note: You can use multiple classes together by separating them using space
gutters This class will add gutter size padding around the layout entry. You can find the size(width) of gutter from style page
gutters-x This class will add gutter size padding on left and right side of the layout entry
gutters-y This class will add gutter size padding on top and bottom side of the layout entry
center-title This class will align the title of layout entry to the center
social-connect This class will work only with menu design. It will re-design a menu to look like a social icon
fixed-icon-size This class is used only in a menu to fix the width of all font icons of menu

If you have a knowledge of CSS styling then You can also create own custom class from CSS section of code page

Developer

# File structure

  • admin
    • controller
      • extension
        • maza
          • blog
            • article.php
            • author.php
            • category.php
            • comment.php
            • report.php
            • setting.php
          • catalog
            • autocomplete.php
            • data.php
            • product.php
          • common
            • clear.php
            • column_left.php
            • font_icon_manager.php
            • footer.php
            • header.php
            • svgmanager.php
          • event
            • design
              • layout.php
            • setting
              • module.php
            • catalog.php
            • common.php
            • language.php
          • filter
            • sync.php
            • value.php
          • install
            • engine.php
            • export.php
            • patch.php
            • theme.php
          • layout_builder
            • edit_column.php
            • edit_component.php
            • edit_content.php
            • edit_design.php
            • edit_module.php
            • edit_row.php
            • edit_section.php
            • edit_widget.php
            • setting_design.php
            • setting_widget.php
          • skin
            • footer.php
            • header.php
          • asset.php
          • blog.php
          • catalog.php
          • code.php
          • content_builder.php
          • filter.php
          • layout_builder.php
          • menu.php
          • module.php
          • newsletter.php
          • page_builder.php
          • skin.php
          • startup.php
          • style.php
          • system.php
          • testimonial.php
        • module
          • mz_article_listing.php
          • mz_blog_category.php
          • mz_blog_filter.php
          • mz_brand.php
          • mz_category_wall.php
          • mz_engine.php
          • mz_filter.php
          • mz_newsletter.php
          • mz_product_listing.php
          • mz_slider.php
          • mz_tags.php
          • mz_testimonial.php
        • mz_content
          • blog_article
            • author.php
            • breadcrumbs.php
            • comment_form.php
            • comment_list.php
            • description.php
            • extra.php
            • image.php
            • share.php
            • tags.php
            • title.php
          • blog_author
            • articles.php
            • breadcrumbs.php
            • description.php
            • image.php
            • pagination.php
            • title.php
          • blog_category
            • articles.php
            • breadcrumbs.php
            • description.php
            • image.php
            • pagination.php
            • refine_search.php
            • title.php
          • blog_search
            • articles.php
            • breadcrumbs.php
            • pagination.php
            • title.php
          • category
            • breadcrumbs.php
            • description.php
            • image.php
            • list_grid.php
            • pagination.php
            • product_compare.php
            • product_limit.php
            • products.php
            • refine_search.php
            • sort_by.php
            • title.php
          • manufacturer_info
            • breadcrumbs.php
            • list_grid.php
            • pagination.php
            • product_compare.php
            • product_limit.php
            • products.php
            • sort_by.php
            • title.php
          • product
            • brand.php
            • breadcrumbs.php
            • button.php
            • countdown.php
            • description.php
            • discounts.php
            • extra.php
            • image.php
            • minimum.php
            • options.php
            • price.php
            • quantity.php
            • rating.php
            • recurring.php
            • related.php
            • review_form.php
            • review_list.php
            • share.php
            • specification.php
            • tags.php
            • title.php
          • products
            • breadcrumbs.php
            • list_grid.php
            • pagination.php
            • product_compare.php
            • product_limit.php
            • products.php
            • sort_by.php
            • title.php
          • quick_view
            • brand.php
            • button.php
            • countdown.php
            • description.php
            • discounts.php
            • extra.php
            • image.php
            • minimum.php
            • options.php
            • price.php
            • quantity.php
            • rating.php
            • recurring.php
            • share.php
            • tags.php
            • title.php
          • search
            • breadcrumbs.php
            • list_grid.php
            • pagination.php
            • product_compare.php
            • product_limit.php
            • products.php
            • search_criteria.php
            • sort_by.php
            • title.php
          • special
            • breadcrumbs.php
            • list_grid.php
            • pagination.php
            • product_compare.php
            • product_limit.php
            • products.php
            • sort_by.php
            • title.php
        • mz_design
          • accordion.php
          • alert.php
          • button.php
          • carousel.php
          • ckeditor.php
          • horizontal_line.php
          • image.php
          • link.php
          • list.php
          • menu.php
          • parallax.php
          • table.php
          • tabs.php
        • mz_widget
          • banner.php
          • cart.php
          • category.php
          • contact_form.php
          • contact_us.php
          • countdown.php
          • currency.php
          • faq.php
          • html.php
          • language.php
          • login.php
          • map.php
          • navbar.php
          • newsletter.php
          • search.php
        • maza.php
        • mz_content.php
        • mz_design.php
        • mz_widget.php
    • language
      • en-gb
        • extension
          • maza
            • blog
              • article.php
              • author.php
              • category.php
              • comment.php
              • report.php
              • setting.php
            • catalog
              • data.php
              • product.php
            • common
              • clear.php
              • column_left.php
              • font_icon_manager.php
              • footer.php
              • header.php
              • svgmanager.php
            • content_builder
              • content.php
            • filter
              • sync.php
              • value.php
            • install
              • engine.php
              • theme.php
            • layout_builder
              • edit_column.php
              • edit_component.php
              • edit_content.php
              • edit_design.php
              • edit_module.php
              • edit_row.php
              • edit_section.php
              • edit_widget.php
            • skin
              • footer.php
              • header.php
            • asset.php
            • blog.php
            • catalog.php
            • code.php
            • common.php
            • content_builder.php
            • filter.php
            • layout_builder.php
            • menu.php
            • module.php
            • newsletter.php
            • page_builder.php
            • skin.php
            • style.php
            • system.php
            • testimonial.php
          • module
            • mz_article_listing.php
            • mz_blog_category.php
            • mz_blog_filter.php
            • mz_brand.php
            • mz_category_wall.php
            • mz_engine.php
            • mz_filter.php
            • mz_newsletter.php
            • mz_product_listing.php
            • mz_slider.php
            • mz_tags.php
            • mz_testimonial.php
          • mz_content
            • blog_article
              • author.php
              • breadcrumbs.php
              • comment_form.php
              • comment_list.php
              • description.php
              • extra.php
              • image.php
              • share.php
              • tags.php
              • title.php
            • blog_author
              • articles.php
              • breadcrumbs.php
              • description.php
              • image.php
              • pagination.php
              • title.php
            • blog_category
              • articles.php
              • breadcrumbs.php
              • description.php
              • image.php
              • pagination.php
              • refine_search.php
              • title.php
            • blog_search
              • articles.php
              • breadcrumbs.php
              • pagination.php
              • title.php
            • category
              • breadcrumbs.php
              • description.php
              • image.php
              • list_grid.php
              • pagination.php
              • product_compare.php
              • product_limit.php
              • products.php
              • refine_search.php
              • sort_by.php
              • title.php
            • default
              • manufacturer_info
                • breadcrumbs.php
                • list_grid.php
                • pagination.php
                • product_compare.php
                • product_limit.php
                • products.php
                • sort_by.php
                • title.php
              • product
                • brand.php
                • breadcrumbs.php
                • button.php
                • countdown.php
                • description.php
                • discounts.php
                • extra.php
                • image.php
                • minimum.php
                • options.php
                • price.php
                • quantity.php
                • rating.php
                • recurring.php
                • related.php
                • review_form.php
                • review_list.php
                • share.php
                • specification.php
                • tags.php
                • title.php
              • products
                • breadcrumbs.php
                • list_grid.php
                • pagination.php
                • product_compare.php
                • product_limit.php
                • products.php
                • sort_by.php
                • title.php
              • quick_view
                • brand.php
                • button.php
                • countdown.php
                • description.php
                • discounts.php
                • extra.php
                • image.php
                • minimum.php
                • options.php
                • price.php
                • quantity.php
                • rating.php
                • recurring.php
                • share.php
                • tags.php
                • title.php
              • search
                • breadcrumbs.php
                • list_grid.php
                • pagination.php
                • product_compare.php
                • product_limit.php
                • products.php
                • search_criteria.php
                • sort_by.php
                • title.php
              • special
                • breadcrumbs.php
                • list_grid.php
                • pagination.php
                • product_compare.php
                • product_limit.php
                • products.php
                • sort_by.php
                • title.php
              • blog_article.php
              • blog_author.php
              • blog_category.php
              • blog_search.php
              • category.php
              • default.php
              • home.php
              • manufacturer_info.php
              • product.php
              • products.php
              • quick_view.php
              • search.php
              • special.php
            • mz_design
              • accordion.php
              • alert.php
              • button.php
              • carousel.php
              • ckeditor.php
              • horizontal_line.php
              • image.php
              • link.php
              • list.php
              • menu.php
              • parallax.php
              • table.php
              • tabs.php
            • mz_widget
              • banner.php
              • cart.php
              • category.php
              • contact_form.php
              • contact_us.php
              • countdown.php
              • currency.php
              • faq.php
              • html.php
              • language.php
              • login.php
              • map.php
              • navbar.php
              • newsletter.php
              • search.php
              • testimonial_form.php
      • model
        • extension
          • maza
            • blog
              • article.php
              • author.php
              • category.php
              • comment.php
              • report.php
            • catalog
              • attribute_group.php
              • data.php
              • filter.php
              • option.php
              • product.php
            • filter
              • sync.php
              • value.php
            • install
              • merger.php
            • asset.php
            • blog.php
            • code.php
            • common.php
            • content_builder.php
            • extension.php
            • filter.php
            • footer.php
            • header.php
            • install.php
            • layout_builder.php
            • menu.php
            • module.php
            • newsletter.php
            • opencart.php
            • page_builder.php
            • skin.php
            • system.php
            • testimonial.php
            • theme.php
      • view
        • image
          • maza
            • down-arrow-o.png
            • image_placeholder.png
            • logo.png
        • javascript
          • maza
            • ace
              • bootstrap
                • ckeditor
                  • colorpicker
                    • jquery-ui-1.12.1.Interactions
                      • layout_builder.js
                      • mz_common.js
                  • stylesheet
                    • maza
                      • hover_effects.css
                      • mz_stylesheet.css
                  • template
                    • extension
                      • maza
                        • blog
                          • article_form.twig
                          • article_list.twig
                          • author_form.twig
                          • author_list.twig
                          • category_form.twig
                          • category_list.twig
                          • comment_form.twig
                          • comment_list.twig
                          • report.twig
                          • setting.twig
                        • catalog
                          • data_form.twig
                          • data_list.twig
                          • product_form.twig
                          • product_list.twig
                        • common
                          • column_left.twig
                          • font_icon_manager.twig
                          • footer.twig
                          • header.twig
                          • svgmanager.twig
                        • content_builder
                          • content.twig
                          • form.twig
                          • list.twig
                        • filter
                          • value_form.twig
                          • value_list.twig
                        • install
                          • engine.twig
                          • theme.twig
                        • layout_builder
                          • edit_column.twig
                          • edit_component.twig
                          • edit_content.twig
                          • edit_design.twig
                          • edit_module.twig
                          • edit_row.twig
                          • edit_section.twig
                          • edit_widget.twig
                          • form.twig
                          • list.twig
                          • setting_design.twig
                          • setting_widget.twig
                        • menu
                          • form.twig
                          • item.twig
                          • list.twig
                        • newsletter
                          • mail.twig
                          • subscriber.twig
                        • page_builder
                          • form.twig
                          • layout.twig
                          • list.twig
                        • skin
                          • footer.twig
                          • header.twig
                        • testimonial
                          • form.twig
                          • list.twig
                          • setting.twig
                        • blog.twig
                        • catalog.twig
                        • code.twig
                        • code_cm_bkp.twig
                        • filter_form.twig
                        • filter_list.twig
                        • module.twig
                        • newsletter.twig
                        • skin.twig
                        • style.twig
                        • system.twig
                      • module
                        • mz_article_listing.twig
                        • mz_blog_category.twig
                        • mz_blog_filter.twig
                        • mz_brand.twig
                        • mz_category_wall.twig
                        • mz_engine.twig
                        • mz_filter.twig
                        • mz_newsletter.twig
                        • mz_product_listing.twig
                        • mz_slider.twig
                        • mz_tags.twig
                        • mz_testimonial.twig
                      • mz_content
                        • blog_article
                          • author.twig
                          • breadcrumbs.twig
                          • comment_form.twig
                          • comment_list.twig
                          • description.twig
                          • extra.twig
                          • image.twig
                          • share.twig
                          • tags.twig
                          • title.twig
                        • blog_author
                          • articles.twig
                          • breadcrumbs.twig
                          • description.twig
                          • image.twig
                          • pagination.twig
                          • refine_search.twig
                          • title.twig
                        • blog_category
                          • articles.twig
                          • breadcrumbs.twig
                          • description.twig
                          • image.twig
                          • pagination.twig
                          • refine_search.twig
                          • title.twig
                        • blog_search
                          • articles.twig
                          • breadcrumbs.twig
                          • pagination.twig
                          • title.twig
                        • category
                          • breadcrumbs.twig
                          • description.twig
                          • image.twig
                          • list_grid.twig
                          • pagination.twig
                          • product_compare.twig
                          • product_limit.twig
                          • products.twig
                          • refine_search.twig
                          • sort_by.twig
                          • title.twig
                        • manufacturer_info
                          • breadcrumbs.twig
                          • list_grid.twig
                          • pagination.twig
                          • product_compare.twig
                          • product_limit.twig
                          • products.twig
                          • sort_by.twig
                          • title.twig
                        • product
                          • brand.twig
                          • breadcrumbs.twig
                          • button.twig
                          • countdown.twig
                          • description.twig
                          • discounts.twig
                          • extra.twig
                          • image.twig
                          • minimum.twig
                          • options.twig
                          • price.twig
                          • quantity.twig
                          • rating.twig
                          • recurring.twig
                          • related.twig
                          • review_form.twig
                          • review_list.twig
                          • share.twig
                          • specification.twig
                          • tags.twig
                          • title.twig
                        • products
                          • breadcrumbs.twig
                          • list_grid.twig
                          • pagination.twig
                          • product_compare.twig
                          • product_limit.twig
                          • products.twig
                          • sort_by.twig
                          • title.twig
                        • quick_view
                          • brand.twig
                          • button.twig
                          • countdown.twig
                          • description.twig
                          • discounts.twig
                          • extra.twig
                          • image.twig
                          • minimum.twig
                          • options.twig
                          • price.twig
                          • quantity.twig
                          • rating.twig
                          • recurring.twig
                          • share.twig
                          • tags.twig
                          • title.twig
                        • search
                          • breadcrumbs.twig
                          • list_grid.twig
                          • pagination.twig
                          • product_compare.twig
                          • product_limit.twig
                          • products.twig
                          • search_criteria.twig
                          • sort_by.twig
                          • title.twig
                        • special
                          • breadcrumbs.twig
                          • list_grid.twig
                          • pagination.twig
                          • product_compare.twig
                          • product_limit.twig
                          • products.twig
                          • sort_by.twig
                          • title.twig
                      • mz_design
                        • accordion.twig
                        • alert.twig
                        • button.twig
                        • carousel.twig
                        • ckeditor.twig
                        • horizontal_line.twig
                        • image.twig
                        • link.twig
                        • list.twig
                        • menu.twig
                        • parallax.twig
                        • table.twig
                        • tabs.twig
                      • mz_widget
                        • banner.twig
                        • cart.twig
                        • category.twig
                        • contact_form.twig
                        • contact_us.twig
                        • countdown.twig
                        • currency.twig
                        • faq.twig
                        • html.twig
                        • language.twig
                        • login.twig
                        • map.twig
                        • navbar.twig
                        • newsletter.twig
                        • search.twig
              • catalog
                • controller
                  • extension
                    • maza
                      • account
                        • wishlist.php
                      • blog
                        • article.php
                        • author.php
                        • category.php
                        • home.php
                        • search.php
                      • endup
                        • asset.php
                      • event
                        • common
                          • content.php
                          • footer.php
                          • header.php
                          • product.php
                        • extension
                          • module
                            • mz_newsletter.php
                            • mz_tags.php
                        • common.php
                        • language.php
                      • hooks
                        • data.php
                        • product.php
                      • product
                        • compare.php
                        • product.php
                        • quick_view.php
                      • startup
                        • asset.php
                        • content.php
                        • seo_url.php
                        • setting.php
                        • startup.php
                      • cache.php
                      • cron.php
                      • emulator.php
                      • layout_builder.php
                      • menu.php
                      • newsletter.php
                      • page.php
                      • products.php
                      • testimonial.php
                    • module
                      • mz_article_listing.php
                      • mz_blog_category.php
                      • mz_blog_filter.php
                      • mz_brand.php
                      • mz_category_wall.php
                      • mz_filter.php
                      • mz_product_listing.php
                      • mz_slider.php
                      • mz_tags.php
                      • mz_testimonial.php
                    • mz_content
                      • blog_article
                        • author.php
                        • breadcrumbs.php
                        • comment_form.php
                        • comment_list.php
                        • description.php
                        • extra.php
                        • image.php
                        • share.php
                        • tags.php
                        • title.php
                      • blog_author
                        • articles.php
                        • breadcrumbs.php
                        • description.php
                        • image.php
                        • pagination.php
                        • title.php
                      • blog_category
                        • articles.php
                        • breadcrumbs.php
                        • description.php
                        • image.php
                        • pagination.php
                        • refine_search.php
                        • title.php
                      • blog_search
                        • articles.php
                        • breadcrumbs.php
                        • pagination.php
                        • title.php
                      • category
                        • breadcrumbs.php
                        • description.php
                        • image.php
                        • list_grid.php
                        • pagination.php
                        • product_compare.php
                        • product_limit.php
                        • products.php
                        • refine_search.php
                        • sort_by.php
                        • title.php
                      • manufacturer_info
                        • breadcrumbs.php
                        • list_grid.php
                        • pagination.php
                        • product_compare.php
                        • product_limit.php
                        • products.php
                        • sort_by.php
                        • title.php
                      • product
                        • brand.php
                        • breadcrumbs.php
                        • button.php
                        • countdown.php
                        • description.php
                        • discounts.php
                        • extra.php
                        • image.php
                        • minimum.php
                        • options.php
                        • price.php
                        • quantity.php
                        • rating.php
                        • recurring.php
                        • related.php
                        • review_form.php
                        • review_list.php
                        • share.php
                        • specification.php
                        • tags.php
                        • title.php
                      • products
                        • breadcrumbs.php
                        • list_grid.php
                        • pagination.php
                        • product_compare.php
                        • product_limit.php
                        • products.php
                        • sort_by.php
                        • title.php
                      • quick_view
                        • brand.php
                        • button.php
                        • countdown.php
                        • description.php
                        • discounts.php
                        • extra.php
                        • image.php
                        • minimum.php
                        • options.php
                        • price.php
                        • quantity.php
                        • rating.php
                        • recurring.php
                        • share.php
                        • tags.php
                        • title.php
                      • search
                        • breadcrumbs.php
                        • list_grid.php
                        • pagination.php
                        • product_compare.php
                        • product_limit.php
                        • products.php
                        • search_criteria.php
                        • sort_by.php
                        • title.php
                      • special
                        • breadcrumbs.php
                        • list_grid.php
                        • pagination.php
                        • product_compare.php
                        • product_limit.php
                        • products.php
                        • sort_by.php
                        • title.php
                    • mz_design
                      • accordion.php
                      • alert.php
                      • button.php
                      • carousel.php
                      • ckeditor.php
                      • horizontal_line.php
                      • image.php
                      • link.php
                      • list.php
                      • menu.php
                      • parallax.php
                      • table.php
                      • tabs.php
                    • mz_widget
                      • banner.php
                      • cart.php
                      • category.php
                      • contact_form.php
                      • contact_us.php
                      • countdown.php
                      • currency.php
                      • faq.php
                      • html.php
                      • language.php
                      • login.php
                      • map.php
                      • navbar.php
                      • newsletter.php
                      • search.php
                • language
                  • en-gb
                    • extension
                      • maza
                        • blog
                          • article.php
                          • author.php
                          • category.php
                          • search.php
                        • product
                          • product.php
                        • common.php
                        • emulator.php
                        • newsletter.php
                        • page.php
                        • products.php
                        • testimonial.php
                      • module
                        • mz_article_listing.php
                        • mz_filter.php
                        • mz_product_listing.php
                        • mz_testimonial.php
                      • mz_widget
                        • contact_form.php
                        • contact_us.php
                        • login.php
                        • map.php
                        • newsletter.php
                        • search.php
                • model
                  • extension
                    • maza
                      • blog
                        • article.php
                        • author.php
                        • category.php
                        • comment.php
                      • catalog
                        • category.php
                        • data.php
                        • manufacturer.php
                        • product.php
                      • asset.php
                      • common.php
                      • cron.php
                      • extension.php
                      • image.php
                      • layout_builder.php
                      • menu.php
                      • module.php
                      • newsletter.php
                      • opencart.php
                      • page.php
                      • skin.php
                      • testimonial.php
                      • theme.php
                    • module
                      • mz_filter.php
                      • mz_tags.php
                • view
                  • javascript
                    • maza
                      • custom_code
                        • javascript
                          • stylesheet
                        • theme
                          • mz_poco
                            • asset
                              • font_icon
                                • javascript
                                  • stylesheet
                                  • config
                                    • skin
                                      • megastore-1.php
                                      • megastore-2.php
                                      • megastore-3.php
                                      • megastore-4.php
                                    • color_schemes.php
                                    • overlay_pattern.php
                                  • image
                                    • default.png
                                  • setting
                                    • skin
                                      • megastore-1.json
                                      • megastore-2.json
                                      • megastore-3.json
                                      • megastore-4.json
                                    • theme.json
                                  • skins
                                    • content
                                      • megastore-1
                                        • base
                                          • _typography.scss
                                        • components
                                          • designs
                                            • _image.scss
                                            • _menu.scss
                                          • modules
                                            • _brand.scss
                                            • _category-wall.scss
                                            • _filter.scss
                                            • _tab-listing.scss
                                          • widgets
                                            • _contact_us.scss
                                            • _countdown.scss
                                          • _articles.scss
                                          • _breadcrumb.scss
                                          • _drawer.scss
                                          • _form.scss
                                          • _nav.scss
                                          • _newsletter.scss
                                          • _pagination.scss
                                          • _products.scss
                                          • _testimonial.scss
                                        • page
                                          • _article.scss
                                          • _category.scss
                                          • _product.scss
                                          • _search.scss
                                        • _variables.scss
                                        • bootstrap.config.scss
                                        • config.json
                                        • style.scss
                                      • megastore-2
                                        • base
                                          • _typography.scss
                                        • components
                                          • designs
                                            • _image.scss
                                            • _menu.scss
                                          • modules
                                            • _brand.scss
                                            • _category-wall.scss
                                            • _filter.scss
                                            • _tab-listing.scss
                                          • widgets
                                            • _contact_us.scss
                                            • _countdown.scss
                                          • _articles.scss
                                          • _breadcrumb.scss
                                          • _drawer.scss
                                          • _form.scss
                                          • _nav.scss
                                          • _newsletter.scss
                                          • _pagination.scss
                                          • _products.scss
                                          • _testimonial.scss
                                        • page
                                          • _article.scss
                                          • _category.scss
                                          • _product.scss
                                          • _search.scss
                                        • _variables.scss
                                        • bootstrap.config.scss
                                        • config.json
                                        • style.scss
                                      • megastore-3
                                        • base
                                          • _typography.scss
                                        • components
                                          • designs
                                            • _image.scss
                                            • _menu.scss
                                            • _menu_1[Trash].scss
                                            • _menu_2[Trash].scss
                                          • modules
                                            • _brand.scss
                                            • _category-wall.scss
                                            • _filter.scss
                                            • _tab-listing.scss
                                          • widgets
                                            • _contact_us.scss
                                            • _countdown.scss
                                          • _articles.scss
                                          • _breadcrumb.scss
                                          • _drawer.scss
                                          • _form.scss
                                          • _nav.scss
                                          • _newsletter.scss
                                          • _pagination.scss
                                          • _products.scss
                                          • _testimonial.scss
                                        • page
                                          • _article.scss
                                          • _category.scss
                                          • _product.scss
                                          • _search.scss
                                        • _variables.scss
                                        • bootstrap.config.scss
                                        • config.json
                                        • style.scss
                                      • megastore-4
                                        • base
                                          • _typography.scss
                                        • components
                                          • designs
                                            • _image.scss
                                            • _menu.scss
                                          • modules
                                            • _brand.scss
                                            • _category-wall.scss
                                            • _filter.scss
                                            • _tab-listing.scss
                                          • widgets
                                            • _contact_us.scss
                                            • _countdown.scss
                                          • _articles.scss
                                          • _breadcrumb.scss
                                          • _drawer.scss
                                          • _form.scss
                                          • _nav.scss
                                          • _newsletter.scss
                                          • _pagination.scss
                                          • _products.scss
                                          • _testimonial.scss
                                        • page
                                          • _article.scss
                                          • _category.scss
                                          • _product.scss
                                          • _search.scss
                                        • _variables.scss
                                        • bootstrap.config.scss
                                        • config.json
                                        • style.scss
                                    • footer
                                      • megastore-1
                                        • components
                                          • _social.scss
                                        • _variables.scss
                                        • config.json
                                        • style.scss
                                      • megastore-2
                                        • components
                                          • _social.scss
                                        • _variables.scss
                                        • config.json
                                        • style.scss
                                      • megastore-3
                                        • components
                                          • _newsletter.scss
                                          • _social.scss
                                        • _variables.scss
                                        • config.json
                                        • style.scss
                                      • megastore-4
                                        • components
                                          • _newsletter.scss
                                          • _social.scss
                                        • _variables.scss
                                        • config.json
                                        • style.scss
                                    • header
                                      • megastore-1
                                        • components
                                          • _navbar.scss
                                        • module
                                          • _mega_menu.scss
                                        • widget
                                          • _cart.scss
                                          • _search.scss
                                        • _typography.scss
                                        • _variables.scss
                                        • config.json
                                        • style.scss
                                      • megastore-2
                                        • components
                                          • _navbar.scss
                                        • module
                                          • _mega_menu.scss
                                        • widget
                                          • _cart.scss
                                          • _search.scss
                                        • _typography.scss
                                        • _variables.scss
                                        • config.json
                                        • style.scss
                                      • megastore-3
                                        • components
                                          • _navbar.scss
                                        • module
                                          • _mega_menu.scss
                                        • widget
                                          • _cart.scss
                                          • _search.scss
                                        • _typography.scss
                                        • _variables.scss
                                        • config.json
                                        • style.scss
                                      • megastore-4
                                        • components
                                          • _navbar.scss
                                        • module
                                          • _mega_menu.scss
                                        • widget
                                          • _cart.scss
                                          • _search.scss
                                        • _typography.scss
                                        • _variables.scss
                                        • config.json
                                        • style.scss
                                    • scss
                                      • abstracts
                                        • _animations.scss
                                        • _functions.scss
                                        • _helpers.scss
                                        • _mixins.scss
                                        • _variables.scss
                                      • base
                                        • _reboot.scss
                                        • _typography.scss
                                        • _utilities.scss
                                      • components
                                        • _alert.scss
                                        • _banner.scss
                                        • _breadcrumb.scss
                                        • _card.scss
                                        • _carousel.scss
                                        • _drawer.scss
                                        • _dropdown.scss
                                        • _forms.scss
                                        • _image.scss
                                        • _input-group.scss
                                        • _list.scss
                                        • _map.scss
                                        • _modal.scss
                                        • _nav.scss
                                        • _popover.scss
                                        • _scrollbar.scss
                                        • _swiper.scss
                                        • _table.scss
                                      • layout
                                        • _entry.scss
                                        • _page.scss
                                      • skins
                                        • _abstracts.scss
                                        • _bootstrap.config.scss
                                        • _content.scss
                                        • _footer.scss
                                        • _header.scss
                                    • bootstrap.config.scss
                                    • common.js
                                    • common.scss
                                  • template
                                    • account
                                      • account.twig
                                      • address_form.twig
                                      • address_list.twig
                                      • affiliate.twig
                                      • download.twig
                                      • edit.twig
                                      • forgotten.twig
                                      • login.twig
                                      • newsletter.twig
                                      • order_info.twig
                                      • order_list.twig
                                      • password.twig
                                      • recurring_info.twig
                                      • recurring_list.twig
                                      • register.twig
                                      • reset.twig
                                      • return_form.twig
                                      • return_info.twig
                                      • return_list.twig
                                      • reward.twig
                                      • tracking.twig
                                      • transaction.twig
                                      • voucher.twig
                                      • wishlist.twig
                                    • affiliate
                                      • login.twig
                                      • register.twig
                                    • checkout
                                      • cart.twig
                                      • checkout.twig
                                      • confirm.twig
                                      • guest.twig
                                      • guest_shipping.twig
                                      • login.twig
                                      • payment_address.twig
                                      • payment_method.twig
                                      • register.twig
                                      • shipping_address.twig
                                      • shipping_method.twig
                                    • common
                                      • column_left.twig
                                      • column_right.twig
                                      • currency.twig
                                      • footer.twig
                                      • header.twig
                                      • home.twig
                                      • language.twig
                                      • maintenance.twig
                                      • menu.twig
                                      • success.twig
                                    • error
                                      • not_found.twig
                                    • extension
                                      • captcha
                                        • basic.twig
                                        • google.twig
                                      • credit_card
                                        • sagepay_direct_form.twig
                                        • sagepay_direct_list.twig
                                        • sagepay_server_list.twig
                                        • squareup.twig
                                      • maza
                                        • blog
                                          • article
                                            • author.twig
                                            • comment_form.twig
                                            • comment_list.twig
                                            • description.twig
                                            • extra.twig
                                            • image.twig
                                            • tags.twig
                                          • category
                                            • refine_search.twig
                                          • common
                                            • articles.twig
                                            • breadcrumbs.twig
                                            • description.twig
                                            • image.twig
                                            • pagination.twig
                                            • share.twig
                                            • title.twig
                                          • article.twig
                                          • author.twig
                                          • autocomplete.twig
                                          • category.twig
                                          • comment.twig
                                          • home.twig
                                          • search.twig
                                        • layout_builder
                                          • sass.twig
                                          • sass_media.twig
                                        • product
                                          • quick_view.twig
                                        • emulator.twig
                                        • layout_builder.twig
                                        • menu.twig
                                        • newsletter_confirm_subscribe.twig
                                        • newsletter_confirm_unsubscribe.twig
                                        • page.twig
                                        • products.twig
                                        • testimonial.twig
                                      • module
                                        • account.twig
                                        • bestseller.twig
                                        • category.twig
                                        • featured.twig
                                        • filter.twig
                                        • google_hangouts.twig
                                        • html.twig
                                        • information.twig
                                        • latest.twig
                                        • laybuy_layout.twig
                                        • mz_article_listing.twig
                                        • mz_blog_category.twig
                                        • mz_blog_filter.twig
                                        • mz_brand.twig
                                        • mz_category_wall.twig
                                        • mz_filter.twig
                                        • mz_product_listing.twig
                                        • mz_slider.twig
                                        • mz_tags.twig
                                        • mz_testimonial.twig
                                        • pilibaba_button.twig
                                        • pp_braintree_button.twig
                                        • pp_button.twig
                                        • pp_login.twig
                                        • sagepay_direct_cards.twig
                                        • sagepay_server_cards.twig
                                        • slideshow.twig
                                        • special.twig
                                        • store.twig
                                      • mz_design
                                        • accordion.twig
                                        • alert.twig
                                        • button.twig
                                        • carousel.twig
                                        • horizontal_line.twig
                                        • image.twig
                                        • link.twig
                                        • list.twig
                                        • menu.twig
                                        • parallax.twig
                                        • table.twig
                                        • tabs.twig
                                      • mz_widget
                                        • banner.twig
                                        • cart.twig
                                        • contact_form.twig
                                        • contact_us.twig
                                        • countdown.twig
                                        • faq.twig
                                        • login.twig
                                        • map.twig
                                        • navbar.twig
                                        • newsletter.twig
                                        • search.twig
                                      • payment
                                        • alipay.twig
                                        • alipay_cross.twig
                                        • amazon_login_pay_address.twig
                                        • amazon_login_pay_confirm.twig
                                        • amazon_login_pay_failure.twig
                                        • amazon_login_pay_payment.twig
                                        • authorizenet_aim.twig
                                        • authorizenet_sim.twig
                                        • bank_transfer.twig
                                        • bluepay_hosted.twig
                                        • bluepay_redirect.twig
                                        • cardconnect.twig
                                        • cardinity.twig
                                        • cheque.twig
                                        • cod.twig
                                        • divido.twig
                                        • eway.twig
                                        • eway_iframe.twig
                                        • firstdata.twig
                                        • firstdata_remote.twig
                                        • free_checkout.twig
                                        • g2apay.twig
                                        • globalpay.twig
                                        • globalpay_remote.twig
                                        • klarna_account.twig
                                        • klarna_checkout.twig
                                        • klarna_checkout_sidebar.twig
                                        • klarna_checkout_success.twig
                                        • klarna_invoice.twig
                                        • laybuy.twig
                                        • liqpay.twig
                                        • nochex.twig
                                        • paymate.twig
                                        • paypoint.twig
                                        • payza.twig
                                        • perpetual_payments.twig
                                        • pilibaba.twig
                                        • pp_braintree.twig
                                        • pp_braintree_confirm.twig
                                        • pp_express.twig
                                        • pp_express_confirm.twig
                                        • pp_payflow.twig
                                        • pp_payflow_iframe.twig
                                        • pp_pro.twig
                                        • pp_pro_iframe.twig
                                        • pp_pro_iframe_body.twig
                                        • pp_standard.twig
                                        • realex.twig
                                        • realex_remote.twig
                                        • sagepay_direct.twig
                                        • sagepay_server.twig
                                        • sagepay_us.twig
                                        • securetrading_pp.twig
                                        • securetrading_ws.twig
                                        • skrill.twig
                                        • squareup.twig
                                        • twocheckout.twig
                                        • web_payment_software.twig
                                        • wechat_pay.twig
                                        • wechat_pay_qrcode.twig
                                        • worldpay.twig
                                        • worldpay_failure.twig
                                        • worldpay_success.twig
                                      • recurring
                                        • pp_express.twig
                                        • squareup.twig
                                      • total
                                        • coupon.twig
                                        • reward.twig
                                        • shipping.twig
                                        • voucher.twig
                                    • information
                                      • contact.twig
                                      • information.twig
                                      • sitemap.twig
                                      • tracking.twig
                                    • product
                                      • category
                                        • description.twig
                                        • image.twig
                                        • refine_search.twig
                                      • common
                                        • breadcrumbs.twig
                                        • list_grid.twig
                                        • pagination.twig
                                        • product.twig
                                        • product_compare.twig
                                        • product_limit.twig
                                        • products.twig
                                        • share.twig
                                        • sort_by.twig
                                        • title.twig
                                      • product
                                        • brand.twig
                                        • button.twig
                                        • countdown.twig
                                        • description.twig
                                        • discounts.twig
                                        • extra.twig
                                        • image copy.twig
                                        • image.twig
                                        • minimum.twig
                                        • options.twig
                                        • price.twig
                                        • quantity.twig
                                        • rating.twig
                                        • recurring.twig
                                        • related.twig
                                        • review_form.twig
                                        • review_list.twig
                                        • specification.twig
                                        • tags.twig
                                      • search
                                        • search_criteria.twig
                                      • autocomplete.twig
                                      • category.twig
                                      • compare.twig
                                      • manufacturer_info.twig
                                      • manufacturer_list.twig
                                      • product.twig
                                      • review.twig
                                      • search.twig
                                      • special.twig
                                  • config.json
                          • image
                            • catalog
                              • maza
                                • demo
                                  • mz_poco
                                  • svg
                                    • testimonial
                                      • theme
                                        • mz_poco
                                          • footer_thumb
                                            • megastore-1.jpg
                                            • megastore-2.png
                                            • megastore-3.jpg
                                            • megastore-4.jpg
                                          • header_thumb
                                            • megastore-1.jpg
                                            • megastore-2.png
                                            • megastore-3.jpg
                                            • megastore-4.jpg
                                          • pattern
                                            • skin_thumb
                                              • megastore-1.jpg
                                              • megastore-2.jpg
                                              • megastore-3.jpg
                                              • megastore-4.jpg
                                  • system
                                    • config
                                      • maza
                                        • admin.php
                                        • catalog.php
                                        • config.php
                                        • constant.php
                                    • library
                                      • maza
                                        • cache
                                          • db.php
                                          • file.php
                                        • config
                                          • skin.php
                                          • theme.php
                                        • db
                                          • mpdo.php
                                          • mssql.php
                                          • mysql.php
                                          • mysqli.php
                                          • postgre.php
                                        • helper
                                          • array.php
                                          • file.php
                                          • oc.php
                                          • url.php
                                        • layout
                                          • column.php
                                          • component.php
                                          • content.php
                                          • design.php
                                          • module.php
                                          • row.php
                                          • section.php
                                          • widget.php
                                        • ocmod
                                          • mz_admin_core.ocmod.xml
                                          • mz_catalog_core.ocmod.xml
                                          • mz_filter.ocmod.xml
                                          • mz_hooks.ocmod.xml
                                          • mz_language.ocmod.xml
                                          • mz_special_deal.ocmod.xml
                                          • mz_system_common.ocmod.xml
                                        • vendor
                                          • cache.php
                                          • composer.json
                                          • composer.lock
                                          • db.php
                                          • document.php
                                          • hook.php
                                          • library.php
                                          • loader.php
                                          • minifier.php
                                          • registry.php
                                          • scss.php
                                          • startup.php