How to write custom code for displaying stored images in gallery

Technical Q&A
, , , ,
1

I have an app that syncs live product images, price, descriptions and inventory to my shopify store. It is great but the only images that get synced are the main color variant images. I sell custom hats and need the customer to be able to see the side and back profiles. I had the app developer make a custom metafield URL to pull and store those images but I still need to edit my code. This is what they said:

“Shopify has a limit of one image per variant. To get around this limit, the additional images can be imported as image URLs into the variant meta fields.

Custom theme work depending on your theme/version will be needed at your end to display these image URLs on your site. Supply Master is limited to importing supplier data into your Shopify admin.”

Can anyone tell me what I have to do? My metafield keys and namespaces they made for me is:

custom.front_image_URL

custom.side_image_URL

custom.back_images_URL

They are all showing variants are populated for them. Just need to get it to display.

2

This will require custom liquid code. This is how it’s displayed

{% for variant in product.variants %}

{{ variant.metafields.namespace.key.value }}

{% endfor %}

Now according to the design and layout you have to adjust this code.

Best

1 Like
3

@yourhatsmt Those extra images are already in your variant metafields, so the theme just needs to show them. Most themes display variant images in the product template (files usually called “main-product”, “product-media-gallery”, or similar).

A developer would update that area so that when a variant is selected, it also reads the front/side/back metafields and adds those images to the product gallery. On some themes the variant switching is done in JavaScript, so those metafields may also need to be added to the product’s JSON data so the script knows to swap them.

Once that’s done, choosing a color will show the front, side, and back views for that variant.

Tell us the theme name/version and we can point to the exact spot.

1 Like
4

Hi @yourhatsmt :waving_hand: I’m @PaulNewton shopify-partner with a range of merchant solutions including theme customizations.

There are apps that are built to show multiple variant images, if you need to burn time DIY’ing instead of delegating expertise.

Note an alternative is to import the images as just product-media with appropriate file-names and or ALT text to reference the variant they should relate to then built advanced theme customizations to display them that way.
You can research the forums on this technique for different theme names.

If you have your own time to burn you can roll the dice and ask the sidekick to try and generate a section.
:warning: Though that will be a separate thing and not integrated with the main product-media gallery in themes.
https://help.shopify.com/en/manual/online-store/themes/customizing-themes/theme-editor/shopify-magic/generate-blocks

Otherwise your describing an advanced theme customizations beyond the scope of the forums.
Hire someone if you don’t know how to code/code-themes, reach out to a partner here on the forums or the partner directory.

1 Like