Shopify themes, liquid, logos, and UX
In my product pages for mobile, I have a slideshow. But when the page is loading you can see the product picture under the slideshow which shouldn’t be the case as I have hide this section. Can you please help me hide it 100% even when the page is loading
website: matibrnd.com
hello @MT27
This is what i can see
Hey @MT27 ,
Ensure CSS is Applied Before Render:
Use inline CSS or display: none to hide the section from the very beginning. This will prevent the browser from rendering it during load.
Add this CSS directly in the <head>section of your theme’s HTML:
<style>
.hidden-on-load {
display: none !important;
}
</style>
Then, assign this class to the product image container you wish to hide:
<div class="product-image-container hidden-on-load">
<img src="your-product-image.jpg" alt="Product Image">
</div>
Use JavaScript to Ensure Visibility Control After Load:
Once the slideshow finishes loading, you can use JavaScript to reveal only the slideshow and ensure the hidden product images remain hidden.
Add this script at the bottom of your theme’s file (or in a custom JavaScript file):
document.addEventListener("DOMContentLoaded", function () {
const hiddenElements = document.querySelectorAll('.hidden-on-load');
hiddenElements.forEach(element => {
element.style.display = "none"; // Ensures it stays hidden.
});
// Optional: Make sure the slideshow is visible
const slideshow = document.querySelector('.slideshow');
if (slideshow) {
slideshow.style.display = "block";
}
});
If I was able to help you, please don't forget to Like and mark it as the Solution!
Best Regard,
Rajat Sharma
Hello @MT27 I believe that this guide would be able to help you solve this issue https://shopthemedetector.com/blog/how-to-hide-a-product-on-shopify/
Try it out and let me know what you think!
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