Custom code for cart icon no longer working!

Hello,

As of recently, the CSS I was using to replace the cart icon with a custom image stopped working. I've found some updated code online, but it isn't working as it was before. I'd like to position the number of items in the cart next to the cart icon, not on top of it. I'd also like to be able to position the icon on the page differently for mobile than desktop. Thanks for any help anyone can provide. Also, I'd love to know why the code I've been using for the past year stopped working out of the blue.

Hi,

Which code & What is your site url?

On 1/18/2023 at 9:09 PM, tuanphan said:

Hi,

Which code & What is your site url?

The site is lewisrossignolart.com. I've already replaced the code and it works most of the way. But I can't figure out how to display the number of items in the cart **next to** the cart icon. And I need to reposition the cart on mobile. It doesn't matter much where it appears on desktop, but I'd like to horizontally align it with the burger menu icon on mobile. Thanks so much. Here it the code I'm currently using:

 

/*custom cart icon*/
.header-actions-action.header-actions-action--cart svg,
.header-actions-action.header-actions-action--cart .icon-cart-quantity {
  display: none !important;
}

.header-actions-action.header-actions-action--cart a {
    display:block;
    width: 32px;
    height: 80px;
    background-size: 32px 32px;
  background-image: url(https://static1.squarespace.com/static/61c22944e0aaed7bd8f066c3/t/620d5b4b335ff0014b413dd9/1645042507602/cart.png); background-size: contain;
background-repeat: no-repeat;
}

On 1/30/2023 at 5:52 PM, dross said:

The site is lewisrossignolart.com. I've already replaced the code and it works most of the way. But I can't figure out how to display the number of items in the cart **next to** the cart icon. And I need to reposition the cart on mobile. It doesn't matter much where it appears on desktop, but I'd like to horizontally align it with the burger menu icon on mobile. Thanks so much. Here it the code I'm currently using:

 

/*custom cart icon*/
.header-actions-action.header-actions-action--cart svg,
.header-actions-action.header-actions-action--cart .icon-cart-quantity {
  display: none !important;
}

.header-actions-action.header-actions-action--cart a {
    display:block;
    width: 32px;
    height: 80px;
    background-size: 32px 32px;
  background-image: url(https://static1.squarespace.com/static/61c22944e0aaed7bd8f066c3/t/620d5b4b335ff0014b413dd9/1645042507602/cart.png); background-size: contain;
background-repeat: no-repeat;
}

#1. Add to Design > Custom CSS

.header-actions-action.header-actions-action--cart .icon-cart-quantity {
    display: block !important;
    position: relative;
    right: -30px;
    top: -10px;
    font-size: 30px;
}

#2. I see you solved?