Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
Our shop www.shop.dc.com (connects to https://dccomics-shop.myshopify.com) currently implements product images by selected color variant by using alt tags on the uploaded images. We would like to do this without alt tags (so we can use alt tags as intended). Is there a solution for this functionality that you can recommend? We’d like to support multiple images for each colorway. We are using the storefront API and a headless nextjs frontend. Any help would be much appreciated!
Here is an example of a PDP page on our platform that uses multiple images for each colorway:
https://shop.dc.com/product/best-est-friend-in-universe
Hi @mpoursh
So basically you want to be able to tag images with specific product variants?
And in a way that a single variant will have multiple images?
I'm unable to access the website links that you have shared. But I think this is achievable using the variant images on Shopify admin.
Please correct me if I misunderstood something.
Ah the website is only available in the US so you might have to vpn to see it.
We want to be able to show product images that are relevant to the user's color selected. There can be many variants with a color option. Ideally we would also want this to be something that a non-tech savvy person can do when setting up products in the Shopify UI.
Here's a scenario to clarify:
There is a t-shirt that is available in 2 colors, Red and Blue and 5 sizes S, M, L, XL, XXL. When the user selects the Red color swatch on the t-shirt Product detail page, 3 product images are shown (of the red t-shirt) no matter which size the user selects. When the user selects the Blue color swatch 2 product images are shown (of the blue t-shirt).
For legal reasons we are not permitted to use third party shopify apps on our store.
Our current solution uses the alt text on the product images to filter the images shown to match the color of the product option, so alt text on red t-shirt images would be "Red" and the product option on the variant is "Red." We would like to move away from this solution so we can use the alt text as intended (to show accessible alt text on the images).
Hi @mpoursh
Understood! So have you tried adding your alt text before the "#" character?
Just like it's described in this article.
Sadly Shopify doesn't support multiple variants per variant. So you would either need to hire a developer who sets this up for you internally.
Or you can temporarily use an app to set it up and then remove it? But I guess that's still against the privacy concern.
Choices available:
1. Hire a developer (setup without alt text usage and unlimited images per variant)
2. Ask Shopify to allow multiple images (I doubt this will happen anytime soon)
But yeah, for a non-tech person I don't think there's another option without using apps.
Hope this helps!
Luckily, I am a developer :D. Could you point me in the direction of which API's to leverage if we were to go down the custom app route? I imagine we'd have to use the Admin API to create a connection between images and their color, perhaps by exposing a metafield on the images (is that even possible on images?). We've created metafields on products and product variants and exposed them on the storefront API, but this is a bit different. Ideally, I'd like to keep the color attribute on the images so there is one source of truth, I imagine things would get messy if we saved the relation on each variant because there can be 100+ variants on some product.
If it is even possible to save a metafield on a product image, would it be exposable on the storefront api? How would querying for these hypothetical metafields affect performance (if we were querying for say 24 products at a time)?
Hi @mpoursh
Try this...
Instead of trying to attach metafields to the image. You can assign all the images as metafield data to the variant.
That way you can get the current variant's related image URLs all at once.
I'm no expert in the API stuff but I think this should do.
Hope it resolves it for you!