Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Hide empty collapsible tabs in Dawn theme

Solved

Hide empty collapsible tabs in Dawn theme

Bev_StickMkting
Tourist
3 0 1

Hi, hoping someone can help me with this. I'm using the Dawn theme on a store I'm building for a client, but having some trouble with collapsible tabs on the product pages.

 

Each product has a set of FAQs, but they differ in number. I need to be able to add up to 10 collapsible tabs, but some of the products will only have data in, say, three of them. Is it possible to hide the tabs that are empty? They're currently showing as empty lines, like this:

 

Bev_StickMkting_0-1648145620983.png

Any advice will be much appreciated!

Accepted Solution (1)

LitExtension
Shopify Partner
4877 1003 1168

This is an accepted solution.

Hi @Bev_StickMkting,

Please go to sections > collapsible-content.liquid file, find 'section.blocks' and add code here:

Screenshot.png

Code:

{%- if block.settings.heading != blank or block.settings.row_content != blank or block.settings.page.content != blank -%}

{%- endif -%}

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 17 (17)

AvadaCommerce
Shopify Partner
3879 839 988

Hi @Bev_StickMkting ,

 

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

banned

LitExtension
Shopify Partner
4877 1003 1168

This is an accepted solution.

Hi @Bev_StickMkting,

Please go to sections > collapsible-content.liquid file, find 'section.blocks' and add code here:

Screenshot.png

Code:

{%- if block.settings.heading != blank or block.settings.row_content != blank or block.settings.page.content != blank -%}

{%- endif -%}

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Bev_StickMkting
Tourist
3 0 1

Amazing! Thank you so much, that's worked perfectly 😊

dgallerystore
Visitor
1 0 0

Hi, sorry but on Dawn theme i don't have "sections > collapsible-content.liquid".

how can i do it?

Thanks

 

MM

LitExtension
Shopify Partner
4877 1003 1168

Hi @dgallerystore,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Annemette
Visitor
1 0 0

Hi, I tried using this solution, but it didn't work. 

Using the Dawn theme and did exactly as written. As you can see below I added the code to the correct places, saved it but nothing is happening. What am I doing wrong?

 

Thanks in advance!


Skærmbillede 2022-05-06 kl. 10.57.50.pngSkærmbillede 2022-05-06 kl. 10.56.55.png

Jacob_b
Visitor
3 0 0

Works like a charm, thanks!
How do I make it so that the entire section is removed if none of the rows has any content?

Thanks in advance!


All the best,
Jacob

sensibletools
Tourist
10 0 3

We're using Archtype Streamline theme and the solution for us was a bit different.

 

We only had to change and to or  inside tab.liquid file so that the final thing looks like this:

{%- liquid
  assign output_tab = true
  if title == blank or content == blank
    assign output_tab = false
  endif
-%}

 

 

wendy_clark
Tourist
4 0 0

This helped me! In my case I had prefilled headings and I wanted to hide blank rows, so I ended up using only the block.settings.row_content one and it's working great. Thank you!

FYI to others - this solution works when you use Collapsible Rows in a different "Collapsible Rows Section." If you're trying to hide rows in the product information section, you should try the other solutions that modify the main-product.liquid section. I started off with one and then ran out of blocks and so have moved to the other. So I'm actually using both solutions and they seem to be working well.

PEM-Ross
Visitor
1 0 0

Hi, I'm also having difficulty getting this to work. It seems to work for the collapsible content section but not the collapsible rows within the product information section. Does anyone know how this can be done?

 

Screenshot 2022-06-07 092344.png

Coen
Visitor
1 0 0

I am also having the same issue

Baldur_Helgason
Shopify Partner
38 2 33

After trying to get this to work for a good 30 minutes I realised the solution wasn’t solving the Collapsible row block on the product page (under the description) but rather the Collapsible content section which is a separate feature. To get this to work for the Collapsible rows you need to edit main-product.liquid and put the condition inside 'collapsible_tab' case like so:

 

Pasted_Image_21_8_2022__13_22.png

Code for easy copy/paste

{%- if block.settings.content != blank or block.settings.page.content != blank -%}
...
{%- endif -%}

 Hope this helps someone 😄

overflowtoys
Visitor
1 0 0

🙏 Thank you for posting your solution, Baldur! This is exactly what I needed. I'm so close to being able to launch my store now that issue has been resolved. 😁

Baldur_Helgason
Shopify Partner
38 2 33

Glad I could help 😊 Good luck 🙌🏻

3GCoffee
Visitor
1 0 1

Hi baldur_Helgason,

Thanks for your help. 

Cheers. 

phil_CM
Explorer
86 1 12

Perfect thanks 👏

NosMal
Shopify Partner
2 0 0

My guy 😎