Shopify themes, liquid, logos, and UX
As stated in the topic, does anyone know is it possible to change meta field data text appearance?
For example, I would like to bold the Recommended Face Size content on the product page but this text is here in the dynamic meta fields.
Thanks
Solved! Go to the solution
This is an accepted solution.
plz use the bold/strong tags on the page where this field will be shown
<strong> metafield here </strong>
This is an accepted solution.
plz use the bold/strong tags on the page where this field will be shown
<strong> metafield here </strong>
Thank you!
Hi where dose this code go please i need bold text in meta fields multi line
Hi @sweetbuddie where do you want to show the meta field?
product page please
i need some text in bold it will differ between different products as allergy ingredients have to be in bold by law
please share some data so I can have a look at which type of data it is and how it will look.
For allergens please see ingredients listed in bold.
Sugar, Glucose Fructose Syrup, Invert Sugar Syrup, Wheat Flour, Corn Starch, Vegetable Fat (Palm), Acids (Malic Acid, Citric Acid), Humectant (Glycerol) Potato Stach, Maltodextrin, Flavouring, Thickening Agent (Arabic Gum), Acidity Regulator (Potassium Citrates), Salt, , Fruit and Vegetable Concentrates (Carrot, Blackcurrant).Colour (E120)
an example of a products ingredients tab i need with WHEAT in bold
HI @sweetbuddie please follow this guide carefully. It's a little bit tricky. First, go to the product editor, and in the meta-field add the ingredients. now for words you want to show as bold, wrap them around with pipeline ( | ) as shown in the screenshot below.
Now go to the theme editor and open the file 'main-product.liquid' in the sections folder. now replace the code highlighted in the below picture with the new code below.
code
{% if block.settings.heading contains 'Ingredients' %}
{% assign beatles = block.settings.content | split: "|" %}
{% for member in beatles %}
{% assign value = forloop.index | modulo:2 %}
{% if value != 0 %}
{{ member }}<b>
{% else %}
{{ member }}
</b> {% endif %}
{% endfor %}
{% else %}
{{ block.settings.content }}
{% endif %}
How silly Shopify dose not offer this naturally thanks alot it has worked
could you help me out with something else so the same with the tabs just i have a collapsible row products Nutritional Values and i need a table in it so it looks like the photo dose not have to loo exactly this this
and also i have another tab Dietary And Lifestyle as a file list tab i added the photos but nothing is showing up on the website
Please share the store URL and also how many products in total you have.
sweetbuddies.co.uk password Scarr123 i will be having over 100 products
Hi @sweetbuddie this will require multiple code changes in your store
i'm up for it 😎
are you easy with making code changes by yourself?
yea i have done abit
please copy the code of main-product.liquid file and paste it into the following google doc file.
https://docs.google.com/document/d/1ooUpb_3vGSyc28EB4FDGPZYU5X9J053_IAgKaSMWnKA/edit?usp=sharing
ok think i did it
Hi @Ahsan_ANC, thank you so much, it works! But the code is limited to one metafield, do you know how I can adapt the code, so that it will be valid for all existing metafields?
Thank you!
Hi there,
We use Canopy theme and the main-product.liquid doesn't contain block.setting.content. Is this still possible in this theme if so what can we replace to do the exact same thing, highlight specific text within the metafield with Bold titles.
Thanks
Hello but, it didn't work for me. Here is the metafield's content:
Here is the output:
Am I doing something wrong?
Hey Community! As we jump into 2025, we want to give a big shout-out to all of you wh...
By JasonH Jan 7, 2025Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024