> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/buy-and-install/create-required-metafields/metaobjects/filter-style.md).

# Filter Style

**Filter style** sorts your catalog by product type, the way shoppers usually shop, for example `Crossbody Bags`, `Evening Bags`, or `Totes & Top Handle Bags`. Once each product carries its style, shoppers can open **Filters & Sort** on a collection page, tick a style, and see only that kind of product. A product can carry more than one style, and each style name is written once as a metaobject entry, so renaming it later updates every product that uses it.

{% embed url="<https://www.youtube.com/watch?v=Y6ZCiTy92hc>" %}

### Before you start <a href="#before-you-start" id="before-you-start"></a>

* You can access **Settings > Custom data** in your Shopify admin. (Staff accounts need the matching permission.)
* You have the list of styles your catalog uses, spelled the way shoppers should see them.
* Do the steps in order. The metaobject must exist before the metafield can reference it, and the metafield must exist before you can tag products.

### Step 1: Create the Filter style metaobject <a href="#step-1-create-the-metaobject" id="step-1-create-the-metaobject"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Shopify admin > Settings > Metafields and metaobjects > Metaobjects**.
2. Click **Add definition**.
3. Fill in the name:
   * Name: `Filter style`
4. Add one field:
   * Name: `Filter style label`
   * Type: **Single line text - One value**
5. Click **Save**.
   {% endhint %}

*Result:* your store now has a **Filter style** metaobject that can hold one entry per style.

<figure><img src="/files/4CuMN7eiQbuorzq0bBFJ" alt=""><figcaption></figcaption></figure>

### Step 2: Create the Filter style product metafield <a href="#step-2-create-the-metafield" id="step-2-create-the-metafield"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Shopify admin > Settings > Custom data > Products** (**Custom data** is shown as **Metafields and metaobjects** in some admin versions).
2. Click **Add definition**.
3. Fill in:
   * Name: `Filter style`
   * Namespace and key: `custom.filter_style`
   * Type: **Metaobject - List of entries**, with **Filter style** as the referenced metaobject
4. Click **Save**.
   {% endhint %}

*Result:* every product now has a **Filter style** field that accepts entries from the metaobject you created in Step 1.

<figure><img src="/files/sRHcjzn3r7mMjkq5qliS" alt=""><figcaption></figcaption></figure>

### Step 3: Tag each product with its style <a href="#step-3-tag-each-product" id="step-3-tag-each-product"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Shopify admin > Products**.
2. Select the product you want to tag.
3. Scroll down to the product's **Metafields** area and click the **Filter style** field.
4. Tick the style or styles that describe this product. If one is not in the list yet, click **Add new entry** and create it.
5. Click **Save**.
6. Repeat for every other product you want shoppers to be able to filter by style.
   {% endhint %}

*Result:* the product carries its style, and the entries you created are available for the next products.

<figure><img src="/files/6u6SpDDg52HUQYIWP2wv" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
No app-side setup is needed. You do not have to enable anything in the Shopify Search & Discovery app. Once the **Filter style** metaobject and metafield are attached to your products, the **STYLE** group appears in the collection page's **Filters & Sort** automatically.
{% endhint %}

### What you should see <a href="#what-you-should-see" id="what-you-should-see"></a>

On a collection page, the **Filters & Sort** panel shows a **STYLE** group listing every style used in that collection, with the number of matching products next to each one. Ticking a style and applying it narrows the grid, and the chosen style appears as a chip above the products so shoppers can clear it again.

<figure><img src="/files/E8MUTSoIPd5oXFLs3vml" alt=""><figcaption></figcaption></figure>

### If something goes wrong <a href="#if-something-goes-wrong" id="if-something-goes-wrong"></a>

* **The Filter style field on the product is empty and offers nothing to pick.** No entries exist yet. Create one with **Add new entry** while tagging the first product.
* **The metafield cannot reference the metaobject.** The metaobject from Step 1 was not saved, or you picked a different reference. Redo Step 2 and select **Filter style**.
* **The STYLE group does not appear on the collection page.** No product in that collection carries a style yet. Tag a few products, and the group appears on its own with no further setup.
* **A style label reads differently in the filter than you expected.** The filter shows the entry label exactly as typed. Edit the entry once and every product using it follows.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Metaobjects](/velare/buy-and-install/create-required-metafields/metaobjects.md): how the three filters fit together and which order to follow
* [Filter Family](/velare/buy-and-install/create-required-metafields/metaobjects/filter-family.md): the first filter in this section
* [Filter Material](/velare/buy-and-install/create-required-metafields/metaobjects/filter-material.md): the previous filter in this section
* [Product grid](/velare/customize-your-pages/collection-page/page-template-sections/product-grid.md): filtering and sorting on the collection page


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/buy-and-install/create-required-metafields/metaobjects/filter-style.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.