Developing a Print-on-demand Extension for Magento 2

Gone are the days when you had to wait for days to get your pictures printed from a local shop and hop in the market to get them framed for making a safe keep of memories. With the evolution of eCommerce technology, even your printing and framing woes can easily be resolved online. 

Now you don’t have to look for shops in the market to get a picture printed and framed into the quality and dimensions of your choice. As there are amazing stores online where you can choose all that you need to get a perfect frame for your walls from the comfort of your couch.

Recently our expert Magento developers got a chance to work for a client who offers print-on-demand services with his Magento store. This eCommerce store manufactures framed pictures, where the customers have the choice of choosing their frames, mats and paper quality to generate their final product and get them delivered at their doorsteps.

We created a custom picture framing extensions tool solution in Magento 2 that perfectly aligns with the print-on-demand businesses on Magento 2.

Need for Custom Print-on-demand Magento 2 Extension

Our client wanted to have a tool that would enable his customers to place an order for framed images and prints. Further, he wanted to provide a preview of how the final product will look in reality on-screen with their choice of frames and mats. He wanted the following functionalities in his eCommerce store in order to provide his users with the best online experience of buying framed pictures:

• A page where the user can upload the desired image to be framed along with the option of removing and editing it.
• Modules for printing simple paper prints and getting pictures of choice in a frame along with a drop-down to select the print size of the image.
• Different customization options of frames, mats, paper quality, and colors to select from, which will be visible to the user on-screen along with the final price.
• On the checkout phase, the client wanted the final product image to be shown along with the list of options chosen and the price before the customer proceeds for checkout.

However, there were no online tools available that would help in adding elements to uploaded images and generate a final product image from them. So, our developers decided to create a custom tool for Magento using PHP that would cater to the client’s requirements.

Key Features Integrated in Magento 2 Framer Extension

To cater to all the requirements mentioned above we decided to create a PHP tool from scratch for Magento. Further, we divided the requirements into modules which helped in the easy and efficient development of the features required by our valuable client:

Drag And Drop Image Uploader

The first step for the customers in it was to choose the image they want to get framed. For this, they have to choose the picture of their choice with the minimum dimension being 1499*1499 and the format of that image being PNG, JPEG, GIF or BMP.

After successfully uploading the image they also have an option to edit their photos as well by clicking the edit button. In this section, customers can crop and rotate their images to get the desired picture they want to print or frame. Further, if they wish to choose another image they can even remove the previously uploaded picture before choosing a new one.

Print Paper Module

After the user has finished uploading and editing their picture of choice they can either choose to get it simply printed or framed. To get it printed they’ll have to choose the “Print Only” option on the screen.

On choosing the print only option users will further be guided to make their choice regarding the image dimensions and paper quality. They can choose the dimension of the image from the options mentioned in the drop-down. Further, the user will also have the freedom of choosing the type of paper they want to use to dictate how their print would look.

The price is estimated on-screen according to the choices made by the user before the checkout. On the Checkout page, the product image is generated along with all the information and price. Here the user can further choose the number of prints required before filling their details and making the payment.

Frames Module

Apart from getting the images printed, customers can also get their paintings framed in their choice of the frame using the Frame Print option. After clicking on the Frame Print button and deciding the dimensions of the print the user is taken to another page with the uploaded image in its product image section. Here they can choose the frames, glazing type, and dimension.

On this page, after selecting the type of frame, mats, glazing type, and paper quality they want for their image and see a live preview of how it would look on the product image section.

Moreover, for those in love with details, this page also lets its users view the enlarged version of the frames they have chosen with a detailed view of the edges to provide better clarity.  Also, they can see an enlarged view of the generated live preview as well to be sure of their choice along with the on-screen display of the estimated cost before proceeding further.

Image Generation on Checkout

After choosing the frames and prints to proceed for making payment users are supposed to add the product into the shopping cart. When a user adds their product in the cart the page generates a configurable product image which is shown in the checkout phase along with all the choices made by the users before proceeding to the payment phase.

For the checkout process, we have used a simple Magento checkout facility that is easy to use and provides the customer a smooth checkout experience.

Backend Admin Module

Our custom framing tool not only caters to the easy shopping experience of customers it also makes sure that the merchants could also manage their store easily from the backend. For this, we integrated modules where the merchant can regulate the availability of frames and other products along with customizing the pricing as well. 

To let the merchant manage their material’s features on their online store we created the Material stock management feature on the backend. With this feature, you can create alterations in the properties of the frames in your online store from the backend. This feature of the admin module also lets you decide the molding width of frames independently. Therefore through this, you can manually give the molding width of each frame visible in the frontend and govern the properties of your product.

Also, we have created a functionality where you can alter the properties of each of your frames, mats and other accessories with ease. This feature allows you to manually manage all the attributes of mats, paper type and glazing type from the admin section.

Final Outcome

Finally, after combining all the modules and rigorously testing them, we were able to create a Magento custom picture framing tool solution. In this, the user gets a live preview of how their picture would look along with the choices they made. Also, instead of suffocating every picture to preselected combinations, in this tool users had the freedom of making their own selection and creating a product that would reflect their own personal style.

Moreover not only we decided to provide a smooth user experience to store’s visitors, but we also made sure to provide ease of management to the merchants as well by providing them functionalities to maintain their material stock and attributes on the admin panel. 

However, the journey to the successful launch of the custom Framing tool wasn’t a piece of cake. Our developers faced a number of dilemmas while creating this unique solution.

Challenges faced while developing the Framing extension for Magento 2

Although our Magento developers are quite adapt to creating custom solutions, the Custom Framing tool was a unique project to them. On their journey to creating this tool they came across following speed breakers:

• Creating the live preview: To enhance the user experience and give customers an online experience equivalent to 3D shopping, a live preview was a must. However, unlike normal customizers where the default product already existed before applying customization here, we needed to fetch it from the previous page. We overcame this challenge by using the HTML Canvas which enables us to fetch the image in HTML format and allowed users to generate the live preview.
• Final Product Image generation: The next challenge for our developers was to send all the preferences chosen by users to the backend while generating a product image for the checkout phase. For this, we designed our tool such that when the user clicks on “Add Cart” a configurable image is generated for the backend with the details of all the specifications made by the user.

After facing every issue head-on,  we were finally able to successfully create the Custom Framing Tool with the creative and innovative skills of our developers.

The extension in itself was path-breaking. Our solution gained the right traction as we were regularly approached by business owners to update it for their businesses.
By July 2021, the extension serves 30+ Magento 2 stores across the globe.

Conclusion

The eCommerce market has become all about providing a realistic and relevant shopping experience to users. Tools such as custom Framing, which enables users to see a live preview of how their choices would look in reality can help you in building a trust factor with your customers.

While giving a realistic shopping experience to your customers can help you in increasing sales, a customized easily to manage backend will aid you in saving time as well. In the past also our dedicated Magento developers have created a variety of customized solutions to provide a realistic shopping experiences such as 3D Product Visualisation to enhance sales. Such solutions not only make it easier for the user to shop, but it also gives your click store a better competitive edge as well.

If your online business has similar requirements for providing a realistic user experience, you can get in touch with our expert Magento developers anytime or you can connect with us through our Contact us section as well.