Add more blocks in one section - dawn theme

[phwbs298]

Is there a way to add more blocks than 50 in one section (under product pages) for the dawn theme? Or is there another way to add customized "collapsible tabs" for each product? Thank you in advance.

[Sweans]

Hey @phwbs298 ,

In Shopify's Dawn theme, there is a limit of 50 blocks for each section. However, you can create custom collapsible tabs for each product by adding custom code to your theme. Here's a step-by-step guide on how to do this:

1. Creating a New Section:
- In your Shopify admin, go to Online Store > Themes > Dawn theme > Actions > Edit code.

- In the Sections directory, click "Add a new section" and name it collapsible-tabs.

- Add the following code to your new section file (collapsible-tabs.liquid):

liquid :

{% schema %}
{
"name": "Collapsible Tabs",
"settings": [],
"blocks": [
{
"type": "tab",
"name": "Tab",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type": "richtext",
"id": "content",
"label": "Content"
}
]
}
],
"presets": [
{
"name": "Collapsible Tabs",
"category": "Custom"
}
]
}
{% endschema %}

<div class="collapsible-tabs">
{% for block in section.blocks %}
<div class="tab">
<div class="tab-title">
<h3>{{ block.settings.title }}</h3>
</div>
<div class="tab-content">
{{ block.settings.content }}
</div>
</div>
{% endfor %}
</div>

<style>
.collapsible-tabs .tab-content {
display: none;
}
.collapsible-tabs .tab.active .tab-content {
display: block;
}
.collapsible-tabs .tab-title {
cursor: pointer;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.collapsible-tabs .tab-title');
tabs.forEach(tab => {
tab.addEventListener('click', function() {
const parent = this.parentNode;
parent.classList.toggle('active');
});
});
});

2. Customize Your Collapsible Tabs in the Theme Editor:
- Go to Online Store > Themes > Customize for the Dawn theme.

- Go to a product page, and you should see the option to add the new "Collapsible Tabs" section.

- Add the section and customize your tabs by adding blocks for each tab and filling in the title and content.

By following this approach, you can add as many collapsible tabs as needed without being limited by the block limit in a single section. If you require more complex customization, consider creating multiple sections or using metafields to manage additional content.

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[phwbs298]

Hi Sweans, 

Thank you for the thorough explanation and help. I actually have the 'Symmetry' theme. It already has the collapsible tabs, should I replace that code with the one you provided? 

[Sweans]

Hi @phwbs298 ,

Thank you for reaching out!

Since you are using the 'Symmetry' theme and it already includes collapsible tabs, you do not need to replace the existing code with the one I provided. The existing collapsible tabs should function correctly as part of the theme. If you encounter any specific issues or need further customization, feel free to let me know, and I'll be happy to assist you further.

Best regards,
Sweans

[phwbs298]

Hello Sweans,

Thank you for clarifying that. The problem I'm still encountering is there is a limit of 50 collapsible tabs I can have for one section. How do I add unlimited collapsible tabs one section? I'm need to write specific features and contents for each product.

[Sweans · Accepted solution]

Hello @phwbs298,
Thank you for getting in touch with us.

In Shopify, there is a limitation of adding only 50 blocks per section, including collapsible tabs. If you need more than 50 collapsible tabs in one section, you'll have to create multiple sections for collapsible tabs.

Here are a few ways to achieve this:

1. Add Multiple Sections: You can create additional sections, each containing up to 50 collapsible tabs, to accommodate all your content needs.

2. Customize Sections: There are various customization options available to tailor the product features and requirements to your needs.

3. Explore Shopify Apps: You can consider using apps that provide extended functionalities for collapsible tabs, offering more flexibility.

If you're interested in exploring more advanced customization options, please feel free to let us know.

Best regards,
Sweans