Guenti

Responsive OpenCart Theme


Hi, Thank you for buying our theme. If you have any question please contact me via contact form on themeforest profile. I usually give you answer in max 72 hours. Thanks,

Before you install theme, make sure you have the correct version of OpenCart installed.
We recommend installation on a clean, unmodified version of OpenCart.

How to install OpenCart? Check here


 

The installation and configuration, you can see here:


 

 

 

 

 

 

 

 

.

 

For custom modules we added some extra positions which allow you create awesome store.

 

 

 

 

 

 

 

.

 

General

Layout

Responsive design

  • You can choose here if your store should be responsive or not.

Page width

Select page width for your store:
  • Wide - 1220px EXAMPLE
  • Standard - 980px EXAMPLE
  • Full width - Here you can select your own max width. EXAMPLE

Layout Type

Choose which element of the theme should be full width and which not.
You can check demo settings for this layout in admin panel:
http://themenis.com/opencart/guenti/
 
 

Product

Sale badge

Disable or enable sale badge on discounted product.
You can select SALE name which is multilanguage or PERCENT discount.

Product page

Select zoom style, additional image position and product image size.
  • Cloud Zoom, Large image, Left - EXAMPLE
  • Default zoom, Small image, Bottom - EXAMPLE

Product grid

Choose product number per row on homepage. Enable/disable scroll for default product modules and define information displayed on product hover.
  • Hover: All elements are ON - EXAMPLE
  • Hover: Without add to compare and wishlist - EXAMPLE
 
 

Category

  • Set product numbers per row in grid view on category page.
  • Select default product view.
  • Define refine search style, subcategories per row and image size.
 
 

Translations

Here you can add translations for all additional words used in this theme.
 
 
 
 

Design

Font

In this module, you can change the fonts and sizes. From individual fonts as product name to the entire text body.
 This theme use Google Fonts.
 
 

Colors

Choose one of the available colors that best suits you. In addition, match it to yourself even more by changing the colors of smallest elements of design.
 
 

Backgrounds

You can upload custom bg images for each element:
  • Body
  • Top
  • CustomFooter
and image for Headlines:
 
 
 
 

Footer

Contact

Add contact details. You can add:
  • 2 phone numbers
  • 2 skype profiles
  • 2 e-mails
 
 

About us

Add some information about your store.
 
 

Facebook

Add your facebook fan page. You can set height and number of faces for your likebox.
 
 

Twitter

How add twitter profile in custom footer? Check HERE
 
 
 
 
 

Custom block

Contact page

Code used in demo on contact page is iframe with google maps.
 
 

Product page

Code used in demo:
<div style="position:relative;margin: 0px -20px 0px -20px;padding:5px 20px 17px 20px;border-bottom:1px solid #e5e5e5;text-align: center;">
     <img src="image/data/apple.png" alt="" />
</div>

<div style="position:relative;margin: 0px -20px 20px -20px;padding:2px 20px;border-bottom:1px solid #e5e5e5">
     <div class="clearfix" style="border-bottom: 1px solid #e5e5e5;padding: 14px 0px">
          <img src="image/data/free-delivery.png" align="left" style="margin-top:4px;margin-right: 20px" alt="" />
          <strong style="font-size: 11px;color: #00b5cb;font-weight: 700">FREE DELIVERY</strong>        
          <br>From $500
      </div>

     <div class="clearfix" style="border-bottom: 1px solid #e5e5e5;padding: 14px 0px">
          <img src="image/data/free-coupon.png" align="left" style="margin-top:4px;margin-right: 20px" alt="" />
          <strong style="font-size: 11px;color: #00b5cb;font-weight: 700">FREE COUPON</strong>        
          <br>Buy this product and get 10% coupon
      </div>

     <div class="clearfix" style="padding: 14px 0px">
          <img src="image/data/returns.png" align="left" style="margin-top:4px;margin-right: 20px" alt="" />
          <strong style="font-size: 11px;color: #00b5cb;font-weight: 700">RETURNS</strong>        
          <br>7 days for returns
      </div>
</div>

<img src="image/data/product-block.png" style="display: block;margin-bottom: 20px" alt="" />

In this module, you can put a logo of the manufacturer, add the information with your own icons, add text and image.
 
 
 
 
 

Internal modules

Additional module in top above search & cart bar.
Code used in demo:
<ul class="top-contact-us">
 <li><i class="icon-phone"></i> (0048) 500-500-500</li>
 <li style="color: #00b5cb"><i class="icon-envelope"></i> contact@example.com</li>
</ul>
 
 
 
 

Custom code

If you need to edit the template using CSS or Javascript, you do not have to look and edit files. Custom Code module allows you to do it from the admin panel.
 
 

