0

My products have 2 variants, size and color. I want to display the size options as a series of buttons. Here's my current code:

{% for variant in product.variants %}
  <input type="button" name="{{ variant.id }}" id="{{ variant.id }}" value="{{ variant.title }}">
{% endfor %}

This returns buttons with values like S/White, M/White, L/White, etc. I want just S, M and L. Pulling from of the example code in the docs, I've tried

{% for variant in product.variants.size %}

and

{% for variant in product.variants.first %}

but evidently that's not the right syntax as nothing is output.

What's the correct way to do this?

TIA - Joe

Joe Lowery
  • 562
  • 11
  • 26

1 Answers1

2

Variants contain up to 3 options. In your case, variant.option1 will give you the size (S/M/L) and variant.option2 is the colour. You can also get the titles of the options with product.options. See the doco here for more info on variants.

Also, have you seen this tutorial on adding colour swatches and buttons to a product page? Maybe some of the code for creating the buttons would help you get started.

EDIT:

By following the tutorial mentioned above, you can get buttons for the size options like this:

enter image description here

Put this code in product.liquid below </select>:

{% if product.available and product.variants.size > 1 %}
  {% include 'swatch' with 'Size' %}
{% endif %}

If you also want buttons for the color option (and not swatches), use this code in product.liquid:

{% if product.available and product.variants.size > 1 %}
  {% for option in product.options %}
    {% include 'swatch' with option %}
  {% endfor %}
{% endif %}

And delete these lines from swatch.liquid (line 30):

{% if downcased_option contains 'color' or downcased_option contains 'colour' %}
  {% assign is_color = true %}
{% endif %}
Steph Sharp
  • 11,462
  • 5
  • 44
  • 81
  • Thanks for responding, Steph, but I'm not able to integrate .option1 and get the results I'm looking for. I tried `` and `{% for variant in product.variants.option1 %}` but neither worked. Can you give me the proper syntax? And, yes, I am familiar with that tutorial - I've got it working; I'll take a deeper look at the code to see what I can uncover. – Joe Lowery Jun 19 '14 at 17:40
  • @JoeLowery See my edit above for how to use the color swatch tutorial to get the buttons working. That's probably the simplest way to do it. – Steph Sharp Jun 20 '14 at 12:30
  • Thanks so much, Steph. Sorry for my delayed acceptance of your answer. It worked perfectly. – Joe Lowery Jun 23 '14 at 14:13