[Skip to main content](#vessel-content) # Adding and displaying Hika Shop Cart Module via cart icon Into the menu ## - **[Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile")** - [![Vlad Boch's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/57306-vlad-boch "View Vlad Boch's Profile") Topic Author - [ Offline](/forum/user/57306-vlad-boch) Less More- Posts: 38 - Thank you received: 2 - - 7 years 9 months ago [\#302674](#302674) by [Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile") *[Adding and displaying Hika Shop Cart Module via cart icon Into the menu](/forum/26-product-category-display/896686-adding-and-displaying-hika-shop-cart-module-via-cart-icon-into-the-menu#302674 "-- url of the page with the problem -- : delux.ua/ -- HikaShop version -- : 3.5.1 Hi. 1. I read some of the older topics and documentation, but still haven't understood how to visualize Hika Shop Cart Module as an icon via CSS. Maybe it's because I'm not IT specialist, but i'd really like to do it, if possible. It should look somewhat like on the screenshot, I have the svg image availible. If I understand right I should copy this code from your demo website and insert it in the product cart php file. But yet I don't see where is the line in the CSS, where I should be able to paste the path to the cart icon. 2. I don't know, if you can help me with this, but I'd like to add this cart module into the menu and for that I would need to add a specific position in my template near the position "lang". If you could advise me also on that, I would be very greatful.")* was created by *[Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile")* -- url of the page with the problem -- : [ delux.ua/](https://delux.ua/) -- HikaShop version -- : 3.5.1 Hi. 1. I read some of the older topics and documentation, but still haven't understood how to visualize Hika Shop Cart Module as an icon via CSS. Maybe it's because I'm not IT specialist, but i'd really like to do it, if possible. It should look somewhat like on the screenshot, I have the svg image availible. If I understand right I should copy this <span> code from your demo website and insert it in the product cart php file. But yet I don't see where is the line in the CSS, where I should be able to paste the path to the cart icon. 2. I don't know, if you can help me with this, but I'd like to add this cart module into the menu and for that I would need to add a specific position in my template near the position "lang". If you could advise me also on that, I would be very greatful. - [ ![1.jpg](/forum/attachment/45823) ](/forum/attachment/45823 "1.jpg") [ ](/forum/attachment/45823?download=1 "1.jpg") - [ ![3.jpg](/forum/attachment/45824) ](/forum/attachment/45824 "3.jpg") [ ](/forum/attachment/45824?download=1 "3.jpg") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTY2ODYtYWRkaW5nLWFuZC1kaXNwbGF5aW5nLWhpa2Etc2hvcC1jYXJ0LW1vZHVsZS12aWEtY2FydC1pY29uLWludG8tdGhlLW1lbnU/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)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More- Posts: 86279 - Thank you received: 14262 - - 7 years 9 months ago [\#302677](#302677) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Adding and displaying Hika Shop Cart Module via cart icon Into the menu](/forum/26-product-category-display/896686-adding-and-displaying-hika-shop-cart-module-via-cart-icon-into-the-menu#302677 "-- url of the page with the problem -- : delux.ua/ -- HikaShop version -- : 3.5.1 Hi. 1. I read some of the older topics and documentation, but still haven't understood how to visualize Hika Shop Cart Module as an icon via CSS. Maybe it's because I'm not IT specialist, but i'd really like to do it, if possible. It should look somewhat like on the screenshot, I have the svg image availible. If I understand right I should copy this code from your demo website and insert it in the product cart php file. But yet I don't see where is the line in the CSS, where I should be able to paste the path to the cart icon. 2. I don't know, if you can help me with this, but I'd like to add this cart module into the menu and for that I would need to add a specific position in my template near the position "lang". If you could advise me also on that, I would be very greatful.")* Hi, 1. Supposing that you want the icon to display the details of the cart when someone click on it, you want to enable the HikaShop cart module in the position of your template where you want the cart icon to display. Then, you want to set the "mini cart" setting of the module to "dropdown cart". And finally, you want to do a translation override in order to change the different texts displayed by the cart module 'mini' mode to display instead an image: [ www.hikashop.com/download/languages.html#modify](https://www.hikashop.com/download/languages.html#modify) So for example, for the "The cart is empty" message that you see when there is nothing in the cart. You can add such translation override: Code: CART_EMPTY="<img src='http://mywebsite.com/link/to/empty/cart/image.png'/>" That's it. There is no need for CSS or for PHP in view overrides. 2. I think that you should be able to use the position where the menu module displays itself. If you need to add a position to your template, the best is to check with your template provider. Now, for simple templates this method usually works: [ www.balbooa.com/knowledgebase/32-documen...e-position-in-joomla](https://www.balbooa.com/knowledgebase/32-documentation-faq-joomla/177-how-to-add-module-position-in-joomla) Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTY2ODYtYWRkaW5nLWFuZC1kaXNwbGF5aW5nLWhpa2Etc2hvcC1jYXJ0LW1vZHVsZS12aWEtY2FydC1pY29uLWludG8tdGhlLW1lbnU/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile")** - [![Vlad Boch's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/57306-vlad-boch "View Vlad Boch's Profile") Topic Author - [ Offline](/forum/user/57306-vlad-boch) Less More- Posts: 38 - Thank you received: 2 - - 7 years 9 months ago - 7 years 9 months ago [\#302688](#302688) by [Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile") Replied by *[Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile")* on topic *[Adding and displaying Hika Shop Cart Module via cart icon Into the menu](/forum/26-product-category-display/896686-adding-and-displaying-hika-shop-cart-module-via-cart-icon-into-the-menu#302688 "-- url of the page with the problem -- : delux.ua/ -- HikaShop version -- : 3.5.1 Hi. 1. I read some of the older topics and documentation, but still haven't understood how to visualize Hika Shop Cart Module as an icon via CSS. Maybe it's because I'm not IT specialist, but i'd really like to do it, if possible. It should look somewhat like on the screenshot, I have the svg image availible. If I understand right I should copy this code from your demo website and insert it in the product cart php file. But yet I don't see where is the line in the CSS, where I should be able to paste the path to the cart icon. 2. I don't know, if you can help me with this, but I'd like to add this cart module into the menu and for that I would need to add a specific position in my template near the position "lang". If you could advise me also on that, I would be very greatful.")* Hi, Nicolas. Thank you for your prompt answer. So I tried to do as you advised with "CART_EMPTY" state and it worked, it did display my image. Now how can I make that when a customer adds an item to cart the image responsively shows, the quantity of items in the cart? What other translation lines should I override? I tried different overrides of the lines"X_ITEM", "X_ITEMS", as was noted in some previous topics, so that the text "X products for X UAH", when the cart is full, changes to image like with "CART_EMPTY" and shows the quantity of items. However nothing seems to have worked. Last edit: 7 years 9 months ago by [Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTY2ODYtYWRkaW5nLWFuZC1kaXNwbGF5aW5nLWhpa2Etc2hvcC1jYXJ0LW1vZHVsZS12aWEtY2FydC1pY29uLWludG8tdGhlLW1lbnU/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)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More- Posts: 86279 - Thank you received: 14262 - - 7 years 9 months ago [\#302695](#302695) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Adding and displaying Hika Shop Cart Module via cart icon Into the menu](/forum/26-product-category-display/896686-adding-and-displaying-hika-shop-cart-module-via-cart-icon-into-the-menu#302695 "-- url of the page with the problem -- : delux.ua/ -- HikaShop version -- : 3.5.1 Hi. 1. I read some of the older topics and documentation, but still haven't understood how to visualize Hika Shop Cart Module as an icon via CSS. Maybe it's because I'm not IT specialist, but i'd really like to do it, if possible. It should look somewhat like on the screenshot, I have the svg image availible. If I understand right I should copy this code from your demo website and insert it in the product cart php file. But yet I don't see where is the line in the CSS, where I should be able to paste the path to the cart icon. 2. I don't know, if you can help me with this, but I'd like to add this cart module into the menu and for that I would need to add a specific position in my template near the position "lang". If you could advise me also on that, I would be very greatful.")* Hi, Well, you can just search for the text to find the corresponding translation line you need to change... It actually depends on how you configured the other settings of the module, which I don't know. Supposing that you display the quantity and the prices, it will be the translation keys X_ITEM_FOR_X and X_ITEMS_FOR_X That you want to change in a similar manner. And to keep the quantity displayed with the image you can just leave the first %s in the translation text after your img tag. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTY2ODYtYWRkaW5nLWFuZC1kaXNwbGF5aW5nLWhpa2Etc2hvcC1jYXJ0LW1vZHVsZS12aWEtY2FydC1pY29uLWludG8tdGhlLW1lbnU/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile")** - [![Vlad Boch's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/57306-vlad-boch "View Vlad Boch's Profile") Topic Author - [ Offline](/forum/user/57306-vlad-boch) Less More- Posts: 38 - Thank you received: 2 - - 7 years 9 months ago - 7 years 9 months ago [\#302723](#302723) by [Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile") Replied by *[Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile")* on topic *[Adding and displaying Hika Shop Cart Module via cart icon Into the menu](/forum/26-product-category-display/896686-adding-and-displaying-hika-shop-cart-module-via-cart-icon-into-the-menu#302723 "-- url of the page with the problem -- : delux.ua/ -- HikaShop version -- : 3.5.1 Hi. 1. I read some of the older topics and documentation, but still haven't understood how to visualize Hika Shop Cart Module as an icon via CSS. Maybe it's because I'm not IT specialist, but i'd really like to do it, if possible. It should look somewhat like on the screenshot, I have the svg image availible. If I understand right I should copy this code from your demo website and insert it in the product cart php file. But yet I don't see where is the line in the CSS, where I should be able to paste the path to the cart icon. 2. I don't know, if you can help me with this, but I'd like to add this cart module into the menu and for that I would need to add a specific position in my template near the position "lang". If you could advise me also on that, I would be very greatful.")* Hi, Nicolas. Ok I will try to do what you advise. The problem is I don't exactly know which line responds for what. As I mentioned earlier X_ITEM_FOR_X and X_ITEMS_FOR_X haven't worked out for me. Now, just in case here is a screenshot of the module settings. I like these settings a lot, they are convenient for user, the only thing that's incovinient is displaying this module as image. - [ ![4.jpg](/forum/attachment/45836) ](/forum/attachment/45836 "4.jpg") [ ](/forum/attachment/45836?download=1 "4.jpg") Last edit: 7 years 9 months ago by [Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTY2ODYtYWRkaW5nLWFuZC1kaXNwbGF5aW5nLWhpa2Etc2hvcC1jYXJ0LW1vZHVsZS12aWEtY2FydC1pY29uLWludG8tdGhlLW1lbnU/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)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More- Posts: 86279 - Thank you received: 14262 - - 7 years 9 months ago [\#302737](#302737) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Adding and displaying Hika Shop Cart Module via cart icon Into the menu](/forum/26-product-category-display/896686-adding-and-displaying-hika-shop-cart-module-via-cart-icon-into-the-menu#302737 "-- url of the page with the problem -- : delux.ua/ -- HikaShop version -- : 3.5.1 Hi. 1. I read some of the older topics and documentation, but still haven't understood how to visualize Hika Shop Cart Module as an icon via CSS. Maybe it's because I'm not IT specialist, but i'd really like to do it, if possible. It should look somewhat like on the screenshot, I have the svg image availible. If I understand right I should copy this code from your demo website and insert it in the product cart php file. But yet I don't see where is the line in the CSS, where I should be able to paste the path to the cart icon. 2. I don't know, if you can help me with this, but I'd like to add this cart module into the menu and for that I would need to add a specific position in my template near the position "lang". If you could advise me also on that, I would be very greatful.")* Hi, No, earlier, you talked about the translation keys "X_ITEM" and "X_ITEMS", and not the translation keys X_ITEM_FOR_X and X_ITEMS_FOR_X that I was talking about in my message. So from what I understand you didn't change the correct translation keys and that's why it didn't work. Please double check. The following user(s) said Thank You: [Appie Thrasher](/forum/user/56737-appie-thrasher "View Appie Thrasher's Profile"), [Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTY2ODYtYWRkaW5nLWFuZC1kaXNwbGF5aW5nLWhpa2Etc2hvcC1jYXJ0LW1vZHVsZS12aWEtY2FydC1pY29uLWludG8tdGhlLW1lbnU/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile")** - [![Vlad Boch's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/57306-vlad-boch "View Vlad Boch's Profile") Topic Author - [ Offline](/forum/user/57306-vlad-boch) Less More- Posts: 38 - Thank you received: 2 - - 7 years 9 months ago [\#302798](#302798) by [Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile") Replied by *[Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile")* on topic *[Adding and displaying Hika Shop Cart Module via cart icon Into the menu](/forum/26-product-category-display/896686-adding-and-displaying-hika-shop-cart-module-via-cart-icon-into-the-menu#302798 "-- url of the page with the problem -- : delux.ua/ -- HikaShop version -- : 3.5.1 Hi. 1. I read some of the older topics and documentation, but still haven't understood how to visualize Hika Shop Cart Module as an icon via CSS. Maybe it's because I'm not IT specialist, but i'd really like to do it, if possible. It should look somewhat like on the screenshot, I have the svg image availible. If I understand right I should copy this code from your demo website and insert it in the product cart php file. But yet I don't see where is the line in the CSS, where I should be able to paste the path to the cart icon. 2. I don't know, if you can help me with this, but I'd like to add this cart module into the menu and for that I would need to add a specific position in my template near the position "lang". If you could advise me also on that, I would be very greatful.")* Hi, Nicolas. This kind of worked. I hope to proceed with adding the right position for my template. Unfortunately position menu doesn't work for this module, and I can't find the exact right position of languages module in my template php layout file in order to make a similar 1 for cart. I hope our IT department can help with that. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTY2ODYtYWRkaW5nLWFuZC1kaXNwbGF5aW5nLWhpa2Etc2hvcC1jYXJ0LW1vZHVsZS12aWEtY2FydC1pY29uLWludG8tdGhlLW1lbnU/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)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More- Posts: 86279 - Thank you received: 14262 - - 7 years 9 months ago [\#302804](#302804) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Adding and displaying Hika Shop Cart Module via cart icon Into the menu](/forum/26-product-category-display/896686-adding-and-displaying-hika-shop-cart-module-via-cart-icon-into-the-menu#302804 "-- url of the page with the problem -- : delux.ua/ -- HikaShop version -- : 3.5.1 Hi. 1. I read some of the older topics and documentation, but still haven't understood how to visualize Hika Shop Cart Module as an icon via CSS. Maybe it's because I'm not IT specialist, but i'd really like to do it, if possible. It should look somewhat like on the screenshot, I have the svg image availible. If I understand right I should copy this code from your demo website and insert it in the product cart php file. But yet I don't see where is the line in the CSS, where I should be able to paste the path to the cart icon. 2. I don't know, if you can help me with this, but I'd like to add this cart module into the menu and for that I would need to add a specific position in my template near the position "lang". If you could advise me also on that, I would be very greatful.")* Hi, Yes, don't hesitate to also ask your template provider as they know best how to add positions to their template. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTY2ODYtYWRkaW5nLWFuZC1kaXNwbGF5aW5nLWhpa2Etc2hvcC1jYXJ0LW1vZHVsZS12aWEtY2FydC1pY29uLWludG8tdGhlLW1lbnU/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile")** - [![Vlad Boch's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/57306-vlad-boch "View Vlad Boch's Profile") Topic Author - [ Offline](/forum/user/57306-vlad-boch) Less More- Posts: 38 - Thank you received: 2 - - 7 years 8 months ago [\#303441](#303441) by [Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile") Replied by *[Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile")* on topic *[Adding and displaying Hika Shop Cart Module via cart icon Into the menu](/forum/26-product-category-display/896686-adding-and-displaying-hika-shop-cart-module-via-cart-icon-into-the-menu#303441 "-- url of the page with the problem -- : delux.ua/ -- HikaShop version -- : 3.5.1 Hi. 1. I read some of the older topics and documentation, but still haven't understood how to visualize Hika Shop Cart Module as an icon via CSS. Maybe it's because I'm not IT specialist, but i'd really like to do it, if possible. It should look somewhat like on the screenshot, I have the svg image availible. If I understand right I should copy this code from your demo website and insert it in the product cart php file. But yet I don't see where is the line in the CSS, where I should be able to paste the path to the cart icon. 2. I don't know, if you can help me with this, but I'd like to add this cart module into the menu and for that I would need to add a specific position in my template near the position "lang". If you could advise me also on that, I would be very greatful.")* Hi, Nicolas! We managed to create position cart for our cart module. How can I correctly add text "Cart is empty" at "Cart_Empty" line for it to be displayed right under the image. Which lines should I add to the code? Please, help me, if you can. - [ ![howitlooksnow.jpg](/forum/attachment/46033) ](/forum/attachment/46033 "howitlooksnow.jpg") [ ](/forum/attachment/46033?download=1 "howitlooksnow.jpg") - [ ![thecodecartempty.jpg](/forum/attachment/46034) ](/forum/attachment/46034 "...ecartempty.jpg") [ ](/forum/attachment/46034?download=1 "...ecartempty.jpg") - [ ![howitlookswhenIusetheimagealreadywiththetextCartempty.jpg](/forum/attachment/46035) ](/forum/attachment/46035 "...tCartempty.jpg") [ ](/forum/attachment/46035?download=1 "...tCartempty.jpg") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTY2ODYtYWRkaW5nLWFuZC1kaXNwbGF5aW5nLWhpa2Etc2hvcC1jYXJ0LW1vZHVsZS12aWEtY2FydC1pY29uLWludG8tdGhlLW1lbnU/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)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More- Posts: 86279 - Thank you received: 14262 - - 7 years 8 months ago [\#303444](#303444) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Adding and displaying Hika Shop Cart Module via cart icon Into the menu](/forum/26-product-category-display/896686-adding-and-displaying-hika-shop-cart-module-via-cart-icon-into-the-menu#303444 "-- url of the page with the problem -- : delux.ua/ -- HikaShop version -- : 3.5.1 Hi. 1. I read some of the older topics and documentation, but still haven't understood how to visualize Hika Shop Cart Module as an icon via CSS. Maybe it's because I'm not IT specialist, but i'd really like to do it, if possible. It should look somewhat like on the screenshot, I have the svg image availible. If I understand right I should copy this code from your demo website and insert it in the product cart php file. But yet I don't see where is the line in the CSS, where I should be able to paste the path to the cart icon. 2. I don't know, if you can help me with this, but I'd like to add this cart module into the menu and for that I would need to add a specific position in my template near the position "lang". If you could advise me also on that, I would be very greatful.")* Hi, In your translation override you have something like that: CART_EMPTY="<img src='my image url'/>" What you want is something like that: CART_EMPTY="<img class='my_class_for_cart_empty_img' src='my image url'/><span class='my_class_for_cart_empty_text'>The cart is empty</span>" Then, in your CSS, you can use the classes my_class_for_cart_empty_img and my_class_for_cart_empty_text in order to style the image and the text how ever you want. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTY2ODYtYWRkaW5nLWFuZC1kaXNwbGF5aW5nLWhpa2Etc2hvcC1jYXJ0LW1vZHVsZS12aWEtY2FydC1pY29uLWludG8tdGhlLW1lbnU/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile")** - [![Vlad Boch's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/57306-vlad-boch "View Vlad Boch's Profile") Topic Author - [ Offline](/forum/user/57306-vlad-boch) Less More- Posts: 38 - Thank you received: 2 - - 7 years 8 months ago [\#303475](#303475) by [Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile") Replied by *[Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile")* on topic *[Adding and displaying Hika Shop Cart Module via cart icon Into the menu](/forum/26-product-category-display/896686-adding-and-displaying-hika-shop-cart-module-via-cart-icon-into-the-menu#303475 "-- url of the page with the problem -- : delux.ua/ -- HikaShop version -- : 3.5.1 Hi. 1. I read some of the older topics and documentation, but still haven't understood how to visualize Hika Shop Cart Module as an icon via CSS. Maybe it's because I'm not IT specialist, but i'd really like to do it, if possible. It should look somewhat like on the screenshot, I have the svg image availible. If I understand right I should copy this code from your demo website and insert it in the product cart php file. But yet I don't see where is the line in the CSS, where I should be able to paste the path to the cart icon. 2. I don't know, if you can help me with this, but I'd like to add this cart module into the menu and for that I would need to add a specific position in my template near the position "lang". If you could advise me also on that, I would be very greatful.")* The main problem with that is the image begins to float around and I just want it to stay in it's position and the text to be displayed just like it is on my 3rd screenshot, only the image has to stay where it is and maybe not use the font I used in the image. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTY2ODYtYWRkaW5nLWFuZC1kaXNwbGF5aW5nLWhpa2Etc2hvcC1jYXJ0LW1vZHVsZS12aWEtY2FydC1pY29uLWludG8tdGhlLW1lbnU/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)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More- Posts: 86279 - Thank you received: 14262 - - 7 years 8 months ago [\#303482](#303482) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Adding and displaying Hika Shop Cart Module via cart icon Into the menu](/forum/26-product-category-display/896686-adding-and-displaying-hika-shop-cart-module-via-cart-icon-into-the-menu#303482 "-- url of the page with the problem -- : delux.ua/ -- HikaShop version -- : 3.5.1 Hi. 1. I read some of the older topics and documentation, but still haven't understood how to visualize Hika Shop Cart Module as an icon via CSS. Maybe it's because I'm not IT specialist, but i'd really like to do it, if possible. It should look somewhat like on the screenshot, I have the svg image availible. If I understand right I should copy this code from your demo website and insert it in the product cart php file. But yet I don't see where is the line in the CSS, where I should be able to paste the path to the cart icon. 2. I don't know, if you can help me with this, but I'd like to add this cart module into the menu and for that I would need to add a specific position in my template near the position "lang". If you could advise me also on that, I would be very greatful.")* Hi, I'm sorry but I don't understand what the problem is ? First, an image has no font. Second, the image tag and the span tag with the text inside have different classes. So with CSS code, you can style them completely separately. And you can force the position of the image with the proper CSS. As as far as I can see, my solution should still meet your needs provided that you add the correct CSS to go with it based on your needs. Please undertand that this is customization work, not user support. I've given you the necessary hints to do it. If you need someone to help you further with that customization and do it for you, you can contact our partners and request a quote: [ www.hikashop.com/home/our-partners.html](https://www.hikashop.com/home/our-partners.html) The following user(s) said Thank You: [Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTY2ODYtYWRkaW5nLWFuZC1kaXNwbGF5aW5nLWhpa2Etc2hvcC1jYXJ0LW1vZHVsZS12aWEtY2FydC1pY29uLWludG8tdGhlLW1lbnU/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile")** - [![Vlad Boch's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/57306-vlad-boch "View Vlad Boch's Profile") Topic Author - [ Offline](/forum/user/57306-vlad-boch) Less More- Posts: 38 - Thank you received: 2 - - 7 years 8 months ago [\#303509](#303509) by [Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile") Replied by *[Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile")* on topic *[Adding and displaying Hika Shop Cart Module via cart icon Into the menu](/forum/26-product-category-display/896686-adding-and-displaying-hika-shop-cart-module-via-cart-icon-into-the-menu#303509 "-- url of the page with the problem -- : delux.ua/ -- HikaShop version -- : 3.5.1 Hi. 1. I read some of the older topics and documentation, but still haven't understood how to visualize Hika Shop Cart Module as an icon via CSS. Maybe it's because I'm not IT specialist, but i'd really like to do it, if possible. It should look somewhat like on the screenshot, I have the svg image availible. If I understand right I should copy this code from your demo website and insert it in the product cart php file. But yet I don't see where is the line in the CSS, where I should be able to paste the path to the cart icon. 2. I don't know, if you can help me with this, but I'd like to add this cart module into the menu and for that I would need to add a specific position in my template near the position "lang". If you could advise me also on that, I would be very greatful.")* Hi, Ok thanks for all your support. I definetly appreciate all the hints you've given to me. As for image, you might have misunderstood me, I tried to add different image that already had the text "Cart empty" with a specific font for CART_EMPTY line, but it didn't work out very well. Sorry if I might have misconstruded my request. A thank you well deserved. So could you give me one more little hint? Should the CSS be edited in my template files, or via Hika Shop configuration? Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTY2ODYtYWRkaW5nLWFuZC1kaXNwbGF5aW5nLWhpa2Etc2hvcC1jYXJ0LW1vZHVsZS12aWEtY2FydC1pY29uLWludG8tdGhlLW1lbnU/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)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More- Posts: 86279 - Thank you received: 14262 - - 7 years 8 months ago [\#303518](#303518) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Adding and displaying Hika Shop Cart Module via cart icon Into the menu](/forum/26-product-category-display/896686-adding-and-displaying-hika-shop-cart-module-via-cart-icon-into-the-menu#303518 "-- url of the page with the problem -- : delux.ua/ -- HikaShop version -- : 3.5.1 Hi. 1. I read some of the older topics and documentation, but still haven't understood how to visualize Hika Shop Cart Module as an icon via CSS. Maybe it's because I'm not IT specialist, but i'd really like to do it, if possible. It should look somewhat like on the screenshot, I have the svg image availible. If I understand right I should copy this code from your demo website and insert it in the product cart php file. But yet I don't see where is the line in the CSS, where I should be able to paste the path to the cart icon. 2. I don't know, if you can help me with this, but I'd like to add this cart module into the menu and for that I would need to add a specific position in my template near the position "lang". If you could advise me also on that, I would be very greatful.")* Hi, Either way is fine. If you do it in the template, you need to make sure that you won't loose your changes when you update the template in the future. Some template provide a way to do that. You should check with the support of your template provider. If it's your own template, then in the CSS of the template is the best. If you do it in the HikaShop configuration, it's best to do it in the styles setting rather than the frontend setting so that you won't have any missing new CSS when you update your HikaShop in the future. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTY2ODYtYWRkaW5nLWFuZC1kaXNwbGF5aW5nLWhpa2Etc2hvcC1jYXJ0LW1vZHVsZS12aWEtY2FydC1pY29uLWludG8tdGhlLW1lbnU/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile")** - [![Vlad Boch's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/57306-vlad-boch "View Vlad Boch's Profile") Topic Author - [ Offline](/forum/user/57306-vlad-boch) Less More- Posts: 38 - Thank you received: 2 - - 7 years 8 months ago [\#303610](#303610) by [Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile") Replied by *[Vlad Boch](/forum/user/57306-vlad-boch "View Vlad Boch's Profile")* on topic *[Adding and displaying Hika Shop Cart Module via cart icon Into the menu](/forum/26-product-category-display/896686-adding-and-displaying-hika-shop-cart-module-via-cart-icon-into-the-menu#303610 "-- url of the page with the problem -- : delux.ua/ -- HikaShop version -- : 3.5.1 Hi. 1. I read some of the older topics and documentation, but still haven't understood how to visualize Hika Shop Cart Module as an icon via CSS. Maybe it's because I'm not IT specialist, but i'd really like to do it, if possible. It should look somewhat like on the screenshot, I have the svg image availible. If I understand right I should copy this code from your demo website and insert it in the product cart php file. But yet I don't see where is the line in the CSS, where I should be able to paste the path to the cart icon. 2. I don't know, if you can help me with this, but I'd like to add this cart module into the menu and for that I would need to add a specific position in my template near the position "lang". If you could advise me also on that, I would be very greatful.")* Hi, Nicolas. We decided to stop on using a slightly different image for empty cart for now/ It is more fitting and much more good looking than displaying the text. Thanks again for providing all the necessary hints that helped us to come up with the best suitable decision! - [ ![9.jpg](/forum/attachment/46075) ](/forum/attachment/46075 "9.jpg") [ ](/forum/attachment/46075?download=1 "9.jpg") - [ ![8.jpg](/forum/attachment/46076) ](/forum/attachment/46076 "8.jpg") [ ](/forum/attachment/46076?download=1 "8.jpg") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTY2ODYtYWRkaW5nLWFuZC1kaXNwbGF5aW5nLWhpa2Etc2hvcC1jYXJ0LW1vZHVsZS12aWEtY2FydC1pY29uLWludG8tdGhlLW1lbnU/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[joomleb](/forum/user/2322-joomleb "View joomleb's Profile")** - [![joomleb's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/2322-joomleb "View joomleb's Profile") - [ Offline](/forum/user/2322-joomleb) Less More- Posts: 461 - Thank you received: 36 - - 6 years 7 months ago [\#316534](#316534) by [joomleb](/forum/user/2322-joomleb "View joomleb's Profile") Replied by *[joomleb](/forum/user/2322-joomleb "View joomleb's Profile")* on topic *[Adding and displaying Hika Shop Cart Module via cart icon Into the menu](/forum/26-product-category-display/896686-adding-and-displaying-hika-shop-cart-module-via-cart-icon-into-the-menu#316534 "-- url of the page with the problem -- : delux.ua/ -- HikaShop version -- : 3.5.1 Hi. 1. I read some of the older topics and documentation, but still haven't understood how to visualize Hika Shop Cart Module as an icon via CSS. Maybe it's because I'm not IT specialist, but i'd really like to do it, if possible. It should look somewhat like on the screenshot, I have the svg image availible. If I understand right I should copy this code from your demo website and insert it in the product cart php file. But yet I don't see where is the line in the CSS, where I should be able to paste the path to the cart icon. 2. I don't know, if you can help me with this, but I'd like to add this cart module into the menu and for that I would need to add a specific position in my template near the position "lang". If you could advise me also on that, I would be very greatful.")* Hi Nicolas, Are you sure that the Languages string can be used ?!? Let me say: I set CART_EMPTY as green icon I set X_ITEM_FOR_X as blue icon I left X_ITEMS_FOR_X as default If I'm **not** logged: I add one item to the cart > the icon change color: ok / I add more items to the cart > the icon disappear: ok If I click on cancel products icon from cart > the green appear > but **an alert message where the CART\_EMPTY language string is called = this is not good** If I'm **logged**: I add one item to the cart > the icon change color: ok / I add more items to the cart > the icon disappear: ok If I click on logout > the green icon appear > but **an alert message where the CART\_EMPTY language string is called = this is not good** [ here a video](https://photos.app.goo.gl/BvfxKJ6AHf2tfd5fA) Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTY2ODYtYWRkaW5nLWFuZC1kaXNwbGF5aW5nLWhpa2Etc2hvcC1jYXJ0LW1vZHVsZS12aWEtY2FydC1pY29uLWludG8tdGhlLW1lbnU/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)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More- Posts: 86279 - Thank you received: 14262 - - 6 years 7 months ago [\#316537](#316537) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Adding and displaying Hika Shop Cart Module via cart icon Into the menu](/forum/26-product-category-display/896686-adding-and-displaying-hika-shop-cart-module-via-cart-icon-into-the-menu#316537 "-- url of the page with the problem -- : delux.ua/ -- HikaShop version -- : 3.5.1 Hi. 1. I read some of the older topics and documentation, but still haven't understood how to visualize Hika Shop Cart Module as an icon via CSS. Maybe it's because I'm not IT specialist, but i'd really like to do it, if possible. It should look somewhat like on the screenshot, I have the svg image availible. If I understand right I should copy this code from your demo website and insert it in the product cart php file. But yet I don't see where is the line in the CSS, where I should be able to paste the path to the cart icon. 2. I don't know, if you can help me with this, but I'd like to add this cart module into the menu and for that I would need to add a specific position in my template near the position "lang". If you could advise me also on that, I would be very greatful.")* Hi, Yes I'm sure. The issue you have is just that you're using the same translation key for the green message which appears when the cart is emptied by the customer, and the text inside the cart module when the cart is empty. In the settings of the HikaShop cart module, that you can edit via the Joomla modules manager, you can change that empty message. So just enter another translation key there, and use that translation for your green icon and remove your translation override for the other translation key so that the empty message can display properly. The following user(s) said Thank You: [joomleb](/forum/user/2322-joomleb "View joomleb's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTY2ODYtYWRkaW5nLWFuZC1kaXNwbGF5aW5nLWhpa2Etc2hvcC1jYXJ0LW1vZHVsZS12aWEtY2FydC1pY29uLWludG8tdGhlLW1lbnU/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.408 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)