Envy theme- More Variants in the product page

chiara94
Tourist
27 0 2

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

chiara94_0-1715889033122.jpeg

And this is the code that I used

Code for the first variant dropdown
{% endcomment %}
<div class="product-form-option col-md-6 col-sm-12 col-12">
<div class="line-item-property__field">
<label>Taglia: slip</label><br>
<div class="product-options">
<button onclick="selectVariant('XXS(36)')" class="variant-btn">XXS (36)</button>
<button onclick="selectVariant('XS(38)')" class="variant-btn">XS (38)</button>
<button onclick="selectVariant('S(40)')" class="variant-btn">S (40)</button>
<button onclick="selectVariant('M(42)')" class="variant-btn">M (42)</button>
<button onclick="selectVariant('L(44)')" class="variant-btn">L (44)</button>
</div>
</div>
</div>

{% comment %}
Code for the second variant dropdown
{% endcomment %}
<div class="product-form-option col-md-6 col-sm-12 col-12">
<div class="line-item-property__field">
<label>Taglia reggiseno</label><br>
<div class="product-options">
<button onclick="selectVariant('1')" class="variant-btn">1</button>
<button onclick="selectVariant('2')" class="variant-btn">2</button>
<button onclick="selectVariant('3')" class="variant-btn">3</button>
<button onclick="selectVariant('4')" class="variant-btn">4</button>
<button onclick="selectVariant('5')" class="variant-btn">5</button>
</div>
</div>
</div>

Replies 3 (3)

tim
Shopify Expert
3487 284 1295

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:

 

<div class="more-data">
    <p class="line-item-property__field">
    <legend class="swatch-title">Taglia: slip</legend>
    <label><input type="radio" name="properties[Taglia: slip]" value="XXS (36)" checked=checked> XXS (36)</label>
    <label><input type="radio" name="properties[Taglia: slip]" value="XS (38)"> XS (38)</label>
    <label><input type="radio" name="properties[Taglia: slip]" value="S (40)"> S (40)</label>
    <label><input type="radio" name="properties[Taglia: slip]" value="M (42)"> M (42)</label>
    <label><input type="radio" name="properties[Taglia: slip]" value="L (44)"> L (44)</label>
  </p>

  <p class="line-item-property__field">
    <legend class="swatch-title">Taglia: reggiseno </legend>
    <label><input type="radio" name="properties[Taglia: reggiseno]" value="1" checked=checked> 1</label>
    <label><input type="radio" name="properties[Taglia: reggiseno]" value="2"> 2</label>
    <label><input type="radio" name="properties[Taglia: reggiseno]" value="3"> 3</label>
    <label><input type="radio" name="properties[Taglia: reggiseno]" value="4"> 4</label>
    <label><input type="radio" name="properties[Taglia: reggiseno]" value="5"> 5</label>
  </p>
</div>

<style>
  .line-item-property__field {
    line-height: 2.5;
  }
  .line-item-property__field input {
    appearance: none;
  }
  .line-item-property__field label {
    border: 1px solid var(--border-color);;
    min-width: 6em;
    display: inline-block;
    text-align: center;
    padding: 0 0.5rem;
  }
  .line-item-property__field  label:has(:checked) {
    color: black;
    box-shadow: inset 0 0 0 1px var(--color-primary);
  }
</style>

 

 Screenshot 2024-05-17 at 6.08.19 pm.png

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
chiara94
Tourist
27 0 2

thank you @tim , 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

chiara94_0-1716625159581.png

 

tim
Shopify Expert
3487 284 1295

Yes, they've changed the structure and some CSS variables.

Hope they'll stick with this for some time...

 

Try this code instead:

<div class="more-data">
  {% assign form_id = 'product-form-' | append: section.id %}
  <p class="line-item-property__field">
    <legend class="swatch-title">Taglia: slip</legend>
    <label><input type="radio" form={{ form_id }} name="properties[Taglia: slip]" value="XXS (36)" checked=checked> XXS (36)</label>
    <label><input type="radio" form={{ form_id }} name="properties[Taglia: slip]" value="XS (38)"> XS (38)</label>
    <label><input type="radio" form={{ form_id }} name="properties[Taglia: slip]" value="S (40)"> S (40)</label>
    <label><input type="radio" form={{ form_id }} name="properties[Taglia: slip]" value="M (42)"> M (42)</label>
    <label><input type="radio" form={{ form_id }} name="properties[Taglia: slip]" value="L (44)"> L (44)</label>
  </p>

  <p class="line-item-property__field">
    <legend class="swatch-title">Taglia: reggiseno </legend>
    <label><input type="radio" form={{ form_id }} name="properties[Taglia: reggiseno]" value="1" checked=checked> 1</label>
    <label><input type="radio" form={{ form_id }} name="properties[Taglia: reggiseno]" value="2"> 2</label>
    <label><input type="radio" form={{ form_id }} name="properties[Taglia: reggiseno]" value="3"> 3</label>
    <label><input type="radio" form={{ form_id }} name="properties[Taglia: reggiseno]" value="4"> 4</label>
    <label><input type="radio" form={{ form_id }} name="properties[Taglia: reggiseno]" value="5"> 5</label>
  </p>
</div>

<style>
  .line-item-property__field {
    line-height: 2.5;
  }
  .line-item-property__field input {
    appearance: none;
  }
  .line-item-property__field label {
    border: 1px solid var(--border-color);;
    min-width: 7em;
    display: inline-block;
    text-align: center;
    padding: 0 0.5rem;
    margin-bottom: 5px;
  }
  .line-item-property__field  label:has(:checked) {
    color: black;
    box-shadow: inset 0 0 0 1px black;
  }
</style>

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com