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.

Before you start

This guide is only relevant to merchants using the Recharge Checkout on Shopify. If your store is using a different Recharge checkout platform refer to the following guides: 

Shopify Checkout Integration

• If you use the Shopify Checkout Integration, refer to Advanced widget customizations. 

Recharge Checkout on BigCommerce

• 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. 
  
  

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 -->

If you have any trouble finding our snippet, contact the Recharge support team. 

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.