Hello Shopify Wizards,
Could you please me explain me why the “Product Subtitle Metafield” is not showing on my product Pages and How to fix it ?
Thank you !
Francisco
Hi @Franz22
how did you add the metafield to your products? Did you create the native metafields interface released recently by Shopify?
Did you add some code already to the product template in order to show your metafield?
If you post the name of the custom metafields you added and where you want to show that, I can try to help.
Hi,
Actually I had created the Metafield via the new native interface by Shopify. See images attached.
No code related to this Metafield has been added to my Template.
Thanks
Bye
Ok, I supposed that, but was not sure.
Product metafields are custom and different for each store, therefore Themes developers cannot create the code to show them.
You need to customize your template, if you tell me where you’d like that this value appear in the product page I can write you some code/guidelines.
Great. Ok, basically and to give you the same example as previously described, on product Page : https://www.frozensailor.com/products/gianyar-rice-fields-bali-island-art-print
Questions :
Thanks,
Best,
Francisco
Ok I’ll try to add some code and explanation that could help.
When you modify a theme, there is no way to automatically update it to the new versions, when they are released in future.
But if you keep the code modifications documented it will be easy for you or eventually for a developer to update the theme without spending too much time/money.
Before starting, you should create a copy of the current theme. Follow this guide: Duplicating themes
The metafields name will be: products.metafields.descriptors.subtitle
About the image you can download it, name it for example location.png and then upload it to the assets folder of your theme.
We are going now to modify the template file product-template.liquid in folder sections. Search for product-single__title and add some lines after that.
{% if section.settings.product_vendor_enable %}
{{ product.vendor }}
{% endif %}
# {{ product.title }}
{%- comment -%}Add subtitle{%- endcomment -%}
{{ product.metafields.descriptors.subtitle }}
As you noticed I added a new element with class product-single__subtitle and inside that element we have the image, resize to 16px width and the metafields.
Now, if you want to change the style of the text element you can just add some code to theme.scss. Add the code to the end of the file. For example:
/* Custom CSS */
.product-single__subtitle {
font-size: 18px;
line-height: 24px;
color: #666;
}
Great! Happy that worked
Isn’t this supposed to be native in Shopify 2.0, no coding required?
I have a 2.0 theme and I’m having the same issue. Shopify’s own documentation indicates that it should now be possible to do this through the theme editor:
But I can’t find any blocks for a product or collection page that give me the option to add a dynamic source like they’re describing.
Hi @Wishbeads
Shopify 2.0 allow to create MetaFields directly in the backend, without using an specific Shopify App.
But in order to show the MetaFields key/value in your theme (frontend) you need to add the specific code into the theme.
Or you need to use the new Custom Liquid blocks capabilities. Also in this case it depends on the Theme implementation. Custom Liquid blocks may or not be available on Collection, Product and other template based on Theme developer decisions to add this block to the specific template.
