Using advanced configuration options with Affinity

In addition to the default customer portal settings, Affinity provides extra configuration options to help you personalize the behavior of the customer portal. You must be on the Recharge Pro plan, or a Custom plan, to make advanced customizations to the Affinity customer portal.

📘

Platform:

• Shopify Checkout Intergration
• Recharge Checkout on Shopify

---

Adding advanced configuration options to Affinity

Affinity uses the window.RechargeExtensions global variable to incorporate advanced configuration options.

Begin by initializing this variable as an empty object, then define the necessary settings within it:

• window.RechargeExtensions = {};

You can set this configuration code either on Recharge's merchant portal or directly within your Shopify theme.

---

Customize the product carousel

Use the product upsell carousel to showcase recommended products in a rotating carousel format, and encourage customers to add more items to their subscription. See product upsell carousel in the Recharge Help Center for enablement instructions.

By default, Affinity displays the first twelve items from a merchant's catalog in the product upsell carousel.

Merchants can gain more control by selecting a different Recharge collection to power this selection. Highlight new, seasonal, or top-performing add-ons to subscriptions with advanced settings, providing a tailored experience for customers.

Add the following script to customize the product carousel: 

1. Click Storefront in the merchant portal and select Customer Portal.
2. Add the following script to the Footer HTML/CSS/JS section under Customize styles:

   <script>
   window.RechargeExtensions = {
   product_carousel_collection_ids: ["PRODUCTCOLLECTIONID"],
   };
   </script>
   

3. Save your changes before exiting the page.

📘

Note

Replace PRODUCTCOLLECTIONID with the product collection IDs. Visit the desired collection page to find Recharge collection IDs, and copy the last digits in the URL.

---

Subscription swap options

Merchants can enable the swap product option in their customer portal control settings to allow customers to swap products within the Affinity portal. You cannot set prepaid and one-time products as swappable options.

For a more tailored experience, you can designate specific collections' products as swappable options for particular products or product variants.

Use the script below to allow customers to swap their product to any product available in a Recharge collection:

<script>
window.RechargeExtensions.swaps = {};
window.RechargeExtensions.swaps.<SHOPIFYPRODUCTID> = ["RECHARGE COLLECTION ID"];
</script>

📘

Tip

Use either the Shopify product ID or the Shopify variant ID to offer customers the ability to swap subscription options.

---

Reschedule options

Merchants can allow customers to edit the upcoming order date by enabling the option in their customer portal control settings. Use the following script to customize the quick delay frequency options and available dates in the calendar:

<script> 
window.RechargeExtensions.reschedule = { 
  disableQuickOptions: false, 
  disableCalendar: false, 
  quickOptions: [ 
    { 
      frequency: 2, 
      unit: 'week'
    },
    { 
      frequency: 4, 
      unit: 'week'
    }  
  ], 
  calendar: { 
    enableDaysOfWeek: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'], 
    enableDaysOfMonth: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31], 
    enableMonthsOfTheYear: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] 
  } 
};
</script>

---

Frequency limits

Limit available frequency options by a specific range when a customer adds or edits a subscription. For example, only allow customers to select frequencies within a 1 - 4 week range. This option is only available if the customer portal settings allow customers to choose any frequency.

<script> 
window.RechargeExtensions.subscription = window.RechargeExtensions.subscription || {};
window.RechargeExtensions.subscription.frequencyUnitsRanges = { 
  day: { min: 1, max: 90 }, 
  week: { min: 1, max: 4 }, 
  month: { min: 3, max: 9 }  
}; 
</script>

Frequency limits are applied globally by default. If you need to apply frequency range limits to specific products, you can utilize the productFrequencyUnitsRanges property:

<script>
window.RechargeExtensions.subscription = window.RechargeExtensions.subscription || {};
window.RechargeExtensions.subscription.productFrequencyUnitsRanges = {
  7150668742788: {
    day: {
      day: { min: 1, max: 90 }
    }
  }
};
</script>

---

Quantity limits

Set limits on the product quantity a customer can select when they add or edit a subscription or one-time product in the customer portal.

<script> 
window.RechargeExtensions.subscription = window.RechargeExtensions.subscription || {};
window.RechargeExtensions.subscription.quantityRange = { 
  min: 2, 
  max: 6 
};
</script>

Quantity limits are applied globally by default. If you need to apply quantity limits to specific products, you can utilize the productQuantityRanges property.

<script> 
window.RechargeExtensions.subscription = window.RechargeExtensions.subscription || {};
window.RechargeExtensions.subscription.productQuantityRanges = {
  123: { 
    min: 5, 
    max: 8 
  }
};
</script>

---

Contextual feature control

Some merchants may want to override how specific options, such as ordering, skipping, or rescheduling the subscription appear for certain products, or on the next order view.

Enabling contextual feature control allows you to restrict or alter features in particular contexts, ensuring optimal experiences for customers. For instance, while the reschedule option may be accessible for most products in your catalog, you can make it unavailable for a specific product.

<script> 
window.RechargeExtensions.orderNow = { 
  disabledForNextOrder: false
}; 

window.RechargeExtensions.reschedule = { 
  disabledForNextOrder: false, 
  disabledForProductIds: [PRODUCTID] 
}; 

window.RechargeExtensions.skip = { 
  disabledForNextOrder: false, 
  disabledForProductIds: [PRODUCTID]
}; 
</script>

---

Date customization

Use a long or short style format to customize how dates are displayed in the portal.

• Long style: This format includes the weekday, month, day, and year. Use the long date format in areas where full context is required, such as the customer's next order date.
• Short style: This format includes month and day. Use a short date format to display minimal information about the date.  

By default, the date configuration uses the DateTimeFormat:

window.RechargeExtensions.dates = {
  short: {
    day: "numeric",
    month: "long"
  },
  long: {
    weekday: "short",
    day: "numeric",
    month: "long",
    year: "numeric"
  }
};

Merchants can customize how dates are displayed by extending each style using the possible values listed below:

window.RechargeExtensions =  {
  dates: {
    short: {
      weekday: "long | narrow",
      day: "numeric | 2-digit",
      month: "short | numeric | narrow | long | 2-digit",
      year: "numeric | 2-digit",
    },
  },
};

Review the examples below to learn how to accomplish these updates.

Include a year in short style format

window.RechargeExtensions = {
  dates: {
    short: {
      year: "numeric",
    },
  },
};

Remove the weekday in long style format

window.RechargeExtensions = {
  dates: {
    long: {
      weekday: undefined,
    },
  },
};

Display the long style format as MM/DD/YYYY

window.RechargeExtensions = {
  dates: {
    long: {
      weekday: undefined,
      day: "numeric",
      month: "numeric",
      year: "numeric",
    },
  },
};