Start Strong
Sell Smart
Manage with Ease
Market to Success

Product Customizer & Bundle Builder: Headshot Cropping & Background Removal with Preview Design

When offering customization options for products that involve customer-uploaded photos, such as portraits or pet images, you may need to process the images for better display and effect.

This guide will walk you through setting up headshot cropping, background removal, and creating repeating patterns for customized products using the Preview Design customizer in the Product Customizer & Bundle Builder app.

By following these steps, you can enhance your product customization options, improve customer satisfaction, and streamline your production process.

 

 

Setting Up Headshot Cropping or Background Removal

To set up headshot cropping or background removal for your products: 

  1. In your SHOPLINE admin panel, go to Apps > Product Customizer & Bundle Builder. Install the app if you haven't already.

  2. Click the Customized product tab, select Customized product, then click Add preview designs.
    1.2.png

  3. Select the product for which you want to provide customization service and click Add. 
    1.3.png

  4. Choose a customization template if needed, then click Confirm to enter the customizer.
    1.4.png

  5. In the customizer, click File upload. 
    1.5.png

  6. Configure the following settings in the right panel:
    1.6.png

  • Title and Notes: Provide a clear title and note for this image upload service.   

  • Product requires custom element: Enable this option if you want to make the service required.

  • Additional fee: Set an additional fee for the service, which will be added to the order when the customer selects it.

  • Default image: If needed, upload an image for testing or demo purposes.

  • Image processing: Choose either Using Cutoutpro to remove the background or Using Cutoutpro to crop the avatar based on your needs. If using Cutout.Pro for the first time, connect your account by entering the API key and clicking Submit. To obtain your key, click How to get your API key.
    1.6.5.png
     

    Notes: 

    • To use the Image processing feature, you'll need a Cutout.Pro account with sufficient credits. A banner will display as a reminder to top up if your balance falls below 200 credits.
    • Cutout.Pro's headshot cropping feature is suitable for human portraits and pet photos like dogs and cats.

  1. Go to the Preview Settings tab to upload the background image.
    1.7.png

  2. Click Save. Then, visit your store to preview the settings. 
    1.8.png

  3. Toggle on the Enable switch to activate the service. 
    1.9.png

 

Custom Effect on the Product Page
1.10.png

 

For detailed instructions, please watch the following video:

 

 

Creating Repeat Patterns on the Product

To allow customers to upload a photo that will be displayed as a repeating pattern on the product, use the Associated Options feature. The following instructions build upon the previous T-shirt example.

In the previous steps, you created a file named Upload Your Photo for customers to upload their images. We'll now modify this setup to create the repeat pattern effect:

  1. Click File upload to create additional files based on the number of repeated patterns you want. These files will be hidden on the product page, so name them for easy management, such as File A, File B, File C, etc.
    2.1.png

  2. In the newly created files (File A, B, C, etc.), go to the Options feature section and select Hide this Option.
    2.2.png

  3. Return to the main file named Upload Your Photo, find the Associated Options feature, click the Select Option box, and check File A, File B, and File C to link these options.
    2.3.png

  4. Go to the Preview Settings tab to adjust the placement of the images in both the main file (Upload Your Photo) and the sub-files (File A, B, and C) to your desired positions.
    2.4.png

  5. Click Save. Then, visit your store to view the applied repeat pattern effect.  
    2.5.png
     

For detailed instructions, please watch the following video:

 

 

Retrieving Image Files from Orders for Production

After a customer places an order, you can export the order details and find the necessary image files in the specified field to proceed with product production. To export your order details:

  1. Go to the Order tab in the Product Customizer & Bundle Builder app.

  2. Select the order to process and click Export the order report.
    3.2.png

  3. In the exported order report, locate the Customized product information field. The URL for Rendered Image is the photo that has been cropped or had its background removed.
    3.3.png

For other methods of exporting orders and details about retrieving image information, please watch the video below: