Installing the Loop widget

In this guide, we’ll be walking you through the steps which need to be taken in order to publish subscription widgets on your online store. While we have tried to automate as many steps as possible, some themes require manual intervention.

This article will walk you through -

Installing Loop snippets automatically
FAQs
Related articles
Need help?

Installing Loop snippets automatically

This type of installation generally works for themes that are not custom. Here, we are able to add all the relevant subscription widgets across different parts of the online store with one click.

Head over to Loop > Subscription widget > Installation > "Select your theme"

If the steps were successful but the subscription widget is not appearing on your product page, then check out the article below before proceeding to manual installation.

How to troubleshoot widget issues

Installing Loop snippets manually.

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.

There are 4 steps to achieving complete manual theme installation on your own -

Step 1: Create a duplicate theme

(Optional - Recommended when using custom theme)

Find your live theme in the themes tab within the Online Store.
Select Duplicate under Actions (in order to avoid any damage to your live theme) and a copy will be created.
Now select Edit Code under Actions

This needs to be done so that subscriptions 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 add_to_cart or form code and then add the loop snippet there.
We have identified those files that generally contain the code we need. These are “product-template.liquid” / “product.liquid” / “product-form.liquid” / “product-info.liquid / "main-product.liquid”
To search for the exact files in which the loop widget code needs to be rendered, we need to look for the button class for the "Add to cart button" which is present on the product page as shown in the example screenshot.

Now we need to install the widget in that file that contains the button class and also has the form product code which start 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 above screenshot 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.

Step 3: Installing cart snippets for selling plan name in cart.liquid

If you are unable to find your selling plan name in the cart during checkout (after adding a subscription to the cart)

Search for file cart.liquid, and then using Ctrl + F on code, search for item.title or item.product.title And then paste the following code below title code

{%if item.selling_plan_allocation != empty %} <p><span class="data-cart-item-selling-plan-name">{{ item.selling_plan_allocation.selling_plan.name }}</span></p> {% endif %}

Step 4: Installing snippets for the customer portal in customer/account.liquid

To enable the option to manage subscriptions on your customers' end, search for file customer/account.liquid, search {% paginate (using Ctrl + F) and paste the following code above paginate and save changes

{% render 'loop-subscriptions', type: 'customer-portal-link'%}

After making these changes to the theme code, publish the duplicate theme to make it live on the store (Themes → Actions → Publish).

-> Learn more about Custom Subscription Widget and 100+ Widget Designs.

FAQs

Can we test the Loop widgets without making any changes to our live theme?
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.
Go to Loop > Subscription widget > Installation > Select your theme - Choose an unpublished theme where you would like to install the Loop widgets.
Can we customize the Loop subscription widgets?
Yes, you can fully customize the loop subscription widgets to match your brand's look and feel. Please check this article for more detail - custom subscription widget

Need help?

No need to worry, we're always ready to jump in and help you out. Please feel free to reach out to us at support@loopwork.co or ping us on chat by clicking the support beacon on the bottom right.

Thanks!

Loop Subscriptions Team