I am looking for a solution to my particular problem. I have a one-product store. The product that I am selling is a bundle that is made up of 6 items, two of which are customizable. What I want to do is to show the live-preview image of each individual customizable image. I wonder if there is someone who is facing the same issue currently or faced it before. I would be open to using any third-party apps or custom coding. Thank you in advance for your help. Note, I don’t have the store set up yet. I am still working on it.
Yes, this is definitely possible with custom development.
The most flexible approach is to create a custom product configurator where customers can customize each item in the bundle and see a live preview update in real time. For image uploads, you can use JavaScript (Canvas or SVG) to render the uploaded image onto the preview as the customer makes changes. Options like color, shape, text, and date can also update instantly.
If you prefer an app, solutions like Easify Product Options, Zepto Product Personalizer, Kickflip, or Customily offer live previews and personalization features. However, if your bundle has unique requirements or multiple customizable items, custom coding will usually provide a much better user experience and greater flexibility.
Thank you @devcoders. I would likely use Easify app. However, the issue I am facing with Easify is that I cannot put the two products on the same page. The requirements of the bundle and customization are exactly like what I uploaded in the image. Do you think you can help me achieve the desired result?
Thanks! Yes, I can definitely help you achieve that.
If you can share your store URL (or a preview link), I’ll take a look and let you know the best approach. I’m confident we can build the layout and functionality to match your design.
That’s very nice of you. Unfortunately, I haven’t set up the store yet. I am still working on it. I secured the products from the supplier. Once I create the store, I will reach out to you. In the mean time, could you please share your idea and what approach you would use? Also, I would like to know your experience in Shopify in projects you did previously.
Certainly! Considering that you are still in the planning phase, I will suggest whether to opt for an app or a customized version of the application.
There are several applications you may consider using, such as Kickflip, Customily, Zakeke, and Teeinblue. Each of these apps allows you to personalize products with live previews and images.
In case you need to make sure that the layout will be identical to the one on the mockup (with a separate live preview of each customizable element), the customized app will suit you more.
I will sure look at these options, but from my experience earlier, it needs custom coding to put the two products with their live previews on the same page.
Yes, that’s exactly what I meant as well. If you want everything to work exactly like your design, including having both customizable products with their own live previews on the same page, then custom development will be the best approach.
You can still use a product customizer app for some of the functionality, but you’ll likely need custom coding to achieve the exact layout and logic you’re looking for. The app may help reduce some development time, but the custom logic and UI will still need to be built.
You can do with Third party apps like Flybundle, and other apps like that, on the behest you can do it with ChatGPT codex, or Claude, by simply connecting your store to connector on these two LLMs model, and you can customize as per your wish.
Your solution targets a problem that I am not facing. My issue isn’t live preview for one single item. My real issue is how I can put the two customizations with live preview in one page. I can do what you said using Easify easily. Thank you anyway for your reply.
perhaps i should have gone through more back and forth communication instead of directly setting up the store and trying to replicate problem and trying to provide that solution. Perhaps detailed description of what you want might have helped me better like some example image instead of leaving them blank
Unfortunately you’ve got a lot of moving parts here and vagueness so it comes down to “use app and customize!” type of replices.
If the “customizable image” is a user upload or some sort of image-editing then for sanity end-to-endyour really need an app (showing dynamic images from product page[PDP] to checkout)
Though it can be setup to just show the image on the PDP if you don’t care about showing it in checkout yet.
If the “customizable image” is just a combo of the products images that’s a bit easier , but depending on your setup can still be the same issue with the image not then showing in checkout etc.
If this is a serious project and you need to untangle this before you get to deep in the weeds reach out to me for services by clicking my profile pic.
Yes, this should be possible without custom coding if you’re using the right product options app.
From your description, it sounds like you’re selling one bundled product that contains 6 items, with 2 of those items being customizable. If that’s the case, I’d create separate option groups for each customizable item, so each one has its own personalization fields and its own live preview.
I’ve built a similar setup using Easify Custom Product Options. It supports Live Preview, so customers can see their personalization update as they enter text or upload an image. This works well when a product has multiple customizable components, since each component can have its own set of options rather than trying to combine everything into a single preview.
Since you’re still in the planning stage, I’d recommend mapping out exactly which parts of the bundle are customizable before building the product page. That makes it much easier to organize the options and keeps the customer experience intuitive.
Just one question: are the two customizable items using text personalization, image/logo uploads, or a combination of both? That would help determine the best way to structure the setup.
