Help me delete a section

MT27 · ‎10-17-2024

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

GTLOfficial · ‎10-17-2024

hello @MT27
This is what i can see

- 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 · ‎10-17-2024

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

Rajat | Shopify Expert Developer
Need a reliable Shopify developer for your next project?
Our App: Productify Groups App
Email: rajat.shopify@gmail.com
Portfolio: https://rajatweb.dev

Bundler-Manuel · ‎10-17-2024

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.

Help me delete a section

Help me delete a section

Community Blog Articles