Customer portal custom section

How to upload or update the banner image in Customer Portal (or update a custom section)?

To upload or update the banner image in your Customer Portal > Upsell section:

Go to your Shopify admin > Content > Files > Upload a file from the 'Upload file' section.
Copy links of these files.
Navigate to Loop > Customer Portal > Theme > Layout > Click the Upsell section you have created.
In update custom section pop-up, open 'Code View' and replace the image for mobile and desktop in the below code. (Please paste this html code if you don't already have it)
Save and Click 'View' to open Customer Portal.

<!-- Loop Responsive Banner Start -->
<div>
  <!-- Desktop Banner Image -->
  <img
    src="pc_image_link_here"
    alt="Loop Desktop Banner"
    style="width: 100%;"
    class="loop-desktop-banner"
  >
  <!-- Mobile Banner Image -->
  <img
    src="mobile_image_link_here"
    alt="Loop Mobile Banner"
    style="width: 100%;"
    class="loop-mobile-banner"
  >
</div>
<style>
  /* Hide desktop banner on screens 768px or less */
  @media only screen and (max-width: 768px) {
    .loop-desktop-banner {
      display: none;
    }
  }
  /* Hide mobile banner on screens wider than 768px */
  @media only screen and (min-width: 768px) {
    .loop-mobile-banner {
      display: none;
    }
  }
</style>
<!-- Loop Responsive Banner End -->

How to correctly insert a video into the benefits on cancellation flow?

Here's the ideal way of adding the video to the benefits page:

Upload the video in Shopify > Files and copy its URL.

In Loop > Cancellation flows > Benefits page > Click on code editor in body content > Add the URL code like

<meta charset="UTF-8">&nbsp;
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subscription Benefits</title>
<style>
body {
font-family: Arial, sans-serif; line-height: 1.6; color: #333; padding: 20px;
}

.content {
max-width: 600px; margin: 0 auto; text-align: left;
}

video {
max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 0 0 20px 0;
}

</style>
<div class="content"><span class="fr-video fr-deletable fr-fvc fr-dvi fr-draggable" contenteditable="false"><video id="subscriptionVideo" autoplay="" loop="" playsinline="" style="width: 249px; height: 441px;" class="fr-fvc fr-dvb fr-draggable"><source src="https://cdn.shopify.com/videos/" type="video/webm">&nbsp;Your browser does not support the video tag.</video></span>

<h2 id="isPasted">
<br>
</h2>
</div>
<script>

// Attempt to play after user interaction
document.addEventListener('DOMContentLoaded', function()
{
const video = document.getElementById('subscriptionVideo');

const tryPlay = () =>
{
video.play().catch(err =>
{
// Autoplay with sound may fail — fallback or message
console.warn('Autoplay with sound failed:', err);
});
document.removeEventListener('click', tryPlay);
};

// Wait for user click to allow autoplay with sound
document.addEventListener('click', tryPlay);
});

</script>

How do I add an autoplay video to the Benefits Page / Cancellation Flow page using a code?

To embed a fully responsive video on the Benefits page with autoplay enabled (not muted), along with play/pause controls.

Paste the following code into the appropriate section of the Benefits page/Cancellation Flow.

<style>
  .responsive-video {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* optional */
  }

  .video-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
  }
</style>

<div class="video-wrapper">
  <video
    class="responsive-video"
    src="VIDEO_URL_HERE"
    autoplay
    controls
    playsinline
  ></video>
</div>

Replace the Video Source: Update the line:
```
src="VIDEO_URL_HERE"
```

How to display a responsive banner on the Flows/Customer Portal page using separate images for mobile and desktop users via code?

To display a responsive banner on the Flows/Customer Portal page using separate images for mobile and desktop users via code:

Make sure you have:
- Mobile Banner Image URL
- Desktop Banner Image URL
- Upload them to Shopify Files if required and copy the final URLs.

Add the HTML Code: Insert the following code snippet into the appropriate section of the Flows or Customer Portal page.

<picture class="flow-image-container">
<!-- Mobile Image -->
<source 
media="(max-width: 768px)" 
srcset="MOBILE_IMAGE_URL_HERE"
>

<!-- Default / Desktop Image -->
<img 
src="DESKTOP_IMAGE_URL_HERE" 
style="width:100%; height:auto;"
>
</picture>

Replace the Image URLs (Update the following values):
1. Replace MOBILE_IMAGE_URL_HERE with the mobile banner URL.
2. Replace DESKTOP_IMAGE_URL_HERE with the desktop banner URL.
Save the Changes.

Can we change the thumbnail image that appears for bundle and save in portal?

To change the thumbnail image of the bundle in customer portal, there are two methods that can be used:

First, you can replace the 'bundle image' directly from the Bundle section in the Loop Admin.
The second option is to hide the hero image of the bundle using CSS (display: none) and then add your own banner within the description using HTML and CSS.

Additionally, you can update the bundle’s hero image and inset the current image in the description. By hiding the default bundle image using CSS (display: none) and replacing the hero image, the image added in the description will appear on the bundle page, while the updated hero image will be visible in the customer portal.

