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');

    url.searchParams.set('resources[options][fields]', 'title,product_type,variants.title,vendor,variants.sku');

    const { predictiveSearchResults } = this.refs;

    const abortController = this.#createAbortController();

• Related Articles

• Change predictive search image to square

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

• 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', ...

• 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 mega menu links that contain 0 product

  Add the following in the mega-menu-list.liquid {% for childLink in link.links %} {% if link.type == 'collection_link' %} {% assign collection = link.object %} {% if collection.products_count > 0 %} {% assign break_after_modulo = forloop.index | ...

• Make mega menu list scrollable (overflow)

  At the header section, add the following css .mega-menu { max-height: 70vh; overflow-y: auto; }