How to hide sections in an online store when the cart is empty?

How to hide sections in an online store when the cart is empty?

LittlePaddocks
Excursionist
43 1 8

Hi Everyone. 

 

Does anyone know a way to hide some sections in my online store when the cart is empty please?

 

Perhaps some CSS?

 

Thanks 🙂

Replies 8 (8)

gr_trading
Shopify Partner
1843 145 193

Hi @LittlePaddocks 

 

CSS can hide objects on which they applied to you rather need a script that will check the cart count and hide the section you want.

 

Request you to use the below script to achieve the same and put this script to theme.liquid

 

$(function(){
jQuery.getJSON("/cart.js", function(data) {
  var u = {}, r, e, f;
  if(data.items.length){
$("#[nodeid]").hide()
   }
})
})

 

replace [nodeid] to real section ID or you can use .[classname] 

 

Make sure you have a jQuery plugging script in the header of theme.liquid, if now put the below line before the closing of </head> tag.

 

  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>

 

Hope this will help...

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee
LittlePaddocks
Excursionist
43 1 8

Hi @gr_trading. Thank you for your reply.

 

Where would I find the section ID please? Also if i wanted to hide multiple section would I add the first set of code multiple times?

 

Thank you!

gr_trading
Shopify Partner
1843 145 193

gr_trading_0-1691173582958.png

 

gr_trading_1-1691173664569.png

 

You can put as many ID you want to hide in a single line, like below

 

$("#shopify-section-template--16132814340262__featured_collection,#[anotherid],#[thirdid]").hide()

 

 

Don't forget to mark my answer as a solution.

 

Still facing issues, I can do for you if you are willing to hire.

 

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee
LittlePaddocks
Excursionist
43 1 8

Appreciate your help with this @gr_trading 🙂

 

Last question... inside the [ ] brackets for the additional ID's do I just add the number or the whole line? ["#shopify-section-template--16132814340262__featured_collection] or [16132814340262]

 

Thanks!

gr_trading
Shopify Partner
1843 145 193

You have to put while text available in id=""

 

Please refer the screenshot with arrow its pointing to where you will find the section id

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee
LittlePaddocks
Excursionist
43 1 8

Thank you @gr_trading 

 

Could you please just confirm this is written correctly?...

 

$(function(){
jQuery.getJSON("/cart.js", function(data) {
  var u = {}, r, e, f;
  if(data.items.length){
$(“#id="shopify-section-template--16929332723876__1690487153f6fb2fc5").hide()
   }
})
})

 

 

gr_trading
Shopify Partner
1843 145 193

U dont need id=" after #

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee
LittlePaddocks
Excursionist
43 1 8

Hi @gr_trading ,

 

I've edited the script as you said and added it to theme.liquid

 

But unfortunately it doesn't seem to make the section disappear. Maybe I've added it in the wrong place?

 

Please see screenshots 🙂

 

Thanks for your help!

 

Screenshot 2023-08-05 at 20.36.57.pngScreenshot 2023-08-05 at 20.37.30.png