Shopify themes, liquid, logos, and UX
Hi,
I am using the venture theme and would like to add item count to the header cart icon in my store. I have searched but have not found a solution to this problem. I would like to have the item count update as items are added without having to refresh the page.
Solved! Go to the solution
This is an accepted solution.
Here is the solution. 🙂
Please find this code in Sections/header.liquid
<span class="site-header__cart-indicator {% if cart.item_count == 0 %}hide{% endif %}"></span>
Replace it with this new code
<span class="site-header__cart-indicator {% if cart.item_count > -1 %} site-header__cart-indicator--visible{% endif %}">{{ cart.item_count }}</span>
Add this code to assets/theme.scss.liquid bottom of the file
.site-header__cart-indicator--visible {
top: 9px !important;
width: 15px !important;
height: 15px !important;
color: #fff;
font-size: 15px;
text-align: center;
}
End results
I hope this works for anyone else that's using the Venture theme and is trying to add item count to their cart icon.
Welcome to the Shopify community!
and Thanks for your question.
Please share your site URL,
So I will check and provide a solution here.
Thank you for your welcome and below is the website URL and password.
Store link - https://premija-llc.myshopify.com/
Password - phiame
do you need a product page or product listing?
I have 5 test products listed. When I add items to my cart, it is shown as seen in the photo below.
It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like
Great, Thanks i will check and let you know
This is an accepted solution.
Here is the solution. 🙂
Please find this code in Sections/header.liquid
<span class="site-header__cart-indicator {% if cart.item_count == 0 %}hide{% endif %}"></span>
Replace it with this new code
<span class="site-header__cart-indicator {% if cart.item_count > -1 %} site-header__cart-indicator--visible{% endif %}">{{ cart.item_count }}</span>
Add this code to assets/theme.scss.liquid bottom of the file
.site-header__cart-indicator--visible {
top: 9px !important;
width: 15px !important;
height: 15px !important;
color: #fff;
font-size: 15px;
text-align: center;
}
End results
I hope this works for anyone else that's using the Venture theme and is trying to add item count to their cart icon.
thanks for update
Premija, that worked great. Thank you for that.
1 small thing however;
number of item wont show up in cart unless you refresh screen.
Can coding be adjusted so that when you add an item to cart, it indicates so without refreshing screen?
using Venture
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024