Web Themes & Templates

Support for ShopCart - OpenCart theme with powerful options


tomsky supports this item


Popular questions for this item

I have installed this theme but it doesn’t look like the demo, slideshow is aligned to the left and the layout seems to be broken!

This is perfectly normal and it’s nothing you should worry about.

The default number of categories (eight long names) for the top navigation pushes the mini shopping cart to the bottom where the slideshow doesn’t have enough space and aligns to the left. As long as you use 7 – 8 top level categories in the top nav you won’t have problems with that (most stores use fewer number of top-level categories).

So just start setting up your store, removing / editing top level categories with the ones that you want to display. You should be fine with that, however if you have large number of categories that you want to display in the top nav, you then have to reduce the paddings for top – level categories. To do so, open up stylesheet.css file (in stylesheet folder) and about line 470 you’ll find this block of code:

#menu > ul > li > a { display: block; font-size: 15px; line-height: 14px; padding: 12px 15px 11px; position: relative; text-decoration: none; z-index: 6; }

You need to edit this line: padding: 12px 15px 11px; Leave the first (12px) and last (11px) values as they are, just remove the middle (15.px value which is padding-left and padding-right). If you reduce it to 12px you should have space for at least 2 more top level categories. Reduce the amount of paddings so that your categories fit nicely.

The content around featured products (on home page) doesn’t have white background.

You need to set positions of the modules that you’re displaying on your home page. For those modules, only slideshow should have its position set to content -top (it has it by default).

All other modules should have their positions set to content – bottom (featured module by default displays on home page and has position set to content – top, you need to change it to content – bottom).

How do I change modules position?

Log in to your admin panel, then extensions / modules / Click edit on the right of the module you want to edit. From there, you have a list of places where this module is currently being displayed on. Under position column you can select its position. Do not forget to click save when you’re done making changes.

Can I change the way slideshow operates (slow it down for example)

Yes, shopcart uses default opencart slideshow, which is powered by nivo slideshow. The file slideshow.tpl (in module folder) contains the code that runs nivo slider (it uses default values). You can override it by adding your own values, for more info how to do it please visit nivo slideshow website.

Can you please tell me how to slow down the slideshow and also change the transition so that it only fades in and out.

You will need to edit slideshow.tpl file (catalog\view\theme\shopcart\template\module). If you open the file, you will see this code:

<script type="text/javascript"><!-- $(document).ready(function() { $('#slideshow<?php echo $module; ?>').nivoSlider(); }); --></script>

This is a standard code that invokes nivo sldier which runs the slideshow in shopcart theme. If you want to override default values, just replace the above code with the following and change the settings:

<script type="text/javascript"> $(window).load(function() { $(''#slideshow<?php echo $module; ?>').nivoSlider({ effect: 'random', // Specify sets like: 'fold,fade,sliceDown' slices: 15, // For slice animations boxCols: 8, // For box animations boxRows: 4, // For box animations animSpeed: 500, // Slide transition speed pauseTime: 3000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: true, // Next & Prev navigation directionNavHide: true, // Only show on hover controlNav: true, // 1,2,3... navigation controlNavThumbs: false, // Use thumbnails for Control Nav controlNavThumbsFromRel: false, // Use image rel for thumbs controlNavThumbsSearch: '.jpg', // Replace this with... controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src keyboardNav: true, // Use left & right arrows pauseOnHover: true, // Stop animation while hovering manualAdvance: false, // Force manual transitions captionOpacity: 0.8, // Universal caption opacity prevText: 'Prev', // Prev directionNav text nextText: 'Next', // Next directionNav text randomStart: false, // Start on a random slide beforeChange: function(){}, // Triggers before a slide transition afterChange: function(){}, // Triggers after a slide transition slideshowEnd: function(){}, // Triggers after all slides have been shown lastSlide: function(){}, // Triggers when last slide is shown afterLoad: function(){} // Triggers when slider has loaded }); }); </script>] For more info on how to configure nivo slider, please visit: http://nivo.dev7studios.com/support/jquery-plugin-usage/

I would like to set the default category view as ‘grid’ instead of ‘view’, how can I change this?

In your category.tpl (near the bottom) file you will find this code:

view = $.cookie('display'); if (view) { display(view); } else { display('list'); } //--></script>

you just need to change it to:

view = $.cookie('display'); if (view) { display(view); } else { display('grid'); } //--></script>

Product page layout problem (not looking as in the demo, product sale box is beneath product image, two columns layout on product page)

By default, opencart sets category module to be displayed in left column on product page. This will create two column layout, and by default this theme’s layout of product page is one column.

If you want to have one column layout od product page (as in demo store): You need to remove category module from showing on product page. Just go to extensions / module / category and disable it from showing on product pages.

If you want to have two (or three) columns on your product page:

By default, there is just not enough space for more than one column. So if you want to display 2 or 3 column, you will have to:

- reduce the width of the product image (via your store settings in your admin panel)

- reduce the width of the product image container: stylesheet.css, around line 1387, .product-info > .left > .image selector

- (AND / OR) reduce the width of product info box, by editing stylesheet.css file, around line 1373, .product-info > .left + .right selector.

Left column (together with its padding) is 248px wide, so this is by how much the width of product image and/ or product sale box have to be reduced.

I’m using language other than English, and when I open my website it gives me an error about missing language files for customFooter. How can I solve it?

In order to have customFooter module working, it needs to have its language files available for currently used language. The theme comes with those language files for English language, however if you want to any other language, you will need to copy module’s language files. Please have a look at this tutorial, it will explain to you step by step how to do it (please note, that the tutorial has been made for another theme, so some file names are slightly different, but the principle is exactly the same): http://goinventive.co.uk/themeforest/granule/#!/languages_other_than_english

How do I change ‘powered by’ text in the footer?

This text is set in opencart’s language file, you can find and change it in catalog/language/your_language/common/footer.php file.

How do I remove the bottom margin for slideshow element?


Please open slideshow.css fiel (in css folder) and around line 90 change:

.slideshow { margin-bottom: 20px; }


.slideshow { margin-bottom: 0px; }

I want to place a column with categories listing on my product page, but there is not enough space for that

By default layout for product page is one column as it gives more space for product presentation. If you want to have two column layout for product page, you will have to reduce the width of the product image and also change your css settings so that there is enough space for product image and product sale info (reduce the width of this box).

The ‘Add to cart’ button in my store doesn’t work, nothing happens and no product is added to the shopping cart.

Most likely reason for this is your domain settings. Please make sure, that both in your store admin panel and your config.php files (root and the admin folder on your ftp) you set the same domain names (note that http://www.domain.com/ is NOT the same domain as http://domain.com/ -< it’s the most frequent cause for this kind of problems).

“Add to cart” button on homepage doesn’t work.

It’s most likely your domain settings, call to add to cart returns in 404 error. Make sure that both in store settings AND config.php files (they’re both such files, one in your root and one in your admin folder) you use EXACTLY the same domain names. Please note that

- http://domain.com/

- http://www.domain.com/

- http://domain.com

- http://www.domain.com

are all different as far as apache server is concerned. Please make sure all domain name settings are consistent.

Show more

Contact the author

This author provides limited support for this item through this item's comments.

Item support includes:

  • Availability of the author to answer questions
  • Answering technical questions about item’s features
  • Assistance with reported bugs and issues
  • Help with included 3rd party assets

However, item support does not include:

  • Customization services
  • Installation services

View the item support policy


Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey