Adjust Frequency Interval Display on the Bold Subscriptions Widget

Overview

Bold Subscriptions allows you to set a range for order frequency intervals that are available for your customers to choose from. Within the app settings, you are able to specify the intervals (days, weeks, months, or years) that you would like to offer. You are also able to 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.

Subscription frequency

On Step #3 of creating/editing your subscription settings, you can allow your customers to select their own order intervals. In the example above, we have set our order interval to allow up to 6 months.

 Caution

If you would rather have this adjustment completed by a member of the Bold Commerce team, please visit our Bold Merchant Success store for further assistance on creating this customization!

To make adjustments to how this widget appears for your customers, please see our step by steps below:

When allowing your customers to select their own order intervals, it automatically creates a range of options to choose from depending on the maximum created. By default, the subscriptions widget will display the shortest order frequency interval indicated in your app settings.

For example, if you choose 4 weeks as a maximum interval, the Subscriptions widget will display 1-4 Weeks as selectable options. The default selected will automatically be the option for 1 week.

 


 

Setup

To set a specific default interval type that is not the shortest interval, please follow these 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 bold-preselected-frequency.liquid liquid code into your snippet file.
  8. 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

  9. Select Save.
  10. In theme.liquid (under Layout) copy and paste the following under:{%- include 'bold-common' -%}
    {%- include 'bold-preselected-frequency' -%}
  11. Select Save.

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

When creating your Subscription intervals, you are inputting the maximum length that orders can be subscribed to. When inputting 6 months as a maximum, it will also allow your customers to select between 1-5 months as well.

This can be customized to only offer your customers specific time frames, such as 1, 3, and 6 month intervals within the widget.

 


 

Setup

If you would like to remove specific numbers from within that range, please follow these 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 bold-remove-intervals.liquid code into your snippet file.
  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', '5'];

    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.

Was this article helpful?
0 out of 0 found this helpful