Custom Field under Product Images

Technical Q&A
1

I’ve been trying to get a custom field added to my shopify template but it doesn’t want to show up.

This is what I’m using

{% if product.metafields.custom.instructional_video %}

{% endif %}

I have the url in the custom field but for some reason nothing shows up. I want this to be in the left column under the product images.

Here is a link to one of the pages that has the url in the custom field but the code isn’t working

https://russellmoccasin.com/products/backcountry-premier-build-copy?variant=47155185451221

Thank you

2

Hey @kemmieg ,

Could you please let me know for what purpose you want this custom field?

Either you want to show as a Section or you want to show on the Product Page?

Based on your clarification I can provide you better solution.

Thanks

3

I am trying to get a YouTube video on the single product page under the product images on the left. It will only be on specific products so I want conditional logic that shows only if the url is in the meta field

4

Replace the current code with this updated one.

{%- assign video_url = product.metafields.custom.instructional_video | strip -%}

{%- if video_url != blank -%}
  {%- assign video_id = video_url | split: 'v=' | last | split: '&' | first | default: video_url | split: 'youtu.be/' | last | split: 'embed/' | last | split: '?' | first -%}

  
    

      <iframe src="https://www.youtube.com/embed/{{ video_id }}?modestbranding=1&rel=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy" title="Product instructional video"></iframe>
    

  

{%- endif -%}

After that put the URL in the specific product Metafiled and let me know if works for you.

Also make sure you have to paste the Exact YouTube video URL then it will automatically fetch the ID and show on the specific product page.

Thanks

5

Still didn’t work. If I put a text field there and just type

sjfklsajfla;sd

it shows up but when I try to put the custom field in there it doesn’t work and it doesn’t even show up when I inspect element. I’ve never run into this before so unsusre why it’s behaving this way. I thought it might be one of the apps but that doesn’t explain why I can put in regular html and it works just fine but not when I try to do anything else.

6

What’s your metafield definition? Type?

7

I’ve tried two different ones, a textarea and a url. Initially I was going to make the field take the embed code from YouTube that is why I used the textarea

8

I’d add something like this to debug above your code:

Then you will see what you’re getting from the MF…

If by chance by textarea you mean Rich text type, then it’s crazy under the hood:

https://shopify.dev/docs/apps/build/custom-data/metafields/list-of-data-types#rich-text-formatting

9

So when I add the json it seems to work but the images are fixed somehow from an app so I’m going to need to figure that out because it’s now sliding up under the image.

10

Now I’m getting an playback error for the YouTube video. I used the code above and added the json instead of skip. it doesn’t seem to be reading the url. I tried copying it from browser url bar and using the share button on YouTube but it’s not pulling the data to the site. Is there something I’m missing in the above code.