Color Swatches
5 min read

How to Create Customizable Products in Shopify

Deborah Mecca
April 6, 2023

Today’s world is powered by instant gratification and ultimate customization. No matter what you want, you can find it online. That means if your store doesn’t offer highly detailed product options tailored to the customer’s needs, you’ll likely lose out to the competition.

It’s hard to overstate the importance of customizable products to e-commerce … or to the online store owner. If you have a Shopify store, you already know this, and are likely a bit (or a lot) frustrated by Shopify’s limited options.

The truth is, Shopify’s customization features are minimal indeed, and it’s simply unrealistic to create a new SKU or product for each variation of size, color, design, features, and so on. Luckily, you have a couple different options for offering your shoppers customizable products: either by manually creating hard-coded product templates with HTML, CSS, and JavaScript, or by using an easy-to-install app that allows customization options to be added into your product listings, easy as that.

Spoiler: using the Product Options and Customizer app is the easier route here.

If you’re wondering how to create customizable products in Shopify, you’ve come to the right place. Let’s take a look.

Why Custom Product Options Drive Sales Growth

Simple: if you can’t offer a range of product options and variants in your e-commerce store, you’re limiting the customer experience. Whether it’s t-shirts or towels with a monogram, you need the ability to give the shopper what they’re looking for without having to manage thousands of product listings on your end.

Offering personalized products makes for a better user experience on the customer end as well, because they don’t have to wade through heaps of options to find what they really want. Using custom fields and live preview functionality, they can find what they need quickly and know what they’re getting upfront. This leads to higher conversion rates, increased sales, and reduced returns. And if you use the right tools for customizing your products, you can even:

  1. Apply settings to large volumes of listings at once
  2. Quickly update your customizations using filter and search functions
  3. Create templates that save you hours of time by avoiding redundancy and the need to create listings from scratch
  4. Set character limits on shopper text fields
  5. Show or hide options with conditional logic based on the desired customer experience
  6. Increase revenue with custom options pricing based on listing settings
  7. Seamlessly integrate with cart sliders and drawers through AJAX

Clearly, product customization is your friend when it comes to selling items online. Let’s go over your more effortless option for allowing shoppers to customize your products.

9 No-Code Ways to Create Customizable Products in Shopify

Third-party product customization apps allow you to vastly expand the number of ways you can allow customers to personalize their purchases before buying—all without having to know a lick of code yourself.

A product personalizer allows you to create unlimited custom fields, giving you a product builder with no end to the customization process. Now you can sub out colors and images, enable your shoppers to upload files, use a wide variety of fonts to match your theme editor, create drop-down menus and space for text inputs, and much more.

Radio buttons, checkboxes, and per-option upcharge pricing round out the fantastic range of functionality you get when you use a third-party customization tool, helping you build your brand and make more sales for life. Let’s take a closer look at your options.

1. Color and Image Swatches

One of the best ways to add customization to your variants in-store is to let your customers choose from different images and colors. Displaying swatches on your products shows people exactly how something looks before they buy it, so they don’t have to wonder. It’s no surprise that doing so helps shop owners increase sales substantially.

Color swatches are pretty common among big retailers, but less so among individually owned shops. This gives giant corporations a distinct advantage over smaller e-commerce store owners – but now you can combat that advantage. And adding image swatches really takes it to the next level.

Extra good news: these options are easy to template and apply to all your product designs and options. When you spread this capability out over dozens of listings, it saves you hours (if not days) of adding functionality to listings. You can save those templates and adjust as necessary, so you never have to do all that legwork again.

Color and Image Swatches

Color and Image Swatches

2. Calendar Date Selector

Some of the most important orders people place are on time crunches. Invitations to a party, flowers for a dance, or the perfect gift for an upcoming holiday or anniversary — these types of orders are all time-sensitive, and customers want your help meeting their deadlines.

