Product customizer app for Shopify

Shopify Custom Product Customizer App – Sell Personalized Products

Categories E-commerce | Shopify

According to a recent survey on consumers’ experience with personalization,

90% of the online shoppers find it appealing,
while 80% of consumers are more likely to make a purchase.

The data is claimed by Epsilon, the global leader in understanding the relationship between brands and people. For obvious reasons, while the whole world has access to the same set of products you are more likely to have something that your neighbor already owns. At this, consumers will always look up to brands that offer more customized options for those products.

Personalization is one method that makes your online purchases unique. You can provide your users with a variety of options to select from like material, color combinations and more. Consumers have the freedom to own products with a personal remark of their touch. A vendor can thus gain a dedicated customer base that finds them before reaching out to the ready-made solutions. 

Mission Bicycle sets one such example where the consumers can select the color combination for their bicycles. They can choose any color for the frame, the rims and the grips making their purchase unique. Above all, they can preview it live on the website before owning it.

customizing-cycle-online

Needless to say, the feature can work as a magnet not only for gathering new consumers and engaging them longer in the store but also encouraging them to make repurchases in the future. Product customization as a feature can be introduced to any store, especially when the product is either a gift or a precious buy. It might thus vary from a pen to automobiles and everything a user would like to own.

Ecommerce development platforms like Shopify, BigCommerce, Magento, and Woocommerce have extended their support for the futuristic features that enhance your store’s capabilities by numbers. 

On a similar note, our expert Shopify developers had the opportunity to develop a product customizing application for one of our clients. The best part about this custom product customizer application is, they didn’t use any third-party extension and developed it using the Shopify backend only.

Need for developing a custom Product Customizer App for Shopify

The client owns a Shopify store that sells home decoratives like bottles, glasses and cutting boards with a touch of customization. The store offers a wide variety of custom designs in terms of calligraphy and the naming patterns. The store offered the merchant team with the desired customizations at every front. 

However, the store suffered a major flaw- it didn’t let the users preview the customization. As a result, the prospects weren’t quite sure about the final design. Of course, there were plenty of third party ready-made product builder apps in the Shopify app store. 

But then again, ready-made tools are often created keeping in the eye of the wider range of stores. As a result, the extensions often entail redundant heavy JavaScript codes that only hamper the page loading speed. That is where our client needed us for a custom-designed tool for Shopify product personalization.

The Brihaspati Infotech, through its decade worth of experience at understanding e-commerce businesses and their needs, understands the pain points of businesses and the most effective way to overcome them. We have done a similar task while developing a Bigcommerce product configurator.

This time, too, we had our ways to outshine the bottlenecks. Before that, let us first stroll through the features offered by our custom-built product customizer.

Features of Shopify product customizer tool

Being said that, it was clear that the business is thoroughly dependent on the user-controlled design and the experience it renders to the end-users. We thus had to make sure that every feature proves its worth.

→ The custom product designer tool has an easy to manage admin panel that allows the service providers to add sufficient features to their store with minimal efforts. 

→ The admin can upload images directly to the store

→ The store casts the uploaded image with the added benefit of live customization.

Here we upload an image for the letter K:

SVG-image-upload

To make things easier, we have used SVG images as they can be edited with ease. In one of our previous blogs, ECommerce Product Designer Using SVG, we have talked about the advantages SVG files offer for customizing products. 

We carried the same theory for this store as well. The store broadly offers two kinds of customizations:

→ An alphabet-major design

alphabet-major design

→  Design templates for special occasionsDesign templates for special occasions

The first kind emphasizes on an alphabet while there are texts and dates that can be customized according to the user. We thus have a fixed letter that works like the template with customizable fields for date and text.

Here is an example where the user can edit on an Alphabet-major design:

Customizing-letter-A

The seasonal design templates work quite similar where the consumer is allowed to personalize the texts and the date field. 

The SVG images uploaded by the admin are overwritten by HTML codes from the store with the user’s inputs. The product customizer tool extracts the customizable fields accordingly and helps it to showcase the design on the live store.

But how can the admin control that?

Categorizing the designs

