How to Setup and Configure Advanced Product Options in Shopify

What are Custom Product Options?

Generally, these are extra product variants that help diversify eCommerce store offerings, make them correspond to various shoppers’ requirements. E.g. that can be different variations of a product’s color, size, storage, material and whatever other characteristics a product may have.

Each product option can have its own name, price, SKU, image, dependent on/ independent of the other product options, etc.

With the out-of-the-box Shopify functionality you can add variants (options) to any product. Also, you can specify a variant’s name, prices, some of the other values:

Variants in Shopify

… and that’s basically it.

Unfortunately, with the default features, it’s impossible to set variants’ (options’) dependencies, display their images or add the ability to select their colors.  Also, when adding product variants, you’ll have to apply option variants to each product separately, as there’s no bulk-apply functionality.

The lack of these and other features can be a challenge for Shopify store owners. Especially for those, who are selling a big number products and their variations.  Luckily, there are some 3d party solutions that can solve the above-mentioned issues and significantly extend the platform’s functionality.

Advanced Product Options is one of the most top-rated Shopify apps that is capable of dealing with the above-mentioned challenges.

This article will guide you through the process of setting up and configuring the app and tell you how to get most out of Shopify product options.

Let’s begin.

Creating a Product Options Template

After installing the app, navigate to the Admin panel . Open the Apps menu and launch the Advanced Product Options app there. Right from the next screen, you can begin optimizing your product offerings.

First, you can create custom options templates.

These templates allow you to add custom options (variants) to multiple products in a number of clicks. Thus, you’ll save tons of time, as with the default functionality you’d have to configure them for each product manually.

This is how to create product custom options templates:

1. Click the ‘Create New Template’ button to begin.

2. Fill in the name of the template and define its status.

Note that the status is switched to Active by default. You can always, however, disable any template by changing its status to Inactive. Also, you can duplicate any selected template using the corresponding button at the top of the page.

Now, we have a product options’ template and can go on with configuring its options.

Adding Product Options

To add a new option hit the «Add New Option» button.

Here, you only need to fill in the option’s title. The description  field is optional. Also, you can define the option as required/non-required. It means that the product can’t be added to cart when the option is not selected.

If you apply multiple options to a product you can set their sorting order.

Next, you need to choose the option’s input type.

There are 9 various ways customers can interact with the option. These are: text field and area, file and different types of selection. You can choose from the checkbox, radio button, drop-down, multiple select, swatch and multiple swatch. The input type depends on the option you want to create.

For example, you can create an option with a color or image swatch to add visuals to your product offerings. If you sell customizable products, you may let shoppers enter text or upload their own files, etc.

In a word, you can maximally diversify the ways customers interact with your product options.

When you define the input type, you can add values to your custom option. Each value requires a title. All other settings are optional. These are:

  • Price – sets the additional amount that will be added to the product’s price.
  • Description – shorten text description for each variant.
  • Sort Order – allows you to define the variant’s sorting order.
  • Default – marks one of the variants as default.

Note that you can add additional variants by clicking the ‘Add New Row‘ button and delete the unnecessary variants by hitting the trashcan icon.

Then, we can go further and add dependencies for custom options.

Adding Dependencies

With the Advanced Product Options app, you can create multi-step product offerings. In other words, you can enable/disable options (or their variants), when a shopper selects a certain one.

For example, you can set iPhone 7 Plus Jet Black to be available only with 128 and 256 GB of memory, while other colors can be available with 32 GB of memory. Hence, you can create the first option called ‘Color’ and the second called ‘Memory’. When a customer chooses the Jet Black ‘Color’ option, the 32 GB memory variant becomes unavailable to select.

Note that you need at least 2 options in a template to create dependencies.

First, click the ‘+ add parent’ link under the Dependencies column.  Then, modify the ‘Select option’ and ‘Select value’ drop-downs. You need to set an option and its value that should be selected on a product page to activate this variant.

Look, this is how this dependency is configured ‘Color’ and ‘Storage’ options:

Image Modes for Custom Options

Now, it’s time to add some beautiful visuals to your custom offerings. Images allow shoppers to visualize the benefits of each option, get better, detailed understanding of the product before making a purchase.

In the app, there are 2 image modes for custom options:

  • Display Beside Options
  • Display Once Selected

The former one allows you to display images next to the option variants. The latter replaces the product main image with the variant’s one.

When you’ve specified the option’s image mode, you need to add images or colors for product variants. Choose an image or color and modify the following options:

  • Replace Main Image – enables or disables the replacement of the main image with the variant’s one.
  • Display on Hover – enables or disables the display of an additional image on hover. For example, you can provide customers with colors and display images on hover.
  • Set Alt Tag –  fills in an alt tag for an image.
  • Set Title – fills in a title for an image.

Also, you can add multiple images or colors for each variant.

Finally, you need to equip your products with a newly created template.

Associated Products

When done with configuring a template, you need to select product to apply it to. That can be done in a couple of clicks.

Scroll down the templates’ page to the very bottom. Here you can choose products to apply your template to. For your convenience, there is a range of shipping options available: you can filter the existing products by various criteria or by a keyword.

To finish configuring a new template, ….just hit the «Save Template button».

Well-done!

App Configuration

Also, you can modify some extra settings in order to get more flexible and advanced functionality from the app. Hit the «Configuration» button, that is located on the Advanced Product Options app main screen.

From here you can modify General Settings, Translations, and Advanced Settings.

Under the General Settings section, you can set various image and color swatch sizes, define the option description and option value description types, enable or disable the price calculation option and the Ajax Cart.

Next, under the эTranslationsэ section, you can modify different titles oradaptt them to your localization.

Also, if you are a pro user, you’ll get the ability to modify the Advanced settings to customize the app according to your theme design and store features. This section should be modified very carefully in order not to ruin the app functionality!

How to Install the Advanced Product Options App

Does everything said above sound too good to be true? 🙂

Install the app and check it yourself.

The app comes with a 30-day money back period, so you can explore all the functionality in detail. This is how to start:

  • get the app from the Shopify App Store – follow this link, hit the «Get» button and follow the instructions.
  • perform some additional actions to complete the installation process – this is what you need to do. Or of you are lazy to do that, just contact MageWorx (at apps@mageworx.com) –  and they’ll do that all for you free of charge.

When done, you can navigate to the Admin panel of your Shopify store and open the «Apps» section.

Then, select the Advanced Product Options app to proceed with configuration.

Shopify App Store Ad Badge

Bottom-Line

Using this guide you can install and configure the app. Moreover, by diversifying your product offerings you can increase the conversion rate of your online store and give your customers  freedom in their choice.

If you have any questions on the app, feel free to ask them in the comments section below.

***

See the Advanced Product Options app in action. Take a look at the success stories of our customers:

2 Comments

  1. Lauren Antros Reply to Lauren

    Hi,

    I really like this app! I would like to know, however, how to change the alignment of the options. I would like them to the right of the main product image and set to wrap, so that the space is utilized there. How can i do this? Thanks.

    Lauren

Leave a Reply