Customize the Subscription Widget's Order Frequency Intervals

Bold Subscriptions V1 allows you to set a range for your subscription's order frequency intervals that your customers can choose from.

Within the Bold Subscriptions V1 app admin, you can specify which intervals you would like to offer, as well as which maximum interval lengths you would like to apply:

Days
Weeks
Months
Years

This customization only applies to standard subscriptions and is not compatible with convertible or build-a-box subscriptions.

As seen below, the subscriptions widget displays the shortest order frequency interval first, then list numbers from 1 to the max interval you have set in the subscription group's settings.

Example

Subscription frequency

You can enable and manage this feature under Step 3 while editing or creating a subscription group.

Change the Default Frequency Interval

When allowing your customers to select their own order intervals, a range from lowest to highest is automatically created and displayed to your customers based on the maximum frequency interval.

Setup

Note This code adjustment affects all of your subscription widgets.

From the Shopify admin, select Online Store.
Select ....
Select Edit code.
Under Snippets, select Add a new snippet.
Enter bold-preselected-frequency.liquid as the snippet name.
Select Create snippet.

Copy and paste the bold-preselected-frequency.liquid liquid 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>

In the script, modify the number in the following line to set your preferred default interval length value.
```
frequencyType.value = 1;
```
Note The number '1' above can be changed to represent a different value:
- Day: 1
- Week: 2
- Month: 3
- Year: 5
Select Save.
In theme.liquid (under Layout) copy and paste the following under:{%- include 'bold-common' -%}
```
{%- include 'bold-preselected-frequency' -%}
```
Select Save.

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

Remove Specific Frequency Intervals

When creating subscription intervals, you need to enter a maximum length that customers can subscribe to. Entering 6 months as a maximum displays 1 month, 2 months, 3 months, 4 months, 5 months, and 6 months to your customers.

This can be customized to only include and offer specific intervals, however.

Setup

Note This code adjustment affects all of your subscription widgets.

From the Shopify admin, select Online Store.
Select ....
Select Edit code.
Under Snippets, select Add a new snippet.
Enter bold-remove-intervals.liquid as the snippet name.
Select Create snippet.

Copy and paste the bold-remove-intervals.liquid 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>

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 removes options 1 and 3 in your storefront subscription widget.
```
var removeIntervalOptions = ['1', '3', '5'];
```
Note Keep the numbers wrapped in single quotes.
Select Save.
In theme.liquid under {{ content_for_header }}, copy and paste the following under: {%- render 'bold-common' -%} and {%- render 'bold-ro-init' -%}
```
{% include 'bold-remove-intervals' %}
```
Select Save.

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