What is the "Manage Subscription" button?
This page is referring to the “Manage Subscriptions” link under Account Details.
This link is available to those customers who have purchased subscriptions on your store, when they login to their account. Clicking it will redirect the customer to their Stay.Ai powered Customer Portal.
How to add the “Manage Subscriptions” link to your theme
The link itself is controlled by two different pieces of code. One is the render tag:
<!-- Start Retextion Customer Login -->
{% render 'rtxn_customer_login_btn', customer: customer %}
<!-- End Retextion Customer Login -->
This render tag will place the code from the snippet below onto the account page.
The second is the snippet that handles all of the logic to bring the customer to the correct Customer Portal page.
<p class="rtxn_customer_portal_login" style="display: none;">
<a class="rtxn_manage_subscriptions_btn">Manage Subscriptions</a>
</p>
<script>
function loginRetextionCustomerPortal() {
const appName = "retextion";
const customerId = {% if customer.id %} {{ customer.id }} {% else %} null {% endif %};
if (customerId) {
// Construct an HTTP request
var xhr = new XMLHttpRequest();
xhr.open("POST", "/apps/" + appName + "/login", true);
xhr.setRequestHeader("Accept", "application/json; charset=utf-8");
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
// Send the collected data as JSON
const data = {
customerId,
};
xhr.send(JSON.stringify(data));
xhr.onloadend = function (response) {
if (response.target.status === 200) {
const data = JSON.parse(xhr.responseText);
if (data.token) {
const oneHour = 60 * 60 * 1000;
localStorage.setItem('customer-portal-token', data.token)
localStorage.setItem('customer-portal-token-expiration', new Date().getTime() + oneHour)
window.location.replace("/apps/" + appName + "/#/shop/subscriptions");
}
}
};
} else {
window.location.replace("/apps/" + appName + "/#/login");
}
window.addEventListener("load", loginRetextionCustomerPortal);
}
function checkShowCustomerPortalStatus() {
document.querySelector('.rtxn_customer_portal_login').style.display = "block";
document.querySelector('.rtxn_manage_subscriptions_btn').addEventListener("click", loginRetextionCustomerPortal);
}
document.addEventListener('DOMContentLoaded', function() {
checkShowCustomerPortalStatus();
})
</script>
1.0 Buy Box Installation
If using the 1.0 buy box auto-installation from the Merchant Portal, on a successful install these two pieces of code will be added to your selected theme. Depending on the theme it is being injected into, the link may render in different places on the account page. If you would like to adjust its placement, this can be done by simply moving the render tag inside the customers/account.liquid file, to the position of your choosing. The link should be fully functional. If it is not please reference steps 7.a and 7.b below, as this is the most common reason for the link to not appear or function correctly.
Installing Manually
If you would like to install the render tag for the link and snippet manually these are the steps to follow.
Login to your Shopify Store
On the left hand side under the section labeled “Sales Channels” select “Online Store”
On this page you will see a list of all your themes including you “Current Theme”, which is your live theme.
Next to each theme there are three buttons, clicking on the button with three dots will bring up a list where you can select “Edit Code”.
Once you are in the code editor page, verify you are in the correct theme, the theme name will be displayed in the top left hand corner of the page. Note, we highly suggest beginning this work in a duplicate theme so you can freely adjust as needed.
From the search bar type ‘account’ and a file named ‘customers/account.liquid’ should be there. In this file is where you will add the render tag found at the top of the page.
There is a chance the tag will already be in this file as it trys to inject it on App install but can be theme-dependent.
The next step is creating a snippet to handle the logic behind the render tag.
The first thing to do is check to see if a file called rtxn_customer_login_btn.liquid already exists. It may have already been injected on App Installation, but this is theme dependent.
If it exists, please check that is it is updated to our newest code. There is an easy check for this. In snippet look and see if there is a line of code with the word ‘fetch’ like the highlighted example on line 38. If this is present that means this is out of date and needs to be replaced with the second code block at the top of this page. You can delete the old code, paste in the new, and save.
If you cannot find the snippet called rtxn_customer_login_btn.liquid you will need to create it.
In the left hand navigation menu expand the section labeled “Snippets” and click “Add a new snippet.
Name your file rtxn_customer_login_btn and click done in the popup modal. The .liquid will be added on automatically.
Now take the second larger code block from the top of the page and copy and paste it into the newly created empty file. Remember to click “Save” in the top right hand corner.
At this point all the code is in place and you should be seeing the “Manage Subscriptions” link on your account page!
NOTE: It may take some trial and error to get the link positioned and styled exactly how you would like. So as stated, for this reason we recommend working in a duplicate theme before making any changes to the live theme.
If you need any assistance or get stuck at any point in this process please reach out to the Stay.Ai team!