Change the Default Frequency Interval 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.

To set a specific default interval type that is not the shortest interval, 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-preselected-frequency.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.
    If the value set does not exist in the subscription in the app settings, the first available option will be selected by default.
    
    frequencyNumValue is used to preselect the number of times the order will occur per frequency type.
    frequencyTypeValue is used to preselect the type of frequency.
    Day: "1"
    Week: "2"
    Month: "3"
    Year: "5"
    {% 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){
          // Update the below values based off table above. NOTE: Make sure number is wrapped in quotes.
          var frequencyNumValue ="2";
          var frequencyTypeValue = "3";
    
          var frequencyNum = document.querySelector('.bold-ro__frequency-num');
          var frequencyType = document.querySelector('.bold-ro__frequency-type');
          var frequencyNumOptions = document.querySelectorAll('.bold-ro__frequency-num > option');
          var frequencyTypeOptions = document.querySelectorAll('.bold-ro__frequency-type > option');
    
          frequencyNumOptions.forEach(function(values){
            if (frequencyNum && values.value == frequencyNumValue){
              frequencyNum.value = frequencyNumValue;
            }
          })
    
          frequencyTypeOptions.forEach(function(values){
            if (frequencyType && values.value == frequencyTypeValue){
              frequencyType.value = frequencyTypeValue;
            }
          })
        })
      }
    </script>
    
  8. In the script, modify the number in the following line to set your preferred default interval length value. 
    var frequencyNumValue ="2";

    Note: Keep the number wrapped in double quotes.

  9. In the script, modify the number in the following line to set your preferred default frequency type using the guidelines below. 
    var frequencyTypeValue = "3";

    Note: Keep the number wrapped in double quotes.

    • Day: 1
    • Week: 2
    • Month: 3
    • Year: 5
  10. Select Save.
  11. In theme.liquid (under Layout) copy and paste the following under:{%- include 'bold-common' -%}
    {%- include 'bold-preselected-frequency' -%}
  12. Select Save.

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

0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.