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
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).
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)?