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, or 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.
3. Deploy the product collection on your website
You can insert the product collection in your source code or create a Kameleoon campaign.
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
Open the Code editor and add the product collection in the Code editor.
To learn how to use the Code editor, please read this article.
