Get in Touch

How to Improve Product Search on Shopify with Variants and Meta Fields

What was the business problem that the client faced?

One of our clients, windfalllumber.com, has dozens of variants of products which differ mainly  in color only. They wanted to improve the search ability on their site so that when a visitor searches for a particular color, all relevant results are returned. Also, the client wanted the search results to display individual variants, not simply their parent product, which is the typical Shopify search result.

Shopify by default only searches the product title and product description. This could cause a problem (no or incomplete results) if , for instance a visitor searches for “green” and the parent product of a “green” variant does not have “green” in the title or product description.

They needed a way to tag their variants according to likely color search keywords. Shopify does not provide the ability to assign tags to their variants, only the parent product. They needed an app to replicate the ability to add tags to variants.

MetaFields Editor by Webify Technologies

MetaFields Editor is a FREE and simple to use app that we frequently use as a general problem solver where Shopify does not allow the ability to add metafields (additional data) to a product or variant within the dashboard.

Within the app (screenshot below) we were able to add variant “tags” to specific variants that are helpful to pinpoint a variant during a search on the site. These are not only likely color keywords, e.g. “red, auburn, etc…” but other descriptive terms for texture, e.g. “smoothe”, or the variants practical use, e.g. “walls”.

metafields-editor

Metafields Editor does NOT work with Shopify’s search automatically. Custom coding needed to be added to the search results to search and filter by variant tag. However the alternatives to tagging variants by way  of metafields were far messier and utterly impractical for a variant search to work.

Consider another possible use for this app. In the Shopify dashboard, for any product you can only enter data such as title, description, sku, weight, collection and a few other items. However what if each of your products has an MSDS (material safety) pdf associated with it? Where would you enter the link to each product’s pdf in the dashboard? In the product description? Perhaps, but that’s not ideal.

With the Metafields Editor, you would simply go to the app, select the product (or variant) you wish to add the pdf link to,  and then add a namespace, select a value type, add the key of the metafield- “pdf”, in this example- and the value of the metafield – a url to a pdf file on the server.

In your theme’s templates, metafields values can easily be retrieved using roughly the following liquid syntax: {{ product.metafields.namespace.key }} or {% assign someValue= product.metafields.namespace.key %} or

{{ variant.metafields.namespace.key }}

What other apps did you look at besides?

There are other metafield apps out there such as Product Metafields +   and Metafields2. Both of these are premium yet affordable apps. They could no doubt allow us to solve our variant metafield problem and have a few more custom features than Metafields Editor. However once again, Metafields Editor is free and simple. When we can solve a problem using something that is simpler, we go with simpler.

Did you consider building something custom in the liquid template?

As mentioned above, we did need to considerable coding in our search results template to use these new variant tag metafields to produce relevant results.

In our code, we had to first off, query for all of our stores products. As we ‘looped’ through each product, we had to loop through each product’s variants. With each variant, we checked against the variant’s metafield whose key is “tag”, and then checked to see if the value of that metafield contains the keyword from the user’s search (whatever the user entered into the site’s search box). If there was a match for any particular variant, we displayed the variant’s featured image and title with a link to the parent product’s page with the variant’s id affixed to the url.

This is quite a departure from Shopify’s typical product search, which typically displays only the parent product of variant that matches the search, but not the matching variant itself.

Did the app solve all of the client problems? Any issues once you setup?

In summary, we were able to provide for the customers request: to search for individual variants by way of variant “tags”. The only issue for our client and any of our client’s who’ve used this metafield app, is that they cannot simply add the metafields to the products or variants directly in the Shopify dashboard under the product edit pages; it involves an extra step. Perhaps someday Shopify will finally add the ability for shop owners to do that. Metafields for products and variants do exist behind the scenes, but you have to use an app to add and edit them.