Add an Image Cropper to your Webflow site

Incorporating an image cropper into your Webflow site allows customers to fine-tune their uploads directly, reducing the need for backend image adjustments. This feature enhances the upload process, ensuring images meet your design requirements with minimal effort.

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, or you can set custom instructions per field.

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

Learn more about CropGuide

Related content

• Crop A Photo To PAN Card Size On Webflow
• Crop A Photo To Cédula Size On Webflow
• Crop A Photo To Identity Card Size On Webflow
• Crop A Photo To Aadhaar Card Size On Webflow
• Crop A Photo To Passport Size On Webflow
• Crop Circle Profile Pictures on Webflow
• Convert HEIC to JPEG on Webflow Before Upload
• Optimise Webflow: Compress User Images Before Upload