How to add hover affect to cart icon that has been changed

Shopify Discussion
,
1

Hi

I am trying to get the hover affect for the cart button working again, (stoped when i changed the icon) i have changed the cart icon and added a change of colour for when a product is added to cart.

the colour changes i have made work when placed the css in component-cart.css and not in base css.

any help with hover css would be appreciated thank you.

Ps would also like to put a fill layer in the form of a circle around the icons when hover is used, once all the code is in place i can adjust the sizes and colour a needed,

Dawn Theme 15.3

2

a link to site just incase needed https://syntechplastics.co.uk/

3

Hi @syntechplastics ,
Go to Shopify Admin-> Online Store → Themes-> Actions → Edit code
go to sections/header.liquid
find this

<a href="/cart" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
  ...
</a>

Wrap it like this

<div class="custom-cart-wrapper">
  <a href="/cart" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
    <span class="svg-wrapper">
      <!-- SVG code here -->
    </span>
    <span class="visually-hidden">Cart</span>
    <div class="cart-count-bubble">
      <span aria-hidden="true">1</span>
      <span class="visually-hidden">1 item</span>
    </div>
  </a>
</div>

Now go to Assets folder > component-cart.css and paste this code at bottom

.custom-cart-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

.custom-cart-wrapper #cart-icon-bubble {
  position: relative;
}

.custom-cart-wrapper .cart-count-bubble {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: red;
  color: white;
  border-radius: 50%;
  font-size: 10px;
  padding: 2px 6px;
  min-width: 18px;
  text-align: center;
}

Save and refresh preview.
Thanks
Manoj

4

Hello

thank you for the code added :slight_smile:

  <a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">

    {% if cart == empty %}

      <span class="svg-wrapper">{{ 'icon-cart-empty.svg' | inline_asset_content }}</span>

    {% else %}

      <span class="svg-wrapper">{{ 'icon-cart.svg' | inline_asset_content }}</span>

    {% endif %}

    <span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>

    {%- if cart != empty -%}

      <div class="cart-count-bubble">

        {%- if cart.item_count < 100 -%}

          <span aria-hidden="true">{{ cart.item_count }}</span>

        {%- endif -%}

        <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>

      </div>

    {%- endif -%}

  </a>

</div>

</div>

and also the code to base.css but still no joy.

5 
  <a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">

    {% if cart == empty %}

      <span class="svg-wrapper">{{ 'icon-cart-empty.svg' | inline_asset_content }}</span>

    {% else %}

      <span class="svg-wrapper">{{ 'icon-cart.svg' | inline_asset_content }}</span>

    {% endif %}

    <span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>

    {%- if cart != empty -%}

      <div class="cart-count-bubble">

        {%- if cart.item_count < 100 -%}

          <span aria-hidden="true">{{ cart.item_count }}</span>

        {%- endif -%}

        <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>

      </div>

    {%- endif -%}

  </a>

</div>

</div>

not sure why but not all the code showed up in last message

6

@syntechplastics ,
To do this , Please share collaborator code in PM.

7

Hi @syntechplastics ,

Simply what you can do is copy the below code and paste it to theme.css or base.css
/* Cart icon hover effect /
#cart-icon-bubble:hover .svg-wrapper svg {
fill: #007aff*; /* Blue fill color on hover /
transform: scale(1.1); / Slight zoom on hover */
transition: fill 0.3s ease, transform 0.3s ease;
}

/* Base styling for smooth transition */
#cart-icon-bubble .svg-wrapper svg {
transition: fill 0.3s ease, transform 0.3s ease;
}

You can change the color according to your needs. Please check the link - https://drive.google.com/file/d/1uyAhftmxkkny9ZjSAt8MKceziRJlXGp0/view?usp=sharing

8

Hello

i can see you got it working from the video, but the code is missing some parts, i have sorted some of it but still not working.

9

No, basically this worked for me.

#cart-icon-bubble:hover .svg-wrapper svg {
fill: #007aff*; /* Blue fill color on hover /
transform: scale(1.1); / Slight zoom on hover */
transition: fill 0.3s ease, transform 0.3s ease;
}

#cart-icon-bubble .svg-wrapper svg {
transition: fill 0.3s ease, transform 0.3s ease;
}

If you want I can do it on your store but I need the collab code.

Note: It’s 100% free. I won’t ask any charges like others do.

11

Reply here but accept the request only of AiTrillion

13

I have sent you the message. Can you see it?

14

yes think its sorted

16

@syntechplastics It’s done. Basically, the CSS was not working at the last. I have moved it to the middle and it worked.

17

perfect thank you so much no wonder i was trying for hours lol.

18

You’re welcome. If you need any help, feel free to reply here or message me.

Also, be aware! Lot of people here providing wrong answers just to get good rankings.

I’m really happy to help you — now and anytime you need.:beating_heart: