Custom Product Page

Hi,

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.

Hey @hassanzy1996

hope you’re doing well!

You may want to look at a product customizer app like Kickflip or Live Product Options or use custom code if the live preview needs to be very specific. Since the store is not setup yet, this is good time to build it in the right way from the start.

1.Kickflip: Live product customization with real-time previews. Apps by Kickflip on the Shopify App Store ?

2.Live Product Options: Live previews, conditional options, and best choice for complex product personalization. LPO Live Product Options - Add personalized product options and build product customizer | Shopify App Store ?

@hassanzy1996 Hi! I would first recommend trying the already mentioned Kickflip and Live Product Options. Customily may also work if you need print-ready files.

This can also be built directly into the Shopify theme. Fabric.js or Konva.js would work well for this. You could add image uploads, text, resizing, positioning, and cropping. The preview URLs and customization details can be saved with the order using line item properties. If you don’t need to track inventory separately for all six items, I would probably sell the bundle as a single product

Hi @hassanzy1996

Yes, this is definitely possible in Shopify.

Since your bundle contains six items and only two are customizable, you can display a live preview that updates instantly as the customer changes their selections.

There are two main approaches:

  • Custom coding (recommended): Using Shopify Liquid and JavaScript, you can create real-time previews for each customizable item or even a combined preview of the final bundle. This gives you complete flexibility without relying on monthly app subscriptions.
  • Third-party apps: Apps like Kickflip, Customily, Tepo Product Options, or Zepto Product Personalizer offer live preview functionality if you prefer a no-code solution.

Since you’re still building the store and it’s a one-product business, I’d lean toward a custom-coded solution. It’s more cost-effective in the long run and can be tailored exactly to your product and customer experience.

Best regards,
Devcoder :laptop:

@hassanzy1996 Since you’re still building the store, this is actually the best time to think beyond just the customization feature. For a one-product store, the product page experience will play a huge role in helping customers understand the bundle, visualize the final result, and feel confident enough to purchase.

I’d be curious have you already planned how you’ll present the value of the 6-item bundle and build trust before launch?

Hi @hassanzy1996

I’m Elle from Teeinblue! Good timing to ask this before you finish setting up, since it’s easier to build in from the start. Our Teeinblue Product Personalizer can help you easily create customizable products with a live preview.

Here’s what it looks like for your customers: they put their info into the customization fields (add their names, upload a photo, whatever you’re offering) and see it update live on the mockup, right on the product page, before they add to cart.

On your end, setup is no-code. You just set up which 2 items are customizable and what kind of personalization option you want to offer (text or photo upload), and it handles the live preview automatically.

Please feel free to explore our app, and our support team will help you along the way via live chat!

Hi @hassanzy1996,

For your use case, a one-product bundle where 2 of the 6 items need customization + live preview. Since you’re open to third-party apps, here are two I’d recommend looking into:

1. LPO Live Product Options

This is the better fit if your customizations are option-driven (text inputs, dropdowns, swatches, file uploads, date pickers). Its live preview shows text inputs and uploaded images directly on the product image as the customer types/selects.

*Free while you build your store.

  1. Customix Product Personalizer

This one’s stronger if your customization is more design-oriented. Customers adding text + images + clipart onto a product mockup (think apparel, mugs, phone cases, posters, gifts). Has AI features like background removal and face cutout, generates 300dpi print files automatically, and integrates directly with POD providers (Printful, Printify, Gelato, etc.) if that’s relevant.

*Free plan available.

Which to pick?

Since you’re still setting up the store, I’d install both, mock up your 6-item bundle in each, and see which UX feels right before you commit.

Good luck with the launch!

Ellie from BOGOS: Free Gift Bundle Upsell team

Hi there :raising_hands:

If I understand correctly, you’re selling a bundle made up of six items, with two of those items being customizable, and you’d like customers to see their personalization before placing an order.

