Help me delete a section

Help me delete a section

MT27
Pathfinder
166 6 16

IMG_9985.png

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

Replies 3 (3)

GTLOfficial
Shopify Partner
609 132 120

hello @MT27 
This is what i can see
11.png

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

rajweb
Shopify Partner
209 15 13

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

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com

Bundler-Manuel
Explorer
244 15 28

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!

Emmanuel
Please let me know if it works by marking it as a solution!
Bundler - Product Bundles app, a great bundle app for Shopify, with glowing user testimonials and a free plan.