To show sku in predictive search

To show sku in predictive search

Find this block (around line where resource-card__content is):

<p class="resource-card__title{% if style == 'overlay' %} h5{%else %} paragraph{% endif %}">

  {{- resource.title -}}

</p>

{% if resource_type == 'product' %}

  {% render 'price', product_resource: resource, show_unit_price: true %}

Replace with:

<p class="resource-card__title{% if style == 'overlay' %} h5{%else %} paragraph{% endif %}">

  {{- resource.title -}}

</p>

{% if resource_type == 'product' and product_view_context == 'search' %}

  {%- assign sku = resource.selected_or_first_available_variant.sku -%}

  {%- if sku != blank -%}

    <p class="resource-card__sku">{{ sku }}</p>

  {%- endif -%}

{% endif %}

{% if resource_type == 'product' %}

  {% render 'price', product_resource: resource, show_unit_price: true %}

And add to your CSS:

.resource-card__sku {

  font-size: 0.75em;

  color: rgb(var(--color-foreground-rgb) / 0.55);

  margin: 0.1rem 0 0;

}