Also, I found a problem. See script.js file at line 820.
There is a code:

$('[href="#' + $activeHash + '"]').parent().addClass('active');

In case of setting thumbnail url like: `<a href="product-page.html#one"`> the code doesn't add `active` class for `li` element.

The solution could be in using `data-hash` attribute for thumbnail link.
Thank you again for spotting the issue and provided solution. I'll add necessary fixes in future update. Regards
And one more feature request. On the `Shop Grid` pages you have added a button `Add to cart`, but the problem in that some products has sizes, so before adding product to the cart you have to select which size you want to add.

So, a solution could be like this. When user clicks on `Add to cart` system should show him a list of sizes and only after selecting a required size the system will add a product to the cart.

Or, another solution. A lot of ecommerce systems has a feature called `Quick view` - modal widnow where user can see short info about product, select size and add product to the cart.

It will be good if you can implement this two features.
I don't seem to be able to change the izi.Toast values successfully.

If I run iziToast.success it should be green, but it always stays grey. Any idea how to fix this?
Please check component page. I explain how to use it. I created data api for it. http://themes.rokaux.com/unishop/v1.3/components/toasts.html

That's fine if you are simply adding the value to a button. But if you want to generate a toast after say an ajax post there is no way to set the color.

I have tried using iziToast.success and tried color: 'green' - but neither of these work. Obviously simple adding data-type='success' has no effect after an ajax post.
Well, in this case please check iziToast official docs http://izitoast.marcelodolce.com/
Hope you find the way to make it work with ajax.
Hi , now the mega menu is 100% length, how can i make its content same width as the menu. thanks
Please follow the instruction in this screenshot
thanks, resolved, need to make change in scss and recompile though
on shop-grid-ns.html
<div class="grid-item" *ngFor="let rec of records">

only shows 4 items of products
what is wrong on me ?

thank you
item number 5,6,7 and so on are hidden behind the <div class="isotope-grid cols-4 mb-2">

this isotope grid cannot auto height , its fix 2px

how to fix it ?

thank you
when i add style to this <div class="isotope-grid cols-4 mb-2" style="min-height:1000px">

it can show 12 items of products , but i have 16 items of product

hot to fix it ? to make isotope auto height ?

thank you
Hi Peter,
Do you see the same problem with my demo site? If yes, please specify what Browser / OS you are testing on. Also let me know what you are using for development: SASS or pure CSS. Regards, Roman
Hi Roman ,,

your demo site , live preview is verry verry good , i use google chrome 61 on windows 10 64

i use angular 4 , bootstrap 4-beta , and inside index.html i add this : <link rel="stylesheet" media="screen" href="assets/scss/styles.scss">

thank you for your answer
this is my index.html on my angular 4 :

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SisKA - Sistem Komputer Akuntansi</title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">

<!-- css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" >

<!-- js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" ></script>

<!-- SEO Meta Tags-->
<meta name="description" content="Unishop - Universal E-Commerce Template">
<meta name="keywords" content="shop, e-commerce, modern, flat style, responsive, online store, business, mobile, blog, bootstrap 4, html5, css3, jquery, js, gallery, slider, touch, creative, clean">
<meta name="author" content="Rokaux">
<!-- Mobile Specific Meta Tag-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Favicon and Apple Icons-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
<link rel="icon" type="image/png" href="assets/favicon.png">
<link rel="apple-touch-icon" href="assets/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="assets/touch-icon-ipad-retina.png">
<!-- Vendor Styles including: Bootstrap, Font Icons, Plugins, etc.-->
<link rel="stylesheet" media="screen" href="assets/css/vendor.min.css">
<link rel="stylesheet" media="screen" href="assets/scss/styles.scss">
<!-- Main Template Styles-->
<link id="mainStyles" rel="stylesheet" media="screen" href="assets/css/styles.min.css">
<!-- Modernizr-->
<script src="assets/js/modernizr.min.js"></script>
<script src="assets/js/vendor.min.js"></script>
<script src="assets/js/scripts.min.js"></script>



