Changing the subscription widget location on the product page
By default, the subscription widget is displayed to the right of the product image on the product page.
Merchants using the Recharge Checkout on Shopify can follow this guide to move the subscription widget to a new location on the product page. If you're using the Shopify Checkout Integration, refer to Advanced customizations to the JS subscription widget.
- This guide is relevant to merchants using the Recharge Checkout on Shopify.
- If you use the Shopify Checkout Integration, refer to Advanced widget customizations.
- If you use the Recharge Checkout on BigCommerce, refer to the Help Center guide on Modifying the subscription widget settings for BigCommerce, or the Developer Documentation to customize the subscription widget.
Before you start
Step 1 - Locate the code snippet
In order to display the subscription widget on the product page, Recharge adds a snippet of code into the theme code of the product page. This is usually found on the product-template.liquid page in your theme file in Shopify.
Locate the following piece of code on the product-template.liquid page:
<!-- Begin ReCharge code -->
{% if product.available %}
{% render 'subscription-product' %}
{% endif %}
<!-- End ReCharge code -->
Step 2 - Move the code snippet
Once you've located the snippet, copy and paste it to any other location on the product page.
The subscription widget will now be displayed in a new location whenever a customer is looking at a subscription product.
