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.

Installing Loop snippets into your theme 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. 

Click on “Widget Installation” tab on the loop app and select Enable to automatically install the widget on your theme. 

Now select your theme and click on "Install Loop Snippet" and "Add selling plan selector"

If the subscriptions are not appearing on your product page despite following these steps, check out this article here before proceeding to manual installation. 

Installing Loop snippets into your theme 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 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 subscription to 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' %}

---------------------------------------------------------------------------------------------------------------

Publish the duplicate theme after you have done all these changes (Themes → Actions → Publish). If you are stuck at any step, please email us at contact@loopwork.co. We’d be happy to help.