No SKU in HORIZON

Online Store and Theme Development
1

I can not believe, that in new HORIZON (even 1.0.3) there is no option to show SKU number on product page. Have any of You solved this problem?

2

Hi, I haven’t tested Horizon yet, but can’t you just use Liquid and display the SKU like this? You can add a snippet in the customization section.

{{ product.first_available_variant.sku }}
3

Works, thank You very much

4

But is it not updating when switching variations. It only shows the SKU of the default product variation. I was hoping something that changes with the product variations. Thanks for the code though.

5

Try this

{{ product.selected_or_first_available_variant.sku }}
6

Still the same - SKU of the default selected variant only and doesn’t change when a different variant is selected.

7

Not every theme, including Horizon will include this. You’ll need to code it in yourself if it’s a requirement for your project.

1 Like
8

I’ve dug into the Horizon code and found that it’s fairly easy to make it updatable by copying the product-inventory.js functionality.

First, create product-sku.js:

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

class ProductSku extends HTMLElement {
  connectedCallback() {
    const closestSection = this.closest('.shopify-section, dialog');
    closestSection?.addEventListener(ThemeEvents.variantUpdate, this.updateSku);
  }

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

  /**
   * Updates the sku.
   * @param {VariantUpdateEvent} event - The variant update event.
   */
  updateSku = (event) => {
    if (event.detail.data.newProduct) {
      this.dataset.productId = event.detail.data.newProduct.id;
    } else if (event.target instanceof HTMLElement && event.target.dataset.productId !== this.dataset.productId) {
      return;
    }

    const newSku = event.detail.data.html.querySelector('product-sku');

    if (!newSku) return;

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

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

Then, reference the script in scripts.liquid:

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

And finally, create the product-sku.liquid block:

<product-sku data-product-id="{{ product.id }}">
  {{ product.selected_or_first_available_variant.sku }}
</product-sku>

{% schema %}
{
  "name": "Product SKU",
  "settings": [
    {
      "type": "product",
      "id": "product",
      "label": "t:settings.product"
    }
  ],
  "presets": [
    {
      "name": "Product SKU",
      "category": "t:categories.product",
      "settings": {
        "product": "{{ closest.product }}"
      }
    }
  ]
}
{% endschema %}
1 Like
9

This worked well for me - thanks

10

Here’s a step-by-step guide to properly set up and display your SKU for Horizo Theme

1. Add the product-sku.js file

  1. Go to Online Store → Themes → Edit code.

  2. In the Assets folder, click “Add a new asset” → choose Create a blank file.

  3. Name it: product-sku.js.

  4. Paste the following code inside:

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

class ProductSku extends HTMLElement {
  connectedCallback() {
    const closestSection = this.closest('.shopify-section, dialog');
    closestSection?.addEventListener(ThemeEvents.variantUpdate, this.updateSku);
  }

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

  /**
   * Updates the sku.
   * @param {VariantUpdateEvent} event - The variant update event.
   */
  updateSku = (event) => {
    if (event.detail.data.newProduct) {
      this.dataset.productId = event.detail.data.newProduct.id;
    } else if (
      event.target instanceof HTMLElement &&
      event.target.dataset.productId !== this.dataset.productId
    ) {
      return;
    }

    const newSku = event.detail.data.html.querySelector('product-sku');

    if (!newSku) return;

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

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

:receipt: 2. Load the script in theme.liquid or scripts.liquid

  1. Open layout/theme.liquid or snippets/scripts.liquid (if your theme uses it).

  2. Before the closing </body> tag, add:

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

:puzzle_piece: 3. Create the SKU block in Liquid

  1. In the Sections or Snippets folder, create a new file named product-sku.liquid.

  2. Paste the following code:

<product-sku data-product-id="{{ product.id }}">
  {{ product.selected_or_first_available_variant.sku }}
</product-sku>

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

:shopping_bags: 4. Add the SKU block to your Product Page

  1. In the Theme Editor (Customize), open a Product Template.

  2. Click “Add block” or “Add section”.

  3. Select “Product SKU”.

  4. Drag it to the desired position — usually below the product title or above the Add to Cart button.

  5. Save the changes.