Remove Specific Frequency Intervals in Bold Subscriptions

Follow

Overview

Bold Subscriptions allows you to set a range of order frequency interval options for your customers to choose from. In your app settings you can specify which interval types (weeks, months, etc.) you'd like to offer as well as indicate a maximum interval length number.

By default, the subscriptions widget will display the shortest order frequency interval indicated in your app settings. The widget will also present customers with the option to choose any number between 1 and your specified maximum range.

To remove specific numbers from within that range, please follow the steps below:

Note: This code adjustment will affect all widgets on your storefront.

  1. From Shopify's admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under "Snippets", select Add a new snippet.
  5. Enter bold-remove-intervals.liquid as the snippet name.
  6. Select Create snippet.
  7. Copy and paste the following code into your snippet file:
    {% comment %}
    This will affect ALL subscription widgets on the store.
    
    Enter the interval option values you wish to remove from the widget.
    {% endcomment %}
    
    <script>
      if (window.BOLD && BOLD.common && BOLD.common.eventEmitter && typeof BOLD.common.eventEmitter.on === 'function'){
        BOLD.common.eventEmitter.on("BOLD_RECURRING_ORDERS_widget_loaded", function (e){
          // Put in the values you would like to remove. NOTE: Make sure to include quotes. 
          var removeIntervalOptions = ['1', '3'];
    
          var frequencyNum = document.querySelector('.bold-ro__frequency-num');
          var frequencyNumValues = document.querySelectorAll('.bold-ro__frequency-num > option');
    
          removeIntervalOptions.forEach(function(options){
            frequencyNumValues.forEach(function(values){
              if (values.value == options){
                values.remove();
              }
            })
          })
        })
      }
    </script>
    
  8. In the script, modify the numbers in the following line to set your preferred interval length values. You can include additional values within the square brackets as desired by separating them with a comma. The example below will remove options 1 and 3 in your storefront subscription widget.
    var removeIntervalOptions = ['1', '3'];

    Note: Keep the numbers wrapped in single quotes.

  9. Select Save.
  10. In theme.liquid under {{ content_for_header }} include the following: 
{% include 'bold-remove-intervals' %}

   11. Select Save.

Refresh your storefront page to ensure the customization has been successfully applied.

1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.