Can you help me how can I create a dropdown and heading in the block in the theme app extension

[Le_Linh]

Can you help me how can I create a dropdown and heading in the block in the theme app extension? I have many options in the block and need to divide them into small groups. Thank you.

[Shadab_dev]

@Le_Linh sorry but I don't get your requirements. Can you be more specific on what you need may be a visual representation or a little more detailed explanation.

[Le_Linh]

I have created a section on my theme as below. But I want to divide it into several parts using dropdown and heding like the image above. I think shopify can do it. Hope you can help.

<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 %}

[Small_Task_Help]

Hi,

Hope this will help.

Seems you have already done the set up for theme app extension. You need to create a new block template and HTML or liquid for heading and dropdown, after that, you need to integrate that block with javascript in theme.

Example of Javascript

document.addEventListener('DOMContentLoaded', function() {
  const dropdown = document.getElementById('custom-dropdown');

  dropdown.addEventListener('change', function() {
    const selectedValue = dropdown.value;
    console.log(`Selected option: ${selectedValue}`);
    // Add your custom functionality here
  });
});