Transparent Product Varient Image Overlay on Product Page

New Member
6 0 0

Hi,

I'm fairly new to this platform and coding in general. I am working with the Launchpad-Star Theme and Boundless theme (site curently under construction).

 

Is there a script or process to follow where I can overlay a transparent image (.png) over a base product image? This is particularly to show different accessory options for an existing product.

For example:

Variant 1:

Base product with 3 Color variants

      Rendered images of each color variants are uploaded.

Variant 2 (Multiple versions of a single accessories):

      .png overlay over Variant 1's product image based on what option is selected.

Basically I want a builder/customizer or color swatch of sorts.

If I am able to do this on this platform, it would save me from uploaded hundreds (and I mean hundreds) of images for each variant.

If you need clarifaction please let me know! If there is a theme that already supports this please let me know!

 

Thanks,

Mike

0 Likes
Shopify Partner
1346 22 208

Hi Mike,

As far as I know there is no out of the box theme with this functionality. You can custom code something like this. Here is a basic demo: https://custom-skin.myshopify.com/products/iphone-6-skin.

The code is complex but I will try to give a resume.

You will need high rez images with your product. A main template and transparent pngs. It usually works best with rendered products.

You can upload your additional transparent images as product images or assigned to variants. Using JavaScript you can loop trough your product images and make a match. The match can be done using the image assigned tags or image URL. It depends.

The png can be placed as an absolute layer on top of your template. You can use cart line items or variants to send the customization to the cart

There are limitations. You get a maximum 100 variants and 250 images per product. You may have backed performance issue: https://ecommerce.shopify.com/c/ecommerce-design/t/incredible-high-time-to-first-byte-on-product-wit...

Hope it helps.

https://sections.design tips, tricks & Shopify sections
1 Like
New Member
6 0 0

Thank you for your reply Mr. Piturca.

Yes, the idea was that I would use pre rendered .png images that are transparent over the the base image (the rendered product). I will check out the links you provided and see if I cna implement them into my store. All renders and transparent .pngs are rendered and perfectly aligned/sized to fit the template image.

A maximum of 100 variants should be managable for each product if this works how I want it to.

-Thanks

0 Likes
New Member
6 0 0

This is along the lines of what I am looking for. Is there a way to implement it into the Boundless or Launchpad-Star Theme? What is the level of customization and how can I acquire this app/page?

 

Edit: Also is there a formal name for this kind of app? A builder? Configurator?

0 Likes
Shopify Partner
1346 22 208

The solution given is custom, can be integrated to any theme. It requires good understanding of HTML/Liquid, CSS and JavaScript.

The idea you have is right. The transparent images are overlays on top of the base image. You need some JavaScript that will handle this process. How you set up the images, assigned to variants, assigned to product, depends on your product configuration and project details.

Another thing you need to consider is the fact that the customized product may have a different price. In that case you would also need few additional variants set up.

I am afraid that I can't give a step by step tutorial on how to implement this.It is something custom made and the architecture is based on the product needs.

https://sections.design tips, tricks & Shopify sections
1 Like
New Member
6 0 0

Mircea,

Thank you again for your assistance. It is much appreciated and is sending me in the right direction. I understand that this is a custom code that must be implemented. Where can I get access to this code? Do I need to make it from scratch to go with my current theme?

Is there an app that I may purchase that enables this option?

Is the code/liquid used on the page available as a base to edit to my needs?

Sorry for all the questions...

-M

0 Likes
Shopify Partner
1346 22 208

There are some APPs in the store that can do something like that, not sure. On a search this came up: https://apps.shopify.com/customization-engine. It may easily solve your problems. Do look trough the APP store first.

Yes, the demo I've shown is built from scratch. To implement it you would need to create that code. The code is not available yet, I do plan to opensource it when I will have time. Its a custom solution can, be implemented on any Shopify store but the solution is set based on the product requirements.

https://sections.design tips, tricks & Shopify sections
0 Likes
New Member
6 0 0

Alright. 

Please keep me informed when the code is open sourced. I'd love to test it with my store once launched. 

Thanks again for your help and patience. It has been a great first time experience.

-M

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
81 0 11

I'll move this thread to Shopify Design

0 Likes
Shopify Partner
1665 51 185

If I am able to do this on this platform, it would save me from uploaded hundreds (and I mean hundreds) of images for each variant.

Shopify works fine with product configurators , but for any platform this is often a custom job as no general system is good enough for every business's product options.

overlay a transparent image (.png) over a base product image? This is particularly to show different accessory options

Mircea is right on current off the shelf stuff that may be tailorable to your needs.

 

What i'm interested is your image workflow, from creation to admin-ingest and how this affects the product model which then affects the frontend which all effects your admin time. Did you hobble together an edit workflow like i often see, or did you find guidance or were images provided via supplier? Do you think your workflow in any way will feedback into how you organize products?

I can only assume ,for example, your strongest image convention is they all be the same size so they can be stacked sanely like they were an animation cel. But are there times when 1 option maps to multiple overlays,etc?

 

@Mircea Piturca

, I do plan to opensource it when I will have time. 

Is this for uses like phone-skins ,which are sorta straigtforward , or are you trying to generalize for any product-type as well? 

Problem Solved? ✔️Accept the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
0 Likes