Metafields for Community Photos Not working

[ONYXLights]

Hi There,

I'm trying to create the look of the image attached of 'Photos from our Community...'  However, I can't seem to get it to work.  There are metafields already setup as Community Photos 1,2 3,4, 5 etc. But the images aren't pulling through to show live on our website.  Is someone able to tell me what I'm doing wrong?

[devcoders]

Hello @ONYXLights 

Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

[ONYXLights]

HI Devcoders, thanks for getting back to me.  This is my stores website... https://onyxlights.com.au/

But I don't have that section/function visible yet, so not see anything..  but this is a competitors site that I've seen it look the best, just scroll right down the bottom... https://www.stedi.com.au/type-x-led-driving-lights-builder.html

Let me know how I can incorporate this into my site please.  Thank you!!

[TheUntechnickle]

Hey @ONYXLights,

Hope you're doing fantastic 😄

Let me help you troubleshoot the community photos display issue. Looking at your screenshot, I notice a few potential issues:

1. File Upload Status:

• I can see that the metafields are set up, but the "File" status column indicates the files are just placeholder entries rather than actual uploaded images
• The "0 products" count for most entries suggests the files aren't properly linked

1. Implementation Requirements: To get this working, you'll need to:
2. Upload the actual images:

• Go to Settings > Files and upload each community photo
• Make sure they're in a supported format (JPG, PNG, etc.)
• Note down each file's URL after upload

1. Update the metafields:

• Return to the metafields section
• For each "Community Photo" entry, click to edit
• Change the type from "File" to "URL" if it isn't already
• Paste the corresponding uploaded image's URL
• Save changes

1. Check your theme code: Make sure your theme includes code to display these metafields. You'll need something like:

{% for i in (1..7) %}
  {% assign photo_field = 'community_photo_' | append: i %}
  {% if product.metafields.custom[photo_field] %}
    <img src="{{ product.metafields.custom[photo_field] | img_url: 'large' }}" alt="Community Photo {{ i }}">
  {% endif %}
{% endfor %}

Hope this helps. Let me know if you've any more questions for me, or if you'd want us to implement this for you(Just email us!).

Thanks,
Shubham | Untechnickle

[ONYXLights]

Thank you!  But where do I past that code???  Which section etc.?

[ONYXLights]

Hello... Can you help me please? Where do I paste that code???  Which section in the code do I put it etc.?

[indostudioalva]

By the looks of it, you already setup your own metafields. There are two approaches that you can use for this.
1.⁠ ⁠Using Shopify Theme's Image section
This method helps you choose which metafield do you want to add into that component.

2.⁠ ⁠Build your own Image Section
You can add this code if you want to build your own custom image section
<div class="your class">
<div class="image-1-class">
<img src="{{ product.metafields.your_metafield_namespace.your_metafield_key_1 | img_url: 'large' }}" alt="Photo 1">
</div>
...
...
...
<div class="image-7-class">
<img src="{{ product.metafields.your_metafield_namespace.your_metafield_key_7 | img_url: 'large' }}" alt="Photo 7">
</div>
</div>