Get one variant in Shopify


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


{% 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. <a href="http://docs.shopify.com/themes/liquid-variables/product#variant" rel="nofollow">See the doco here</a> for more info on variants.

Also, have you seen <a href="http://docs.shopify.com/manual/configuration/store-customization/showcasing-products/add-color-swatches-to-your-products" rel="nofollow">this tutorial</a> on adding colour swatches and buttons to a product page? Maybe some of the code for creating the buttons would help you get started.


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

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/7GSj6.png" data-original="https://i.stack.imgur.com/7GSj6.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

Put this code in <strong>product.liquid</strong> 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 <strong>product.liquid</strong>:

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

And delete these lines from <strong>swatch.liquid</strong> (line 30):

{% if downcased_option contains 'color' or downcased_option contains 'colour' %} {% assign is_color = true %} {% endif %}


  • Excel averageifs with or function
  • JSON.parse() in Swig (Node.js)?
  • Trimming blocks using whitespace control from jinja2 template
  • Jekyll: Cannot render YAML front matter field as markdown correctly
  • Mongoose TypeError: Cannot use 'in' operator to search for '_id' in [object Obje
  • main loop 'builtin_function_or_method' object is not iterable
  • XMPP push notifications causing problems (delay + duplications) in messages
  • Configure Webpack to build a directory of LESS files into corresponding CSS files
  • set table random value from table
  • How do I control the soft menu button in Honeycomb?
  • How do I obtain a list of files that changed from svn over a date range?
  • What is the best way to debug Bootstrap.groovy?
  • How to split circle in to the sectors in google maps?
  • Django model inheritance, filtering models
  • Web.config system.webserver errors
  • Android fill_parent issue
  • MongoDB in PHP using aggregate to group by _id is null not working
  • Display issues when we change from one jquery mobile page to another in firefox
  • How to draw moving and Running sine wave chart using JFree chart in java?
  • Fill an image in a square container while keeping aspect ratio
  • Convert array of 8 bytes to signed long in C++
  • To display the title for the current loaction in map in iphone
  • Function pointer “assignment from incompatible pointer type” only when using vararg ellipsis
  • Rearranging Cells in UITableView Bug & Saving Changes
  • 0x202A in filename: Why?
  • How to delete a row from a dynamic generate table using jquery?
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • trying to dynamically update Highchart column chart but series undefined
  • Understanding cpu registers
  • How to stop GridView from loading again when I press back button?
  • File not found error Google Drive API
  • Recursive/Hierarchical Query Using Postgres
  • Running Map reduces the dimensions of the matrices
  • Reading document lines to the user (python)
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?