With a calendar date selector, you can do that. The plugin allows you to display a calendar for buyers to select their delivery date requirements, ensuring that both you and your customer are on the same page in regard to delivery timing needs.

Calendar and Data Selector

Calendar and Data Selector

3. Google Fonts Picker

Font choice can have a huge impact in any design. When customers have a specific idea in mind for their custom project, they’re going to want your Shopify store to be able to deliver. Now you can, with the Google Fonts Picker from the Product Options and Customizer app.

Using the Google Fonts Picker tool allows customers to insert their own text, choose the perfect font from a huge array available through Google, and see how it will look on their products before purchase.

4. Custom File Uploads

Allowing people to upload their own product image is the ultimate customization. Unfortunately, in many cases, customers had to simply upload their personal photos or brand logos with no preview or visualization feature to confirm the right look was achieved. It was only when their customized products arrived on their doorstep that they realized the design either matched their intent ... or didn’t.

Now, with custom file upload capabilities available for your Shopify store, those days are gone. Shoppers can upload their own designs and see how they’ll look on your products before they hit “checkout,” leading to happier customers in the long run.

Custom File Uploads

Custom File Uploads

5. Drop-Down Menus

While it seems that dropdown menus is a very basic UX function across many retailers’ online stores, it is woefully underrepresented in Shopify functionality. Still, it’s a critical component for anyone offering more than one choice in a listing.

Luckily, using a product customizer app allows you to add that functionality with a simple app install. Once you do, you’ll be able to add dropdowns to all your listings, condensing what might have been dozens or even hundreds of combinations into a single product listing.

The end result is a set of parameters from which shoppers can choose, giving them flexibility when designing their product – not to mention saving them the agony of hunting through hundreds of listings when they’re busy.

Drop Down Menus

Drop Down Menus

6. Text Inputs

Sometimes, no matter how many customization options you offer and product details you list, it’s not enough. When that happens, you need a way for the customer to write their own words, which is where text inputs come in. Single-line text and paragraph inputs give you even more customization about how to display text on a product.

Not only that, but your customer can see how their text looks on the product right away. Combined with the font picker and their own unique words, the result is a highly tailored item they couldn’t find anywhere else.

Text Fields

Text Fields

7. Radio Buttons

Adding radio buttons to your product pages provides great control over user behavior without having to give a ton of instructions or set extra parameters. A radio button works by giving customers a list of options but only letting them choose one of them. For instance, if you want people to choose a size for a t-shirt, you will limit them to a single option: small, medium, large, extra-large, etc. This goes for any set of options where they must make a single decision.

Don’t assume, however, that this is the only way you can provide options to the consumer. Checkboxes are another option.

Radio Buttons

Radio Buttons

8. Checkboxes

Unlike radio buttons, which require the shopper to pick a single option, checkboxes offer “all that applies” functionality for your listing. So for example, if they were customizing a sweatshirt, you could allow them to check off choices such as hoods, drawstrings, cuffs, and front pockets. They can choose whichever ones they like, leading to a uniquely personalized item that meets all their needs.

Best of all, both radio buttons and checkboxes are totally compatible with Product Options and Customizer app templates. That means if you have a design you will use in largely the same format over a variety of listings, you can make a new template that then becomes the product template for all similar listings. Each time you use the create template function, you add it to your list of go-to options for later.

9. Per-Option Upcharge Pricing

Sometimes add-on customizations become spendier than you can afford to offer for free. That’s where per-option upcharge pricing comes in. With this helpful upgrade to your Shopify listings, you can let your customers tailor their items to their heart’s content, but pass on the extra cost of customizations to them. They’ll see upcharges while they’re working, so they have the ability to ensure that everything fits within their budget.

Per-Option Upcharge Pricing

Per-Option Upcharge Pricing

How to Manually Customize Products in Shopify

If you’ve got the chops for HTML, CSS, and JavaScript coding, Shopify does allow you to customize your product pages and checkout options by editing code.

