Once you’ve created your product collection, the next step is to make it visible on your site. This involves enabling the collection, copying the snippet, embedding it into your source code, and creating a campaign to manage its display.
1. Enable the product collection
Before deployment, make sure your collection is active:
- Go to the Product collections dashboard.
- Open the collection you want to deploy.
- Click Enable in the top-right corner.
The status will switch to Active.
2. Copy the snippet
Each collection comes with a snippet that you must add to your website’s source code:
Click Copy code in the collection view.
A popup will display the snippet along with supported variables:
- data-collection-id (required): Unique identifier of your collection.
- data-collection-locations (optional): Needed if your product feed contains multiple locations.
- data-collection-callback (optional): JS function for handling successful requests.
- data-collection-error (optional): JS function for handling failed requests.
Embed the snippet in your source code
Paste the copied snippet into the relevant section of your website’s source code. The snippet acts as a placeholder where the product collection will be displayed.
- Place it in the HTML body of your page, within the container where you want the collection to appear.
- Ensure your site loads Kameleoon correctly so the collection is rendered dynamically.
Create a campaign
Create a widget with a product reco block
To learn how to create a widget with a product recommendation block, please read this article.
Once you have created a widget, associate it with a campaign.
Add the block in the Code editor
Open the Code editor.
To learn how to use the Code editor, please read this article.
