Change the drop down variant picker selection (hover and selected) color.

Store Design
,

Topic summary

A user seeks to customize the dropdown variant picker on their Shopify product page, specifically wanting to:

  • Change the active dropdown option’s background color to #dedede
  • Add spacing between the two options

The product page link and screenshot were provided to illustrate the issue.

Proposed Solution:
A support representative suggested adding custom JavaScript code to the theme.liquid file to modify the selected option’s styling. The code targets a specific element ID and changes its background color on selection.

Current Status:
The initial JavaScript solution did not work when implemented. The user shared their code placement for verification.

Key Issue Identified:
The default HTML <select> tag has limited CSS styling support. The recommendation shifted to creating a custom dropdown using HTML/CSS instead of relying on the native select element. The user was advised to search for “custom dropdown” examples to achieve the desired visual customization.

The discussion remains open with no confirmed working solution yet.

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

Link to the product to which I want to make the change-

https://adisicoffee.com/products/thogarihunkal_estate-honey-sun-dried

drawer.JPG
drawer.JPG981Ă—906 46.2 KB

I want to change the the drop down active option background color to #ededed & add some gap between two options.

Regards.

1 Like
2

Hi there,

This is Amelia from PageFly - Landing Page Builder App
Thank you for reaching out! You can use the following custom JavaScript code to change the style of the selected option in the dropdown variant.
Steps to follow:
1: Access your theme folder: Open the theme.liquid file.
2: Add the script tag: Insert the following script tag within the file:

*<script>*
*// Add the code here*
*</script>*

3: Paste the code: Place this code inside the script tag to change the style of the selected option:

*<script>*
*const selectElement = document.getElementById("Option-template--23225008455997__main-1");*
*selectElement.addEventListener("change", function() {*
*const selectedOption = selectElement.options[selectElement.selectedIndex];*
*selectedOption.style.color = "#ededed"; *
*});*
</script>

I hope that my solution works for you.

Best regards,

Amelia | PageFly

3

Thanks for replying, But the solution didn’t work. I have mentioned below, where I placed the the code. Did I place it correctly?


    {% if page_description %}
      
    {% endif %}

    {% render 'meta-tags' %}

     

     
      

     {% include 'meteor-menu', load: 'head' %}
  {{ content_for_header }}

    {%- liquid
      assign body_font_bold = settings.type_body_font | font_modify: 'weight', '500'
      assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
      assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
    %}

Regards.

4

Hi there,

It seems you’re using the default HTML