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
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:
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 %}