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 <head> 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 if you need this value and we'll provide.
[js]
{% comment %} True Fit Script {% endcomment %}
<script>
;(function (r, e, o) {
var w = window, d = document, t, s, x;
w.tfcapi = t =
w.tfcapi ||
function () {
t.q = t.q || [];
t.q.push(arguments);
};
t('init', { storeKey: r, environment: e, ...o });
x = d.getElementsByTagName('script')[0];
s = d.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.crossorigin = 'anonymous';
var subDomain = e === 'prod' ? 'cdn' : 'ds-dev';
s.src = 'https://' + subDomain + '.truefitcorp.com/fitrec/global/js/tf-integration.js?storeKey=' + r;
x.parentNode.insertBefore(s, x);
})('xxx', 'prod');
function observeCartChanges() {
const cartObserver = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
const isValidRequestType = ['xmlhttprequest', 'fetch'].includes(entry.initiatorType);
const isCartChangeRequest = /\/cart\/add/.test(entry.name);
if (isValidRequestType && isCartChangeRequest) {
tfcapi('getToken', (token) => {
if (!token) return;
const formData = new FormData();
formData.append('attributes[_tfcToken]', token);
fetch(window.Shopify.routes.root + 'cart/update.js', {
method: 'POST',
body: formData,
});
});
}
});
});
cartObserver.observe({ entryTypes: ['resource'] });
}
observeCartChanges();
</script>
3. Add the True Fit div on all product pages above or below the size selector.
[html]
{% comment %} True Fit Div {% endcomment %}
<div
class="tfc-fitrec-product"
data-styleid="{{ product.id }}"
data-locale="{{ localization.language.iso_code }}_{{ localization.country.iso_code }}"
data-userid="{{ customer.id }}"
></div>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