Can I host custom .css and .js files on Webflow for specific projects, such as using the Slick plugin for sliders on my Webflow project?

TL;DR
  • Upload .css and .js files to a third-party hosting service like GitHub Pages.
  • Copy the file URLs and paste them in the Webflow project's custom code section.
  • Use Webflow's custom code features for specific pages/components.
  • Publish and verify that all external files and scripts function correctly.

Hosting custom files like .css and .js on Webflow requires a workaround since Webflow doesn’t directly support uploading these files for direct use. However, you can still integrate additional CSS and JS using Webflow's tools effectively.

​

1. Upload Files to a Third-Party Hosting Service

  • Find a Reliable Hosting Service: Use services like GitHub Pages or any other reliable hosting provider to upload your .css and .js files.
  • Upload your Files: Ensure your custom styling and scripts are uploaded and publicly accessible.

​

2. Reference Files in Your Webflow Project

  • Copy the File URLs: Once your files are uploaded, copy their URLs for use in your Webflow project.
  • Go to Project Settings: In your Webflow project, enter the Project Settings area.
  • Add Code to the Head Section: Navigate to the Custom Code tab and paste your CSS <link> or JS <script> tags inside the Head or Body section, respectively. Ensure the URLs you paste point directly to your third-party-hosted files.

​

3. Use Webflow's Custom Code Features

  • Inside Pages or Components: For specific pages or components, navigate to a given page's settings or use the Embed element within Webflow to add inline CSS/JS directly in those areas.

​

4. Publish and Test

  • Publish Your Site: Ensure all links to your external .css and .js files work by publishing your Webflow project.
  • Check Sliders and Plugins: Verify that the Slick plugin or any custom scripts function as intended across all target browsers.

​

Summary

While Webflow doesn't allow direct uploads of .css and .js files, you can host them externally and reference them within your project settings. Use third-party hosting solutions to manage your additional styles and scripts, ensuring your Webflow project can leverage tools like the Slick plugin efficiently.

Rate this answer

Other Webflow Questions