A user sought a solution to dynamically overlay a logo image onto variant product images for T-shirts, aiming to avoid manually creating and uploading images for each of 30 color variants.
Problem Context:
Proposed Solutions:
Resolution:
The original poster marked the issue as solved using an app called “TA Labels and Badges” instead of implementing custom code.
I am selling T Shirts with a image that we produce.
Looking for a way to combine / overlay the first product image that will be the logo image on top of the variant image and display as you click the different variant colors.
Any ideas or code would be appreciated.
For each product, it would be one logo image and 30 different shirt colors. Would be great that when you click on the colors, the final product would display… Would save tons of time over creating a image for each color individually and uploading.
Ok dear, please share your store URL and collaborator code with me so I can check and provide you with the proper solution.
Yes, that’s possible. One way is to use some custom code: set your logo as a transparent PNG and overlay it on top of each variant image using CSS + JavaScript (or Liquid in your theme). Then, when a variant is selected, the background image changes but the logo overlay stays in place. If you need ready code, you’ll need to edit your product.liquid / main-product.liquid template and add a wrapper div with the logo positioned absolutely.”
solved with an app ta labels and badges