How to add the Hikashop Cart Icon

-- HikaShop version -- : 2.3.4
-- Joomla version -- : 3.3.3
-- PHP version -- : 5.3.29
-- Browser(s) name and version -- : Chrome 35

Dear all,
I am trying to do the same cart like the demo website. I have changed the following places, but still can't see the correct icon look. Can you guys nice to help me? I am trying to figure out for almost a month. Appreciate that.

1 Hikashop->Display-View->Product->( My Template Name) ->Cart.php. Added the code of these:

<div class="moduletable-cart">
<h3>MY CART</h3>
<div class="hikashop_cart_module" id="hikashop_cart_module">
<div id="hikashop_cart" class="hikashop_cart">
The cart is empty </div>
<div class="clear_both"></div></div>
</div>

2 Hikashop->Configure->CSS->Front End CSS. Added the code of these-

.moduletable-cart {
margin-left: 20px;
margin-top: 20px;
}
.moduletable-cart h3 {
padding-left: 15px;
padding-top: 5px;
color: #FFF;
font-size: 12px;
background: url(../images/cart_top.png) no-repeat;
height: 25px;
}
.moduletable-cart #hikashop_cart_module {
background-image: url(../images/cart_center.png);
background-repeat: no-repeat;
background-color: #14CBEC;
margin-bottom: 20px;
margin-right: 5px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 10px;
font-size: 11px;
text-align: left;
}

3 Extention->Module Manager->My Cart->Module Class Suffix, Added " moduletable-cart"

Here the first file is the demo site--
demo.hikashop.com/index.php?lang=en



And my website shows like the second file here

Hi,

You don't have to add this code:
This is generated by Joomla.
Thanks to the point "3" the class "moduletable-cart" is added and then the css of the point "2" is applied on that.

Please remove the edition in the product / cart view. And could you give us a link to your website, it will be easier for us to see what's happening.

Thanks a lot, dear. My website is :http://joomla3.facianohaircare.com/

I had put image under the template\images\ and did as you suggested but still get the problem

Hi,

The issue is that the top image doesn't exist: joomla3.facianohaircare.com/media/com_hi.../images/cart_top.png

You used that CSS:
background: url(../images/cart_top.png) no-repeat;
and you put it in the frontend CSS of HikaShop which is in media/com_hikashop/css so your browser is looking for the image in media/com_hikashop/images.
Either put the image in that folder or change the CSS to search in the correct folder where you put your image and it will work (and it's the same for the other images of the CSS).

Thanks a lot, dear. I have change it as you said. But the look of the cart column square isn't correct. Too much gray space and the two images are cut off. Where can I change it?
joomla3.facianohaircare.com/

Hello,
Adding this kind of CSS code will probably do the job :