Adding a Scrollbar to Inactive Subscriptions in the Subscription Manager

🚚 Moving to Dev Docs

Technical documentation is now hosted in our Developer Documentation. This article has already migrated; check it out there. The Knowledge Center version will be retired on April 29th, 2024.

Your subscribers can view and reactivate their inactive subscriptions within the Inactive Subscriptions section of the Subscription Manager.

Depending on the customer and the number of inactive subscriptions, this list can be quite long and lead to page scrolling. To prevent this, a scrollbar can be added to the Inactive Subscriptions section to make it more compact and to eliminate the page scrolling. 


Accessing the Advanced Editor

We'll be using the advanced editor to modify the Subscription Manager. You can access it through your Ordergroove Admin:

  1. Log in to Ordergroove.
  2. Go to Subscriptions on the top toolbar, and select Subscription Manager.
  3. Toggle Advanced on the top left.

Note: Some aspects of this article require technical expertise with coding languages. This is self-serve and outside of the normal support policy. If you do not currently have someone on staff that can provide that level of technical assistance, Ordergroove suggests seeking out that level of support before attempting to add or alter any working code relating to your subscriptions or storefront.


Adding the Scrollbar

Open up: /views/inactive-subscriptions.liquid.

Locate the following lines 2-7:

<section id="og-inactive-subscriptions">
{% for subscription in subscriptions | reject('live') %}
{% if index === 0 %}
<h1 class="og-title">{{ 'subscriptions_inactive_header' | t }}</h1>
{% endif %}
<div class="og-inactive-subscription">

And replace them with this:

<section id="og-inactive-subscriptions">
{% for subscription in subscriptions | reject('live') %}
{% if index === 0 %}
<h1 class="og-title">{{ 'subscriptions_inactive_header' | t }}</h1>
{% endif %}
{% endfor %}
<div class="og-inactive-wrapper">
{% for subscription in subscriptions | reject('live') %}
<div class="og-inactive-subscription">

At the end of the file you will need to add a closing </div> tag above the closing </section> tag.

</div>
</section>{# /og-inactive-subscriptions #}

Go to Styles section and click + ADD STYLE and add a file called wrapper.less.

Inside the new wrapper file, add the following code:

.og-inactive-wrapper{
overflow-y: scroll;
height: 250px;
}

@media (max-width: 430px) {
.og-inactive-wrapper{
height: 150px;
}
}

NOTE: The height may need to be increased or decreased to achieve desired effect.

Stay within the Styles section, and go into main.less. Add the following code.

@import './wrapper.less';

The results should look something like this:

Screen