Help with Displaying Files from Metafield (Liquid Code Issue)

[Suchar]

Theme: Be Yours
Current Plan: Basic

Hello,

I’m currently trying to display downloadable PDF manuals on the product page of my Shopify store using a metafield. The metafield, named custom.manuals, contains two PDF files. I am using the following Liquid code to display these files on the product page:

liquid

{% if product.metafields.custom.manuals and product.metafields.custom.manuals.value %}
<div class="downloadable-files">
<h4>Downloadable Manuals</h4>
<ul>
{% for file in product.metafields.custom.manuals.value %}
<li>
<a href="{{ file | file_url }}" target="_blank" rel="noopener noreferrer">
{{ file | file_name }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% else %}
<p>No manuals available for download at this time.</p>
{% endif %}

The code is working in the sense that the links are appearing on the page. However, the problem is that the links show as “GenericFileDrop” instead of the actual file names, and clicking on them doesn’t lead to the correct PDFs from the metafield.

Could someone please verify if my Liquid code is correct, or point out any issues that might be causing the files to not display properly? Any advice or suggestions would be greatly appreciated.

Thank you!

[devcoders]

Hello @Suchar

Try this code.

{% if product.metafields.custom.manuals.size > 0 %}
  
    #### Downloadable Manuals
    
      {% for file in product.metafields.custom.manuals %}
        - {{ file.file_name | default: "Download Manual" }}
          
        
      {% endfor %}
    

  

{% endif %}

[Suchar]

Hello @devcoders ,

Thank you so much for your quick response.

Unfortunately, the code you provided isn’t displaying anything on my page. Could you kindly assist me further with this?

[devcoders]

Hello @Suchar

• Verify the Metafield Type:

  • Go to Settings > Custom data > Products in your Shopify Admin.
  • Find custom.manuals and confirm that it’s set up as a file or file reference type, allowing you to upload PDFs.

• Test Accessing Metafield Data:

  • Let’s add some debug code to see if the manuals metafield data is coming through at all. Place this before the main code block to check if the metafield is accessible:

{{ product.metafields.custom.manuals | json }}

• This will display the raw JSON data for product.metafields.custom.manuals on the page. Once you see the structure, you can remove the

   tag.
  
  

• Refined Code: Based on the JSON output, we might need to refine the Liquid code to match the exact structure of manuals. Assuming it’s a file reference type, try the following:

{% if product.metafields.custom.manuals and product.metafields.custom.manuals.size > 0 %}
  
    #### Downloadable Manuals
    
      {% for file in product.metafields.custom.manuals %}
        - {{ file.alt | default: "Download Manual" }}
          
        
      {% endfor %}
    

  

{% else %}
  

No manuals available for download at this time.

{% endif %}

• Using the Correct Attribute for File Name:

  • Depending on how the metafield is set up, the file name might not appear as file.file_name. Try file.alt or another attribute that appears in the JSON output.

[devcoders]

Hello @Suchar

Please add code this file sections/main-product.liquid

[Suchar]

The answer for debug code is:

{"error":"json not allowed for this object"}

[devcoders]

Hello @Suchar

If you’re not familiar with coding, you can grant me access to your store and also message me on WhatsApp. I’ll make the necessary changes for you. Thank you!