Developer Headache: Customizable Products in Shopify

Sounds like a challenge, right?

Especially if you are a technical person, and you know how Shopify handles products and variants.

Shopify as a platform works very well when it comes to delivering easy-to-use and out-of the-box solutions for merchants who are looking to start selling. They honestly do amazing work. Users can adjust themes, integrate apps, populate products and start selling within a single day, which is really really impressive. However, there is one thing that Shopify struggles with since I started working with it, and that is customized and personalized products.

What is this dev talking about?

To describe the problem properly, let’s assume you sell clothing.

As long as your products have simple and predefined options, like Size, Color, Material, etc, and you have price for each one of them, you’re good. Shopify allows you to have up to a 100 different variants of a product.

You can do even more. Want to offer engraving on the bag? As long as it’s free, you can do it without any technical difficulties. The way to handle it is simply to use custom properties in product HTML form.

The actual problem

The problem begins when you have a customizable product, and its price varies based on input.

Let’s say you have the same product with the same engraving option, but each letter costs $2. How do you handle this?

Well, you can try to leverage product variants. From a code perspective it’s technically possible to use product variants to achieve acceptable results. However, in the long term, this solution will be limited, expensive, and not very flexible. This is where a developer would be needed.

Apps to the rescue

What other options have we got? Well, we’ve got Apps.

There are plenty of plugins that offer solutions for this problem. In my career I worked with a lot of them, and sometimes the way they handle the problem is let’s say… unordinary.

Some of them create special addons with a price of a single cent (!). When customers customize a product, they multiply that special addon many times, to cover the price difference for personalisation.

Does that sound ridiculous? Wait.

The problem appears when you try to remove the product from the cart/push-cart.
There are plenty of Shopify themes out there, and each one of them handles the cart differently. Some of them also have Ajax carts with Ajax code inside the theme.

There is no easy way to remove those 1 cent addons from the cart, sometimes apps don’t handle it at all. For instance they might inject code into the theme, and that causes more issues than it helps. These apps often even require disabling ajax cart. Wrrr.

And, of course, the checkout. You will spot that 1 cent addon, multiplied by 65x, 72x, etc. This doesn’t look good, and the format is not exactly clean.

So this solution is a “no no”.

What else have we got?

Some apps create variants, when you’re setting them up. They will create and attach variants with options to the specified product. But, there are also limitations here. Do you remember about 100 variant limitations I mentioned earlier? These apps are also dodgy, they often throw errors, and do not let you create what you want, ehh…

Solution – Headache pill

There is one app that handles it slightly differently. And that is Dynamic Product Options. The way this app works is that it also creates variants inside Shopify, but it does this when the customer selects the options and adds the product to the cart. It also deletes old variants when needed or after a certain period of time. It attaches properties of the customized product as custom properties, so the client knows what options have been added. Furthermore, it allows you to edit those options on the cart page and inside a pop-up. Impressive right? But wait, there’s more.

The app allows you to create different fields, like radio buttons, text areas, select, range sliders, etc and apply prices to it. You can set them to be required, you can even hide/show them based on other field options!

It also allows you to add description to fields, add image swatches, classes, tooltips, HTML arguments etc.

If you need more than one similar field, it allows you to duplicate the whole field easily. You can group fields together and save them as templates, then you can apply that specific template to the products you want.

Not enough for you? You can go one step further and define your own price formula. This is a big deal, and let me explain with a few examples why.

Let’s say you have a pricing table of curtains, based on width and height. Using a price formula with syntax similar to JavaScript, you can write a pricing table as an array of arrays, and then refer to the correct price based on the width and height options. Basically, as long as you follow syntax, the limits here are only your imagination.

Summary

Dynamic Product Options app is basically limitless. It targets the issue of customized products perfectly, and allows you to do wild things with products. Half a year ago, when someone would come to me with a highly customizable product they wanted to sell, I would recommend a different platform. Not anymore. Dynamic Product Options lets you do things you couldn’t do earlier, and opens new doors of possibilities for Shopify Merchants.