Solved

can mobile and desktop site be slightly different?

RyanB2
New Member
11 0 0

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

Accepted Solution (1)
Rishihuptech
Shopify Partner
429 73 76

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>

 

 

 

 

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

View solution in original post

Replies 6 (6)

Rishihuptech
Shopify Partner
429 73 76

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.

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
Rishihuptech
Shopify Partner
429 73 76

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>

 

 

 

 

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

Rikkert
Visitor
2 0 0

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.

Rik Laenen

DelightCart
Shopify Partner
1238 82 157

@RyanB2 Can you please send me the store URL?

Delight Cart - It's time to turn your visitors into loyal shoppers! 

Delight Loyalty - Increase repeat sales quickly and build lifelong customers loyalty.