PDP (Product Detail Page) and Fast-Add-to-Bag Experience

Here you will find the documentation for how to implement the experience onto each individual product page and how to enable the accompanying fast-add-to-bag checkout experience.

PDP Button Tag 

This is the tag for the button the shopper will click on the PDP.  Add this tag at the position in your HTML where the Size Advisor button should be displayed:
 <div class="ShoeSizeMe ssm_pdp" data-shoeid="XXXX"></div>

PDP Experience Script

Add this script at the end of the HTML code and replace the variables with your own data.
<script type="text/javascript" async src="https://shoesize.me/assets/plugin/loader.js">

{
shopID:"SHOP_ID",
locale:"en",
zeroHash:"xxxxxxxxxx",
scale:"eu"
}
</script>

Fast Add-to-Bag Function

Refer to the Callbacks section of the documentation. There you will find the callback function which will enable shoppers to add their size directly from the PDP button after receiving a recommendation.
Click here for the Callbacks Documentation

PDP Size Run Availability Parsing

Below are details on how to get the size run and availability. This data is used to inform the service and the shopper which sizes are available, which sizes are not available, and which sizes are out of stock. This then informs the service which experiences and messaging should be displayed to guide the shopper. 

Preferred Method: Data Attributespdp

This method adds the size run and availability as data parameters in the ShoeSizeMe button.
data-sizerun
data-availability

<div class="ShoeSizeMe ssm_pdp" data-shoeid="xyz" data-sizerun="6,7,8,9,10,11" data-availability="8,9,11"

Alternative Method: Application/JSON

Add the size run and availability as application/JSON script

<script type="application/json" id="ssm_parsing">
{
"xyz":{
"sizerun":[6,7,8,9,10,11],
"avab:[8,9,10]
}
}
</script>
Where xyz is the shoe ID

Backup Method: Web Scraping

If the preferred method or alternative method is not possible, please inform a member of our customer success team. In this case, we will scrape the product page and try to get the size run and availability from the size picker. It is important to note that this method has a risk of being unstable since any change to the PDP might cause the scraping function to fail and disrupt the service to your shoppers.