Formatting Metafields

theengravers
New Member
16 0 0

I'd like to format the metafields on our product page by bolding them, increasing the font size, and/or changing the colour. Right now, I am using the metafield formatting built into our theme (Craft), but as you can see in the example, it blends into the product description, so I'd like to make them stand out more:

On Site.png

 

I know the coding to use to change font appearance, but I'm not sure where to add it. The coding for our product page looks like this: 

Code.png

We have 2 metafield codes, above and below the product title. Can I add the formatting code somewhere in there?

Replies 2 (2)
PaulNewton
Shopify Partner
5189 464 1125

To format style metafields with CSS the html structure is what you need to investigate.

 

Do not rely on screenshots when discussing code.

Always provide inspectable urls of the problem or specific code samples

This will drastically increase the chances of a solution or a CSS bandaid. 

The first screenshots only convey the visual output, and the second only part of the JSON structure of setttings of the entire page.

https://community.shopify.com/c/shopify-design/help-us-help-you/td-p/668159 

 

 

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
theengravers
New Member
16 0 0

I'm not sure what you mean by an inspectable url.  If I shouldn't be looking in the product.json code, where should I be looking? Our main-product.liquid doesn't include anything referencing metafields.