Before you dive into scripts and components, the first and most important step is to envision how Fibbl will look and feel on your webshop.
Every successful implementation starts with a clear design direction — how the Fibbl experiences fit naturally into your existing product pages and enhance your customers’ journey. Remember, the Fibbl team always offers a design proposal but it's important that you have a good idea of what you want to achieve.
Step 1: Imagine the experience, not the code
Start by asking yourself:
How do I want shoppers to interact with my products?
Should 3D, AR or Virtual Try-On be the hero, or a supporting feature?
What should the customer feel when they engage with Fibbl?
Fibbl’s technology is flexible — but your vision defines the experience. Whether you want a 3D-first design or subtle interactive touches, your creative direction will guide which components you later implement.
Step 2: Explore layout possibilities
Take a look at your current product pages and imagine where Fibbl could live.
A few popular design patterns:
Design style | Description | Common components |
3D-first | The 3D model is the main visual element on the product page. Other original images and Fibbl experiences as VTO/AR will be accessible by buttons. |
|
Button launchers | The Fibbl experiences are accessible via buttons. |
|
Quick-preview | A compact 3D viewer opens directly from product listings or pop-ups. |
|
Product specification block | A dedicated space for visualizing the product in 3D. Perfect for campaigns or bestsellers |
|
AR/VTO-focused | Mobile-first layouts that highlight augmented reality or virtual try-on. |
|
Subtle enhancement | Interactive “live image” effects or motion previews enhance existing visuals. |
|
You don’t have to pick just one — Fibbl components can be mixed to match your brand style and user flow.
Step 3: Sketch or prototype the design
Once you’ve chosen a direction, create a simple mockup of your product page or listing with Fibbl added. You can do this in Figma, Sketch, or even a PowerPoint slide — the goal is to visualize:
Where will Fibbl appear on desktop and mobile?
What happens when a user clicks or taps the 3D or AR button?
How does it align with your brand’s colors, typography, and imagery?
💡 Tip: Think about how your product pages look before and after Fibbl is loaded — the transition should feel natural, not like a separate widget.
Step 4: Prepare for implementation
Once your design direction is set, you’re ready to move on to:
Setting up your Fibbl script
Configuring analytics and market localization
Testing your first experiences in staging
At this point, you’ll know how you want Fibbl to look, and the next articles will show you how to make it work.
Key takeaway
Every great Fibbl integration starts with a vision.
Don’t rush into implementation — start by designing the experience your shoppers will love.
Fibbl’s flexibility means your creativity sets the limits.