This can be a bit tricky because most bundle apps focus on grouping products together, while most personalization apps focus on previewing a single product. Finding a solution that does both well isn’t always straightforward.

One approach worth exploring is using a product personalization app such as Easify Custom Product Options. It allows customers to enter custom text, upload images, and see those changes reflected through a live preview on the product page. This works particularly well when the bundle is sold as a single product experience and the personalized elements can be represented within that product.:smiling_face:

For example, if two items in your bundle are customizable, you could collect the personalization details for both items on the same product page and display those customizations within the product preview. This gives customers confidence that their personalization has been captured correctly before they add the bundle to cart.

That said, if you’re looking for completely separate live-preview windows for each individual item inside the bundle, you may need a more advanced configurator or a custom-built solution, as that type of setup goes beyond what most standard bundle and personalization apps currently offer.

Since you’re still in the planning stage, I’d recommend mapping out exactly what customers need to customize and what they need to see in the preview. In many cases, merchants find that a single, well-designed personalization experience is enough to communicate the final result without requiring separate previews for every item in the bundle.

It would be helpful to know what the two customizable items are (text personalization, photo upload, logo placement, etc.), as that will make it easier to suggest the most practical setup. :heart:

Hi @hassanzy1996 ,
Yes, this is definitely possible with custom development.

Since you have a single bundled product with two customizable items, you can use line item properties to capture the customer’s inputs and update the preview images in real time using JavaScript (Canvas or SVG, depending on your design). This lets customers see a live preview before adding the bundle to the cart.

If you prefer an app, look at Kickflip, Customily, or Live Product Options. These apps support live product previews and work well for personalized products. For a one-product store, a custom solution may also be a cost-effective option if your customization requirements are straightforward.

Yes, this is definitely possible. The right solution depends on how much customization you want to offer.

If customers will be adding text, uploading images, or choosing colos/design, I’d recommend using a product personalization app with live preview support:

If your customization is simpler (e.g., switching between predefined designs or colors), you can also achieve it with a small custom implementation using JavaScript to update the preview image dynamically, without needing a full personalization app.

Since you’re still planning the store, it would help to define exactly what customers can customize (text, images, colors, logos, etc.). That will make it much easier to choose the most suitable solution.

This is definitely possible. For your use case, I’d recommend a custom product configurator rather than standard Shopify variants.

You can use a third-party app if it supports live previews for multiple customizable components, or build a custom solution using Shopify theme code + JavaScript for full flexibility. Since you’re still setting up the store, it’s the ideal time to implement it properly.

Hi,

I am really surprised by the number of answers and suggestions I have received so far. I will upload an image that illustrates my need. Please, check it out and let me know your opinion. I am ready to pay for using third-party apps or custom coding.

Hello @Steve_TopNewYork,

I appreciate your reply. The customizations for each will be very simple. It will include text engraving, image upload, and date selection.

since you narrowed it down to text engraving, image upload and a date: half of that needs no app at all. text and date can be plain line item properties on the product form — an input with name=“properties[Engraving]” and one with name=“properties[Date]” inside your product form lands on the line item, shows up in cart, checkout and the order, and reaches fulfillment exactly like an app would do it. prefix a key with an underscore (properties[_internalId]) if you dont want it displayed to the customer. for a one-product store thats a small theme edit, not a build.

the image upload is the only piece that genuinely needs an app — shopify wont host customer files from a plain theme form. so if the live preview requirement is soft, you can start with properties plus an upload-only app and skip the full customizer tier. if you DO want the rendered live preview of the engraving on the product photo, then kickflip / live product options as suggested above is the right shortcut — building that by hand with fabric.js is a rabbit hole.

one gotcha if you go the properties route with a custom section: make sure the inputs are actually inside (or form-linked to) the /cart/add form of your template. thats the classic silent failure — everything looks fine, the properties just never arrive. quick console check: document.querySelector(‘[name^=“properties[”]’).form should not be null.