I'm new on shopify , i create a website, i need help to change the color of my variant products bottoms?

[user2272]

[hammad-ali]

Hi @user2272,

You can change the color of your variant product buttons using CSS.

1. Go to Online Store → Themes → Edit code.

2. Open your base.css (or theme.css) file.

3. Add this code at the bottom:

.product-form__input input[type="radio"]:checked + label {
  background-color: #yourcolorcode !important;
  color: #fff !important;
}

Replace #yourcolorcode with the color you want.

Hope this helps!
If you ever need help with Shopify theme customization or store setup, I provide professional and friendly services at affordable rates.
– Hammad | Shopify Developer

[devcoders]

Hi @user2272

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottow of the file:

.product-form__input--pill input[type=radio].disabled:checked+label, .product-form__input--pill input[type=radio]:disabled:checked+label {
    color: #fff;
}

[Dan-From-Ryviu]

You can change the color in store admin > Sales channels > Online Store > Themes > Customize > Theme settings > Colors

[SEOAnt-Jeffery]

This should be related to the theme settings on your end when checking from customization page. If not, it may be controlled by your installed third party apps or plugins. You can see further help from them as well if possible.

[EmbedAny]

Hi @user2272

Here’s a simple step-by-step guide (for the Dawn theme or most modern Shopify themes):

---

Step 1: Go to Your Theme Editor

1. In your Shopify admin, go to Online Store → Themes.

2. Find your current theme and click “…” → Edit code.

---

Step 2: Locate the CSS File

1. In the code editor sidebar, open: /assets/base.css

   or sometimes it’s named: /assets/theme.css

   (If you’re using a different theme, look for the main CSS file in the assets folder.)

---

Step 3: Add Custom CSS

Scroll to the bottom` of the CSS file and paste this code: /* Change the background color of variant buttons /
.product-form__input input[type=“radio”] + label {
background-color: #f0f0f0; / default background /
color: #000; / text color */
border-radius: 8px;
border: 1px solid #ccc;
padding: 8px 16px;
}

/* Change color when hovered /
.product-form__input input[type=“radio”] + label:hover {
background-color: #007bff; / hover color */
color: #fff;
border-color: #007bff;
}

/* Change color when selected (active variant) /
.product-form__input input[type=“radio”]:checked + label {
background-color: #28a745; / selected color */
color: #fff;
border-color: #28a745;
}`

---

Step 4: Save and Preview

Click Save, then preview your product page — your variant buttons should now have your custom colors.

[ryomei]

Hi there, welcome to Shopify!

Nice work getting your store set up you’re off to a great start. Changing the variant button colors is a common customization, and there are two main ways to handle it depending on your theme setup:

Option 1: Through the Theme Editor (no code needed)

1. Go to Online Store → Themes → Customize.

2. Navigate to your Product Page section.

3. Look for the Variant Picker or Product Options block.

4. Under the style or design settings, you should see options for button color, hover color, or accent color adjust them there.

Option 2: Add Custom CSS (for full control)
If your theme doesn’t provide this option, you can add a short CSS rule:

.product-form__input input[type="radio"]:checked + label {
  background-color: #000000; /* Change this to your desired color */
  color: #ffffff;
}

Add this under:
Online Store → Edit Code → Assets → base.css (or theme.css, depending on your theme).

If you share your theme name, I can give you the exact line of code and placement that fits perfectly it only takes a few minutes to fix.

I specialize in Shopify design customization and store optimization, so I’d be happy to guide you through it step-by-step if you need a hand or help you out on it if you are still having issues

[user2272]

I will so happy if you can help me with that.

[hammad-ali]

Sure @user2272,
I’d be happy to help you with that!

you can follow above steps which i shared or
Please share your store URL (and password, if it’s protected), so I can check your theme setup and make sure the button styling works perfectly across all variants and devices.

Once I take a quick look, I’ll guide you step by step or provide the exact code you can safely paste.

– Hammad | Shopify Developer (Theme & Customization Expert)

[user2272]

Could you please provide me with your email address so that I may add you as a user to the website administration?

[hammad-ali]

I think you have seen my message.

[hammad-ali]

Go to Shopify Admin → Settings → Users and permissions.
Click “Add collaborator.”
Enter this email. hammad.storelify.studio@gmail.com
Choose the specific permissions you want to give.
Then click “Send invite.”

Or you can share your collaborator code so I can send a request from my side.

I hope our collaboration will be long and successful.

[websensepro]

Hello @user2272

Some modern Shopify themes, especially on Online Store 2.0, allow you to change variant styles directly in the theme editor without any coding.

1. Go to your Theme Editor: From your Shopify admin, go to Online Store > Themes and click “Customize” on your current theme.

2. Navigate to a Product Page: Use the dropdown menu at the top of the editor to select Products > Default product.

3. Find the Variant Picker Block: On the left-side panel, look for a block named “Variant picker” or similar, and click on it.

4. Check for Color Options: In the settings on the right, you might see options for “Color selector type” or similar styling choices. If so, you can adjust the colors there.

Thank You!

[EFOLI-Syn]

Hello @user2272,

You can add the following CSS code into your base.css or theme.css file in your theme liquid:

@media screen and (max-width: 749px) {.product-form__input--pill input[type=radio]:checked+label {
background-color: black;
color: white;
}
}