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?
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024