Subtitle Metafield - Product Page

Solved
Franz22
Excursionist
17 0 4

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

0 Likes
drakedev
Shopify Partner
598 128 163

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.

• If my answer helped click Like to say thanks
• If the problem is solved remember to click ✅ Accept Solution
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
Franz22
Excursionist
17 0 4

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

Product Metafield - 1.jpg

Product Metafield - 2.jpg

Product Metafield - 3.jpg

   

0 Likes
drakedev
Shopify Partner
598 128 163

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.

• If my answer helped click Like to say thanks
• If the problem is solved remember to click ✅ Accept Solution
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
Franz22
Excursionist
17 0 4

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

  • I want the subtitle metafield to appear below the title ( Gianyar | Ubud (Bali Island), Indonesia | Fine Art Print)
  • The subtitile must have these features please : 

Questions :

  • The lines of code that you will be send me will apply to all product pages ?
  • What will happen to these lines of codes when my Theme will be upgraded to 2.0 ?

 

Thanks,

Best,

Francisco

 

0 Likes
drakedev
Shopify Partner
598 128 163

This is an accepted solution.

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 %}
          <span class="h3" itemprop="brand">{{ product.vendor }}</span>
        {% endif %}
        <h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
        {%- comment -%}Add subtitle{%- endcomment -%}
        <span class="product-single__subtitle h4">
          <img src="{{ 'location.png' | asset_img_url: '16x' }}" alt="">
          {{ product.metafields.descriptors.subtitle }}
        </span>

As you noticed I added a new <span> 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;
}

 

• If my answer helped click Like to say thanks
• If the problem is solved remember to click ✅ Accept Solution
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
Franz22
Excursionist
17 0 4

Excellent ! Thank you so much !

 

Francisco • Frozen Sailor Team  

www.frozensailor.com/collections 

-

0 Likes
drakedev
Shopify Partner
598 128 163

Great! Happy that worked

• If my answer helped click Like to say thanks
• If the problem is solved remember to click ✅ Accept Solution
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
Wishbeads
New Member
1 0 0

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:

https://help.shopify.com/en/manual/metafields/displaying-metafields-on-your-online-store#connecting-...

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.

0 Likes
drakedev
Shopify Partner
598 128 163

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.

• If my answer helped click Like to say thanks
• If the problem is solved remember to click ✅ Accept Solution
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.