Can I make different customer portals for mobile and desktop ?

While Loop provides the customisation to add custom CSS and JS to the customer portal from Loop > Grow > Customer Portal > Themes > Customise, but the overall layout remains the same. You are free to use Loop Storefront API to implement a custom solution for customer portal independently.

What is recommended size for Banner in Customer Portal?

The recommended banner size is: Desktop: 3912 × 964 px and Mobile: 2000 × 960 px.

If a customer wants to change interval of the subscription, where do we change?

To allow a customer to change the subscription interval, Please go to Loop > Customer portal > Preferences > Subscription actions - Enable : Edit billing/ delivery schedule

Can we embed a QR code in an email that takes customers straight to their Loop Customer Portal?

We can generate a unique link for each customer that takes them to their customer portal. However, to use QR codes, you may need to use a third party app.

Are “custom” delivery intervals (custom delivery frequency) possible for customers in the portal?

The customer will only see the delivery frequency options that are mapped to the product’s selling plan. If a specific frequency isn’t included in that selling plan, it will not appear as an option in the customer portal and thus customer wont be able to choose a custom delivery apart from what is given in selling plan.

Why isn’t my customer in Singapore seeing prices in SGD on the portal for items shown during actions such as swap, upsell, or upgrade?

If a customer is in Singapore, not being able to see prices in local currency and rather in different currency on Customer portal, the reason might be that the primary market is set to another country, thus the portal displays all item prices in another currency and applies the appropriate exchange rates.

The customer portal uses the store’s primary market currency in which store operates for all customers,, and applies currency conversion where required.

How do I see the customer's view?

To see the customer view of a subscription, go to Loop> subscriptions> click on the subscription number> Click on the "Access Customer Portal" button on the right side.

How to put in a 'subscription' button on my website for customers to manage their subscription in their account?

If you are looking to put a 'subscription' button on your website for customers to manage their subscription in their account, you might be looking for the 'Manage Subscription' button on the customer portal.

It is very easy to achieve for Shopify New Customer account, and can be amended via:- Loop > Customer Portal > Accessibility > Customer account page > Enable: Manage Subscription Block.

How to remove products from subscription via customer Portal?

To remove few products from a subscription using customer Portal,

Go to Loop > Subscriptions, and open the subscription ID.
On the right-hand side, click "Send subscription login link to customer.
This will allow the customer to access their customer portal.

You can also access it on their behalf by clicking "Access customer portal" on the right side of the subscription page.
Once in the portal:

Click on the product name and then select "Edit".
You’ll see an option to "Remove" the product.
When removing, you’ll be prompted to choose between removing it from:
Just the next upcoming order (one-time removal), or
The entire subscription.
Choose based on what the customer wants—or the customer can make the selection themselves.
After removing the product(s), click "Order now" to place the order with the remaining items.(If they want to place with few items)

Note: If you choose to remove a product one-time, it will only be excluded from the next order and will be included again in future recurring orders.

How to stop a fraud customer from purchasing/reactivating a subscription from Customer Portal?

You can block or stop a customer from purchasing/reactivating a subscription from Loop by hiding the purchase button using Custom JS from their customer portal. There would be some third party app or Fraud Control App that you can utilize for this case.

The steps you can follow are:

Mark the subscription as expired from the backend so the customer cannot take any action on this subscription.
Using custom JS script, you can hide the "create subscription" option from the portal, so the customer cannot create a new one as well.

What could be the reason if the subscription frequency does not show while creating a subscription at the customer portal?

If the subscription frequency does not show while creating a subscription at the customer portal, please verify if the selling plan linked to the product is marked available at the customer portal from selling plan settings?

I am trying to update address on "Edit Shipping Address" but after I click in "Save" nothing changes

It seems that there may be a couple of reasons why the address is not updating after you click "Save on 'Edit Shipping Address".

Connection Issues: The shipping address updates in the customer portal may not reflect in Shopify due to a disconnect between the customer address and subscription address. When a subscription is created, a copy of the address is added into the contract, and subsequent changes to the subscription address do not affect the address in Shopify [1].
User Interface Behaviour: If you are clicking outside the edit address box after making changes, it may close the box without saving the updates. It's important to ensure that you explicitly click "Save" after making your changes to apply them [2].
If you are still experiencing issues, it might be helpful to check if there are any error messages or if the address is being updated in the Loop app, as that could provide more insight into the problem.

How do I make a smooth Upgrade experience for a customer via an email?

Here is an example of what you can do to make the Upgrade easier for a customer.

When an eligible customer logs into the Loop customer portal, they see a promotional banner or card labeled “Upgrade your subscription.”

The banner displays:

The new product/plan details.
The upgrade benefits (e.g., larger quantity, better pricing, free shipping, etc.).
A one-click CTA like “Upgrade Now.”
The customer clicks “Upgrade Now”, triggering an instant modification of their active subscription:
The current plan is replaced by the upgraded plan.
Billing and shipping cadences adjust automatically.
Any attached discounts apply to the first order or ongoing as configured.

Customer portal

Reward journeys

Benefits page

Update payment method from customer portal

Run campaigns via Loop

Customer portal FAQs