PDP

Enhance your Product Detail Page (PDP) with Garderobo A.I. widgets to provide customers with a richer shopping experience. Our selection of widgets helps increase engagement and simplify decision-making by offering curated and relevant content directly on the PDP.

Here are the four widget types available for integration:

Shop The Model Look

Showcase clothing as styled on a model for an inspiring and realistic shopping experience. This widget is available in two variations, allowing you to choose the format that best fits your website's design and customer needs. Content for the "Shop The Model Look" widget is generated automatically using computer vision technology. For this purpose, we get data from the transferred image in the parameter model_image_link (described in the instructions for forming a product feed)

Widget Example

In the following example, the "Shop The Model Look" widget is displayed as the first block of the "Total Look" widget. Thus, the first block is built using computer vision technology based on the clothes worn by the model in the photo. The rest of the collages are built using our trained neural network.

Widget Example

Total Looks

Display complete outfits generated automatically by our service. These looks help customers visualize how to combine products for a cohesive style, making it easier to complete their purchase.

Widget Example

Widget Popup Example

Similars

Highlight similar products to the one being viewed, providing alternatives that might better suit the customer's preferences or needs.

Widget Example

Recommended Products

Offer a personalized selection of products tailored to the individual customer, using data-driven recommendations to maximize relevance and drive conversions.

Integration Script

To integrate the widgets, you need to add <div id="garderobo"></div> on the PDP page. This area will host the widgets.

Next, execute the initialization code:

...
<script>
   _garderoboWidget.then(function(widget) {
       widget.initProduct(document.getElementById('garderobo'), {"product_id": <product offer id>, scroll_button: {position: document.querySelector('.product-detail-carousel'), caption: 'Wear With'});
   });
</script>
...

product_id - Any offer id of product (Size Id);

scroll_button - A button that is placed on top of the product image gallery. When pressed, it scrolls smoothly to the widgets;

• position - html gallery selector;

• caption - button text;

Also, don't forget to do the basic initialization of the widgets.

Depending on the agreed widget types, the content of those or other widgets will be displayed in the specified area.

All widget styles are prepared in advance by Garderobo A.I. employees according to the layout agreed with you. During the initialization process, these styles are automatically loaded as a .css file.