Need assistance exporting javascript code to use interactions in Shopify

Hello,

I am looking for some assistance in getting the Webflow interactions to work inside of Shopify.

I am not (and not wanting to) make my own theme to use within Shopify, I am instead designing the content and animations within Webflow with the hopes that I could add it in a “custom HTML” section in my current Shopify theme.

I have been able to export the Webflow code successfully with just the HTML and CSS, however, I have no experience with JS and I am looking for some help on where the different things need to be moved to in Shopify.

I have read all the documentation about exporting code and I still cannot figure this out.

I have tried uploading the webflow.js file to assets and guess my way through where the tags need to be in the files however I cannot figure it out.

I would love any help/advice anyone can give me, below is a link to the preview of what I am trying to export.

https://preview.webflow.com/preview/jacob-oglesbys-project?utm_medium=preview_link&utm_source=designer&utm_content=jacob-oglesbys-project&preview=e6fda4054ef2e6c991ff0d23ef500027&workflow=preview

Thanks,
-Jacob.

Hi @Jacob3 :slight_smile:

I am not a Shopify expert, but I was trying to find some references on how to import the Webflow.js and other page assets, structures, css and scripts to an existing theme, but really did not find any solutions readily available. It probably can be done somehow with enough time to check everything out.

Probably the easiest thing may be to recreate the existing design in Webflow,then use the Udesly adapter to convert that to a usable Shopify theme which supports the code: Webflow to Shopify | Udesly.com

You might even contact to Udesly to ask this question, they might be able to help with some more relevant info as they are experts with that integration.

Hopefully someone else here in the community may have some ideas for this. Good luck!

Hey guys, I was also struggling to get my Webflow interactions working on a Shopify site. The main thing that solved my issue was including Webflow’s data attributes on the <html> element!

My exported Webflow code’s <html> element looked like this: <html data-wf-page="64769715d408147e1301ade2" data-wf-site="64769715d408147e1301addc">

I had included all of the Webflow CSS and JS already but nothing seemed to work until I added those data attributes to my <html> element in Shopify. Hope that helps!