---
title: Adding the True Fit Widget to the PDP
description: Drag and drop widget on the product detail page, or copy code in liquid file
---
[Skip to content](https://help.truefit.com/adding-the-true-fit-widget-to-the-pdp#main-content)
English
Show submenu for translations
[More support](https://help.truefit.com/kb-tickets/new)
- [True Fit Home](https://www.truefit.com/)
- [True Fit For Shopify](https://www.truefit.com/shopify)
- [Get A Demo](https://www.truefit.com/get-started)
Open main navigation
Close main navigation
- [True Fit Home](https://www.truefit.com/)
- [True Fit For Shopify](https://www.truefit.com/shopify)
- [Get A Demo](https://www.truefit.com/get-started)
- English
Show submenu for translations
- [More support](https://help.truefit.com/kb-tickets/new)
- [Contact us](https://www.truefit.com/support)
[Contact us](https://www.truefit.com/support)
How can we help you?
- There are no suggestions because the search field is empty.
1. [True Fit Knowledge Base](https://help.truefit.com/)
2. [Getting Started on Shopify](https://help.truefit.com/getting-started-on-shopify)
3. [Getting Started](https://help.truefit.com/getting-started-on-shopify#getting-started)
June 12, 2025
# Adding the True Fit Widget to the PDP
## Easily drag and drop our widget to all product templates using the theme editor or copy code manually to liquid files.
### Drag-and-drop Functionality
Stores using the Online Store 2.0 theme can utilize our drag-and-drop functionality to place the True Fit widget across all product templates.
**Placement Preference?**
We’ve AB-tested across our network and found that the highest click-through rates resulted when the True Fit widget was placed above the size selector.
### Copy Code to Liquid Files
Your current theme is not Online Store 2.0, meaning drag and drop functionality is not supported. Please follow below instructions to add True Fit widget to your theme. This method can also be used if you'd rather manually place the True Fit code within your theme instead of the app block within the theme editor. Please note that you need to edit your theme code for the below steps.
**1. Locate your theme.liquid file**
**2. Add the True Fit library within the `` tag**
The 'xxx' at the bottom of the script is a placeholder for your clientid. It is a three-letter acronym (store key) set by True Fit. Please contact [support@truefit.com](mailto:support@truefit.com) if you need this value and we'll provide.
```
[js]{% comment %} True Fit Script {% endcomment %}
```
**3. Add the True Fit div on all product pages above or below the size selector.**
```
[html]{% comment %} True Fit Div {% endcomment %}
```
**4. Check your work**
-Search **domain:\*truefit\*** on the network tab to ensure the True Fit library (Step 2) is being loaded on all product pages
-Search **tfc-fitrec-product** on the elements tab to ensure the True Fit div (Step 3) is on all product pages
### That's it! We are now loading in and analyzing your catalog data. Our widget will appear automatically once the normalization process is completed.
- [Reports](https://help.truefit.com/reports)
- [Getting started](https://help.truefit.com/getting-started)
- [Recommendations](https://help.truefit.com/recommendations)
- [Integration Partners](https://help.truefit.com/integration-partners)
- [Getting Started on Shopify](https://help.truefit.com/getting-started-on-shopify#main-content)
- [Getting Started](https://help.truefit.com/getting-started-on-shopify#getting-started)
- [True Fit Widget](https://help.truefit.com/getting-started-on-shopify#true-fit-widget)
[](http://www.truefit.com)
Copyright © 2025, True Fit