Crop Circle Profile Pictures on Shopify
Using CropGuide to crop circular profile pictures on Shopify, use our image cropper to create rounded photos before upload.
First we need to install CropGuide for Shopify. Then we can set circular cropping.
Try CropGuide live on our product page
Converting images to circular profile pictures
First we need to make sure the image is cropped to a square, then we can apply a circular mask, otherwise we would get elliptical profile pictures.
Let’s select your website in the CropGuide customer dashboard, and scroll towards the Configuration
heading.
Cropping images to a square aspect ratio
- Scroll down towards the Crop aspect ratio heading.
- Enter
1
into the input field.
Let’s now apply the circular mask.
Applying the circle mask to the square profile picture
Now can then enable the circle crop mask in the CropGuide customer dashboard, this will ensure images uploaded by your users will always be circular.
- Scroll down towards the Mask heading.
- Select Circle mask.
- Click Save.
That’s it. If we navigate to the form on the website and refresh the page we can test if our new settings have loaded.
We can additionally show a circular image overlay to help user preview the end result.
Sticking with square profile pictures
We can also leave the circular mask the “None” setting and only show a circle guide to receive square images.
If you’re using these profile pictures on the web we can set border-radius
to turn square images into circles.
<img src="my-image.jpeg" style="border-radius:100vmax" alt=""/>
Adding a circular image guide
To help the user make the perfect image crop we can enable a circular crop guide.
This will show a circle inside the image cropper so the user can see which parts of the image will be visible.
Apart from applying a circular image mask we can also apply other optimisations, like for example compressing images.
Test your image upload field
When using the image upload field on your Shopify site, CropGuide will now apply a circular mask to the output image, resulting in circular profile pictures.
Try a CropGuide demo on the site, or reach out if you have any questions.
Related content
- Add an Image Cropper to your Shopify store
- Crop A Photo To PAN Card Size On Shopify
- Crop A Photo To Cédula Size On Shopify
- Crop A Photo To Identity Card Size On Shopify
- Crop A Photo To Aadhaar Card Size On Shopify
- Crop A Photo To Passport Size On Shopify
- Convert HEIC to JPEG on Shopify Before Upload
- Optimise Shopify: Compress User Images Before Upload
- Help Customers Crop Images Before Uploading to Shopify