Help needed: Unable to select size with Button Variant Picker,

Technical Q&A

Topic summary

A user encountered an issue where the button variant picker for product sizes appeared non-functional in Shopify’s Heritage theme (v1.0.3). While the dropdown variant picker worked correctly, switching to the button style seemed to prevent size selection.

Root Cause:
The button picker was actually functioning properly—sizes were being selected and added to cart correctly. The problem was purely visual: the selected button’s background color was set to white, making it indistinguishable from unselected buttons.

Solution Provided:
Add CSS code to style.css (via code editor) or Theme Settings → Custom CSS:

.variant-option__button-label:has(:checked){
  background-color: #F3CD74;
}

This applies a visible background color (#F3CD74) to selected size buttons, resolving the visual feedback issue. The user confirmed the Custom CSS method worked successfully.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

I am using Theme: Heritage V1.0.3 working on my product page in the theme editor and having issues with the variant picker not allowing size selection.

Specifically, I have selected the “Button” variant picker but it does not allow the sizes to be selected. I have also tried changing the variant picker from “Button” to “Dropdown” and it works. But when I update it back to “Button” the issue is still occurring.

Please advise how I can enable the “Button” variant picker to allow the sizes to be selected.

2

Please share your store url to check the issue.

3

My store is currently lock with password, how am I able to provide the access to check the issue?

Store URL: pantheramuse.com

4

You can share the password as well. You will find it under settings and users and permissions or may be in general.

Or above your published theme you will see a yellow bar, click that and it will take you the the password field.

5

Hi there, I have unlocked my store. Seek your kind expertise in checking the issue.

6

Its still asking for the password.

7

Hi, you can try now. It’s unlocked

8

Yes i see the site now.

9

Okay, so in your style.css file from the code editor add this at the very bottom of everything.

.variant-option__button-label:has(:checked){

background-color: #F3CD74;

}

Your site is working well its just the background color of the selected size is set to white which feels like its not working. But it is working fine and the right size and color gets added to the cart. Add this, this will show the size that is selected. You just didn’t use the right color, that’s it.

1 Like
10

Hi, can i know which section i should be adding this to? Is this referring to the theme settings → Custom CSS?

11

Yes you can add it there but i was referri g to the code editor. So click the three dots button and click on edit code. then look for style.css file and the code i provided at the very bottom. You can try adding that under theme settings → Custom CSS ass well

1 Like
12

Adding under the Custom CSS works! Thank you so much for your help Shadab, i really appreciate it!

1 Like