Hi @RyanB2
To show the read more button you can add the below codes to theme.liquid at bottom
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
// Check if we are on a mobile device
if (window.innerWidth <= 768) {
const wrappers = document.querySelectorAll('.rich-text__wrapper .rich-text__text');
wrappers.forEach(wrapper => {
const h4Tags = wrapper.querySelectorAll('h4');
if (h4Tags.length > 1) {
// Initially hide all h4 tags except the first one
h4Tags.forEach((tag, index) => {
if (index > 0) tag.style.display = 'none';
});
// Create Read More/Less button
const readMoreBtn = document.createElement('button');
readMoreBtn.innerHTML = 'Read More';
readMoreBtn.addEventListener('click', function() {
let isHidden = h4Tags[1].style.display === 'none';
h4Tags.forEach((tag, index) => {
if (index > 0) tag.style.display = isHidden ? 'block' : 'none';
});
readMoreBtn.innerHTML = isHidden ? 'Read Less' : 'Read More';
isHidden = !isHidden;
});
// Append button after the last h4 tag
h4Tags[h4Tags.length - 1].insertAdjacentElement('afterend', readMoreBtn);
}
});
wrappers.forEach(wrapper => {
const pTags = wrapper.querySelectorAll('p');
if (pTags.length > 1) {
// Initially hide all p tags except the first one
pTags.forEach((tag, index) => {
if (index > 0) tag.style.display = 'none';
});
// Create Read More/Less button
const readMoreBtn = document.createElement('button');
readMoreBtn.innerHTML = 'Read More';
readMoreBtn.addEventListener('click', function() {
let isHidden = pTags[1].style.display === 'none';
pTags.forEach((tag, index) => {
if (index > 0) tag.style.display = isHidden ? 'block' : 'none';
});
readMoreBtn.innerHTML = isHidden ? 'Read Less' : 'Read More';
isHidden = !isHidden;
});
// Append button after the last p tag
pTags[pTags.length - 1].insertAdjacentElement('afterend', readMoreBtn);
}
});
}
});
</script>
And add this css before the above script
<style>
.rich-text__wrapper button {
background-color: #007bff;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
.rich-text__wrapper button:hover {
background-color: #0056b3;
}
</style>
If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at
info@huptechweb.com or Visit our website
Huptech Web.Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
