Support customizable products like text engravings, personalized messages and more

Posted by SolidShops on February 29, 2012 at 11:12 AM

Clients love the ability to customize products and make them more personal. An example of a very successful business in this space is of course Nike, with their customizable NIKEiD program, which lets you build your own Nikes.

Not only can you choose the colors and materials used to fabric your personal pair of Nikes, you can also enter a custom text to personalize your pair of shoes to the max, which is awesome.

Now you can also use SolidShops to support customizable products in your store. Let’s take the example of Nike’s shoes above, to ask our clients for a custom text to stitch on to their shoes.

Of course you can use the same techniques mentioned in this article for a lot of other use cases, like asking what the preferred delivery time is for a specific order.

Asking users to customize a product

To start with, we need to edit our product template. Go to the design section of your store and selected the “product” template.

The tags used below can be added to any product template to ask a user for extra information. Whatever a user prefers to enter in those fields will be added to the order data in your store backend. You could also add this data automatically to your PDF invoice templates.

Let’s dive in:

We’ll ask a user to enter his or her custom text to be stitched on the shoes they’re buying, just like Nike is doing. To do so, add the following tags to your product template inside the form that will add the product to the shopping cart. This form should have your “Add to cart” button inside of it as well.

<label for="custom_text">What text should we put on your shoes?</label>
<input id="custom_text" type="text" name="item_attributes[custom_text]" value="Your text here" />

The important attribute here is name=”item_attributes[custom_text]”. You can use any other term instead of “custom_text” if you wish. The term you use to describe this extra information will be visible on the order details.

That’s it, the information entered in these text fields will now be automatically submitted to your shopping cart and to your order info if the order gets placed. When you view your order details in the backend of your store, you will see the text the user has requested to embroid on his or her shoes.

Asking to customize an order

Notice that we’ve customized a single product in the example above. This will allow you to let a user customize multiple products and add them to your shopping cart. For example, a user could buy three pairs of shoes and customize them all with a different text.

What we’re going to do now is a little different. We’ll ask a user for extra information about the complete order, not just about one single product. A good example here is asking what time a user wants us to drop of the order or to ask if we should gift wrap the order as a present or not.

To do so, edit your “cart” template and add the following field within the form tag of your shopping cart.

<label for="delivery_time">What's the best time to deliver this order?</label>
<input type="text" value="{{ cart.attributes.delivery_time}}" id="delivery_time" name="cart_attributes[delivery_time]" />

Presto! You are now able to grab extra information for an order.

Conclusion

You can add up to five custom attributes for products, as well as for your complete order. The names of the attributes you are using can be anything, but keep it simple for your own sake.

I’m curious what you’ll do with these additional product and order attributes, so don’t hesitate to post some creative solutions in the comments below! We really hope that this will help you build better stores for your clients. Good luck!