> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Mini Use Case - Create a Customized Field

Plan: Stencil Developer

Lesson 27 of 31 · 30 min

**Solution/Hands-on Lab Activity**: Use custom fields on the product color family and use the custom fields in the product filtering and hide custom on products on the product page.

The solution incorporates customization:

* Customization for: Products
* Code used: Handlebars

> **Info**
>
> Always make a backup copy of your theme before beginning any customization. Customize and test your copy.

## Create a Custom Field

1. **Click** Storefront
2. **Click** Themes
3. **Select** Theme Marketplace
4. **Select** Theme Files
5. **Select** Edit Theme Files (Warning: You must make a copy ...)

The following screen displays:

![Edit Theme Files](/_fern-files/bigcommerce.docs.buildwithfern.com/e23329fbd47f1c3e9ff6d5684b4cc3f53e8d3241e2ff75666db2c619df050f56/assets/learn/stencil-advanced/ZlAn8sRtGjM0YzGZ_8a3KUogZH2dBRBFJ.png)

6. From Templates > **Select** Products > From Product.View\.html
7. **Enter** `{{#if name "!==" "Color Family"}}`

![Custom field code](/_fern-img/56f2115a0ab71f22746d643a6fb5b2b882310352af11edf0a477f9325812a781.webp)

## Customization Results

![Customization results](/_fern-img/d1556493dde55e8422cbe559166605ce6217d8ee7b293246413f5139ac4f0626.webp)