How to Mask Images in Product Customizer (by Artistry.io)

Product Customizer (by Artistry.io) allows you to create all sorts of customizable products on Shopify.

The app includes many built-in customizations such as monograms, custom image uploads, and custom text inputs which work for most users. However, some users need these customizations to fit into a particular shape, such as a circle area. This can be done with the app but requires a bit more work.

In this blog post, I’ll show you how to create masks using the Product Customizer (by Artistry.io) app.

How to create masks using the Product Customizer (by Artistry.io) app

Before you get into the app, you’ll need to create your mask in your favorite Photo editing software (for example, Photoshop.)

Create the shape you’ll need for your mask. In this case, I created a circle. I’m going to go ahead and make mine into a placeholder, so my customers know that their images will be uploaded into a circle. This is what it looks like:

Next, you’ll select the inverse of that image to create the actual mask for the app. When you save it, make sure it’s the same size as your placeholder image. Here’s how mine looks:

Now it’s time to create the mask in the app.

In your Shopify Dashboard, navigate to apps, and then select the Product Customizer (by Artistry.io) app.

If you already have a template started, click on that. Otherwise, you can either select one of our existing templates or create your own.

Once you open a template, click on the layers to size and position your customization layer.

If you selected an existing template, you may see a layer called Mask Layer. Ignore that as that’s the default mask for our templates. You’ll be working on the Customizations layer for your design mask.

Click on the word “Customizations Layer.”

Enter your layer size and position. As you enter in different numbers, you’ll see a yellow dotted outline in the customization preview.

Once you have your template positioned and sized how you’d like, click on the save button on the top right. Then click on the x to close these options.

Now you’re ready to add your custom image module. Go back to the top of the customizations list and click on the hamburger menu to return to the original customizations panel view.

Click on Add Customization.

Then click on Custom Image.

Set your placeholder image.

Since you already positioned and sized the customization layer, click on Fill Layer to automatically size and position your custom image.

For more information on how to work with custom images, see our support manual.

Once you’re done, click on the save button on the top right of your new customization box. Then click the X to exit out of that customization.

Next, you’ll go to Add Customization and click on Image.

Upload your mask image and click on Fill Layer to automatically size and position your mask image.

Next, uncheck the options so your customers can’t move or resize your mask.

Once you’re done, click on the save button and X out.

This is how my customization turned out:

Now it’s time to test your mask.

Click on the eye to the left of your customization preview.

Click on your custom image option and upload your photo.

This is how mine turned out. Customers can move and resize their custom image uploads for best results.

Need additional help using the Product Customizer (by Artistry.io) app? Visit our support manual.

 


 

Click here to get started boosting profit by selling custom products in your online store today.


Boost profit by selling custom products in your online store.

Cindy Rodriguez

Co-Founder and Marketing at Artistry.io - E-commerce conversion rate optimization platform powered by Machine Learning. When she's not working on growing Artistry.io, you can find her interviewing entrepreneurs for her podcast, going to Disney World with her daughter, or reading a book.

Add comment