HTML to Liquid Converter

Product

Product Options (Size, Color)

Loops option names and values—for example Color: Red, Blue.

Convert to sectionFull cheat sheet

Copy or embed this snippet

{% for option in product.options_with_values %}
  <fieldset>
    <legend>{{ option.name }}</legend>
    {% for value in option.values %}
      <label><input type="radio" name="{{ option.name }}" value="{{ value }}"> {{ value }}</label>
    {% endfor %}
  </fieldset>
{% endfor %}

Embed this snippet on your blog or docs — attribution link appreciated: HTML to Liquid Converter · Convert to Shopify section →

Related snippets

Product Title

Outputs the title of the current product.

Product Price Formatting

Formats the product price according to the store's currency settings.

Product Vendor & Type

Outputs the vendor (brand) and product type.

Practice in the converter workspace

Draft OS 2.0 section output after you choose the right design pattern.

Open converter workspaceBrowse learning examples