How to customize the color of your blog tags?

How to customize the color of your blog tags

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

This setup uses metafields, so you only need to create the metafield definitions once and then assign colors to each blog post.

On this page

• Adding two new metafields
• Assigning metafield values to a blog post

Before you start

Before applying standard or custom metafields, make sure you have reviewed Shopify's guides on metafield definitions:

• Adding standard definitions
• Creating custom definitions

Adding two new metafields

This section explains how to create two blog post metafields:

• Tag color: controls the text color of the tag.
• Tag background: controls the background color of the tag.

Step 1: Open metafield settings

1. From your Shopify admin, go to Settings.

   

2. Go to Metafields and metaobjects > Blog posts.

   

Step 2: Create the Tag color metafield

• Click Add definition.

• In the Add blog post metafield definition screen, enter the following details:

  • 3. Name: Tag color
  • 4. Namespace and key: theme.tag_color
  • 5. Value setting: One value
  • 6. Select content type: Color

  

• Click Save to save the metafield definition.

Step 3: Create the Tag background metafield

• Return to Metafields and metaobjects > Blog posts, then click Add definition again.

• In the Add blog post metafield definition screen, enter the following details:

  • Name: Tag background
  • Namespace and key: theme.tag_background
  • Select content type: Color
  • Value setting: One value

  

• Click Save to save the metafield definition.

Step 4: Confirm the metafields were created

After creating both metafields, you should see Tag color and Tag background in the list of blog post metafield definitions.

Assigning metafield values to a blog post

After creating the metafield definitions, you can assign custom tag colors to each blog post.

1. From your Shopify admin, go to Blog posts and open the blog post where you want to customize the tag colors.

   In this example, we will use the blog post The Journey of Stereo Sound.

   

2. On the blog post editing page, make sure the post has a tag added in the Tags section.

   Then scroll down to the Metafields section and click Show all.

   

3. Find the Tag color and Tag background metafields.

   Click each field and select your desired color from the color picker.

   

4. In this example, we use the following colors:

   • Tag color: #ECFCCB
   • Tag background: #4D7C0F

   

5. Click Save to apply the changes.

Once you finish these steps, the blog post tag will display with the color scheme you defined.

Need further assistance?

If you encounter any issues or need additional help with the Concept theme, please contact our support team via our Ticket System. We will assist you as soon as possible.