Shoppers decide which product to open from the collection grid. The tiles embed puts a small badge on each product card that has customer photos or videos: the thumbnail of the top post (a pinned post first, then the newest) and the number of posts, for example “12 customer photos”. Cards with nothing tagged are left exactly as they are.
Add tiles to a collection page
- Add the tiles mount once per page. Anywhere on the collection page template, add the mount and the Idukki script (skip the script line if the page already loads it for another widget).
- Mark each product card. Add data-idk-product-id with the store’s product id to the element that wraps each product card. In a Shopify card snippet that is {{ product.id }}.
- Check the page. Open the collection on your live store. Cards for products with posts show the badge in the bottom-left corner.
<!-- Once on the collection page -->
<div data-ugc="idukki" data-idk-tiles data-bguid="YOUR_BGUID"></div>
<script src="https://idukki-cdn.com/version/script_0" async></script>
<!-- On each product card (Shopify Liquid shown) -->
<div class="card" data-idk-product-id="{{ product.id }}">
…your existing card markup…
</div>Options on the mount
| Attribute | What it does |
|---|---|
| data-idk-tiles-position | Where the badge sits on the card: bottom-left (default), bottom-right, top-left or top-right. |
| data-label | Badge text for several posts, with {count} for the number. Default: {count} customer photos. |
| data-label-one | Badge text for one post. Default: 1 customer photo. |
| data-pids | Extra product ids to ask about, comma-separated, for cards you cannot add an attribute to. |
- The widget asks about every card in one request (in batches of 48 products), and picks up cards added later by infinite scroll or filters.
- The badge sits inside the card, so it follows the card’s own link. Restyle it with the .idk-tile-badge class.
- The same visibility rules as the product page widget apply: hidden, pending, rejected and flagged posts are never counted, and a post imported into several collections counts once.
- If the request fails, the page is left exactly as it was.
Common questions
- A new post is not on the badge yet.
- Badge data is cached for a few minutes. Give it about ten minutes after approving a post.
- Nothing shows on my test build.
- Tiles are served from the live widget host only, so the staging or test build of the widget shows no badges. Check on your live store.
