Fibbl Documentation

Appearance

Fibbl 3D Quick View ​

A button that, when clicked, shows the model viewer in a drawer. The model viewer has the product banner and the product switcher, so models united to a product group can be viewed quickly. The button is supposed to be added to product cards on pages with product lists. It's not supposed to be used on the product page itself.

Code example ​

html
<script
  src="https://cdn.fibbl.com/fibbl.js" type="module"
  data-fibbl-config
  data-token="demo"
></script>
<fibbl-3d-quick-view data-product-id="shoe1"></fibbl-3d-quick-view>

We use a demo company in the example above to show the product banner, product switcher and the annotations.

Custom attributes ​

  • data-product-id - a unique id of product in Fibbl's databases.

Slots ​

You can replace the default button with anything you want - just add the markup inside the component.

CSS classes ​

  • .fibbl-3d-quick-view-content - the class of the wrapper element of the content shown when the button is clicked. Currently, it can be used to change the backgroud and font-family props. DO NOT use all: unset for this element - it will break. Just set separate props.

Live demo ​

See the Pen Fibbl 3D Quick View by Fibbl (@Fibbl) on CodePen.