All things Shopify and commerce
Hi all,
it is a new site and just going live, i am using the dawn theme.
on my desktop site i have a lot of information on most pages, but the problem is with my mobile site there is too much text and a lot of scrolling to get through, is there something that can be done differently on the mobile site.
for example show some text and have a read more button?
hope someone can help
Thanks
Ryan
Solved! Go to the solution
This is an accepted solution.
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>
Hi @RyanB2
Hope you are doing well
Can you share the store URL so i can check it. & also share the url where the text is long as you mentioned.
This is an accepted solution.
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>
Hi,
Sometimes plugins offer the solution to have 2 different layouts one for phone/tablet and one for PC.
maybe something like this: https://apps.shopify.com/shoppad?locale=nl
If you want a read more button you can add it in the code.
@RyanB2 Can you please send me the store URL?
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024