What is live-image?
Live-image is a dynamic application designed to enhance your product’s main visual on product listing pages. It display a product image that can be animated (switched to a video) on hover or on swipe – giving customers a sense of depth, material, and shape instantly without having to go back and forth to the product detail pages.
Experience it yourself here – tip: check mobile and desktop to see the difference in terms of UX/UI.
How it works
Live-image is designed to be incredibly lightweight to implement and maintain for your team – while delivering high impact for your customers.
3D model first
It all starts with a 3D model. Once your product has been digitized, we use that same file to create a smooth, pre-rendered video optimized for web.
Fibbl tailor it to match your PLP images
Before rendering, we use our internal tool to define the background (color or image), aspect ratio, and product positioning – all based on your preferences. This ensures the video aligns with your existing PLP image style for visual consistency. Your current main product image is a great preference to start from.
Hosted and connected via Fibbl
The video is then generated and hosted by Fibbl, linked to your product and its model through our platform.
Simple script implementation
You add our script to your site and place it in the right container (typically inside your product card on the PLP). The script takes care of:
Displaying the video when available, above your existing thumbnail
Hiding itself when it’s not
Ensuring smooth interaction (hover on desktop, swipe on mobile)
Embedding the live-image component
If you’re already using other Fibbl components, you likely already have the necessary script (fibbl.js) implemented. If not, you’ll need to do that first — see how here.
Once that’s in place, embedding live-image is a one-step job:
1. Place the Live-image tag in your product card container
Inside the HTML structure of your product listing (PLP), simply insert the following component at the end of the element that hosts your current thumbnail image:
<fibbl-live-image data-product-id=“{{product.id}}”></fibbl-live-image>
⚠️ “{{product.id}}” is only a placeholder example and should be replaced with a relevant dynamic variable for your products.
That's it.
FAQ
Does live-image affect the performance of our website?
Does live-image affect the performance of our website?
Barely. Thanks to how the Fibbl platform is built, how optimized the files are and how we only load necessary content when the user have landed on the site, it has minimal impact on your site’s speed and performance.
Can I decide the animation?
Can I decide the animation?
Not at the moment — we currently offer one standard animation that’s been tested for performance and visual clarity. If you have specific needs or ideas, we’re always happy to hear your feedback.
Do I have to translate the mobile CTA?
Do I have to translate the mobile CTA?
Nope! We'd like to think that "Swipe to animate", despite being in English, would globally be known – there is no option of translating it. If you wish us to enable local translations for this phrase, let us know.