Why is $.ajax not coming up as a function. I have to add jquery which then conflicts with things like modal????
Is this using a slim version on jquery?
Yeap. I used slim version. Just replace with full jquery you need. Regards
so replace vendor.min.js with jquery-3.1.1.js ??? You haven't added anything else to the vendor file?
Do you use grunt setup I've provided with the template? If yes, you just need to replace jQuery inside src/vendor/J's and run grunt command to re-compile vendor.min.js.
That worked thanks.
Great. You are welcome!
button does not show ini input-group-btn
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
<input type="text" class="form-control" placeholder="Search for...">

but if ya remote styles.min.css , its show

i can't use this theme , may i get back my money ?

thanks you
button does not show ini input-group-btn
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
<input type="text" class="form-control" placeholder="Search for...">

but if ya REMOVE styles.min.css , its show

i can't use this theme , may i get back my money ?

thanks you
You have to contact WrapBootstrap support to request refund. At the moment template doesn't support buttons inside input groups.
can I open it in visual studio 2013?
Hi, sure you can open it in any text editor.
Do you use grunt setup I've provided with the template? If yes, you just need to replace jQuery inside src/vendor/J's and run grunt command to re-compile vendor.min.js.

Hi Rokaux, can you provide me the re-compile vandor.min.js with the ajax as function ?

I am not sure how to use the grunt.

Please check your mailbox. Just sent re-compiled file. Regards
i received it. thank you for your prompt reply..
You are very welcome ;)
I need to reinitialize the downcount on items added dynamically on a page.

Can you help me with that?

Thank you
Could you send me PM with example of your ajax code. Regards
i notice when using the shop-single.html

when click on the magnifier to view the picture (picrture in square e.g. 300x300 ) in full screen the image seem to be stretch horizontally.

