I have created a section on my theme as below. But I want to divide it into several parts using dropdown and heading like the image:
My current code:
<div class="agrs-widget">
<div class="agrs-holder agrs-carousel2"
title= '{{ block.settings.title }}'
title_type={{ block.settings.title_type }}
card_background_color='{{ block.settings.card_background_color }}'
card_text_color='{{ block.settings.card_text_color }}'
star_color={{ block.settings.star_color }}
show_local_guide_avatar= {{ block.settings.show_local_guide_avatar }}
show_local_guide_name= {{ block.settings.show_local_guide_name }}
show_local_guide_detail= {{ block.settings.show_local_guide_detail }}
show_review_date= {{ block.settings.show_review_date }}
show_verified_badge= {{ block.settings.show_verified_badge }}
show_review_photos= {{ block.settings.show_review_photos }}
auto_scroll= {{ block.settings.auto_scroll }}
slide_delay= {{ block.settings.slide_delay }}
show_leave_review_button= {{ block.settings.show_leave_review_button }}
button_color= {{ block.settings.button_color }}
button_background= {{ block.settings.button_background }}
show_callout_layout= {{ block.settings.show_callout_layout }}
show_navigation_bar= {{ block.settings.show_navigation_bar }}
rounded_corners= {{ block.settings.rounded_corners }}
max_line_review_content= {{ block.settings.max_line_review_content }}
show_business_summary_rating={{ block.settings.show_business_summary_rating }}
show_business_summary_total_review={{ block.settings.show_business_summary_total_review }}
business_summary_color= {{ block.settings.business_summary_color }}
></div>
</div>
{% schema %}
{
"name": "Carousel 2",
"templates": ["index","page"],
"target": "section",
"settings": [
{
"type": "text",
"id": "title",
"default": "What our customers say",
"label": "Title"
},
{
"type": "select",
"id": "title_type",
"label": "Title Type",
"options": [
{
"value": "h1",
"label": "h1"
},
{
"value": "h2",
"label": "h2"
},
{
"value": "h3",
"label": "h3"
},
{
"value": "h4",
"label": "h4"
}
],
"default": "h2"
},
{
"type": "color",
"id": "card_background_color",
"label": "Card Background Color",
"default": "rgb(241,241,241)"
},
{
"type": "color",
"id": "card_text_color",
"label": "Card Text Color",
"default": "#000000"
},
{
"type": "color",
"id": "star_color",
"label": "Star Color",
"default": "#fbbc04"
},
{
"type": "checkbox",
"id": "show_local_guide_avatar",
"label": "Show Local Guide’s avatar",
"default": true
},
{
"type": "checkbox",
"id": "show_local_guide_name",
"label": "Show Local Guide’s name",
"default": true
},
{
"type": "checkbox",
"id": "show_local_guide_detail",
"label": "Show Local Guide’s detail",
"default": true
},
{
"type": "checkbox",
"id": "show_review_date",
"label": "Show Review Date",
"default": true
},
{
"type": "checkbox",
"id": "show_verified_badge",
"label": "Show Verified Badge",
"default": true
},
{
"type": "checkbox",
"id": "show_review_photos",
"label": "Show Review Photos",
"default": true
},
{
"type": "checkbox",
"id": "auto_scroll",
"label": "Auto Scroll",
"default": true
},
{
"type": "range",
"id": "slide_delay",
"min": 1,
"max": 20,
"step": 1,
"unit": "s",
"label": "Slide Delay",
"default": 3
},
{
"type": "checkbox",
"id": "show_leave_review_button",
"label": "Show Leave a Review Button",
"default": true
},
{
"type": "color",
"id": "button_color",
"label": "Button Color",
"default": "#000000"
},
{
"type": "color",
"id": "button_background",
"label": "Button Background",
"default": "rgb(247,247,247)"
},
{
"type": "checkbox",
"id": "show_callout_layout",
"label": "Show Callout Layout",
"default": false
},
{
"type": "checkbox",
"id": "show_navigation_bar",
"label": "Show Navigation Bar",
"default": true
},
{
"type": "range",
"id": "rounded_corners",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Rounded Corners",
"default": 8
},
{
"type": "range",
"id": "max_line_review_content",
"min": 1,
"max": 30,
"step": 1,
"unit": "l",
"label": "Maximum Line of Review Content",
"default": 4
},
{
"type": "checkbox",
"id": "show_business_summary_rating",
"label": "Show Business Summary Rating",
"default": true
},
{
"type": "checkbox",
"id": "show_business_summary_total_review",
"label": "Show Business Summary Total Review",
"default": true
},
{
"type": "color",
"id": "business_summary_color",
"label": "Business Summary Color",
"default": "#000000"
}
]
}
{% endschema %}
My current section settings with no heading and dropdown to divide:
How can I create headings and dropdowns to divide the settings to many groups?.Please help.Thank you.
