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)
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.
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.
Similars
Highlight similar products to the one being viewed, providing alternatives that might better suit the customer's preferences or needs.
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 via Google Tag Manager (GTM)
To integrate Garderobo widgets on your website using Google Tag Manager (GTM), follow these steps. The main idea is to initialize the widgets in the specified <div id="garderobo"></div> container once the PDP page is loaded.
1. Create a Custom HTML Tag for Widget Initialization
Go to GTM: Log into your Google Tag Manager account and select the container where you want to implement the widget.
Create a New Tag:
Click on Tags in the left-hand menu, then click New.
Name your tag, e.g., "Garderobo - Init Product".
Add Custom HTML Code: In the Tag Configuration section, choose the Custom HTML tag type and paste the following 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>
...2. Set Up Triggers for Widget Initialization
You need to create a trigger for when the PDP page is loaded. This trigger will ensure that the widget's initialization happens at the right time.
Create a New Trigger:
In the Triggers section of the tag configuration, click on + to add a new trigger.
Select Page View as the trigger type.
Create a custom trigger to target only the PDP page (e.g., using the URL or page path).
Create a Trigger Dependency (Ensure "Garderobo - Init" Tag Fires First): To ensure that the "Garderobo - Init" tag fires before this tag, follow these steps:
Go to the Tag Sequencing section within the trigger setup.
Enable Tag Sequencing and select the "Garderobo - Init" tag as the fire before tag. This ensures the widget is initialized first.
3. Handle Widget Style Initialization
Garderobo A.I. provides pre-defined styles for the widgets, which will be automatically loaded as a .css file during the initialization process. This ensures that all widgets are displayed according to the agreed layout and style. You do not need to add these styles manually; they are managed by the initialization process.
4. Finalizing the Tag and Publishing
After configuring the tag and trigger, click Submit to publish the changes in GTM.
Test the Integration: Before publishing the tag live, use Preview Mode in GTM to check that the widget initializes correctly on the PDP page and the widget styles load properly.
Final Notes
Widget Initialization: The widget script is initialized only after the previous "Garderobo - Init" tag has run, ensuring proper sequence and functionality.
CSS Styles: The widget's styles are managed by Garderobo A.I. and are automatically loaded during the initialization process, so no additional steps are needed for styling.
Last updated