but when i check on PhotoSwipe, their picture show into the original dimension.
The size of large image is controlled via data attribute data-size="1000x667". If your image 300x300 you have to change this attribute respectively.
Best regards
What does your 1.4 update mean for those of us that are just using the Distribution version? I am working on integrating your template into our shopping cart and it is a little frustrating dealing with updates, especially when scripts are all put in one file. I understand the load advantages of doing this but difficult to adapt to customized versions.
Distribution files that are affected:
- vendor.min.css - updated Bootstrap from Beta 1 to Beta 2 (https://blog.getbootstrap.com/2017/10/19/bootstrap-4-beta-2/);
- vendor.min.js (only updated Bootstrap scripts)
- styles.min.css (some compatibility fixes)
- scripts.min.js (some fixes and improvements, see changelog)
Thanks, that's helpful. What do you suggest when customizing the templates for adding new custom css? I have been updating/changing styles.css but now I have to do a file compare to not lose my customizations.
I understand your frustration. But customizing template is similar to customizing Bootstrap. You have to keep your styles separately from original framework styles to be able to update safely. My recommendation would be to keep your custom css in separate file and then combine them in one file on production. That's why I prefer modular SCSS system. It's more easy to maintain + most of the time you customize some general things like colors, fonts, etc. which can be customized via single variables.scss file. And after update you need to compare only one small file instead large .css file. But that's my point in favor of using SASS instead of vanilla CSS.
All points well taken. Thanks for responding.
Hi, I am new to HTML designing, I have used content of shop-grid-ns.html in my page but unable to see products grid. Its setting product item to display none. I am not sure what I have to set and where its applying this condition to set display none.
Please let me know.

Hi Naveed,
Have you used latest Unishop version 1.4? And what Browser/OS you are tested it on?
Yes, I am using latest version with chrome. If I execute downloaded version then all good. but when I copy product listing section in my own designed page, it don't display product items. Not sure what I am doing wrong.

Can I change the mega-menu so it opens on click, as opposed to on hover.?
It's not possible out of the box.
In order to do that you would need to add custom JS. Something like:
$('.has-megamenu').on('click', function() {
Then you have to add another JS to hide all mega menus when you click off the menu link. And also add 'visible' class to css.
This not step-by-step guide just an idea how to achieve behavior you want.

Great template and easy to integrate into .Net Core
- one thing though, the shopping cart drop-down needs a scrollbar around the cart items within it because there's currently no size limit. I don't think it's necessary to show all cart items, but showing the top-n within a box with a max height and overflow-y scrollable would be a good addition.

Thank you for the feedback, very much appreciated. I will consider adding this feature in one of future updates.

Best regards,
Best way to apply green theme?
If you don't need to customize styles than the best way is change link to styles-2ecc71.min.css in the head of your html document. This is default green skin.
If you do need to customize styles I would recommend using SASS. In this case you simply change $brand-primary variable in _variables.scss

Hi There,

Just noticed when integrating checkout that the checkout-steps (using the checkout-steps class) are ordered descending, which is fair enough and it looks great , however, the steps show up similar to 100% width buttons in descending order when screen width is reduced.

I've adding a duplicate versions, amending the original with the "hidden-sm-down" class added, and the other, where the steps have been reversed, with "hidden-sm-up". This works well but there's a gap when transitioning browser width where neither is visible - like we're out of the 'sm' boundary but not yet in the 'xs' boundary.

Any help on resolving this would be greatly appreciated.

Thank you for your comment. This happens because links nested inside checkout-steps are floated right. It's done for the sake of design. I will think how to improve this but it will take time. In the meantime you solutions seems great. To make this work as expected just change class "hidden-sm-up" to "hidden-md-up" for steps meant to be seen on mobile. I know it's strange but this is how BS works.

Do you use grunt setup I've provided with the template? If yes, you just need to replace jQuery inside src/vendor/J's and run grunt command to re-compile vendor.min.js.
Hi Rokaux, can you provide me the re-compile vandor.min.js with the ajax as function ?
I am not sure how to use the grunt.
Hello sir, my boss purchased this template i cant run $.ajax , why so? PS i dont know how to use grunt.
Unishop uses latest version of jQuery 3x. For some reason jquery team removed ajax functions from it. But it's faster and more stable. For those who'd like to use jquery ajax there is a jquery migrate plugin. You can download it here https://github.com/jquery/jquery-migrate/#readme
Make sure you link it in the head section of you html document below vendor.min.js
Hello, where I can find documantation of the main slider?, I want to change it for diferent backgriund images of each slide and don´t know how to do thar. Thanks

Write a comment

This is a great way to give the seller feedback and ask them questions about their item.

You must sign in to write a comment

Sign in or sign up to make a purchase


Licenses: Details »

Single application $24
  • HTML Template
Bootstrap: Compatible with 4.x
  • Responsive
  • IE 11
  • Latest Chrome
  • Latest Edge
  • Latest Firefox
  • Latest Safari
Uses Less:No
Uses Sass:Yes
Topic: Retail & Shopping
Labels: blog, bootstrap 4, business, cart, e commerce, modular, online shop, responsive, sass, store
Released:1 year ago
Updated:4 months ago
Sold exclusively on WrapBootstrap


Signed up 2 years ago

Need an admin template?

About Bootstrap

Bootstrap is designed to help people of all skill levels – designer or developer, huge nerd or early beginner. Use it as a complete kit or use it to start something more complex.

Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only its features, but best practices and living, coded examples.

Built to support new HTML5 elements and syntax with progressively enhanced components.

Browser support

Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer.

Tested and supported in Chrome, Safari, Firefox, Internet Explorer, and Opera.
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Latest Edge
  • Internet Explorer 10/11
  • Latest Opera

Features & includes

Bootstrap provides an unparalleled array of features and reusable components that let you hit the ground running:

  • Responsive 12-column grid
  • 12 custom, modular jQuery plugins
  • CSS styles for forms, navigation & more
  • Dozens of reusable components
  • Components are scaled according to a range of resolutions and devices
  • Built with Sass (CSS included)
  • Complete styleguide documentation