Adding a Scrollbar to Inactive Subscriptions in the Subscriber Dashboard

Updated July 10, 2023 20:47

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

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 Code Editor

We'll be using the Code Editor to modify the Subscriber Dashboard. You can access it through your Ordergroove Admin:

Log in to Ordergroove.
Go to Subscriptions on the top toolbar, and select Management Interface.
Toggle Code Editor 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