Display image from metafield URL

Store Design
, , ,

Topic summary

Display product images from external URLs stored in product metafields (type: URL) instead of Shopify’s native product images, using a CDN (e.g., Cloudinary) and a custom slider/lightbox.

  • Goal: Replace the Product Image module with a slider of thumbnails that open in a modal lightbox; create a separate slider for videos hosted on YouTube.
  • Data model: Metafields like custom.image_1, custom.image_2, … custom.image_X store image URLs; not all products have the same count.
  • Behavior: Iterate through the sequence in order, render only fields with values, and skip blanks without placeholders until no more images exist.
  • Organization: Numbered naming indicates consistent views (e.g., 1=front, 2=right, 3=left, 4=back), but some products may miss certain numbers.
  • Rationale: Managing assets on a CDN (content delivery network) enables quick global updates—replacing a file with the same name updates all products referencing that URL.
  • Videos: Envisioned to use a similar mechanism with YouTube URLs in a separate slider.

Status: Request for feasibility and implementation guidance; no solution or code provided yet; discussion remains open.

Summarized with AI on December 22. AI used: gpt-5.
1

Hi,

Does anyone know if it’s possible to put a URL to an image in metafield (type: URL), and have the image display?

Instead of uploading the image to Shopify, I want to use a CDN and just pull the image from there.

For instance, I created: custom.image_10
This is the URL: https://res.cloudinary.com/uni-t/image/upload/v1709933090/Shipped_in_the_USA.jpg

I created 10 different image placeholders, not all products will have 10 images. I may have more or less for a given product.

The idea behind this is to replace the Shopify product image display with a slider/modal lightbox based on hosted images.

The logic would be to cycle through the list and put small-sized (via CSS) images in the slider, then have them be clickable to be activated and pop up into a lightbox view.

Ultimately, I would like to have images in one slider and videos (hosted on YouTube) in another, below the images. I would assume the mechanism would be the same.

TIA for reading

2

The scenario would be a replacement for the Product Image module.

Instead of using Shopify to define and store what images you show, you can use a 3rd party host to keep your images. This way, if you want to update an image, you just upload a replacement image with the same file name to your image host and then any product that referenced that image its metafield would be instantly updated.

Suppose a series of Metafield type:URL like
custom.image_1
custom.image_2
custom.image_3
…
custom.image_X

The product image replacement would then allow me to define what images go into the slider.

Product Image Slider: custom.image_1, custom.image_2, custom.image_3, … custom.image_X (whatever you highest defined field is)

If there’s an empty field, it would be skipped and the next image displayed. To keep things neat, I use numbers 1, 2, 3, and 4 for my images to identify the view of the product. Product_A_1 is front view, Product_A_2 is right view, Product_A_3 is left view, Product_A_4 is back view. Not all products have 4 images. Sometimes a product may have 1, 2, 3, 4, others, 1, 2, 4, others 1, 3, 4.

If one of the product image metafields is blank, it shouldn’t show an empty placeholder, just move to the next image until there are no more.

Does that make sense?