The 3D Quick View application allows customers to explore 3D product models directly from your Product Listing Page (PLP) without navigating away. This lightweight overlay enhances product discovery and engagement.
What is 3D Quick View?
Fibbl 3D Quick View is a button component that, when clicked, opens a drawer containing the 3D model viewer. This viewer includes:
Note: This component is designed for use on PLPs and should not be used on product detail pages (PDPs) – unless it's used in "You may also like" or similar sections.
Embedding 3d-quick-view on product listing pages
1. Include the Fibbl script
As with all Fibbl components you need to have the global script tag included in your code. Preferably in the <head> tag:
<script
src="https://cdn.fibbl.com/fibbl.js" type="module"
data-fibbl-config
data-locale="sv-SE"
data-analytics-type="google"
data-analytics-id="G-ABCABCABC"
data-analytics-event-handler="globalFunctionNameHere"
data-token="token_given_by_Fibbl"
></script>
Read more about the global config here.
2. Add the 3D Quick View Component
Insert the <fibbl-3d-quick-view> component into your product cards:
<fibbl-3d-quick-view data-product-id="PRODUCT_ID"></fibbl-3d-quick-view>
Replace
PRODUCT_IDwith the unique identifier of the product in Fibbl's database.
3. Customize the Button (Optional)
You can customize the appearance of the trigger button by placing your desired markup inside the <fibbl-3d-quick-view> element:
<fibbl-3d-quick-view data-product-id="PRODUCT_ID"> <button>View in 3D</button> </fibbl-3d-quick-view>
Styling the viewer
To customize the appearance of the 3D viewer drawer, you can target the .fibbl-3d-quick-view-content class:
.fibbl-3d-quick-view-content {
background: #fff;
font-family: Arial, sans-serif;
}Warning: Do not use all: unset on this class, as it may break the component. Instead, set individual properties as needed.
Responsive and accessible
Fully responsive across desktop, tablet, and mobile devices.
Example implementation
<script
src="https://cdn.fibbl.com/fibbl.js" type="module"
data-fibbl-config
data-locale="sv-SE"
data-analytics-type="google"
data-analytics-id="G-ABCABCABC"
data-analytics-event-handler="globalFunctionNameHere"
data-token="token_given_by_Fibbl"
></script>
<div class="product-card">
<img src="product-image.jpg" alt="Product Name">
<h3>Product Name</h3>
<fibbl-3d-quick-view data-product-id="PRODUCT_ID">
<button class="custom-3d-button">View in 3D</button>
</fibbl-3d-quick-view>
</div>
Implementing the 3D Quick View with the fibbl-bar component
If you wish to combine the the Quickview with other Fibbl experiences you can easily do that with the fibbl-bar component by adding the "fibbl-3d-quick-view" data-element to the fibbl-bar button:
<fibbl-bar data-product-id="PRODUCT_ID">
<button data-element="fibbl-3d-quick-view">3D Quick View</button>
<button data-element="fibbl-qr-code" data-type="vto">Try On</button>
</fibbl-bar>
Troubleshooting
Component not displaying: Ensure the script is correctly included and the
data-fibbl-configattribute is present.3D model not loading: Verify that the
data-product-idcorresponds to a valid product in Fibbl's database.
Additional Resources
Live Demo on CodePen
For further assistance, please contact support@fibbl.com