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.
@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.
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
});
});
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.
{% 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 %}
