Add an Image Editor to your Webflow site

Webflow is an in-browser design tool that gives you the power to design, build, and launch responsive websites visually. It’s an all-in-one design platform that you can use to go from the initial idea to ready-to-use product.

With all its features it however doesn't offer image cropping capabilities to your end-users and that's where CropGuide can help out.

Before we get started

An overview of what we need to follow the tutorial.

1. CropGuide enhances the default Webflow file upload field so we need a paid plan to be able to use the field.
2. We need to create a CropGuide account

Ready? Then let's install CropGuide

Installing CropGuide

Log in to CropGuide and add your domain to the control panel.

The control panel will generate a unique script for your domain similar to the one shown below:

<script defer src="https://cdn.crop.guide/loader/l.js?c=123ABC">
</script>

Log in to the Webflow admin and select your site.

1. Click Page: Home and select the page you want to add CropGuide to.

2. Click + Add element

3. Click </> Embed

4. Copy the CropGuide script for your domain to the Custom Code field.

5. Click Save & Close

That's it! CropGuide will now load and transform images when they're added to a file upload field on your Webflow page.

You can adjust the behavior of CropGuide in the control panel for your domain.

Please feel free to reach out to us if you any questions.

Learn more about CropGuide