How to build a personalized/custom shoes product on Shopify (Product options and variants)

Shopify apps used in this Template

You’ve probably seen popular shoe brands like Nike, Converse, and Vans offering custom shoe options where customers can personalize every part of their shoes, from the sole color to the logo color and even the shoelace color. They can even embroider their names on the shoes.

People love customized items because it makes the product truly their own. In this video, I will show you how to create a personalized shoe product on Shopify, allowing customers to select the shoe logo color and sole color. You can use this technique to create more detailed custom shoes or any other products like watches, bottles, t-shirts, dresses, and more.

Let's delve into the process and explore how it works.

(You can also check out the demo product at the end of this blog.)

Steps to build a personalized/custom shoes product on Shopify.

1. Install the App

2. Select a Template or add new product Option 

  • You can use a template to speed things up or create options from scratch.
  • Choose the product you want to customize. You can select a single product or multiple products.
  • In this specific example, you need to add two types of product options: a color picker and color swatches. If you want to offer any color, I suggest using the color picker. However, if you have a few specific options, I recommend using color swatches.

3. Create conditional logic

  • We don't necessarily require conditional logic for this example. However, if you wish to offer additional options and display choices based on customer selections, then conditional logic can be utilized. This setup is beneficial if you have a long list of customizable parts. When the customer clicks on a specific part, the color swatches will appear for that part only.

4. Enable Live Preview

  • Enable the live preview feature in the app settings. 
  • We are going to create two layers and connect them with the respective product options. First, we'll add two PNGs: one for the sole and one for the logo. These PNGs should be pure white so they can be turned into any color. Place these PNGs in the correct areas on the product. When a customer selects a color, these PNGs will be converted to that color. For more details and a step-by-step explanation, check out the video where I demonstrate this process.

5. Activate and Save

  • Once everything looks good, save your changes.

And that's it! 

Now your customers can customize their shoes. And they can see live preview of the changes in real time.

Happy selling!

Shoe colorize

Example template with a shoe where parts of it can be selectively colorized


Q: What are the benefits of using PNGs for customization?
PNGs (Pure White) allow you to create layers that change color based on customer selections, such as the sole and logo of the shoe. This ensures that every part of the shoe matches the customer's chosen colors.

Q: How does the live preview feature work?
Enable the live preview feature in the app settings to allow customers to see real-time changes as they customize their shoes, ensuring they get a preview of how their choices will look.

Q: Can customers add custom text or logos to their shoes?
Yes, customers can often add custom text or upload logos to personalize their shoes further, enhancing the customization options.

Q: Do I need any coding skills to add this feature?
No coding skills are required. The Live Product Options App provides user-friendly tools to set up the feature without needing to write any code.

Q: What if I encounter issues while setting up the feature?A: If you encounter any issues, you can refer to the app's support documentation or contact our customer support for assistance.