Picsart for Shopify

Empowering Shopify merchants with Picsart’s core technology and the power of AI.

Many creators rely heavily on multiple platforms to manage their personal and business requirements, often switching between platforms to access different editing tools and capabilities. To simplify this and give creators access to an all-in-one editing experience, Picsart launches Shopify App.

Picsart for Shopify

Shopify is a leading e-commerce platform and its millions of merchants need strong marketing assets and materials to remain competitive. Product promotion is key for successful growth and these product images require constant fine-tuning, which can often be a hassle. This is the motivation for Picsart to offer an app in the Shopify App Store, offering our intuitive and powerful editing tools to make this editing process more seamless for Shopify merchants.

Our first app release in October 2022 offers Crop, Resize, and powerful AI-based background removal features. There is more to come in subsequent releases. Excited to give our app a try? We’re offering a 7-day trial version with unlimited creative experiments!

Technical challenges & best practices to build Shopify app

In building “Picsart for Shopify”, we wanted to share what went into the app development with our community. Here is the system-level diagram.

Bulk Image Processing for Crop & Resize:

Shopify natively supports image crop and resize. However, the lack of bulk image processing limits its store owners’ ability to process multiple images at the same time. This means Shopify doesn’t have out-of-the-box bulk image processing features, requiring an app builder to manage bulk image processing within the app. With this in mind, the following options were considered:

Option 1: Send all images to the app backend and send the processed images back to the front-end.

Pros:

• Less number of network calls (one call for one batch of images)
• Limited usage of client resources
• Easy to debug
• Easy to scale

Cons:

• Wait for the completion of batch processing
• Every image edit required iterative calls and image downloads at the client that would slow down depending on the network bandwidth

Option 2: Process all image processing in the UI.

Pros:

• One time image download only and all other image edits would be processed on the earlier downloaded image
• No or limited network calls

Cons:

• Heavy front-end processing
• Consume more client resources

In order to limit the number of network calls, we selected Option 2 to handle bulk images processing.

Bulk Image Processing for Background Removal:

The background removal feature followed a different approach than the Crop & Resize tools. The earlier approach led to multiple network calls with iterative Remove Background API calls for each image. This approach slowed down the overall performance. Hence, the complete processing was moved to the backend as a single API that leverages piscart.io API (any app developer can use this API) that handled all images processing. This bumped the performance by 2x with one network call, instead of many network calls.

Enable bulk update:

Shopify doesn’t have any API to support bulk image updates to the products. This is handled in the UI with iterative calls to update each image.

Authentication

Session token is used to maintain the authentication. It is the standard and safe approach to consider, though browsers support token management using local storage.

Tech stack: React, Express, Node, java, mongo, Picsart’s Core Technology, picsart.io APIs

Author: Gowtham Potnuru

Team: Nehal Handragal, Anurag Mishra, Shruti Jindal, Gowtham Potnuru Hrach Tamrazyan