Payment

If you want to, your customers see how they can pay for their purchases simply add the icons in the payment section.
 
 

Compressor code

The content of css and js files are placed in a single file, delete spaces, which allows for faster page loading. Changes made when this option is enabled will be visible after an hour.
 

 

 

 

 

 

 

 

.

 

An additional module that you can use as a slider.
It's a lot easier to use than the standard Slideshow module, because Slider is creating in Existing Modules tab where you can add individual pictures and set the size of the Slider.


Then in Module Placement tab set the position for the selected Slider.
 

 

 

 

 

 

 

 

.

 

An additional module that allows you to add any HTML content anywhere on the page.
In demo version was used to create banners and Additional contact in default footer.
 
Code used for banners:
<div class="row banners hidden-xs">
 <div class="col-sm-4"><a href="#"><img src="image/data/banner-01.png" alt="Image"></a></div>
 <div class="col-sm-4"><a href="#"><img src="image/data/banner-02.png" alt="Image"></a></div>
 <div class="col-sm-4"><a href="#"><img src="image/data/banner-03.png" alt="Image"></a></div>
 </div>
 
Code used for contact in footer:
<ul class="contact-us clearfix">
 <li><i class="icon-mobile-phone"></i><p>048 500-500-500</p></li>
 <li><i class="icon-envelope"></i><p>mail@example.com</p></li>
</ul>
 

 

 

 

 

 

 

 

.

 
The most powerful module which allow you to create the Product Modules on the homepage.

You can choose:
  • Latest Products
  • Special Products
  • Bestsellers Products
  • Product you want

  • All products from categories you want

 

Product Tabs

To create product module with tabs:
 
Just add more items for your module:
 
 
 
 

Module settings

  • Carousel - Enable disable Carousel option
  • Dimension - Size of product image. If you set for example 300x300 and 6 products per row, images will be automaticly resized to smaller size.
  • Max items - Product number in one row
  • Max columns - Number of rows (if you want to use carousel options should be set: 1)
  • Limit items in carousel - Max number of products in module
  • Layout - Select page where this module should be placed
  • Positions - Choose position on the selected page

 

 

 

 

 

 

 

 

 

.

 

This module allow you to create your own MegaMenu instead of default submenu.
 
Default position for MegaMenu is set for Menu but you can put this module also anywhere you want.
 

Design configuration

  • Navigtion text - Change name of this module

  • Expand menu bar Full Width
    • Yes - Menu is full width in content.

  • No - Menu is fixed in the content.

  • Home item - Select between Icon, Text or Disable Home button in menu.
 
 

jQuery Animations

Select animation style and time for MegaMenu.
 
 
 

Item setting

 
 

Content item

This fields are only for Subcategories.

 

 

 

 

 

 

 

 

 

.

 

Here you can add unlimited numbers of exta tabs on product page. You can add tabs for all products or only for selected.
EXAMPLE

 

 

 

 

 

 

 

 

 

.

 

With this module you can create awesome sliders with nice effects.
 

How to set sliders:

  1. In general options set Height, Slider speed and Layout type for all sliders
  2. Than go to slide 1 and upload image select transition effect and add your link.
Now you can add ements

Elements settings

With this settings you can create your own custom classess for each element on slider.
 
Element type - Choose type of content in your element then add text/code in TEXT/HTML field or upload image.
 
Element class - Class name for edited element:
Example
new_element_1_1
Element style - Your own style for created element.
Example
.new_element_1_1 {
 width: auto;
 background: none;
 font-size: 100%;
 line-height: 1.3;
 font-family: Open Sans;
}
 
Animation Easing - special easing effect of the animation.
Options:
easeOutBack, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic
easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint
easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine
easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc
easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack
easeInBounce, easeOutBounce, easeInOutBounce
 
Animation Endeasing - special endeasing effect of the animation.
Options:
easeOutBack, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic
easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint
easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine
easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc
easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack
easeInBounce, easeOutBounce, easeInOutBounce
 
Speed - Animation speed
 
Delay - Animation start time
 
X, Y - Text position
 

 

 

 

 

 

 

 

 

 

.

 

This theme is compatible with blog manager. You can download extension here: DOWNLOAD

 

 

 

 

 

 

 

 

 

.

 

Icon sweets 2: more
Slider Revolution Resposive jQuery Plugin: more
 
Images used and included is project was bought with Extended License
All images used to preview was bought for this project with regular license.

 

 

 

 

 

 

 

 

.

 

One more thank you for buying our theme.
If you have any question please contact us via contact form on themeforest profile.

http://themeforest.net/user/tiquet

I usually give you answer in max 72 hours.


Thanks,
Tiquet