Overview

This article outlines a variety of different issues you may experience with Product Options 2.0, and how to resolve them.

If you are experiencing issues within the Product Options app admin, please visit Create, Edit, or Delete Options and Option Sets.

Code from Options appearing in Shopify Order Page

When on the Premium plan of Product Options, orders may appear with code on the order page of your Shopify admin. This is because Shopify handles our line item properties in a very specific way.

At this time, we are not able to access Shopify's code to adjust how this appears within the Shopify admin.

If your customers are seeing this code in their Shopify notification emails, please visit Step 9 of the Installation Guide for more information on how to resolve this.

If your invoices / packing slips from Order Printer are displaying this code, please visit Product Options 3rd Party Conflicts for more information on how to resolve this.

These options can also be hidden within Shipstation. This will completely remove the code, but will also remove all of the Product Options information from your invoices and packing slips. To resolve this, please visit Product Options 3rd Party Conflicts

Edit in Cart Options not Working

The options that Product Options creates are not traditional Shopify variants. Because of this, you need to enable a setting within Product Options before your customers can make edits to their options.

If you have already attempted to enable this setting and it's not working correctly, please follow the steps below.

1. From the Shopify admin, select Online Store > Actions > Edit code.
2. Under Templates, select cart.liquid.

   Note: This may be located under Sections in the cart-template.liquid file.

   

3. Find a line of code similar to:

   {% for p in item.properties %}

   

4. Copy and paste the following line of code at the end of this code block:

   Note: This code block should end with {% endfor %}.

   <!-- Bold:POv2 ---> 
   <div class="bold_edit_in_cart"></div> 
   <!-- Bold:POv2 --->

   

5. Select Save.

If you're still unable to edit the options in your cart, please contact our Merchant Success team.

Options appearing on Collection Pages

With many Shopify themes, there are commonly used product forms such as [<form></form>] or [{% form %}{% endform %}] within the collection pages. These tags help give Shopify variants the ability to get added to the cart on many different store pages.

Currently, Bold options are only meant to be displayed on the product pages of your store. When these tags are involved, it may cause the options to appear on Collections, or view more areas of the store, incorrectly.

1. Inspect the Element on the storefront, making sure the proper class is selected.
2. Go to the Edit Code section of your theme.
3. Find the <form></form> or {% form %}{% endform %} within the collection.liquid
4. Insert the class no_bold_options

   Example

   <form class="product-addtocart-form no_bold_options"></form>

Products Can be Added to the Cart Without Required Options Being Used

If an option marked as required can be added to the cart without needing to be selected, this typically means that the theme is using an AJAX add-to-cart function.

An AJAX add-to-cart function keeps the customer on the product page when the add to cart button is clicked, instead of redirecting them to the cart page. This functionality bypasses certain functions of the Product Options app, and one of the issues it can cause is bypassing the requirement of an option.

Note: Buy Now buttons (dynamic checkout buttons) are incompatible with Product Options 2.0. These buttons skip the required add-to-cart functionality needed for our app to ensure that the options are properly added to your customer's order.

1. From the Shopify admin, select Online Store, then Customize next to your the theme that needs to be fixed.
2. Select Theme settings > Cart.
3. Under Cart type, select Page.
4. Select Save.

If this doesn't work, or if you'd like to continue using the AJAX cart along with Product Options, please contact our Merchant Success team.

Product Options is Showing as an Inventory Issue in the Checkout

When Product Options is used to affect the price of a product, it creates separate "hidden products" on your store. The Product Options code installation prevents these from being purchased by your customers unless it's being used as an option in the app.

If you set the visibility to hide these priced options from your Online Store sales channel, these options will show as sold out on the checkout page even if they display properly on the product and cart pages.

1. From the Shopify admin, select Products.
2. Select the product you are having the issue with.

   Note: Our hidden items should be noted with OPTIONS_HIDDEN_PRODUCT as the product type.

   

3. Under Visibility, select Manage.

   Note: This product should also be tagged with OPTIONS_HIDDEN_PRODUCT.

   

4. Select the Online Store checkbox.
5. Select Done.
6. Select Save.

Product Options is Showing Unformatted Bold Subscriptions Information on the Cart Page

1. From the Shopify admin, select Online Store, then Actions > Edit code.
2. Under Snippets, select boldoptions.liquid.

   

3. Find this line of code, it should appear twice, near lines 51 & 67:

   {% if p.first == "builder_id" or p.first == "builder_info" or p.first == "master_builder" or p.last == "" %}

4. Add this code before the %} in both locations:

   or p.first == "frequency_type" or p.first == "frequency_num" or p.first == "frequency_type_text" or p.first == "group_id" or p.first == "discounted_price"

   The result should look like this:

   {% if p.first == "builder_id" or p.first == "builder_info" or p.first == "master_builder" or p.last == "" or p.last == "" or p.first == "frequency_type" or p.first == "frequency_num" or p.first == "frequency_type_text" or p.first == "group_id" or p.first == "discounted_price" %}

5. Select Save.

Product Price not Updating when a Priced Option is Selected

By default, the product price will not update when a priced option is selected by a customer on the product page. In order for the product price to update, you will need to make some code adjustments.

Please see the Add to Price Install Instructions in Product Options: Frontend Settings for the steps on enabling this feature and adding the necessary liquid code.

Note: If you are not comfortable with adjusting liquid code in your theme, please reach out to our Merchant Success team for further assistance.

Radio Buttons are Non-Selectable Rectangles/Squares

1. From within the Product Options app, select Settings > Display Settings.
2. At the bottom of the page in the Advanced Users section, in the Custom CSS field, enter the following code:

   input[type="radio"] {-webkit-appearance:radio;}

   

3. Select Save.