Can I add custom labels to my products?

Concept supports adding custom labels to your product cards, which you'd see on your collection pages or featured collection section.

Each product can be adorned with one or more custom labels, all sharing a customizable background color. This feature utilizes metafields, so simply add metafield definitions and assign labels to the desired products.

On this page

Adding new metafield definitions

In some instances, you may need to display product information on a case-by-case basis. The Concept theme's dynamic source feature empowers you to create customized product information using metafields, providing a versatile solution for your unique product specifications.

This guide will delve into utilizing dynamic sources and metafields to unleash the full potential of your theme customization.

On this page

Adding a new metafield definition

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

Note:

This step only needs to be done once and will affect all products. 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.

Follow these steps to add the 'Product characteristics' metafield:

  1. On your Shopify Admin dashboard > Settings > Custom data.

  2. Choose the part of the store you want to add a new field to. For example, we add the new field to Products.

  3. After choosing the Products, you click the button Add definition on the top right corner.

  4. In the Add product metafield definition box, set up the details of the new metafield including:

    • Name - Product label
    • Namespace and key - theme.label
    • Description (optional) - we add the description line 'Add key information to describe the product.'
    • Select content type - there are different content types such as line text, integer, date and time, file, etc. In this setting, we select the Text.
    • Select Single line text then choose List of value. By using a list of values, you have ability to add multiple labels for a product.
  5. Click Save to save the definition.

  6. You should see the Product label in the list of definitions by now.

  7. Now, we need to add another definition for storing the background color of the label. Click Add definition again.

  8. In the Add product metafield definition box, set up the details of the new metafield including:

    • Name - Product label color
    • Namespace and key - theme.label_color
    • Select content type > then select Color.

  9. Click Save to save the definition.

  10. You should see the Product label color in the list of definitions by now.

Assigning metafield values for the product by connecting dynamic source

  1. In your admin, within Products, click on the product you want to add the labels.

  2. Scroll down to the Metafields, then click Show all to open the metafield values of the product.

  3. You should see the Product label and Product label color here.

  4. To set the background color of the labels, click on the Product label color field then pick the color you want.

    Note:

    The text of the labels is always pure white (hex code #ffffff). So, it's recommended to choose a color that contrasts with white for readability.

  5. To set labels, click on the Product label field. Enter your label in the default text box. For example, in the screenshot below, 'New' is my label. If you want to add multiple labels, just click Add item to add another text box then enter the value you want.

  6. Click Save to save your changes.

  7. Complete these setups and the 'Flow Harmony Liz' product will automatically gain the Hot label, boosting its visibility within the Featured section (as shown below).

We hope this article has been helpful. If you have any questions or concerns about this feature, please do not hesitate to contact our team for support.

Back to Concept Support