How to Bold Metafield Labels

How to Bold Metafield Labels

wrestlingfigdb
Tourist
6 0 0

I've seen a few topics on this, but none with accepted solutions. I am looking to bold the metafield labels on my Product template. For example, I would like to bold "Release Date," "Attire Date," "Release Country," etc., but not the subsequent values. I have a feeling that this is a pretty amateur request, but I'm illiterate in JSON/CSS no matter how hard I try. 😁

 

 

Image 6-25-24 at 1.14 PM.jpeg

 

Below is what I think would be an applicable JSON code snippet:

 

"sections": {
"main": {
"type": "main-product",
"blocks": {
"title": {
"type": "title",
"settings": {
}
},
"variant_picker_LgMYwd": {
"type": "variant_picker",
"settings": {
"picker_type": "button"
}
},
"description": {
"type": "description",
"settings": {
}
},
"vendor": {
"type": "text",
"disabled": true,
"settings": {
"text": "Promotion: {{ product.metafields.my_fields.promotion.value }}",
"text_style": "body"
}
},
"78339629-1ff8-4e48-bcde-d4361656e70c": {
"type": "text",
"settings": {
"text": "Release Date: {{ product.metafields.my_fields.release_date_revised.value }}",
"text_style": "body"
}
},

Replies 6 (6)

Moeed
Shopify Partner
6983 1883 2300

Hey @wrestlingfigdb 

 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


wrestlingfigdb
Tourist
6 0 0

niraj_patel
Shopify Partner
2391 516 515

Hello @wrestlingfigdb 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
.product p.product__text {
   font-weight: 700 !important;
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
wrestlingfigdb
Tourist
6 0 0

Thank you, but that bolded ALL the text. In the below I am looking to bold "Release Date," but not "2021," "Attire Date" but not the ridiculousness that follows, etc.

 

Image 6-25-24 at 1.33 PM.jpeg

niraj_patel
Shopify Partner
2391 516 515

This code is being applied to all because all the text paragraph tags are written and all have the same class.

techlyser_web_0-1719337220321.png

 

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
wrestlingfigdb
Tourist
6 0 0

Got it. So I'm assuming that means I'd need to create a new class and then split the structure of the data...Bummer. I was really hoping this would be a quick fix.