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.

In this article


Installing Loop snippets automatically

This type of installation generally works for themes which 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 > Widget Installation > "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


Step 2: Installing the Loop Subscription widget in your theme

  • This needs to be done so that subscriptions can be visible on the product page.
  • Now we will start making changes in the product page. We need to find the files which contain add_to_cart or form code and then add the loop snippet there.
  • We have identified 4 files that generally contain the code we need. These are “product-template.liquid” / “product.liquid” / “product-form.liquid” / “product-info.liquid”

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 in or product.liquid or product-info.liquid


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


Facing issues?

No need to fret, we’re here to jump in and help you out. Reach out to us at support@loopwork.co or feel free to ping us on chat by clicking the support beacon on the bottom right

Thanks
Loop Subscription Team

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us