Shopify Supply Theme - Tag Groups

Hi,

We are using the advanced group filtering for tags in the Supply theme. The tag naming convention is as follows: GROUP ID_VALUE.

Algolia does named tags but it uses the tag naming convention TAG NAME:VALUE, this is causing our ugly grouped tags to show up in the Algolia search. Any suggestions to change how Algolia is creating named tags?

Do you need to display tags in your search facets?
Otherwise, you can simply slide it to Disabled in our app > Search options and your users won’t see them anymore. :slight_smile:

This doesn’t prevent you to use named tags, so you could use that to fully control which tags are the ones you want your users to see.

I’d like to be able to use/search by tag. Ultimately we are trying to get Year-Make-Model information on the parts so you could search by that. Step 1 is just getting the basic tags on the parts so we can search by that.

What about the named tags option then?

make:Audi
model:Audi 100
year:1994

This will allow you to have three facets in the sidebar with each of them.

If you want to display it hierarchically, you’ll need to index it this way:

lvl0:Audi
lvl1:Audi > Audi 100
lvl2:Audi > Audi 100 > 1994

Some custom front-end will be needed to make use of hierarchicalMenu.
This post explaining how to add a custom widget should help too: How to create facet widget from Shopify metafield? .

Hi Jerksa,

That looks promising, I’ll check it out. I’ve seen in a couple places there is an upper limit of 1000 tags per product, so I may try to do this as metafields instead. If you were doing this as metafields and not named tags how would you recommend breaking up the YMM into Namespace:Key:Value?

Back on the named tags option is there anyway to modify the out of the box Algolia Shopify app so it handles named tags created as NAME_VALUE instead of NAME:VALUE? This would help get around how the Supply theme expects named tags.

For metafields, you could do the same thing as I’ve described earlier just namespaced with algolia or info for instance

About handling those Supply named tags, unfortunately, this is not easily doable.
This would require some custom code specifically for the Supply theme, which I’d rather avoid unless requested by many people.
Our goal here is to have a generic solution as much as we can. :slight_smile:

That wouldn’t be something we could use the out of the box Shopify plugin to do though correct? We’d need to index via the API directly?

Hi Jerska,

Was thinking about the Supply theme named tags issue more the other night. What if the Algolia Shopify app allowed you to specify the delimiter used for named tags? That way for users with no theme restrictions they could use the default “:” delimiter, for users that do have a theme restriction let them set “_” or whatever else if needed.

I’m assuming then your search UI may need to know which delimiter is used? I haven’t delved into your code so I’m speculating a little here :slight_smile:.

I’ve thought about that.
The issue is that for that the parsing must work exactly the same way between both solutions.
With our named tags, there’s not only <key><separator><value>.
We also have <key><separator><type><separator><value>.

Then you have the special case of handling <separator>, and ,.
Indeed, tags in Shopify are stored as a string of values separated by a comma, not as an array.
How do you handle them? We chose to let the user be able to encode those characters and use the encoded type, but that’s something that doesn’t work the same way for other solutions.

The generic part is often easily shared, but the issues arise with the edge cases.

Hi Jerska,

Started looking at this again and I’m left with more questions :slight_smile:.

It doesn’t look like metafields can have duplicate keys in Shopify which makes sense, so I’m not sure it’s a great fit for YMM unless I just throw in a random value for the key.

It looks like Algolia doesn’t want duplicate named tag keys either: image

So do you just place a random key value in there?

You shouldn’t push data to Algolia directly. Indeed, on every update of a product, we’ll override it.
If you want to use named tags with multiple values, you can repeat it to create an array.
You can find an example here: https://community.algolia.com/shopify/named-tags.html .

So in your case, you could have tags in your products like this:

lvl0:Audi,
lvl1:Audi > Audi 100,
lvl2:Audi > Audi 100 > 1994,
lvl0:Jeep,
lvl1:Jeep > Wrangler,
lvl2:Jeep > Wrangler > 1987,

This will give you a named tags object like this one:

named_tags: {
  lvl0: ['Audi', 'Jeep'],
  lvl1: ['Audi > Audi 100', 'Jeep > Wrangler'],
  lvl2: ['Audi > Audi 100 > 1994', 'Jeep > Wrangler > 1987']
}

which will work with our hierarchical facets.

Based on what we saw, there doesn’t seem to be a limit on the amount of tags a product can hold.
Each tag must be 255 chars maximum though.

The challenge is with our theme we have tags like “Axle Location_Front” which shows in the search when you enable Tags for faceting, it just doesn’t look good.

image

I wouldn’t think we’re the only Supply theme customer to run into this? What would you have to modify on your end to support this?

You can activate named tags and remove tags from the facet list in the Search options tab. :slight_smile:

If I disable tags in search facets is that going to impact my ability to customize the search experience so users can still search hierarchical named tags?

Can you send us a link to your theme?
If you don’t want to share it publicly, please send it to support+shopify@algolia.com with a link to this thread. :slight_smile:

Sent the theme export to the email address you provided. It’s just the Shopify provided Supply theme, we’ve made very few customizations to it.

This may be unrealistic but here are our goals:

  1. Provide the ability to search based on Year, Make, and Model
  2. Use the out of the box Algolia Shopify app
  3. Avoid having “messy” looking tags in collections

Just to reiterate the challenges:

  1. If we use named tags the way that Algolia expects them then the Shopify Supply theme tag groups doesn’t work. This is a challenge because I don’t think we can use Algolia for collection filtering. If we turn off tag groups then we have the ugly tags being shown to users in collections.

  2. If we use tag groups the way that the Shopify Supply theme expects them then Algolia doesn’t see them as named tags which you are indicating is what we’d need for the YMM search.

We’re going to potentially have 1000’s of tags per product to support YMM, one of my biggest concerns is running into performance issues or platform limitations. A single part might fit 1 vehicle or 50 vehicles, all with various years.

Thanks for your continued help on this!

Hi @Jerska - attempted to send the theme over email but Google blocked it, is there another way to get it to you?

@Jerska - I sent the theme code as a shared link to the support address you provided, let me know if you have any issues getting it.

Thanks!

Thanks for that @douglas.plumley . Will look at it and get back to you here!

I’m sorry @douglas.plumley , I’ve kind of lost track of what you were trying to achieve here.
Let’s recap, as you did:

This may be unrealistic but here are our goals:

Provide the ability to search based on Year, Make, and Model
Use the out of the box Algolia Shopify app
Avoid having “messy” looking tags in collections

By looking at one of your product tags, you wouldn’t be able to achieve what you want today anyway, am I correct?
Indeed, based on a few tags of a few products that I looked at, you’re currently using different tags for each information with the Supply tag groups, there’s no hierarchical link between them anyway.

So in the end, you’re not looking at just a way for us to reuse your current tags, but really at a brand new feature, with a hierarchy between the M > M > Y .

Just to reiterate the challenges:

If we use named tags the way that Algolia expects them then the Shopify Supply theme tag groups doesn’t work. This is a challenge because I don’t think we can use Algolia for collection filtering. If we turn off tag groups then we have the ugly tags being shown to users in collections.

If we use tag groups the way that the Shopify Supply theme expects them then Algolia doesn’t see them as named tags which you are indicating is what we’d need for the YMM search.

Then you could use both.

You could filter, on your collections page, any tag that contains a colon (:) inside.
Use https://help.shopify.com/themes/liquid/basics/operators#contains for this.

Then, you could activate named tags (which works even if you disable tags in the Faceting section of your search options).
Those tags could hold your hierarchy and could be used in your search results, independently of the tags themselves.