Loop widget setup
The Loop widget enables customers to easily subscribe to products directly from the product page. It displays subscription options like delivery frequency, discounts, and other benefits, making it simple for users to choose recurring orders over one-time purchases.
For merchants, this widget acts as the key entry point for acquiring and converting subscription customers. By offering clear, customizable options right where users shop, it helps boost subscription adoption and creates a seamless purchase experience.
The screenshot below illustrates how the Loop widget appears on the storefront.
This article will guide you through the steps required to enable Loop’s subscription widgets on your online store. While we’ve streamlined and automated most of the process, some themes may still require manual adjustments. If that’s the case, feel free to reach out to us at support@loopwork.co
App-block based widget vs Manual installation
Installation process for new stores that joined Loop after 23rd July 2024
Manual installation for custom widget
How to verify the widget is working?
Frequently asked questions (FAQs)
Related articles
Need help?
There are two ways to implement the Loop subscription widget on your store:
App-block based widget: The quickest and most efficient method for merchants using Shopify theme 2.0. No coding is required — you can set it up in under 2 minutes and start offering subscriptions immediately. Ideal for most merchants.
Manual installation: This process is recommended for merchants using Shopify 1.0 or custom themes who require a highly customised subscription widget. It involves developer effort to manually embed and modify the widget code per requirement.
Follow these steps to complete the process.
Navigate to Loop > Acquire > Widget > Click on Create new widget button.
Enter the widget name, select the widget type and frequency selector layout as per your requirements. You can further configure various settings by navigating through the Preferences, Styles, and Texts tabs. Once all configurations are complete, click the Save widget button.
Click on Change against "Shopify themes mapped" to see the list of all product page templates for the selected theme.
Ensure that the app-block is added to the required template. To add, you can click "Add app block". It will open Shopify theme editor and automatically add the Loop widget. Place the widget as required and click on Save.
Switch to Loop admin and click "Refresh status" to fetch the latest app block status for the selected theme templates.
Select all the product pages on which you want to show the respective widget design and click on Map.
The newly added widget can be verified on the product page.
This method is used when a merchant requires a highly customized subscription widget, including specific design elements or behavior that aren’t supported by the standard widget configuration. In such cases, developer intervention is required to manually embed and configure the widget on the store.
This type of installation generally works for themes that are not custom. Here, we can add all the relevant subscription widgets across different parts of the online store with one click.
Follow these steps to complete the process.
Navigate to Loop > Acquire > Widget installation > Select the theme and follow the steps in a given manner to install the widget.
We can also configure the various settings by navigating to subscription widget section including custome settings also.
Note: If you’ve followed all the steps but the subscription widget still isn’t visible on your product page, click here to view the troubleshooting guide for additional checks and solutions.
Some themes require manual installation of various snippets to solve different issues. We recommend you follow all the steps mentioned below in order to cover as many branches as you can.
Follow these steps to complete the process.
Before we start the installation process, create a duplicate theme (in order to avoid any damage to your live theme).
Now select Edit code under actions and the editor screen will be opened.
To install the Loop widget in your theme, download the following widget files and upload them to the respective folders of your theme.
Snippets: loop_subscriptions.liquid, loop_loader.liquid, loop_widget_standard.liquid, loop_widget.css, customer_portal_link_v2.liquid
Assets: loop_widget.js
Go to the "theme.liquid" file of your theme and replace </head> with the following snippet. This needs to be done so that the subscription widget can be visible on the product page.
Now we will start making changes to the product page. We need to find the files that contain the add_to_cart or form code and then add the Loop snippet there.
We have identified the files that generally contain the required code. These are: product-template.liquid, product.liquid, product-form.liquid, product-info.liquid, or main-product.liquid.
To locate the exact file where the Loop widget code needs to be rendered, look for the class of the "Add to Cart" button present on the product page, as shown in the example screenshot.
Note: Now we need to install the widget in that file that contains the button class and also has the form product code which starts with - form 'product'
Search the form product code that starts like this - form 'product' and check if the button class is also present in the same liquid file where (form 'product') code is present.
This will identify the file where the Loop widget code needs to be rendered.
Please look at the screenshot below in which the product code is shown and our loop code is placed just below that code.
Start your search with product-form.liquid: If you are able to find this file, and it contains the form code, then make the following changes here, else move to the next file search.
Click on this file to modify the code and now paste the widget code mentioned below before any button location, like we did for ‘quantity’ as an example. This will place the subscription widget above the quantity button on the product page.
{% render 'loop-subscriptions', type: 'product-widget', product: product %}
Search with product-template.liquid: If you are unable to find the product-form.liquid file or the form code, then look for the other product files as mentioned. Search for - % form 'product’ and find the line of code for the form button. Paste the widget code mentioned below before the button location. This will place the subscription widget above the “Add to Cart” button on the product page. Now save these changes and preview to check if the widget is working or not.
If you are not able to find the { % form ‘product’ in the above file, then search for the same using this extension and it will easily search for all the files having form product code.
Note: Sometimes rendering the widget code below the { % form ‘product’ renders the widget somewhere else on the product page instead of rendering on the top of the "Add to cart button". In that case, we have to just remove the widget render code i.e {% render 'loop-subscriptions', type: 'product-widget', product: product %} that was placed below { % form ‘product’ and put the widget render code above the add to cart button which is already there in the same liquid file.
To ensure the Loop widget is functioning correctly, follow these steps:
Go to any product page on your store.
Select the Subscribe and Save option for the product.
Proceed to the checkout page.
Look for the line property to confirm the subscription details. Verify that the billing (recurring total) information is displayed correctly.
Ques- Can we test the Loop widgets without making any changes to our live theme?
Ans- Yes, you can install the Loop widgets on a non-live (unpublished) theme to experiment and play around with the subscription set-up on your store before going live with the Loop.
Navigate to Loop > Acquire > Widgets > Select the created widget and choose an unpublished theme where you would like to install the Loop widget.
Ques- Can we customize the Loop subscription widgets?
Ans- Yes, you can fully customize the loop subscription widgets to match your brand's look and feel.
Here are some related articles that may offer additional insight and context.
Troubleshooting widget issues
Create a selling plan
No worries — we're here for you!
If you have any questions or need assistance, feel free to email us at support@loopwork.co or chat with us using the support beacon at the bottom right of your screen.
Regards,
Loop Subscriptions Team 🙂
Return to top
For merchants, this widget acts as the key entry point for acquiring and converting subscription customers. By offering clear, customizable options right where users shop, it helps boost subscription adoption and creates a seamless purchase experience.
The screenshot below illustrates how the Loop widget appears on the storefront.
This article will guide you through the steps required to enable Loop’s subscription widgets on your online store. While we’ve streamlined and automated most of the process, some themes may still require manual adjustments. If that’s the case, feel free to reach out to us at support@loopwork.co
In this article
App-block based widget vs Manual installation
Installation process for new stores that joined Loop after 23rd July 2024
Manual installation for custom widget
How to verify the widget is working?
Frequently asked questions (FAQs)
Related articles
Need help?
App-block based widget vs Manual installation
There are two ways to implement the Loop subscription widget on your store:
App-block based widget: The quickest and most efficient method for merchants using Shopify theme 2.0. No coding is required — you can set it up in under 2 minutes and start offering subscriptions immediately. Ideal for most merchants.
Manual installation: This process is recommended for merchants using Shopify 1.0 or custom themes who require a highly customised subscription widget. It involves developer effort to manually embed and modify the widget code per requirement.
Installation process for new stores that joined Loop after 23rd July 2024
Follow these steps to complete the process.
Navigate to Loop > Acquire > Widget > Click on Create new widget button.
Enter the widget name, select the widget type and frequency selector layout as per your requirements. You can further configure various settings by navigating through the Preferences, Styles, and Texts tabs. Once all configurations are complete, click the Save widget button.
Click on Change against "Shopify themes mapped" to see the list of all product page templates for the selected theme.
Ensure that the app-block is added to the required template. To add, you can click "Add app block". It will open Shopify theme editor and automatically add the Loop widget. Place the widget as required and click on Save.
Switch to Loop admin and click "Refresh status" to fetch the latest app block status for the selected theme templates.
Select all the product pages on which you want to show the respective widget design and click on Map.
The newly added widget can be verified on the product page.
Manual installation for custom widget
This method is used when a merchant requires a highly customized subscription widget, including specific design elements or behavior that aren’t supported by the standard widget configuration. In such cases, developer intervention is required to manually embed and configure the widget on the store.
Installation process for existing stores that joined Loop before 23rd July 2024
This type of installation generally works for themes that are not custom. Here, we can add all the relevant subscription widgets across different parts of the online store with one click.
Follow these steps to complete the process.
Navigate to Loop > Acquire > Widget installation > Select the theme and follow the steps in a given manner to install the widget.
We can also configure the various settings by navigating to subscription widget section including custome settings also.
Note: If you’ve followed all the steps but the subscription widget still isn’t visible on your product page, click here to view the troubleshooting guide for additional checks and solutions.
Manual/Custom installation
Some themes require manual installation of various snippets to solve different issues. We recommend you follow all the steps mentioned below in order to cover as many branches as you can.
Follow these steps to complete the process.
Before we start the installation process, create a duplicate theme (in order to avoid any damage to your live theme).
Now select Edit code under actions and the editor screen will be opened.
To install the Loop widget in your theme, download the following widget files and upload them to the respective folders of your theme.
Snippets: loop_subscriptions.liquid, loop_loader.liquid, loop_widget_standard.liquid, loop_widget.css, customer_portal_link_v2.liquid
Assets: loop_widget.js
Go to the "theme.liquid" file of your theme and replace </head> with the following snippet. This needs to be done so that the subscription widget can be visible on the product page.
<script type="text/javascript" id="loop-subscription-script" src="{{ 'loop-widget.js' | asset_url }}"></script>
</head>
<style class="loop-style"> {% render 'loop-widget.css.liquid' %} </style>Now we will start making changes to the product page. We need to find the files that contain the add_to_cart or form code and then add the Loop snippet there.
We have identified the files that generally contain the required code. These are: product-template.liquid, product.liquid, product-form.liquid, product-info.liquid, or main-product.liquid.
To locate the exact file where the Loop widget code needs to be rendered, look for the class of the "Add to Cart" button present on the product page, as shown in the example screenshot.
Note: Now we need to install the widget in that file that contains the button class and also has the form product code which starts with - form 'product'
Search the form product code that starts like this - form 'product' and check if the button class is also present in the same liquid file where (form 'product') code is present.
This will identify the file where the Loop widget code needs to be rendered.
Please look at the screenshot below in which the product code is shown and our loop code is placed just below that code.
Start your search with product-form.liquid: If you are able to find this file, and it contains the form code, then make the following changes here, else move to the next file search.
Click on this file to modify the code and now paste the widget code mentioned below before any button location, like we did for ‘quantity’ as an example. This will place the subscription widget above the quantity button on the product page.
{% render 'loop-subscriptions', type: 'product-widget', product: product %}
Search with product-template.liquid: If you are unable to find the product-form.liquid file or the form code, then look for the other product files as mentioned. Search for - % form 'product’ and find the line of code for the form button. Paste the widget code mentioned below before the button location. This will place the subscription widget above the “Add to Cart” button on the product page. Now save these changes and preview to check if the widget is working or not.
If you are not able to find the { % form ‘product’ in the above file, then search for the same using this extension and it will easily search for all the files having form product code.
Note: Sometimes rendering the widget code below the { % form ‘product’ renders the widget somewhere else on the product page instead of rendering on the top of the "Add to cart button". In that case, we have to just remove the widget render code i.e {% render 'loop-subscriptions', type: 'product-widget', product: product %} that was placed below { % form ‘product’ and put the widget render code above the add to cart button which is already there in the same liquid file.
How to verify the widget is working?
To ensure the Loop widget is functioning correctly, follow these steps:
Go to any product page on your store.
Select the Subscribe and Save option for the product.
Proceed to the checkout page.
Look for the line property to confirm the subscription details. Verify that the billing (recurring total) information is displayed correctly.
Frequently Asked Questions (FAQs)
Ques- Can we test the Loop widgets without making any changes to our live theme?
Ans- Yes, you can install the Loop widgets on a non-live (unpublished) theme to experiment and play around with the subscription set-up on your store before going live with the Loop.
Navigate to Loop > Acquire > Widgets > Select the created widget and choose an unpublished theme where you would like to install the Loop widget.
Ques- Can we customize the Loop subscription widgets?
Ans- Yes, you can fully customize the loop subscription widgets to match your brand's look and feel.
Related articles
Here are some related articles that may offer additional insight and context.
Troubleshooting widget issues
Create a selling plan
Need help?
No worries — we're here for you!
If you have any questions or need assistance, feel free to email us at support@loopwork.co or chat with us using the support beacon at the bottom right of your screen.
Regards,
Loop Subscriptions Team 🙂
Return to top
Updated on: 16/06/2025
Thank you!