Section
Collection Anchor Nav
2 个模板实例,15 个 section 配置,1 类 block。
真实模板变体
Schema
{
"name": "Collection Anchor Nav",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "section_id",
"label": "Section ID",
"default": "collection-anchor-navigation"
},
{
"type": "text",
"id": "aria_label",
"label": "ARIA label",
"default": "Collection navigation"
},
{
"type": "checkbox",
"id": "enable_sticky",
"label": "Enable sticky behavior",
"default": true
},
{
"type": "range",
"id": "max_width",
"label": "Max width",
"min": 960,
"max": 1800,
"step": 10,
"default": 1310,
"unit": "px"
},
{
"type": "range",
"id": "padding_top",
"label": "Padding top",
"min": 0,
"max": 160,
"step": 4,
"default": 68,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Padding bottom",
"min": 0,
"max": 200,
"step": 4,
"default": 140,
"unit": "px"
},
{
"type": "range",
"id": "button_min_width",
"label": "Button min width",
"min": 80,
"max": 220,
"step": 4,
"default": 144,
"unit": "px"
},
{
"type": "range",
"id": "button_height",
"label": "Button height",
"min": 36,
"max": 72,
"step": 2,
"default": 52,
"unit": "px"
},
{
"type": "range",
"id": "button_gap",
"label": "Button gap",
"min": 4,
"max": 40,
"step": 2,
"default": 22,
"unit": "px"
},
{
"type": "color",
"id": "background_color",
"label": "Background",
"default": "#f5f5f5"
},
{
"type": "color",
"id": "active_background",
"label": "Active background",
"default": "#111111"
},
{
"type": "color",
"id": "active_text_color",
"label": "Active text",
"default": "#ffffff"
},
{
"type": "color",
"id": "inactive_background",
"label": "Inactive background",
"default": "#ececec"
},
{
"type": "color",
"id": "inactive_text_color",
"label": "Inactive text",
"default": "#9a9a9a"
},
{
"type": "color",
"id": "divider_color",
"label": "Divider",
"default": "#e2e2e2"
}
],
"blocks": [
{
"type": "nav_item",
"name": "Navigation item",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title",
"default": "All Product"
},
{
"type": "url",
"id": "link",
"label": "Link"
}
]
}
],
"presets": [
{
"name": "Collection Anchor Nav",
"blocks": [
{
"type": "nav_item",
"settings": {
"title": "All Product",
"link": "#all-product"
}
},
{
"type": "nav_item",
"settings": {
"title": "Accessory",
"link": "#accessory"
}
},
{
"type": "nav_item",
"settings": {
"title": "Comparison",
"link": "#comparison"
}
}
]
}
]
}