Obra

Liquid for IntelliJ

First-class Liquid support for JetBrains IDEs — WebStorm, PhpStorm, PyCharm, RubyMine and the rest. Built for Shopify theme development, and just as at home in Jekyll.

Coming soon to the Marketplace Pricing to be announced


Built for Shopify. And we still write Jekyll.

Which kind of Liquid are you writing?

Where most of the work goes. The plugin understands the theme, not just the syntax.

  • The tags Shopify actually ships — {% render %}, {% section %}, {% form %}, {% paginate %}, {% schema %}
  • The new theme architecture announced at DotDev 2026: {% block %}, {% partial %}, {% content_for %} and {% doc %}
  • Autocomplete for Shopify objects and their properties — product, variant, collection, cart, customer and more
  • JSON highlighting injected straight into {% schema %}
  • ⌘-click through {% render %} and {% section %} paths to the file

We’ve built sites with Jekyll since 2013, and we still do. It is not an afterthought here.

  • Jekyll’s own tags: {% include_relative %}, {% highlight %}, {% post_url %}, {% link %}, {% seo %}
  • The site, page, post and paginator objects, with their properties
  • YAML front matter, understood rather than tolerated
  • Everything in the core Liquid language — the same lexer either way

Liquid, as your IDE sees it

Every token below is coloured by the same lexer that ships inside the plugin — the same four states, the same keyword tables, the same fold regions. Switch themes, collapse a block, read the edge cases.

{% comment %}
  Filters chain left to right. The name after a pipe is a filter,
  whatever else it spells — `default` here is a filter, not a keyword.
{% endcomment %}
{% assign title = product.title | strip | truncate: 60 %}

{{ product.price | money_with_currency }}
{{ product.featured_image | image_url: width: 800 | image_tag }}
{{ product.tags | join: ", " | upcase }}
{{ shop.name | default: "Our store" }}

{% if product.available and product.price < 5000 %}
  {{ 'products.on_sale' | t }}
{% endif %}
{% for variant in product.variants limit: 3 %}
  {% unless variant.available %}
    {{ variant.title }}
  {% else %}
    {{ forloop.index }}. {{ variant.title }} — {{ variant.price | money }}
  {% endunless %}
{% else %}
  

Nothing in stock yet.

{% endfor %} {% case product.type %} {% when 'Shirt' %} {% render 'size-guide', kind: 'tops' %} {% when 'Mug', 'Bottle' %} {% render 'care-instructions' %} {% else %} {% render 'generic-details' %} {% endcase %}
{% comment %} sections/featured-collection.liquid {% endcomment %}
{%- paginate collection.products by 12 -%}
  {% for product in collection.products %}
    {% render 'product-card', product: product %}
  {% endfor %}

  {{ paginate | default_pagination }}
{%- endpaginate -%}

{% style %}
  .featured { gap: {{ section.settings.gap }}px; }
{% endstyle %}

{% schema %}
  {
    "name": "Featured collection",
    "settings": [
      { "type": "range", "id": "gap", "label": "Gap", "default": 16 }
    ]
  }
{% endschema %}
{% comment %}
  Shopify's new theme architecture, announced at DotDev 2026.
  Page structure moves out of JSON templates and back into Liquid.
{% endcomment %}
{% doc %}
  Renders a product grid that JavaScript can refresh in place.

  @param {collection} collection - The collection to render
  @param {string} [class] - Optional wrapper class

  @example
  {% partial 'product-grid' %}{% endpartial %}
{% enddoc %}

{% partial 'product-grid' %}
  {% for product in collection.products %}
    {% block 'product-card', block.settings.product: product %}
      

{{ product.title | escape }}

{% endblock %} {% endfor %} {% endpartial %} {% content_for 'blocks' %}

Try the arrows in the gutter. They mark exactly what the editor folds — every paired tag, from if and for through schema and paginate to the new block, partial and doc — plus {% comment %} blocks.


New — announced at DotDev 2026

Ready for Shopify's new theme architecture

Shopify's theme developer preview moves page structure out of JSON templates and back into Liquid. We shipped support the week it was announced — highlighting, folding, bracket matching, autocomplete and live templates for every new tag.

{% partial 'product-grid' %}
  {% for product in collection.products %}
    {% block 'product-card', block.settings.product: product %}
      <h2>{{ product.title }}</h2>
    {% endblock %}
  {% endfor %}
{% endpartial %}

These tags are a Shopify developer preview, so the syntax may still shift. We track it as it changes.


Works with your JetBrains IDE

The full compatibility list from the Marketplace. The plugin depends only on the platform, language, and XML modules, so it installs anywhere those ship.


What you get

Syntax highlighting

Proper highlighting for Liquid tags, filters, and expressions inside .liquid and .html files.

Jump to definition

-click (or Ctrl-click) on an {% include %}, {% render %}, or {% section %} path to open the referenced template instantly.

Template-aware editing

Bracket matching and indentation that understands Liquid blocks.

Code folding

Collapse {% if %}, {% for %}, {% case %}, and comment sections to keep long themes readable.

Live templates

Type a short abbreviation and Tab to expand it into a full Liquid tag — conditionals, loops, assignments, and renders.

Autocomplete that knows Liquid

Tags, filters and Shopify objects offered in the right place — filters only after a |, object properties after a ., with parameter info and quick docs. Coverage of Shopify’s filter set is still growing.

Rename without grepping

Rename a variable or snippet and every reference in the file follows. Find Usages works on them too.

Your HTML keeps working

A .liquid file is parsed as two trees — one for Liquid, one for the markup around it. Tag and attribute completion, colour previews, and CSS and JS assistance run right up to the delimiters, so <a href="{{ product.url }}"> is still a valid anchor to the IDE.

Lightweight

No bloat. Install it, restart, get back to writing templates.


Not on the Marketplace yet

Liquid for IntelliJ is still in development. It will follow the same model as our other plugins — a free trial, then a one-time purchase with a perpetual licence, no subscription. Final pricing will be announced when it ships.

Want to know when it lands? Email hello@obra.studio and we’ll tell you.


Help & FAQ

Which IDEs are supported?

Thirteen of them: IntelliJ IDEA, WebStorm, PhpStorm, PyCharm, RubyMine, GoLand, RustRover, CLion, Rider, DataGrip, DataSpell, Android Studio, and MPS. The plugin depends only on the platform, language, and XML modules, so it installs on any IntelliJ-based IDE that ships them.

Is it available yet?

Not yet. Obra Liquid is still in development and has not been published to the JetBrains Marketplace. Email hello@obra.studio if you would like to hear when it ships.

What will it cost?

Pricing has not been finalised. It will follow the same model as our other plugins — a free trial followed by a one-time purchase with a perpetual licence, never a subscription.

Which file extensions will it recognise?

Out of the box, the plugin handles .liquid files. You will also be able to associate .html or any custom extension with the Liquid file type via Settings → Editor → File Types.

Does it work with Shopify themes?

Yes. Shopify themes are the primary target — sections, snippets, and layouts are all recognised. Jekyll and other Liquid-based site generators work too.

Where can I report a bug or request a feature?

Email hello@obra.studio with as much detail as you can: IDE version, plugin version, and a minimal template that reproduces the issue.