News & Updates

Sign up to get the latest
on sales, new releases
and more

We will never spam you.

Product Personalization in Shopify

A guest article by MageWorx, developer of Advanced Product Options,a solution for product options optimization.

Imagine if each visitor who comes to your Shopify store could get a completely personalized shopping experience. The experience customized to their demands, requirements, and needs? Wouldn’t your store be an amazing place, where everyone could find what they actually want?

Personalizing shopping experience is one of the cornerstones of eCommerce success.

The stats speak for themselves:

  • 59% of shoppers are convinced that retailers who offer product personalization are more likely to provide them with the exact version of the desired products,
  • 53% believe that online stores with product personalization are more customer-oriented, supportive and provide better services,  
  • 56% of customers usually come back to a website that recommends products,
  • and 45% are more likely to finalize a purchase on such a website.  

Being one of the most flexible eCommerce platforms, Shopify lets merchants create customizable offerings by adding product options with multiple variants.

Say, in case you sell iPhone covers, it’s possible to add such options as Color, Print, Material and equip them with a range of different variants (e.g. leather and silicon for the ‘Material option, etc.).

Also, the Shopify App Store, one can find some 3rd party solutions that extend this default platform’s functionality.

This is how a personalized product may look like in a Shopify Store: 

Read on to figure out how to:

  • Personalize offerings by adding options/ variants for new and existing products,
  • Overcome the product personalization limitations set by Shopify,
  • Add conditional logic to different types of product options.   
Adding Options and Variants for New and Existing Products

The process of adding product options and their variant is pretty easy and doesn’t require advanced knowledge of the platform. Using the default settings, you can quickly add 3 product options, and up to 100 their variants.  

To create a new product with options, follow the steps below:

  1. Go to ‘Products’ and hit the ‘Add New Product’ button,
  2. From there, (after you fill out all the request fields) scroll down to the ‘Variants’ tab,
  3. Here, you can define the option’s name and enter its values (comma separated),
  4. To add more options, click the ‘Another option button’
  5. Also, next to each option, you can identify its unique SKU and barcode,
  6. When done, click ‘Save’.  

Note that you can personalize each product option in particular. For each variant you can add its individual price, SKU and barcode.

Existing Products

To add/ edit variants for any existing product, select it from your ‘Products’ list, and jump to the ‘Variants’ section. This is the place where you can:

  • Change the option’s name,
  • Edit the variant’s price, SKU and barcode,
  • Adjust the current order of product variants (using drag and drop),
  • Reorder options sequence,
  • Delete unneeded option variants,
  • Duplicate all the existing variants in bulk,
  • And more.

Important

Before you get down to creating a new product or editing the existing ones, bear in mind that Shopify won’t let you add more than 3 options per product.   

For example, if you sell T-shirts, you may add such options as of size, color, and print. Within these three options, it’s possible to add up to 100 total variants.

That would be like 4-5 choices for each of the chosen options.

This amount is sufficient for some Shopify stores. However, if you have a diverse range of products with custom options, you’ll need to find a workaround solution or get an app that will let you overcome these limitations.

Overcoming Shopify Product Options Limitation

Unfortunately, this Shopify limit cannot be raised for an advanced account or a more expensive plan.

So to cope with the abovementioned challenges, you have to get a working 3-d party solution.  

The App Store offers about a dozen of different solutions for product options optimization. One of the most advanced and highly rated apps is Advanced Product Options app by MageWorx.  

This is how it works.  

  1. After you’ve installed an app, go to the settings and hit the Create New Template button,
  2. Create a new Template following the instructions here,
  3. When done, select one of the nine available input types: text field or area, file, check-box, radio button, drop-down, multi-select, Swatch or multiple Swatch.
  4. At the next step, you need to set custom option’s values and define a price of any option’s value, add its title, description and specify a sorting order.
  5. Finally, select the products to assign this template to.

 

Also, the app lets you add images for any option and set various types of dependencies. The next part of the article will tell you how to do that.

Conditional Logic in Product Personalization

You must have heard this term, right?

If you haven’t, and this sounds like something completely foreign to you, here is what Conditional Logic means.

Imagine, each option has its own image and you want to replace with it the main product picture if that certain option is selected. Or say you need to display custom product options only if shoppers select the main one.   

