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 ScriptAdd this script at the end of the HTML code and replace the variables with your own data.
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.
<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">
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.