Articles on: Acquire

Adding Loop widget to non-product pages

The Loop Subscriptions widget is designed to help merchants showcase subscription offers directly on their Shopify store. While it is commonly used on product pages, you can also add the widget to non-product pages such as collection pages, landing pages, featured product sections, and even custom modals. This flexibility enables you to promote subscription options in more strategic locations throughout your store, helping boost visibility and conversion rates.


In this article, we’ll guide you step-by-step on how to embed the Loop Subscriptions widget on non-product pages, giving you the freedom to create a seamless and engaging subscription experience beyond standard product listings. 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



Prerequisites


In order to insert the Loop widget code in your non product pages, you need to ensure the following:


  1. Online store theme should contain theme code files.


  1. The page should have 'Add to Cart' form and button added and working in the page/section of your choice.


Widget installation


Follow the steps to add the Loop widget in your page:


  1. Download the following files by clicking on each


Snippets: loop_subscriptions.liquid, loop_loader.liquid, loop_widget_standard.liquid, loop_widget.css, customer_portal_link_v2.liquid


Assets: loop_widget.js


  1. 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 page of your choice (for the sake of the article, we will do it for a 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:


  1. Go to the page where you deployed the widget.
  2. Select the Subscribe and Save option for the product.
  3. Proceed to the checkout page.
  4. Look for the line property to confirm the subscription details. Verify that the billing (recurring total) information is displayed correctly.



Here are some related articles that may offer additional insight and context.




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: 11/09/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!