All this eCommerce ‘if-conditions’ are called Conditional Logic. Adding it to product custom options is a great way to personalize your offerings.

The default Shopify lacks this functionality but providing you have coding skills, you can create some basic option dependencies on your own.

Here is how to.

To manually create a simple dependency in a Shopify store, you need to enter a custom code inside of the html tag <form> in Sections/product-template.liquid.

Note, that in order to make products appear in cart, the Shopify attribute <name> should be in the properties[Option Name].

This is an example:

 <div id="first_option">
              <label for="properties[My First Option]" class="label">First Option</label>
              <select name="properties[My First Option]">
                <option value="Value 1" selected="selected">Value 1</option>
                <option value="Value 2">Value 2</option>
                <option value="Value 3">Value 3</option>
                <option value="Value 4">Value 4</option>
              </select>
            </div>
            
            <div id="second_option">
              <label for="properties[My Second Option]" class="label" >Second Option</label>
              <input type="text" name="properties[My Second Option]" placeholder="Second Option Text" />
            </div>
            
            <div id="third_option">
              <label for="properties[My Third Option]" class="label" >Third Option</label>
              <input type="file" name="properties[My Third Option]"/>
            </div>

At the next step, you need to create a JS file in the Assets folder. You can name it options-product-dependency.js, for example.

Next, write the jQuery code that will create/manage dependancies starting from the 1st product option. This is how to:       

jQuery(document).ready(function () {
  // hide elements on page
  jQuery('#second_option, #third_option').hide();
  
  // add onChange event to First Option select
  jQuery('#first_option select').change(function () {
    if (jQuery(this).val() == 'Value 2') { // if First Option select value equals Value 2, show Second option
      jQuery('#second_option').show();
    } else {
      jQuery('#second_option').hide();
    }
    if (jQuery(this).val() == 'Value 4') { // if First Option select value equals Value 4, show Third option
      jQuery('#third_option').show();
    } else {
      jQuery('#third_option').hide();
    }
  });
});

In the code example above, we’ve set the following dependancies:

  • With the default option variants, 1st and 3d product option values won’t be accessible

  • This is what happens if you select value 2 for the 1st option

  • Amp this is what you shoppers will see in case, they’ve selected value 4 for option 1

 This is what customers will see in the shopping cart.

And finally, you need to add this fine to you Shopify theme. Do do that, option Layout/theme.liquid. and in the html tag <head>, add the code:

{% if template contains 'product' and product.handle == 'product' %}
<!-- If Shopify template = product page and Handle of your product is 'product' add asset script options-product-dependency.js -->
    {{ 'options-product-dependency.js' | asset_url | script_tag }}
{% endif %}  

That’s basically it.

 Please note, that this method of adding custom option dependencies is pretty difficult to implement. Also, it lets you create only very basic product option dependencies.  

This is when Advanced Product Options can be of great help. It can help you in setting conditional logic rules for any number of options.  

With the app you can:  

  • Set various types of product options dependancies,
  • Add a specific price for each option, and display it only if a certain option is selected,
  • Replace the main product image with one of the custom options,
  • Set any product options as required, so customers won’t be able to purchase products without selecting the required options,
  • And a lot more.  

To add Conditional Logic for your product options, follow the instructions given in the app’s User Tutorial.

This is how it works.  

Say, for red crocs you have 9, 8 and 7 sizes, while for the blue ones you can offer the whole range of available sizes. Thus, depending on a customer’s choice, you can display different available options.

Bottom Line

That’s basically how you can personalize your product offering using the default Shopify functionality and 3d party solutions.

Have you tried to personalize products in your Shopify store? Feel free to share your experience in the comments.

 

 

Build a Thriving Ecommerce Business.


Get our free 5-day crash course and we'll teach you how to avoid the most common mistakes when building a thriving ecommerce business.
Don’t worry about spam.
We don’t like it either

1 Response

David Giles
David Giles

May 04, 2017

We’ve been using the MageWorx app on our site (www.thebeltman.net) for about two months now and it is AWESOME! Their tech support has been top notch and they listen to suggestions for improvements (they’re working on one right now for us). Highly recommended!

Leave a comment

Comments will be approved before showing up.