How do I create a bar with Metafield on collection page?

[8marketing]

Hi,

I want to create a bar with Metafield on the collection page, similar to the one shown in the attached image. I'm currently using the Dawn theme v15.
My page: https://plomo.shop

Thank you!

[Sweans]

Hi @8marketing ,

We can surely help you to add a bar on the collection page.
We believe you have created the metafield for the product to display on the collection page.

To create and display a bar with metafield value on the product cards, you might need knowledge of the development of shopify liquid and css. We can assist you through the process.

You can follow the below-mentioned steps to display the bar on product cards as you desire:

Step 1: Go to your store admin > Sale channels > Online store

Step 2: Navigation to Themes > click "..." in Trade theme > Edit code (As shown in the screenshot)

Step 3: In the edit code, search for “card-product.liquid” and open the file.(As shown in the screenshot)

Step 4: In the “card-product.liquid” file, you can find the following code: (line - 149/150, can vary depending on the version of the theme or if any changes are made in the file)

<div class="card__content">
<div class="card__information">

Step 5: Add the following code below the “card__information” element. (below the above-mentioned code.)

{% if card_product.metafields.namespace.key and template.name == 'collection' %}
<div class="card__metafield">
{{ card_product.metafields.namespace.key.value }}
</div>
{% endif %}

Note: Replace “namespace” and “key” with the namespace and key of your metafield.

Eg: As shown in the screenshot below:
“custom” is the namespace and “type” is the key.

Step 6: Add the following css code in component-card.css file or a custom css file(if you have any).

.card__metafield {
background: #dd1229;
color: #fff;
text-align: center;
padding: 5px 10px;
margin-bottom: 14px;
}

Step - 7: Save the Files and reload your collection page. You’ll find a bar in the product card (As shown in the screenshot)

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans