I used this code to add variants to my product, but the result is that i can display the variants only as dropdown list. If i display the variants as button, the selection of the variants works only for the first one and send you directly to the cart.
how I can fix this code to display the 2 drop-down list as button.
my url is adriabeachwear.com
And this is the code that I used
Code for the first variant dropdown
{% endcomment %}
Taglia: slip
XXS (36)
XS (38)
S (40)
M (42)
L (44)
{% comment %}
Code for the second variant dropdown
{% endcomment %}
Taglia reggiseno
1
2
3
4
5
The code snippet you’ve shared is not complete.
The idea is that when any of these buttons is clicked, browser must execute Javascript function selectVariant with relevant parameter.
However, there is no JS code.
By default, any button inside the form (product form in this case) submits your form with whatever selections are made. And since selectVariant is not defined, buttons perform their default function, same as you click “add to cart”.
You can try this code instead:
thank you @tim_1 , your code was working
but now they updated the theme and is not working anymore, and also changed the the style.
what code i need to go back to the same effect of before?
i send a pic where i have opened the console on the “brasiliana” variant (standard from product form)
thank you in advance
Yes, they’ve changed the structure and some CSS variables.
Hope they’ll stick with this for some time…
Try this code instead:
{% assign form_id = 'product-form-' | append: section.id %}
just change the last part to match perfectly the original variants
".line-item-property__field label:has(:checked) {
color: white;
background: black;
}
"
