Solved

Custom Quick to add CSS Code (Dawn Theme)

newuser01
Tourist
8 0 2

Hi, so I customized the quick to add button into a button with only icon no text (Please see image reference). But my concern is that everytime i click the button the icon become so tiny (You may test it with this link). 

 

Here is the css of the button

.quick-add-svg{
    width: 30px;
    height: 30px;
    border: 1px;
    background: #00000040;
    border-radius: 50px;
    position: relative;
    bottom: 130px;
    left: 10px;
    display: flex;
    color: white;
    align-items: center;
    padding:5px;
    box-sizing: border-box;
    cursor:pointer;
}

This plus icon from the image is what I am referring to

newuser01_0-1679933228714.png

Then ofc you may test it through this link 

https://799iq97ppjv6u8zq-56150523956.shopifypreview.com

Accepted Solution (1)

BSS-Commerce
Shopify Expert
3441 459 512

This is an accepted solution.

Hi @newuser01 

We tested it and found that every time we hover over the icon, the width and height properties are set to 24 px (as shown below). To fix that error, you need to find that class and have the hover state, and edit the width and height properties you want.

view (10).png

We hope that this can help you.

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 2 (2)

BSS-Commerce
Shopify Expert
3441 459 512

This is an accepted solution.

Hi @newuser01 

We tested it and found that every time we hover over the icon, the width and height properties are set to 24 px (as shown below). To fix that error, you need to find that class and have the hover state, and edit the width and height properties you want.

view (10).png

We hope that this can help you.

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

newuser01
Tourist
8 0 2

Thank you very much! I figured out my mistake it was because display was flex, now its better. I appreciate your help btw!