Moving the Auto-Renew Toggle to the Drop-Down Menu in My Account

In certain cases, it may be more convenient to have the auto-renew toggle accessible from the drop-down menu in your My Account section. Follow these steps to make this adjustment.

Creating the Toggle in the Drop-Down Menu

1. Open the My Account Library Components template

2. Find the line of code containing:

   HTML

   <script type="text/ng-template" id="/widget/myaccount/partials/library/_library_list_item.shtml">
   

3. In the element, find <table class="vanilla-table">

4. In the element, find <td class="actions">

5. In the element, find <tp-menu>

6. Under the <tp-menu>, add the following code:

   HTML

   <tp-menu-item ng-if="libraryItem.autoRenewChangeEnabled">
       <div tp-toggle class="small" ng-model="libraryItem.autoRenew" ng-change="toggleRenew(libraryItem)" style="display: inline-block; float: left;"></div>
       <div class="" ng-class="{'on':libraryItem.autoRenew}" ng-click="toggleRenew(libraryItem);" style="display: inline-block;"><t context="checkout.platform">Auto-renew</t></div>
   </tp-menu-item>
   

Deleting the Original Toggle

1. Open the My Account Library Components template

2. Find the following line of code:

   HTML

   <script type="text/ng-template" id="/widget/myaccount/partials/library/_library_list_item.shtml">
   

3. In the element, find <table class="vanilla-table">

4. Delete the following code:

   HTML

   <td class="toggler-container">
       <div class="tp-toggler-group w130 mobile-hide" ng-show="libraryItem.autoRenewChangeEnabled">
           <div tp-toggle class="small" ng-model="libraryItem.autoRenew" ng-change="toggleRenew(libraryItem)"></div>
           <div class="tp-toggler-label small" ng-class="{'on':libraryItem.autoRenew}"><t context="checkout.platform">Auto-renew</t></div>
       </div>
   </td>
   

Resulting in the toggle for the "Auto-renew" menu item to appear as shown below.

Active auto-renew:

Disabled auto-renew:

Last updated: June 26, 2026