Overlay different color svgs on different color backgrounds

I am trying to find out if there is a way to create a product image option that would allow a customer to choose a graphic and graphic color, then choose a color for a background and then display the image so a customer can preview how it will look. Our client is a print company that offers different color t-shirts with printed graphics. The graphics will also be available in several different colors.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @Chad_Conner and welcome, you mean something like “printful-dot-com”? You can use JS and it will be pretty challenging but if you have experienced JS dev why not. but just to be aware that images on WF are stored on different server and this cause lots of CORS problems and I find very difficult to do some basic processing on images even if I have specified Access-Control-Allow-Origin to my local server and using .env to hide API access tokens. But maybe it would not be problem for you.

Same problem can be with SVG as these print graphics may be complicated and you will hit the wall of 10.000 characters limitation in embed code to be able change programatically colors with JS.

Just something to thing about as I’m dealing with these problems in current days.

Thanks for the info Stan. I’ll experiment with it and see what i can come up with. I’ll let you know if i find the magic potion!

Hi @Chad_Conner Good luck