Change Quantity and Size border radius for Impulse theme

chlgr
New Member
4 0 0

Hello, I tried many codes but nothing works, I want a code that change the border of Quantity and Size (variants) to rounded border in the product page. I am using Shopify Impulse theme, my website is https://www.gamingrushers.com

border_problem.png

as you can see both of Quantity and Size boxes are square, I want them rounded with border radius.

Replies 3 (3)

PageFly-Henry
Astronaut
984 281 225

HI @chlgr 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file -> Save


.variant-wrapper label.variant__button-label {

    border-radius: 50px  !important;

}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Hardik29418
Shopify Partner
2913 419 1081

Please go to
1) Online store
2) Themes -> Edit theme
3) Layout
4) theme.liquid and paste this code before </head>

<style>
  .js-qty__wrapper .js-qty__num, .variant-input .variant__button-label {
    border-radius: 6px !important;
  }
</style>

 

If my solution works, then please like and accept it as a solution.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
chlgr
New Member
4 0 0

Hello thanks for the code it worked for quantity, size borders but the problem is that it affect the Color too. I wish if you can give me a code that does not affect the Color border cause it seems unprofessional when looking at it. (look at screenshot below)
color_border_problem.png