Setting up the Loop subscription widget

Navigate to Loop admin > Acquire > Widget, then click Create new widget.
​

Enter the widget name, select the widget type and frequency selector layout based on your requirements. You can configure additional settings through the Preferences, Styles, and Texts tabs. Once all configurations are complete, click Save widget.
​

Click Change next to "Shopify themes mapped" to see the list of all product page templates for the selected theme.
​

Ensure the app block is added to the required template. If you don't see all the templates where you want to add the subscription widget, click Add more templates and select the ones that aren't checked yet.
​
To add the app block to a template, click Add app block. This opens the Shopify theme editor and automatically adds the Loop widget. Place the widget where you want it and click 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 where you want to display the widget design and click Map.
​

Verify the newly added widget on the product page.

Navigate to Loop admin > Acquire > Widget installation, then select the theme and follow the steps shown to install the widget.
​

You can also configure various settings by navigating to the subscription widget section, including custom settings.
​

Before starting the installation process, create a duplicate theme to avoid any damage to your live theme.
​

Select Edit code under actions to open the editor screen.
​

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 and replace </head> with the following snippet. This allows the subscription widget to render on the product page.

Now you need to make changes to the product page. Find the files that contain the add_to_cart or form code and add the Loop snippet there.

The files that generally contain the required code 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 on the product page.

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 for the form product code that starts with {% form 'product' and check if the button class is present in the same liquid file. This identifies 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 find this file and it contains the form code, make the changes here. Otherwise, move to the next file.

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.

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

Go to any product page on your store.

Select the Subscribe and Save option.

Proceed to the checkout page.

Check that the line property shows the subscription details and that the recurring billing total is displayed correctly.