Shop
The Shop is a shopping page for your products, hosted by Click2Buy. Visitors set their location, choose a retailer near them, then browse your products available at this retailer. With retailers that support it, they can add products to a basket and send it to the retailer's website.
Technical requirements
Check the technical requirements first, especially if your website uses a Content Security Policy.
Display modes
The Shop can be used in 2 ways:
Share the address of your Shop anywhere: newsletter, social media, QR code, etc.
The Shop is displayed inside a page of your website.
Your Shop is identified by its Shop key (SHOP_KEY), provided by your Customer Success Manager.
Link
Each Shop has its own address:
text
https://shop.clic2buy.com/SHOP_KEYTo choose its language, add a locale parameter (see Parameters):
text
https://shop.clic2buy.com/SHOP_KEY?locale=en-GBIn the page
Step 1: load the script
Add our script to the <head> of the page that displays the Shop:
html
<script async src="https://shop.clic2buy.com/script.js"></script>To choose the language of the Shop, add a locale parameter (see Parameters):
html
<script async src="https://shop.clic2buy.com/script.js?locale=en-GB"></script>Step 2: add the container
Add the following tag where the Shop should be displayed:
html
<div data-c2b-shop-key="SHOP_KEY"></div>The Shop takes the full width of this block, with a height of 650 px.
Added after page load
Our script sets up the blocks present when the page loads. If you add the block later (for example with a JavaScript framework such as React or Vue), call c2bShop.init() once it is on the page.
Parameters
| Name | Where | Required | Description |
|---|---|---|---|
data-c2b-shop-key | Block of the page (in the page) | Yes | Shop key, provided by your Customer Success Manager |
locale | URL of the script, or of the link | No | Language of the Shop: fr-FR (default), en-GB or de-DE |
Shop design
The Shop is hosted by Click2Buy, and we configure its design (shapes, colors, fonts, etc.). To match it to your brand guidelines, contact your Customer Success Manager.
Tracking
Click2Buy tracks Shop usage automatically: statistics are available in our back office (ask your Customer Success Manager for more details).
When the Shop is displayed in the page, it also sends c2b:widget:tracking events to your page, with service set to shop. You can listen to them like the widget events, with the following actions:
action | Sent when |
|---|---|
print | The Shop is displayed, with its products by category |
select_location | The visitor's location is set |
print_retail_outlets | Retailers near the visitor are displayed |
print_delivery_retailers | Retailers offering home delivery are displayed |
select_retail_outlet | The visitor selects a retailer |
select_category | The visitor selects a product category |
print_products | Products appear on the screen, with their price |
select_product | The visitor selects a product |
To see the content of each event, use the browser console script.
Troubleshooting
The Shop shows "Pas de shop pour la clé…" ("No shop for key…"): check the Shop key in data-c2b-shop-key or in the link.
The Shop doesn't appear in the page: check that the script is loaded, and that the block is on the page when the script runs. If it is added later, call c2bShop.init().
Still stuck? Contact us or your Customer Success Manager.