You can find code snippets to use by doing a quick search online for various types of product customization HTML code, especially for elements such as text boxes, checkboxes, radio buttons, monograms, and more.

Once you’ve found the code for the elements you’d like to add, follow these steps to manually create customizable product functionality on your product pages:

Step 1: Create a New Product Template

  1. Go to Online Store > Themes > ... > Edit HTML/CSS
  2. Navigate to the Templates folder and click “Add a new template”
  3. In the pop-up window, select the dropdown for creating a new “product” template, then give it a name.
  4. Click “Create template”

Step 2: Add Code for Each Form Field You’ll Include

  1. In the Products section of your Shopify dashboard, open the product that you’d like to customize, and select your new template from the “Theme templates” section.
  2. Search for the “Add to Cart” button code and add a few lines of extra space just above it.
  3. Insert the following code:{% if template contains 'custom-1' %}[ADD YOUR CUSTOM CODE HERE]<style>.ep_inline_block {display:inline-block;vertical-align:middle;margin-left:10px;}.ep_block {display:block;margin-top:10px;margin-bottom:2px;}</style>{% endif %}
  4. Save your changes for this product.

Step 3: Update Your Cart Page

Test your work so far by navigating to the product page you’ve been working on and attempting to make product customizations. Add the customized product to your cart, and look to see if customizations are noted in your cart page. They will appear for some Shopify themes, but in others they may not. If your product customizations don’t appear on the cart page, follow these steps:

  1. Navigate to your theme editor and open the “cart.liquid” template.
  2. Find the line containing {{ item.product.title }}, and add the following just below it:{% assign property_size = | size %}{% if property_size > 0 %}{% for p in %}{% unless p.last == blank %}{{ p.first }}:{% if p.last contains '/uploads/' %}<a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>{% else %}{{ p.last }}{% endif %}<br>{% endunless %}{% endfor %}{% endif %}
  3. Find the <a href=”/cart/change...”>Remove</a> link code it with:<a href="/cart/change?line={{ forloop.index }}&amp;quantity=0">Remove</a>
  4. Find every instance of the code updates[{{ }}] and replace it with name="updates[]"
  5. Save your changes to the code.

Step 4: Customize Order Confirmation Emails

  1. In your Shopify dashboard, go to Settings > Notifications
  2. Open the Order Confirmation email template and navigate to the Plain Text tab.
  3. Find the code {{ line.title }} and replace it with:{{ line.title }}{% for p in %}{% unless p.last == blank %} - {{ p.first }}: {{ p.last }}{% endunless %}{% endfor %}
  4. Navigate to the HTML email tab and repeat the process. Find the code {{ line.title }} and replace it with:{{ line.title }}{% for p in %}{% unless p.last == blank %} - {{ p.first }}: {{ p.last }}{% endunless %}{% endfor %}
  5. Repeat this process for any other emails that should contain customized item properties.

...Of course, if all of this seems to be just a little much, no one will blame you for using an app to overcome Shopify product variant limitations.

Installing the Product Customizer App on Your Shopify Store

Now that you know the various ways that you can create customizable products in Shopify, and the reasons why you’d want to do it — i.e., boost sales, build your brand, and increase product personalization options — the next step is doing the work to make your products customizable.

For manual code editing, that means simply getting started via the steps described above. If you’re wanting to work smart, not hard, then simply download the Product Customizer app from the Shopify app store and install it on your site. Follow our easy-to-understand tutorials and installation instructions, and get started customizing your Shopify store’s product pages, checkout options, and more.

You can also rely on an entire knowledge base covering everything you need to know about setup, customizations, troubleshooting, and general information.

Curious what others have to say about the Customizer app? You can check out the app reviews page now or check out our demo at any time. And if you’re ready to get started pronto, then there’s no need to wait any longer … start your free trial today!

Start Your Free 14-Day Trial for Product Options and Customizer

Start Your Free 14-Day Trial for Product Options and Customizer