Checkout/Cart Page
Enhance your checkout page with Gardrobo A.I. widgets to inspire last-step additions and boost average order value. These widgets provide curated recommendations that are relevant and appealing to customers at the final step of their shopping journey.
Here are the widget types available for integration on the checkout page:
Total Looks
Showcase complete outfits generated automatically based on the items already added to the cart. This widget helps customers visualize complementary products and encourages them to create cohesive looks by adding more items to their order.
Popular Products
Highlight top products from across your entire catalog, taking the customer’s gender into account. This widget surfaces best-selling or trending items, making it easy for customers to discover products they might have missed.
Personalized Recommendations
Deliver a personalized selection of products tailored to the individual customer. Using advanced algorithms, this widget ensures recommendations that are both relevant and compelling, increasing the likelihood of additional purchases.
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 Checkout 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.initCart(document.getElementById('garderobo'), {"product_ids": [<array of product offer ids>]});
});
</script>
...2. Set Up Triggers for Widget Initialization
You need to create a trigger for when the Checkout 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 Checkout 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 Checkout 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