How can I change the color of featured product options and size buttons?

Store Design
, ,

Topic summary

A user seeks to customize two styling elements in their Shopify store:

Issues:

  • Change the background color of the “Choose Option” button in featured product quick-add modals
  • Modify the appearance of selected size buttons and bold pricing

Solution Provided:
A support member (ZestardTech) provided CSS code to be added to the store’s base.css file:

.quick-add-modal__content-info {
  background-color: #fb8122;
}

Additional CSS was included to adjust text colors for product titles and descriptions within the quick-add modal.

Outcome:
The solution successfully resolved the user’s styling issues. The thread appears resolved, with the helper requesting the user mark the response as an accepted solution.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

Hi, i need help :grinning_face_with_smiling_eyes:

How i can change color for Featured products Choose Option picture 2, i want the color be like on picture 3? And how i can change color of the Size button that is selected and bold price picture 3? Tnx

Picture 1 https://i.postimg.cc/gx1tPS0p/1jpg.jpg

Picture 3https://i.postimg.cc/D8Zx4kJF/3jpg.jpg

Picture 2https://postimg.cc/vxypwP3T

1 Like
2

Hi. @paxvictoria .

Please Share Your Store URL And Password.

Thanks,

3

paxvictoria.com

pass: teilye

4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
button#ProductSubmitButton-quickadd-template--19340935397717__main {
    background-color: #fff;
}
quick-add-modal .product__title>a {
    color: #fff;
}
quick-add-modal .product__column-sticky p {
    color: #fff;
}
quick-add-modal .product__title>a .h1 {
    color: #fff;
}

ZestardTech_0-1690271080639.png
ZestardTech_0-1690271080639.png1554×737 133 KB

5

unfortunately the background color has not changed..

1 Like
6

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.quick-add-modal__content-info {
background-color: #fb8122;
}
button#ProductSubmitButton-quickadd-template--19340935397717__main {
background-color: #fff;
}
quick-add-modal .product__title>a {
color: #fff;
}
quick-add-modal .product__column-sticky p {
color: #fff;
}
quick-add-modal .product__title>a .h1 {
    color: #fff;
}

ZestardTech_0-1690272951127.png
ZestardTech_0-1690272951127.png1563×715 104 KB

7

Perfect Tnx

1 Like
8

Hello @paxvictoria

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.

If helpful then please All Like and Accept Solution.