How can I recreate a live product preview like the example I attatched?

Store Design
, , ,
1

Hi everyone,

I’m building a custom plush pillow store on Shopify using the Refresh theme. I want to recreate a feature that is virtually the same thing that AllAboutVibe offers on their product pages:

  • A live product preview that simulates what the pillow will look like

  • Customers upload an image

  • Background is automatically removed

  • The image with no background is then turned into a preview that looks 3d and the shape of the pillow preview dynamically follows the outline of the image

  • It shows front and back views and border depending on the variant (e.g., “No Outline,” “White Outline,” or “2 Different Images”)

  • The uploaded image is also saved in the order data (via cart attributes or order notes)

I’m currently using Uploadly for image uploads but am open to other options if needed. I’d love guidance or app recommendations on:

  • How to dynamically update it per variant (e.g. “No Outline”, “White Outline”, or “2 Different Images”)

  • Dynamically adjusting the shape and mask of the image to make it contour to the subject

  • Overlaying the cutout image over a pillow base mockup

  • How to make this work with the Shopify cart or order data

  • How to make it mobile responsive and lightweight

You can see an example on allaboutvibe.com when you upload an image to turn into a plush pillow. I would attatch a video of me doing it as an example, but mp4 is not allowed. My store is customplushy.com.

If anyone has done something similar or knows the right direction to go (apps, JavaScript examples, or custom Liquid + CSS), I’d really appreciate the help.

Thank you!

1 Like
2

Hi,

Hope this will help

  • Use an upload app to collect images and use api to remove background
  • Use JavaScript & canvas to overlay image on a pillow mockup
  • Use CSS or JS to handle outlines, variants, and responsiveness

Responsive CSS example with media queries

.preview-wrapper {
  width: 100%;
  max-width: 400px;
}
@media (max-width: 600px) {
  .preview-wrapper {
    max-width: 100%;
  }
}
  • Store everyting in cart
3

Hi @truemonkeman

I am from Mageplaza - Shopify solution expert.

You’re aiming to recreate a fairly advanced custom product preview workflow like AllAboutVibe, and this is definitely achievable on Shopify with a mix of apps, JavaScript, and image processing services. Let’s break down how you can implement this step-by-step with recommendations:

What You Need:

  • Customer uploads an image.
  • Background is automatically removed.

Recommended Tools, Uploadly is a solid choice, but if background removal is key, consider:

  • Uploadcare: Supports image uploads + webhook integration with background removal via AI-powered image transformations.
  • Remove.bg API: Automate background removal via JavaScript after image upload (requires custom setup).
  • Shopify Apps (less control): Some apps like Customily or Zakeke offer image editing and live previews with background removal built-in.

Please let me know if it works as expected.

Best regards!

4

Hi @truemonkeman,

I saw your question and wanted to share a possible approach in case you’re still looking for a solution.

Usually, this kind of setup requires either some custom coding or a personalization app that supports real-time previews. The contour effect (where the pillow shape follows the uploaded image) is quite advanced and typically needs custom development.

If you don’t want to build everything from scratch, you could try Teeinblue Product Personalizer. It allows customers to upload their own images, automatically removes the background, and generates a live preview right on the product page.

You can create multiple mockups to show different pillow angles or border variants, so buyers can visualize their design more realistically. The uploaded image is also saved in the order data. You’ll receive the exact file customers used when placing their order, no need for manual follow-up.

image
image1272×706 169 KB

I hope this is a suitable solution for you if you haven’t found one.