Product SKU Block for Horizon theme (Free Snippet)

When working with Shopify’s Horizon theme, we noticed that some practical blocks were missing, one of them is the Product SKU block. For stores that rely on SKUs for inventory, customer service, or fulfillment, this small feature can be quite important.

We’re sharing this snippet because Horizon doesn’t currently include a built-in SKU display. This lightweight custom block was created for our own client projects at Hyrik Studio, and we hope it helps others who might need it too.

1. Create blocks/product-sku.liquid

This Liquid block displays the selected variant SKU and defines a schema so it can be added as a custom block in your product section.

{% liquid
  assign product = closest.product
%}

<product-sku data-product-id="{{ product.id }}">
  <span class="product-sku-label">SKU:</span>
  <span class="product-sku-code">{{ product.selected_or_first_available_variant.sku }}</span>
</product-sku>

{% stylesheet %}
  product-sku .product-sku-label {
    font-weight: bold;
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Product SKU",
  "settings": [],
  "presets": [
    {
      "name": "Product SKU",
      "category": "t:categories.product"
    }
  ]
}
{% endschema %}

2. Create assets/product-sku.js

This JavaScript defines a custom element that listens for variant updates and refreshes the SKU dynamically using the theme’s morph() utility.

import { ThemeEvents, VariantUpdateEvent } from '@theme/events';
import { morph } from '@theme/morph';

class ProductSkuElement extends HTMLElement {
  connectedCallback() {
    const sectionRoot = this.closest('.shopify-section, dialog');
    sectionRoot?.addEventListener(ThemeEvents.variantUpdate, this.#handleVariantChange);
  }

  disconnectedCallback() {
    const sectionRoot = this.closest('.shopify-section, dialog');
    sectionRoot?.removeEventListener(ThemeEvents.variantUpdate, this.#handleVariantChange);
  }

  /**
   * Refresh SKU info whenever the variant changes.
   * @param {VariantUpdateEvent} event
   */
  #handleVariantChange = (event) => {
    const { data } = event.detail;
    const target = event.target;

    if (!data.newProduct && target instanceof HTMLElement && target.dataset.productId !== this.dataset.productId) {
      return;
    }

    if (data.newProduct) {
      this.dataset.productId = data.newProduct.id;
    }

    const incomingSku = data.html.querySelector('product-sku');
    if (!incomingSku) return;

    morph(this, incomingSku, { childrenOnly: true });
  };
}

if (!customElements.get('product-sku')) {
  customElements.define('product-sku', ProductSkuElement);
}

3. Add Script to snippets/scripts.liquid

Include the new JavaScript file so it loads automatically on product pages.

<script src="{{ 'product-sku.js' | asset_url }}" type="module"></script>

4. Add the Block in the Theme Editor

Open the Theme Editor, go to your product page section → locate the Details block → click Add block → choose Product SKU. Once added, the SKU will display automatically and update live when switching variants.

Shared by Hyrik Studio. Feel free to reuse or adapt this snippet for your own Horizon-based projects.