> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.teeinblue.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Use Custom Class feature to customize Customization Options on your Product Page

| In this Article, we will walk you through how to use the custom class feature to customize a parituclar personalization option on your Product Page!

|| A little coding skill is required. But fear not, it will be easy to follow!


While editing a Layer inside Artwork Editor, you might come across this feature: 

![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/image_1ufzpar.png)


As you might have already noticed, with elements of the same type, Teeinblue will use the same HTML structure, and same class for them. Please see this image below:

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1iv1h7t.png)

|| So in this case, the custom class feature is used when you want to set a `custom class` name for a particular customization option.
|| This is useful when you want to specifically target a particular customization option to modify. 

Now let's say I want to hightlight all the custom text field for the names of the Girl and the Dog, let's start by adding custom classes for them!

### STEP 1. PREPARATION

* Let's start by adding the custom class for the Dog Name layer.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/image_rs4fgq.png)


* Now continue to do the same for the Girl Name layer

![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/image_1iv4ii8.png)


| You should pick something convenient, and easy to remember/use

* Be sure to update your Campaign after that to apply the change. The customization field should now has your newly added class name

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_dml5vs.png)

### STEP 2. ADDING THE CUSTOM CSS

* Log in to your **Shopify Admin > Go to Themes > Edit code**

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_5i6eqg.png)

* Look for section called `theme.liquid.` Then, use `Ctrl + F` or `Command + F` (on Mac Devices) to find the tag `</head>`. After that, add the following liquid right above the `</head>` tag.

```
{{ 'teeinblue-custom.css' | asset_url | stylesheet_tag }}
```

| This is so the Theme can read a file named `teeinblue-custom.css`. That file will be located under `Asset` folder. You can actually name it however you want to be.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_161ozu4.png)

* Under `Asset` folder, create a new CSS file. Be sure to name it `teeinblue-custom.css`

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_veb6c5.png)

* Once you are done, you can begin to customize these fields however you want!

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1a9i2wk.png)

|| These are just a few simple CSS for demonstration purposes. You might need to use `!important` tag with some CSS properties as well.

* View your changes on the Product Page

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_7ei3l7.png)


| Now all the Custom Names have custom CSS styles without affecting any other customization options' titles!