December 11, 2023
ReCharge is an exceptional app that streamlines the process of selling subscription products, ensuring a convenient experience for both merchants and customers. The Recharge app seamlessly integrates with Shopify through the Shopify App Store, enabling you to effortlessly offer subscription and recurring billing options.
In this guide, our aim is to assist you in setting up the Recharge Subscription widget on the product quickview page.
As per the Recharge documentation:
“When you install Recharge, a Shopify ScriptTag is automatically inserted into your store, making the widget available on every page via CDN. No additional installation is needed to access the widget code client-side.”
Step 1:
Navigate to your theme files and locate the file responsible for displaying product quick view details on the page, such as ‘product.quickview.liquid.’ Keep in mind that the specific file name may vary depending on the theme you’ve selected. For example, in the Ella theme, the file name is ‘product.quickview.liquid.’
Step 2:
In the product.quickview.liquid file, find the form tag with an action attribute set to /cart/add, as shown below:
<form action=”cart/add” method=”post” class=”shopify-product-form” id=”add-to-cart-quickview-form”>
Within the form tag, insert the following code to create a custom injection point for the Recharge Subscription widget:
<div class=”rc-custom-injection-point” style=”display: initial;”></div>
Step 3:
In the same product.quickview.liquid file, append the following code at the end of the file:
<script>
$(document).ready(function(){
window.ReChargeWidget.createWidget({ productId: {{ product.id }}, injectionParent: ‘.rc-custom-injection-point’ });
});
</script>
After saving the file, you can now preview the Recharge Subscription widget on the product quick view page.
Tip: Before going live, it’s advisable to run a test transaction.
Conclusion:
Recharge provides documentation for advanced widget commands to set up custom widgets on different pages. For more information, refer to the following URL:
https://docs.rechargepayments.com/docs/advanced-widget-use-cases