How to add CMS fields to a .js file?


I understand that I can paste only up to 10000 characters of custom code into Webflow. And the alternative is to save the file either to Dropbox or similar service and use the link. It works great, but I’m in a situation where I need to add a few CMS fields to my custom code.

I tried putting a part of the custom code where CMS fields are required into Webflow and then copied it to a .js file. It looks like this - {{wf {"path":"product-id-2","type":"PlainText"} }}

It seems to work fine when I paste it back into Webflow but does not work as expected when I save the code to a file and use the link instead.

Can someone please help me understand how to make it work? And I hope my explanation is clear. Please let me know if you have any questions.

Thank you so much!


1 Like

Could split it up into multiple code blocks. You didn’t provide any details so I can’t say how.

Thank you so much for the reply @samliew.

So the javascript code I’m trying to use in webflow is here -

And here is the part where I’d like to use the product ID field from my CMS collection to fetch the product information from Shopify -

/* Fetch product and init
  ============================================================ */
  client.fetchProduct('_3614436099_').then(function (fetchedProduct) {
    product = fetchedProduct;
    var selectedVariant = product.selectedVariant;
    var selectedVariantImage = product.selectedVariantImage;
    var currentOptions = product.options;

I have zero knowledge in coding and here I’m trying to figure out how to use Shopify SDK to add cart to my website.

Could you please please please tell me how to split the code?

Thank you!

Oh and here is the preview link -

I’m trying to add the custom code to the Products collection page.

This thread should help you embed a Shopify button I have a problem with the buy button code of Shopify

1 Like

OMGoodness!! Didn’t realize it’s that simple. You are the best.

Thank you!