Metafields for Community Photos Not working

Store Design
,
1

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?

Screenshot 2025-02-13 125554.png
Screenshot 2025-02-13 125554.png1723×741 377 KB

Screenshot 2025-02-13 130934.png
Screenshot 2025-02-13 130934.png751×270 20.7 KB

1 Like
2

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?

3

Hey @ONYXLights ,

Hope you’re doing fantastic :grinning_face_with_smiling_eyes:

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

4

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

Photo 1
... ... ...
Photo 7
5

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!!

6

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

7

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