"i only speak liquid" #73: Theme Blocks for Reusability

Hey everyone,

Woohoo! This is Kenny’s 1st of 4 edits of “i_only_speak_liquid” 🔥🔥🔥

A bit about Kenny:  

Kenny’s a shopify developer, who ex-Bondfire agency. He’s based out of LA & has built beautiful sites like Rishi Tea, Imogene + Willie & Body Bio.

Let’s GO 📚

What I’ve been thinking about:

I love the early stages of building a new project. It gives me time to reflect on my previous work, identify areas where my processes can become more efficient, iterate through the next development cycle, and repeat. It feels great to find things you can pinpoint to improve and get a productivity boost. Theme blocks have the potential to drastically increase development time and improve codebase maintainability.

Theme blocks are a recent addition to the Shopify developer’s toolkit, officially released in Shopify Winter 2025’s “The Boring Edition.” They introduce a wealth of possibilities for incorporating reusable components into themes. I've been hoping for something like this since the early days of my theme development career, and I'm thrilled that Shopify has finally made them available.

One of the first reusable blocks I've started integrating into my custom themes is a "button" block. Buttons often have numerous settings reused across different sections, making them an excellent candidate.

To implement theme blocks in your codebase, you'll need to create a blocks folder at the root of your directory.

Let’s look at an example of how you could set up a simple button theme block.

{% comment %} /blocks/button.liquid {% endcomment %}

{% if block.settings.button_text != blank %}
  <a
    href="{{ block.settings.button_url }}"
    class="block-btn {{ block.settings.button_type }} {{ block.settings.button_color }}"
  >
    {{- block.settings.button_text -}}
  </a>
{% endif %}

{% schema %}
{
  "name": "Button",
  "tag": null,
  "settings": [
    {
      "type": "header",
      "content": "Settings"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "info": "The text for the button"
    },
    {
      "type": "url",
      "id": "button_url",
      "label": "Button URL",
      "info": "The URL for the button"
    },
    {
      "type": "header",
      "content": "Button Styles"
    },
    {
      "type": "select",
      "id": "button_type",
      "label": "Button Type",
      "default": "btn--primary",
      "options": [
        {
          "value": "btn--primary",
          "label": "Primary"
        },
        {
          "value": "btn--secondary",
          "label": "Secondary"
        }
      ]
    },
    {
      "type": "select",
      "id": "button_color",
      "label": "Button Color",
      "default": "dark",
      "options": [
        {
          "value": "dark",
          "label": "Dark"
        },
        {
          "value": "light",
          "label": "Light"
        }
      ]
    }
  ],
  "presets": [{ "name": "Button" }]
}
{% endschema %}

This is great — we’ve encapsulated all the settings within a single liquid file that can be reused within sections and other theme blocks. Another bonus — if we need to update options for all buttons throughout the theme, we can refactor just the button.liquid file, and changes automatically propagate everywhere it's used.

There are two ways we can go ahead and start using the button theme block in our code – dynamically or statically. I will give a brief overview for each, but I would recommend reading Shopify’s official documentation about theme blocks for an in-depth understanding.

Dynamic Blocks

You’ll want to ensure your schema includes the theme blocks you’d like to give the merchant as options. You can add multiple theme blocks to the blocks array, but you cannot intermingle section-defined blocks and theme blocks. Here’s how we add the button theme block using block targeting and render the blocks with liquid**.**

{% content_for 'blocks' %}

{% schema %}
{
  "name": "Section",
  "blocks": [{"type": "button"}]
}
{% endschema %}

Static Blocks

When rendering blocks statically, adding the theme block to the blocks array is optional. Here's how to render a button theme block statically without including it in the blocks array:

{% content_for 'block', type: 'button', id: 'button' %}

{% schema %}
{
  "name": "Section",
}
{% endschema %}

And here’s how you could render two static buttons.

{% content_for 'block', type: 'button', id: 'button-1' %}
{% content_for 'block', type: 'button', id: 'button-2' %}

{% schema %}
{
  "name": "Section",
}
{% endschema %}

Shopify theme blocks offer immense potential and are a powerful new tool for Shopify developers. I encourage you to experiment with them and discover how they can enhance your development workflow.

3 links you can’t miss:

📌 Shopify Editions: Winter 2025 - The Boring Edition - Covers all new features introduced for Winter 2025, including theme blocks.

📌 Warp Terminal - I absolutely love this terminal and recommend it to every dev I know

📌 Ditching Hourly Podcast - The host advocates for value pricing and leveraging your expertise. While not a regular listener, I’ve found some valuable insights in past episodes.

1 app I like:

Search & Discovery: The app makes it incredibly easy for clients to manage their collection filters and filter logic. Shopify continues to expand on it and it feels like they add extra layers of granularity every time a pop it open.

One learning as a freelancer:

Don’t be afraid to pivot. One of the biggest challenges in scoping new Shopify projects is anticipating unknown issues. The clients I work with usually have existing Shopify themes and are looking to launch completely redesigned storefronts. During scoping conversations, I am always very careful to ask about existing systems and apps that the client cannot afford to change in the new theme. Unfortunately, clients often omit crucial details about their existing systems that why would like to keep intact (an app is storing a large amount of custom data or essential tagging systems would be good examples). In these situations, avoiding "man with a hammer syndrome" is crucial. Stay adaptable, creative, and prepared to pivot when unexpected challenges arise.

-Kenny