How to customize the color of your blog tags?

Concept supports customize the color of your article tags, like this:

This setup utilizes metafields, so simply add metafield definitions and assign colors to your articles.

On this page

• Adding two new metafields
• Assigning metafield values for the article

Essential Prerequisite: Before applying standard or custom metafields, ensure you've reviewed Shopify's guide on adding metafield definitions.

• Adding standard definitions
• Creating custom definitions

Note:

This step only needs to be done once and will affect all articles. If you have already done this, please skip it. Since metafields work independently of the theme, this step also doesn't need to be done again when you update or reinstall the theme.

Adding two new metafields

This part guides you through creating two new metafields: Tag color and Tag background.

1. On your Shopify Admin dashboard > Settings.

   

2. In Custom data > Blog posts.

   

3. Follow the steps outlined in the table below.

   • The left column details creating the Tag color.
   • The right column focuses on Tag background.

   Remember to click SAVE after creating each metafield.

   Tag color	Tag background
   After choosing the Blog posts, you click the button Add definition on the top right corner.	After choosing the Blog posts, you click the button Add definition on the top right corner.
   In the Add blog post metafield definition, set up the details of the Tag color metafield including: Name - Tag color Namespace and key - theme.tag_color Select content type - select Color and One value.	In the Add blog post metafield definition, set up the details of the Tag background metafield including: Name - Tag background Namespace and key - theme.tag_background Select content type - select Color and One value.
   Click Save to save the definition.	Click Save to save the definition.

4. After creating these two metafields, you should see the Tag color and Tag background in the list of definitions by now.

   

Assigning metafield values for the article

1. From your admin panel, navigate to the Blog posts. Select the article where you want to add labels. For this example, we'll use an article titled 'The Journey of Stereo Sound'

   

2. On the article editing page, you can see the Tags section, where you can add tags/labels. Scroll down a bit and click Show all next to the Metafields section.

   

3. The Tag color and Tag background fields are displayed here. To customize these colors, simply click on each field and choose your desired color from the color picker.

   

   For this example, we used #ECFCCB for the tag color and #4D7C0F for the background.

   

   Then click Save to finish.

4. Once you finish these steps, the 'The Journey of Stereo Sound' article will be labeled Speakers with the color scheme you defined!

   

Need Further Assistance

If you encounter any issues or need additional help with your Concept theme, don't hesitate to reach out to Roartheme's support team for expert guidance.

Scan the QR code to get support within 8 hours via RoarTheme ’s Whatsapp