HTML to Liquid Converter

Blog & Article

Article Author & Image

Shows byline and featured image when present.

Convert to sectionFull cheat sheet

Copy or embed this snippet

{% if article.image %}
  {{ article.image | image_url: width: 1200 | image_tag: loading: 'lazy', alt: article.title | escape }}
{% endif %}
<p>By {{ article.author }}</p>

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

Related snippets

Paginate Blog Articles

Pagination works for blogs too—not only collections.

Blog Articles Loop

Loops through articles in a specific blog (e.g., 'news').

Article Title & URL

Standard article heading and permalink on article templates.

Practice in the converter workspace

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

Open converter workspaceBrowse learning examples