The users can select various design templates for their orders. As shown in the picture earlier, the store has different designs for the alphabet-major templates. They vary in the following ways:

→ The font style

→ The overall design

→ The position of texts

We had the option to define the images for fixed products. But then again, that would have limited the user’s freedom to select the design of their choice. Thus, we came up with the idea of introducing the images under “Categories” and “subcategories”.

For example, here is an example where the store provides the same products with a slight difference in the extensions:

Implementing Designs

And that extension results in the change of designs. The admin can control these variations on his end by introducing the images under those extensions where they are further divided into the exactness of design. For example, here are two examples of the same letter, S for an alphabet major design.

Template for Letter_ S Extension_ K2

The product first decides the font and the design from the extension, here K2 or K3 which are defined for alphabet-based designs. The designs are further defined for each subcategory, here letter S. 

Save Alphabets

The final result

The final design is downloadable at both ends- the user as well as the business owner. The output result is in a high-quality BMP file. The design can be printed exactly as they are shown on the product page.

Customizing design

A product sample is shown with the exact design as customized by the consumer.

On the other hand, the seller too gets access to the order details. While the Shopify backend offers the information regarding the product and the design style, he can download the exact design from the Dropbox panel at the back.

Order details

That being said, our custom Shopify product designer app certainly rises above the noise. However, coming up with unconventional ideas and their implementation doesn’t come that easy. Our custom Shopify app developers had a good number of obstacles to overcome.

Challenges faced while developing the Shopify tool for customizing product 

Product images are created in two popular ways.

1.Raster media

2.Vector media

Raster media are easier to showcase as they are offline images, GIFs or videos. Vector media are, however, created via paths that are often dynamic and accept live instructions from the end-user. We have talked about 3-D product modeling in one of our blogs, where the customers can rotate the costumes in a live 3-D format.

The Shopify product customizer tool deals with the SVG format. Our purpose was to show it live on the product page and export it in BMP format. SVG file entails a known drawback with it especially when it is exported- the font mismatch. 

SVG files often fail to retain the texts and that had a clear effect on the desired customization. As a result, the added customizations didn’t reflect on the live store and the exported files.

Workaround to retain the fonts:

The SVG files were not to much support for the fonts, we used for designing which affected its display on the live store. We came up with the idea to introduce them manually. We included fonts to the SVG on Imagick libraries to add custom fonts.

As a result, the SVG file is rendered for live editing on the store itself with added benefits at the time of exporting them.

Apart from that, we had another bottleneck- exceeding the field length. The customizable text and date on the storefront are allotted a fixed field length. For obvious reasons, products can allow additional designs with limitations on space. They will look awkward after an extent. For example, the print allows a fixed space for the date, let it be 5cm x 1cm. The date format usually takes 8 characters including the special characters -> MM/DD/YY.

But what if the user opts for -> MM/DD/YYYY or an additional small text along with the date like “Est.”? Exceeding the field length was clipping the date, eventually disturbing the overall structure of the final result.

Workaround:

Keeping in mind that we have limitations in the text length, rather than increasing the field length, we came up with the idea of dynamically changing the font size. With every new character (Alphanumeric or special), we reduced the font size to fit them in the fixed area.

The GIF below explains it better how we managed to adjust texts longer than the defined field length:

Font-size-while-exceeding-the-text

That lets the user add sufficient customizations with the date.

We had a similar issue with the main text. Going by the same procedure, we adjusted the additional text in the given field. Here is a sample:

Font-size-while-Exceeding-the-name-field

Overcoming these challenges complete the tool as an ideal Shopify product designer. The merchants can readily integrate the app to their Shopify store and can let their customers make personalized products.

Final words on developing product customizer app for Shopify stores

Online buyers lookout for products that make them feel special and unique. With personalization, you can create a unique identity for your brand and services that might land you with a dedicated customer base.

With readily integrating tools like Shopify product customizers, you can make your customers experience online purchases like never before. That too, with a highly sorted back panel that makes your task much easier.

If your business has similar needs, you can have us contacted. Our expert Shopify development team saves the code layout that can be reused universally. This will save you time and effort from getting a Shopify product customizer tool developed from the ground up. Buckle up for an upgraded store with a simple mail.