Troubleshoot Storefront Issues with Product Options

We have compiled a list of issues that may arise while using Bold Product Options 2.0, along with steps that can be followed to resolve each issue.

Select an option below to view more information.

 


 

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.

 Example

Example of Priced Options on Order Page

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 Integrate Product Options with Shopify's Email Templates 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

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.

 


 

Steps to Fix

  1. From the Shopify admin, select Online StoreActionsEdit code.
  2. Under Templates, select cart.liquid.

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

    Select cart.liquid

  3. Find a line of code similar to:
    {% for p in item.properties %}

    Find for p loop

  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 --->

    Paste Code

  5. Select Save.

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

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.

 


 

Steps to Fix

  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>
  1. From the Shopify admin, select Online Store, then ActionsEdit Code.
  2. Under Snippets, select shappify-options.liquid and replace the entire file contents with this code:
    {% if template contains 'search' %}
    <div style='display:none' id='shappify_custom_options_{{ item.id }}'></div><script async  src="//secure.apps.shappify.com/apps/options/generate_options.php?shop={{shop.permanent_domain}}&product_id={{ item.id }}"></script>
    {% else %}
    
    <div style='display:none' id='shappify_custom_options_{{ product.id }}'></div><script async  src="//secure.apps.shappify.com/apps/options/generate_options.php?shop={{shop.permanent_domain}}&product_id={{ product.id }}"></script>
    {% endif %}

    Copy the code and replace the file with this code

  3. Select Save.

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.

 


 

Steps to Fix

  1. From the Shopify admin, select Online Store, then Customize next to your the theme that needs to be fixed.
  2. Select Theme settingsCart.
  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.

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.

 


 

Steps to Fix

  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.

    Select Issue Product

  3. Under Visibility, select Manage.

    Note: This product should also be tagged with OPTIONS_HIDDEN_PRODUCT.

    Select Manage

  4. Select the Online Store checkbox.
  5. Select Done.
  6. Select Save.
  1. From the Shopify admin, select Online Store, then ActionsEdit code.
  2. Under Snippets, select boldoptions.liquid.

    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.

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.

  1. From within the Product Options app, select SettingsDisplay 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;}

    Custom CSS

  3. Select Save.
Was this article helpful?
0 out of 0 found this helpful