45439

Get one variant in Shopify

Question:

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

Answer1:

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.

<strong>EDIT:</strong>

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

Recommend

  • 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?