Shopify Dropdown Selector Functionality Fix - Shopify experts only!
Budget: $10 – $30 USD
I need an experienced Shopify Partner to fix the dropdown selector functionality for product variants on my Shopify store. The theme already has a setting called "Always use dropdown selector" in the customizer, and when enabled, the dropdown displays correctly and opens to show all variant options. However, the options cannot be clicked or selected, making it completely non-functional.
What Needs to Be Fixed:
The dropdown selector must work identically to the existing button-based variant selection: When a customer clicks a dropdown option, it needs to properly select that variant and update the product price, images, and availability status. The availability logic is critical: options that are not available should be disabled and not clickable, while sold-out options should be clickable but disable the "Add to Cart" button when selected. All existing button-based functionality must continue working perfectly when the dropdown setting is turned off.
Technical Details
The code uses a custom dropdown with data-js-dropdown and data-js-select-dropdown attributes, generating options as span elements. I Think these span elements need proper click handlers to integrate with the existing variant selection JavaScript. The variant availability checking logic already exists in the code and works correctly for buttons, so the same logic needs to apply to the dropdown mode.
Requirements
You must be a Shopify Partner who can request collaborator access to my store. I cannot invite you directly or share theme files. You need experience with Shopify Liquid templating and product variant logic, and you must be available to start immediately. This is a small fix that should take 1 day maximum.
What Needs to Be Fixed:
The dropdown selector must work identically to the existing button-based variant selection: When a customer clicks a dropdown option, it needs to properly select that variant and update the product price, images, and availability status. The availability logic is critical: options that are not available should be disabled and not clickable, while sold-out options should be clickable but disable the "Add to Cart" button when selected. All existing button-based functionality must continue working perfectly when the dropdown setting is turned off.
Technical Details
The code uses a custom dropdown with data-js-dropdown and data-js-select-dropdown attributes, generating options as span elements. I Think these span elements need proper click handlers to integrate with the existing variant selection JavaScript. The variant availability checking logic already exists in the code and works correctly for buttons, so the same logic needs to apply to the dropdown mode.
Requirements
You must be a Shopify Partner who can request collaborator access to my store. I cannot invite you directly or share theme files. You need experience with Shopify Liquid templating and product variant logic, and you must be available to start immediately. This is a small fix that should take 1 day maximum.