When you have followed the code snippet for your respective website type (Shopify, WooCommerce or custom) and you can still not see a retraced component, this will help you to debug the root cause.
Prerequisites
Before troubleshooting the technical side of components please check the following:
That you have at least one style active, with an SKU, variant or style code that matches the code on your web shop / backoffice.
That the style has a supply chain attached (DPP → Supply chain).
That the DPP story is enabled on the product that matches the code (the DPP Story column shows Active).
Still having issues?
We have collected the most often issues while setting up the retraced widget. Let us walk you through them:
1. No retraced header included
This is the first thing to check. Here, the shop components are not loaded properly:
In this excerpt the retraced header, aka shop-components are loaded properly:
How to open the Network tab: The Network tab shows every file your browser downloads when it loads a page. We'll use it to check whether the retraced widget was loaded. Follow these steps:
Open your shop page in Google Chrome.
Right-click anywhere on the page and choose Inspect (or press F12 on Windows, Cmd + Option + I on Mac). A panel will open on the side or bottom of your screen.
At the top of that panel, click the Network tab.
In the filter box on the left, type shop-c (this filters the list so you only see the retraced widget files).
Keeping the panel open, reload the page (press F5, or Cmd + R on Mac). The list will fill up as the page loads.
Look at the Name column: If you see entries appear, the retraced header is loaded correctly. If the list stays empty, the shop components are not loaded on this page. Continue with the steps below.
2. No component placed in DOM
To see that the component is properly placed in the DOM (the HTML file shipped to the client), you can open in Chrome the debugger via F12. Then switch to networks tab and reload the product page. Ensure you have placed the retraced-cards into the DOM and you can simply search for them in the network inspector.
This is an example page where we cannot find the cards:
This example shows a webshop where the cards component is loaded properly:
3. Unauthorized
Kindly send us your shop URLs upfront to be whitelisted and thus able to retrieve a DPP story.
You can check if you are unauthorized by seeing if the product story retrieve call is failing with a status code of 401:
If the calls cards?sku=XYZ succeeds with 200 status code, your shop is whitelisted.
4. Code not existing in retraced dashboard
In order to ensure that the code from your store can be matched in our system, please follow the network call below. It will return isSKUMatched valued false if we cannot match the code in your store to an SKU, variant or style code in your retraced account.
Retraced first looks for a product that has the code as an Other ID, on any level. If none matches, it checks the other code types: SKU before variant before style. If several products still match, the one created first is used. Products without an active product story are skipped, so isSKUMatched is also false if the code exists but its DPP story is not active.
The code we request from your store is shown in the headers tab on the very bottom.
See here the code transmitted to our system URI encoded (meaning special characters are escaped):
Please note that depending on the widget you are using, you would need to insert its name in the search field. For example, in the screenshots above, the used widget is cards. However, if you are using icons, you would need to type icons.
5. Components don't update when a shopper selects another variant
If the components show the first product but don't change when a shopper selects another variant, your shop may switch variants without using the ?variant= URL. Send the retraced:product-changed event after updating the code. See "Updating the components without a page reload" in the Custom installation guide.
Still facing issues?
Please make sure your setup is compliant with our help articles