[Skip to main content](#vessel-content) # How to add the Hikashop Cart Icon ## - **[clairewang](/forum/user/34704-clairewang "View clairewang's Profile")** - [![clairewang's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/34704-clairewang "View clairewang's Profile") Topic Author - [ Offline](/forum/user/34704-clairewang) Less More - Posts: 220 - Thank you received: 0 - - 12 years 2 weeks ago - 12 years 2 weeks ago [\#176727](#176727) by [clairewang](/forum/user/34704-clairewang "View clairewang's Profile") *[How to add the Hikashop Cart Icon](/forum/4-how-to/872546-how-to-add-the-hikashop-cart-icon#176727 "-- 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: MY CART The cart is empty 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")* was created by *[clairewang](/forum/user/34704-clairewang "View clairewang's Profile")* -- 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](http://demo.hikashop.com/index.php?lang=en) [ ![h2f6e821.png](/forum/attachment/20301) ](/forum/attachment/20301 "h2f6e821.png") And my website shows like the second file here [ ![1.png](/forum/attachment/20302) ](/forum/attachment/20302 "1.png") - [ ![h2f6e821.png](/forum/attachment/20301) ](/forum/attachment/20301 "h2f6e821.png") [ ](/forum/attachment/20301?download=1 "h2f6e821.png") - [ ![1.png](/forum/attachment/20302) ](/forum/attachment/20302 "1.png") [ ](/forum/attachment/20302?download=1 "1.png") Last edit: 12 years 2 weeks ago by [clairewang](/forum/user/34704-clairewang "View clairewang's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg3MjU0Ni1ob3ctdG8tYWRkLXRoZS1oaWthc2hvcC1jYXJ0LWljb24/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Xavier](/forum/user/4105-xavier "View Xavier's Profile")** - [![Xavier's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar4105.png)](/forum/user/4105-xavier "View Xavier's Profile") - [ Offline](/forum/user/4105-xavier) Less More - Posts: 13201 - Thank you received: 2322 - - - - [](http://www.kidiweb.fr) - 12 years 2 weeks ago [\#176736](#176736) by [Xavier](/forum/user/4105-xavier "View Xavier's Profile") Replied by *[Xavier](/forum/user/4105-xavier "View Xavier's Profile")* on topic *[How to add the Hikashop Cart Icon](/forum/4-how-to/872546-how-to-add-the-hikashop-cart-icon#176736 "-- 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: MY CART The cart is empty 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: Code: <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> 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. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg3MjU0Ni1ob3ctdG8tYWRkLXRoZS1oaWthc2hvcC1jYXJ0LWljb24/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[clairewang](/forum/user/34704-clairewang "View clairewang's Profile")** - [![clairewang's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/34704-clairewang "View clairewang's Profile") Topic Author - [ Offline](/forum/user/34704-clairewang) Less More - Posts: 220 - Thank you received: 0 - - 12 years 1 week ago [\#177517](#177517) by [clairewang](/forum/user/34704-clairewang "View clairewang's Profile") Replied by *[clairewang](/forum/user/34704-clairewang "View clairewang's Profile")* on topic *[How to add the Hikashop Cart Icon](/forum/4-how-to/872546-how-to-add-the-hikashop-cart-icon#177517 "-- 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: MY CART The cart is empty 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")* 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 Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg3MjU0Ni1ob3ctdG8tYWRkLXRoZS1oaWthc2hvcC1jYXJ0LWljb24/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86357 - Thank you received: 14289 - - 12 years 1 week ago [\#177542](#177542) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[How to add the Hikashop Cart Icon](/forum/4-how-to/872546-how-to-add-the-hikashop-cart-icon#177542 "-- 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: MY CART The cart is empty 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, The issue is that the top image doesn't exist: [ joomla3.facianohaircare.com/media/com\_hi.../images/cart\_top.png](http://joomla3.facianohaircare.com/media/com_hikashop/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). The following user(s) said Thank You: [clairewang](/forum/user/34704-clairewang "View clairewang's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg3MjU0Ni1ob3ctdG8tYWRkLXRoZS1oaWthc2hvcC1jYXJ0LWljb24/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[clairewang](/forum/user/34704-clairewang "View clairewang's Profile")** - [![clairewang's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/34704-clairewang "View clairewang's Profile") Topic Author - [ Offline](/forum/user/34704-clairewang) Less More - Posts: 220 - Thank you received: 0 - - 12 years 1 week ago [\#177588](#177588) by [clairewang](/forum/user/34704-clairewang "View clairewang's Profile") Replied by *[clairewang](/forum/user/34704-clairewang "View clairewang's Profile")* on topic *[How to add the Hikashop Cart Icon](/forum/4-how-to/872546-how-to-add-the-hikashop-cart-icon#177588 "-- 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: MY CART The cart is empty 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")* 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/ Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg3MjU0Ni1ob3ctdG8tYWRkLXRoZS1oaWthc2hvcC1jYXJ0LWljb24/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")** - [![Mohamed Thelji's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar6861.png)](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile") - [ Offline](/forum/user/6861-mohamed-thelji) Less More - Posts: 12953 - Thank you received: 1778 - - - 12 years 1 week ago [\#177659](#177659) by [Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile") Replied by *[Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")* on topic *[How to add the Hikashop Cart Icon](/forum/4-how-to/872546-how-to-add-the-hikashop-cart-icon#177659 "-- 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: MY CART The cart is empty 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")* Hello, Adding this kind of CSS code will probably do the job : Code: .moduletable-cart h3 { width: 100%; } The following user(s) said Thank You: [clairewang](/forum/user/34704-clairewang "View clairewang's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg3MjU0Ni1ob3ctdG8tYWRkLXRoZS1oaWthc2hvcC1jYXJ0LWljb24/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop Install & Update Product & Category Display Content Creation Sales and Orders Orders management Reports & Statistics Customers Checkout Payment Methods Shipping Methods Import & Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel & Slider Mass Actions Filters & Search Discount & Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.093 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)