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;

}

• Related Articles

• Enable SKU in predictive search

  In predictive-search.js, add the following: const url = new URL(Theme.routes.predictive_search_url, location.origin); url.searchParams.set('q', searchTerm); url.searchParams.set('resources[limit_scope]', 'each'); ...

• Change predictive search image to square

  In predictive-search-products-list.liquid, search for "image_aspect_ratio:" and change all to 1 / 1 ratio.

• Dynamic SKU on product page

  In edit code, add the following liquid in Block. {% doc %} @prompt Create a dynamic SKU display that automatically updates when product variants are changed without requiring a page refresh. The SKU should be visible on the product page and change ...

• Hide products from Google & Shopify Search

  1. Access Your Shopify Admin Log in to your account to enter the backend of your store. Familiarize yourself with the intuitive Shopify admin page and interface, setting the stage for effortless product management. Think of it as your store's control ...

• Make mega menu show only collection that consist of products

  In header-mega-menu.liquid and header-drawer.liquid, add the followings: {%- if childlink.object and childlink.object.products_count == 0 -%} {%- continue -%} {%- endif -%} and {%- if grandchildlink.object and grandchildlink.object.products_count == ...