Storefront

The storefront is anywhere customers interact with your store.

18561856

Product Page

The Recharge subscription widget is the main component of the BigCommerce integration. The widget displays the Recharge recurring purchase options on product pages, if subscriptions are setup for that product. You can configure the widget to display different subscription frequencies for in the Merchant Portal.

On the product page, the subscription widget looks like the below image by default. It allows the following actions:

  • Select type of product (recurring or onetime)
  • Delivery frequency dropdown
  • Add-to-cart button

Required classes

The classes shown in the image below are required.

14401440
CSS ClassContentFunctionality
rca-product-viewThis class doesn't render content.Checks if the page is a product page.
rca-subscription- Purchase options selector for recurring item (Subscribe and Onetime, Subscribe only, Prepaid)
- Subscription frequency with displayed text (i.e. Delivery)
- Subscription discount
- Add to cart button
This functionality lets customers choose which subscription option they want to purchase
rca-product-idProduct ID as a hidden input HTML elementAdding this CSS selector will inject a product's BigCommerce Product ID into this element as a hidden input. Adding this selector to an element in a simple way to surface the product ID on a storefront.
rca-product-priceThe product's priceThis class calculates the subscription item price after any discounts applied on the storefront.
rca-product-variant-optionThis class doesn't render content.This class is used to listen for any changes in the variant option selectors.
rca-product-variant-options-modifierThis class doesn't render content.Gets the modifier option on the product page
rca-product-variant-options-defaultThis class doesn't render content.This class gets the default variant option of a product, if it exists on the page.
rca-add-to-cart-submitThis class doesn't render contentThis class listens for the add-to-cart onclick event. Only used when the theme doesn't use a modal.

Example product page code

Here is an example of creating a custom product-view.html template using some of the classes above.

<div class="productView" ... >
 <div class="rca-product-view">
<!-- code for BC product images, settings and product details goes here -->
 <div class="rca-subscription"></div>
 </div>
</div>
25142514

Category Page

The category page product grid is where all products in a category are shown.

Required classes

The classes shown in the image below are required.

14381438
CSS ClassContentFunctionality
rca-productGridThis class doesn't render content.Class present on the entire category grid.
rca-category-priceThis class doesn't render content.Calculates subscription if there is a discount within the product preview modal.
rca-cart-quick-linkAdds link for Add-to-Cart from the category pageSelector for quick add button for a product. Used in home and category page
rca-quick-viewThis class doesn't render content.Selector to check if a quickview button exist

Suggested Article

Need Help? Contact Us