Troubleshoot Storefront Issues with Product Options

Overview

While using Bold Product Options on your store, you may come across display issues with options, such as newly created options not appearing on product pages or perhaps options appearing in search results.

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

Select a dropdown below to view more information on the issue and steps that you can follow to resolve each issue:

 


 

When on the Premium plan of Product Options, orders may appear with code within the Order page of the Shopify admin. This is an example of how this may appear:

Example of Priced Options on Order Page

Shopify handles our line item properties this specific way. At this time, we currently are unable to access the code in their backend to adjust how this appears within the Shopify Order pages.

If your customers are seeing this code in their Shopify notification emails, there is a way to adjust the templates. Please see our article on Integrating Product Options with Shopify notifications, here.

To clean up invoices and packing slip information from within the Order Printer app, please see our article on Displaying Product Options on Order Printer Templates, here.

These options can also be hidden within Shipstation. This will completely remove the code, but will also remove all the Product Options information from invoices and packing slips. Please see our article on hiding options through Shipstation, here.

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 options in their carts.

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 Shopify's 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 your Options within the cart, please contact our Merchant Success team for additional assistance.

Bold Product Options creates customizable options on your product pages in the form of dropdowns, checkboxes, etc.

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

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

 


 

Steps to Fix

To remove options from displaying on your products within the collection page of your store, please follow these steps:

  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

    An example of how this will look:

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

Steps to Fix

  1. From Shopify's 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 a product can be added to the cart without using a required option, it usually means that the theme is using an AJAX add-to-cart function.

An AJAX add-to-cart function keeps the user on the product page when the add to cart button is clicked, instead of directing them to the cart page. This functionality tends to bypass certain functions of the app, and one of the issues it can cause is bypassing the usage requirement of an option.

Note: "Buy Now" or dynamic checkout buttons are also incompatible with Product Options. 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

To fix this, disable the Ajax add-to-cart functionality in your theme:

  1. From Shopify's 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"  in your store. The Product Options coding 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 Shopify's 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 Shopify's 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 at all when a priced option is selected by a customer on the product page. In order for the product price to update, this requires a tweak within the Product Options in-app admin and within your theme's liquid code.

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

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