Articles on: Seller Cases

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:

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:

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.

Now continue to do the same for the Girl Name layer

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

STEP 2. ADDING THE CUSTOM CSS

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.

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

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

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

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

Updated on: 06/09/2024

Was this article helpful?

Thank you!