Shop category descriptions

I found many solutions on the web to add descriptions to individual shop categories. None appealed to me, so I wrote my own. Currently they fade in nicely, differ in my secret shop, and are fully customizable, including where they appear.

HTML:

<div id="categoryDescriptionDiv" class="categoryDescriptionDiv">
	<p id="categoryDescription" class="categoryDescription"></p>
</div>

JAVASCRIPT:

document.addEventListener('DOMContentLoaded', function() {
const catDescDiv = document.getElementById('categoryDescriptionDiv');
const catDesc = document.getElementById('categoryDescription');
const subString = 'shop';
const subStringTwo = 'shop/p/';
const subStringThree = 'sanctumshop';
const getURL = window.location.href;
let honoraryStatus = sessionStorage.getItem('sacredButtonClicked') === 'true' ? true : false;
const inVeiledShop = getURL.includes(subStringThree);
const headerActions = document.querySelector('.header-actions');
let isTouch = false;
function checkHeader() {
const styles = window.getComputedStyle(headerActions);
isTouch = styles.getPropertyValue('display') !== 'flex';
}
checkHeader();
if (getURL.includes(subString) && !getURL.includes(subStringTwo) && isTouch == false) {
//assign class names to the description
const title = document.getElementsByClassName('nested-category-title')[0];
title.insertAdjacentElement('afterend', catDescDiv);
const newClassName = title.textContent.replace(/\s+/g, '');
catDesc.classList.add(newClassName);
const classNames = catDesc.classList;
// Update text based on class name
if (classNames.contains('ArtisticLuxury')) {
catDesc.textContent = '';
} else if (classNames.contains('Prints')) {
catDesc.textContent = inVeiledShop ? 'Sorcerous sigils are 60x90 cm, 24x36 inches' : 'Wallscapes are 60x90 cm, 24x36 inches';
} else if (classNames.contains('Clothing')) {
catDesc.textContent = inVeiledShop ? 'Shrouds and astral attire' : 'You can be wearing these original designs';
} else if (classNames.contains('Accessories')) {
catDesc.textContent = inVeiledShop ? 'Ethereal charms and arcane adornments' : 'Items you may need may as well be pretty';
} else if (classNames.contains('Unique')) {
catDesc.textContent = inVeiledShop ? 'Legendary artifacts and enigmas' : 'One of a kind';
} else if (classNames.contains('Other')) {
catDesc.textContent = inVeiledShop ? 'Omniscient residuary' : 'Gear that is too cool for other categories';   
} else {
catDesc.textContent = '';
	}
catDescDiv.classList.add('Active');
} else {
catDescDiv.remove();
}
});

CSS:

.categoryDescriptionDiv {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0;
}
.categoryDescriptionDiv.Active {
  animation: fadeIn 5s forwards;
}
.categoryDescription {
  width: auto;
  position: absolute;
  top:-95px;
  letter-spacing: 2.1px;
  margin-left: -11px;
  font-size: 1.58rem;
@media screen and (max-width:790px) {
  width: auto;
  position: absolute;
  top:-50px;
  letter-spacing: 1.5px;
  margin-left: -11px;
  font-size: 1rem;
  }
}

Notice that the main category of “All” has no description assigned to it. I trust in your ability to customize the Fade-in animation in CSS, or to remove it. The text for the descriptions is in JS.