Category Page
Bring your category pages to life with Gardrobo A.I. widgets, designed to inspire customers and streamline their shopping journey. These widgets deliver curated content and insights, helping customers discover products more effectively and boosting engagement on your site.
Here are the widget types available for integration on category pages:
Total Looks
Showcase complete outfits generated automatically by our service. Total Looks are built around the top 3 most popular products in the current category, creating cohesive styles that inspire customers and encourage multi-item purchases.
Popular Products
Highlight the most popular products in the category based on trends, sales, or user activity. This widget helps customers quickly identify what’s currently in demand.
Personalized Recommendations
Deliver a personalized selection of category products tailored to the individual customer. Using data-driven recommendations, this widget ensures relevance and enhances the customer experience.
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 Category 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.initCategory(document.getElementById('garderobo'), {"category_id": <category id>});
});
</script>
...2. Set Up Triggers for Widget Initialization
You need to create a trigger for when the Category 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 Category 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 Category 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