Hello
I would like to show a Nested Menu for second level and third level at a same time on my mobile menu
At the moment it is like this
and i would like it to be like this
datsau
hi @TBS2023
Thanks for reaching out to the shopify community.
we tried to the review the shared URL but unfortuntaelly we are unable to view the website in order to assist you better.
please check and share the right URL which we can access and update you accordingly.
please try now
Ok let me check
This is the code for my Mobile Menu
{%- liquid
assign animation_name = 'drawer-items-fade'
assign animation_duration = 500
assign animation_delay = 0
assign animation_delay_initial = 200
assign animation_delay_increment = 50
assign block_index_pinned = 1
assign block_index_dynamic = 1
assign search_id = 'mobile--' | append: section.id
assign color_scheme = 'color-' | append: section.settings.color_scheme
capture section_style
echo '--COLUMNS: 2; --COLUMNS-MEDIUM: 2; --COLUMNS-SMALL: 2; --COLUMNS-MOBILE: 1;'
endcapture
assign logo = section.settings.logo
assign logo_width = section.settings.logo_max_limit
assign logo_width_15x = logo_width | times: 1.5 | round
assign logo_width_2x = logo_width | times: 2 | round
assign logo_widths = logo_width | append: ',' | append: logo_width_15x | append: ',' | append: logo_width_2x | append: ',' | append: logo_width | append: ',' | append: logo_width_15x | append: ',' | append: logo_width_2x
-%}
{% schema %}
{
"name": "Mobile menu",
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo"
},
{
"type": "range",
"id": "logo_max_limit",
"min": 30,
"max": 250,
"step": 5,
"unit": "px",
"label": "Logo width",
"default": 120
},
{
"type": "header",
"content": "Color"
},
{
"type": "color_scheme",
"id": "color_scheme",
"default": "scheme_1",
"label": "Color scheme"
}
],
"blocks": [
{
"type": "menu",
"name": "Menu",
"limit": 1,
"settings": [
{
"type": "link_list",
"label": "Menu",
"id": "mobile_menu_linklist"
},
{
"type": "select",
"id": "text_font_size",
"label": "Text size",
"info": "Automatically generated by the base size.",
"default": "body-large",
"options": [
{"value": "body-x-small", "label": "Extra small"},
{"value": "body-small", "label": "Small"},
{"value": "body-medium", "label": "Medium"},
{"value": "body-large", "label": "Large"},
{"value": "body-x-large", "label": "Extra large"}
]
},
{
"type": "header",
"content": "Highlight link"
},
{
"type": "text",
"id": "highlight_item",
"label": "Menu item",
"default": "Sale"
},
{
"type": "color",
"id": "highlight_item_color",
"label": "Color",
"default": "#D02E2E"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "checkbox",
"id": "padding",
"label": "Add padding",
"default": true
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 14
}
]
},
{
"type": "menu-columns",
"name": "Menu columns",
"limit": 1,
"settings": [
{
"type": "link_list",
"label": "Menu",
"info": "This menu won't show dropdown items.",
"id": "mobile_menu_linklist"
},
{
"type": "select",
"id": "text_font_size",
"label": "Text size",
"info": "Automatically generated by the base size. Applies only when content in Text field is set to Paragraph.",
"default": "body-large",
"options": [
{"value": "body-x-small", "label": "Extra small"},
{"value": "body-small", "label": "Small"},
{"value": "body-medium", "label": "Medium"},
{"value": "body-large", "label": "Large"},
{"value": "body-x-large", "label": "Extra large"}
]
},
{
"type": "header",
"content": "Highlight link"
},
{
"type": "text",
"id": "highlight_item",
"label": "Menu item",
"default": "Sale"
},
{
"type": "color",
"id": "highlight_item_color",
"label": "Color",
"default": "#D02E2E"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "checkbox",
"id": "padding",
"label": "Add padding",
"default": true
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 14
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "url",
"id": "image_url",
"label": "Link"
},
{
"type": "select",
"id": "image_alignment",
"label": "Image alignment",
"default": "left",
"options": [
{ "label": "Left", "value": "left" },
{ "label": "Center", "value": "center" },
{ "label": "Right", "value": "right" }
]
},
{
"type": "range",
"id": "image_width",
"label": "Image width",
"min": 5,
"max": 100,
"step": 5,
"unit": "%",
"default": 20
},
{
"type": "header",
"content": "Layout"
},
{
"type": "checkbox",
"id": "pin_to_bottom",
"label": "Pin to bottom",
"default": false
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 14
}
]
},
{
"type": "icon",
"name": "Icon",
"settings": [
{
"type": "select",
"id": "icon_name",
"label": "Icon",
"default": "icon-award",
"options": [
{ "label": "Award", "value": "icon-award" },
{ "label": "Box", "value": "icon-box" },
{ "label": "Chat", "value": "icon-chat" },
{ "label": "Cloud", "value": "icon-cloud" },
{ "label": "Diameter", "value": "icon-diameter" },
{ "label": "Discount", "value": "icon-discount" },
{ "label": "Donation", "value": "icon-donation" },
{ "label": "Droplet", "value": "icon-droplet" },
{ "label": "Info", "value": "icon-info-empty" },
{ "label": "Email", "value": "icon-email" },
{ "label": "Fast shipment", "value": "icon-fast-shipment" },
{ "label": "Flare", "value": "icon-flare" },
{ "label": "Flower", "value": "icon-flower" },
{ "label": "Gift", "value": "icon-gift" },
{ "label": "Green shipment", "value": "icon-green-shipment" },
{ "label": "Heart", "value": "icon-heart" },
{ "label": "Leaf", "value": "icon-leaf" },
{ "label": "Lightening", "value": "icon-lightening" },
{ "label": "Location", "value": "icon-location" },
{ "label": "Mail", "value": "icon-mail" },
{ "label": "Notes", "value": "icon-notes" },
{ "label": "Pants", "value": "icon-pants" },
{ "label": "Peace", "value": "icon-peace" },
{ "label": "Pin", "value": "icon-pin" },
{ "label": "Planet", "value": "icon-planet" },
{ "label": "Phone", "value": "icon-phone" },
{ "label": "Recycle", "value": "icon-recycle" },
{ "label": "Ruler", "value": "icon-ruler" },
{ "label": "Shield", "value": "icon-shield" },
{ "label": "Smile", "value": "icon-smile" },
{ "label": "Star", "value": "icon-star" },
{ "label": "Tree", "value": "icon-tree" },
{ "label": "Trophy", "value": "icon-trophy" },
{ "label": "Truck", "value": "icon-truck" },
{ "label": "Vegan", "value": "icon-vegan" },
{ "label": "Wash", "value": "icon-wash" },
{ "label": "Washing machine", "value": "icon-washing-machine" }
]
},
{
"type": "image_picker",
"id": "image",
"label": "Alternative icon/image"
},
{
"type": "range",
"id": "icon_size",
"label": "Size",
"unit": "px",
"min": 20,
"max": 80,
"step": 5,
"default": 20
},
{
"type": "color",
"id": "icon_color",
"label": "Icon color"
},
{
"type": "header",
"content": "Typography"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "
Title<\/p>"
},
{
"type": "select",
"id": "text_font_size",
"label": "Text size",
"info": "Automatically generated by the base size. Applies only when content in Text field is set to Paragraph.",
"default": "body-medium",
"options": [
{"value": "body-x-small", "label": "Extra small"},
{"value": "body-small", "label": "Small"},
{"value": "body-medium", "label": "Medium"},
{"value": "body-large", "label": "Large"},
{"value": "body-x-large", "label": "Extra large"}
]
},
{
"type": "header",
"content": "Layout"
},
{
"type": "checkbox",
"id": "pin_to_bottom",
"label": "Pin to bottom",
"default": false
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 14
}
]
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "textarea",
"id": "text",
"label": "Text",
"default": "Free shipping on orders over $100"
},
{
"type": "select",
"id": "align_text",
"label": "Text alignment",
"default": "text-left",
"options": [
{ "value": "text-left","label": "Left" },
{ "value": "text-center","label": "Centered" }
]
},
{
"type": "select",
"id": "text_font_size",
"label": "Text size",
"info": "Automatically generated by the base size. Applies only when content in Text field is set to Paragraph.",
"default": "body-large",
"options": [
{"value": "body-x-small", "label": "Extra small"},
{"value": "body-small", "label": "Small"},
{"value": "body-medium", "label": "Medium"},
{"value": "body-large", "label": "Large"},
{"value": "body-x-large", "label": "Extra large"}
]
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 14
}
]
},
{
"type": "button",
"name": "Button",
"settings": [
{
"type": "text",
"id": "button_text",
"label": "Text",
"default": "Shop now"
},
{
"type": "url",
"id": "button_url",
"label": "Link"
},
{
"type": "select",
"id": "button_type",
"label": "Color",
"default": "btn--primary",
"options": [
{ "value": "btn--black", "label": "Black" },
{ "value": "btn--white", "label": "White" },
{ "value": "btn--primary", "label": "Primary" },
{ "value": "btn--secondary", "label": "Secondary" }
]
},
{
"type": "select",
"id": "button_size",
"label": "Size",
"default": "",
"options": [
{ "label": "Small", "value": "btn--small" },
{ "label": "Medium", "value": "" },
{ "label": "Large", "value": "btn--large" }
]
},
{
"type": "select",
"id": "button_style",
"label": "Style",
"default": "btn--solid",
"options": [
{ "label": "Solid", "value": "btn--solid" },
{ "label": "Outline", "value": "btn--outline" },
{ "label": "Text", "value": "btn--text" }
]
},
{
"type": "checkbox",
"id": "show_arrow",
"label": "Show arrow",
"default": false
},
{
"type": "header",
"content": "Layout"
},
{
"type": "checkbox",
"id": "pin_to_bottom",
"label": "Pin to bottom",
"default": false
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 14
}
]
},
{
"type": "review",
"name": "Review",
"settings": [
{
"type": "range",
"id": "rating",
"label": "Star rating",
"min": 4,
"max": 5,
"step": 0.5,
"default": 5
},
{
"type": "header",
"content": "Typography"
},
{
"type": "textarea",
"id": "text",
"label": "Testimonial",
"default": "Use this text to showcase a review from one of your customers. A great review is honest and speaks to the concerns of your customers."
},
{
"type": "select",
"id": "text_font_size",
"label": "Text size",
"info": "Automatically generated by the base size.",
"default": "body-large",
"options": [
{ "value": "body-x-small", "label": "Extra small" },
{ "value": "body-small", "label": "Small" },
{ "value": "body-medium", "label": "Medium" },
{ "value": "body-large", "label": "Large" },
{ "value": "body-x-large", "label": "Extra large" }
]
},
{
"type": "text",
"id": "title",
"label": "Customer name",
"default": "Customer name"
},
{
"type": "header",
"content": "Colors"
},
{
"type": "paragraph",
"content": "Overrides color scheme. Set to Transparent to revert back to using color schemes."
},
{
"type": "color",
"id": "bg_color",
"label": "Background"
},
{
"type": "color",
"id": "color",
"label": "Text"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "checkbox",
"id": "pin_to_bottom",
"label": "Pin to bottom",
"default": false
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 14
}
]
},
{
"type": "localization",
"name": "Language and currency",
"limit": 1,
"settings": [
{
"type": "header",
"content": "Language selector",
"info": "To add a language, go to your [language settings.](/admin/settings/languages)"
},
{
"type": "checkbox",
"id": "show_locale_selector",
"label": "Show language selector",
"default": true
},
{
"type": "header",
"content": "Country/Region selector",
"info": "To add a country/region, go to your [markets settings](/admin/settings/markets)."
},
{
"type": "checkbox",
"id": "show_country_selector",
"label": "Show country/region selector",
"default": true
},
{
"type": "checkbox",
"id": "show_country_name",
"label": "Show country name",
"default": false
},
{
"type": "checkbox",
"id": "show_country_flag",
"label": "Show country flag",
"default": true
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Width",
"default": "full",
"options": [
{ "label": "Full width", "value": "full" },
{ "label": "Half", "value": "half" }
]
},
{
"type": "checkbox",
"id": "pin_to_bottom",
"label": "Pin to bottom",
"default": true
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 14
}
]
},
{
"type": "socials",
"name": "Social media",
"limit": 1,
"settings": [
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Width",
"default": "full",
"options": [
{ "label": "Full width", "value": "full" },
{ "label": "Half", "value": "half" }
]
},
{
"type": "checkbox",
"id": "pin_to_bottom",
"label": "Pin to bottom",
"default": false
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 14
}
]
},
{
"type": "collection",
"name": "Collection",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "Replace the collection image with a custom image"
},
{
"type": "range",
"id": "image_width",
"label": "Image width",
"min": 5,
"max": 50,
"step": 5,
"unit": "%",
"default": 20
},
{
"type": "header",
"content": "Typography"
},
{
"type": "select",
"id": "text_font_size",
"label": "Text size",
"info": "Automatically generated by the base size.",
"default": "body-medium",
"options": [
{ "value": "body-x-small", "label": "Extra small" },
{ "value": "body-small", "label": "Small" },
{ "value": "body-medium", "label": "Medium" },
{ "value": "body-large", "label": "Large" },
{ "value": "body-x-large", "label": "Extra large" }
]
},
{
"type": "header",
"content": "Color"
},
{
"type": "color",
"id": "bg_color",
"label": "Background"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "checkbox",
"id": "padding",
"label": "Add inner padding",
"default": false
},
{
"type": "checkbox",
"id": "pin_to_bottom",
"label": "Pin to bottom",
"default": false
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 14
}
]
},
{
"type": "product",
"name": "Product",
"settings": [
{
"label": "Product",
"id": "product",
"type": "product"
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "Replace the collection image with a custom image"
},
{
"type": "range",
"id": "image_width",
"label": "Image width",
"min": 5,
"max": 50,
"step": 5,
"unit": "%",
"default": 20
},
{
"type": "header",
"content": "Typography"
},
{
"type": "select",
"id": "text_font_size",
"label": "Text size",
"info": "Automatically generated by the base size.",
"default": "body-medium",
"options": [
{ "value": "body-x-small", "label": "Extra small" },
{ "value": "body-small", "label": "Small" },
{ "value": "body-medium", "label": "Medium" },
{ "value": "body-large", "label": "Large" },
{ "value": "body-x-large", "label": "Extra large" }
]
},
{
"type": "header",
"content": "Color"
},
{
"type": "color",
"id": "bg_color",
"label": "Background"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "checkbox",
"id": "padding",
"label": "Add inner padding",
"default": false
},
{
"type": "checkbox",
"id": "pin_to_bottom",
"label": "Pin to bottom",
"default": false
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 14
}
]
},
{
"type": "divider",
"name": "Divider",
"settings": [
{
"type": "checkbox",
"id": "show_line",
"label": "Show line",
"default": true
},
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 14
}
]
},
{
"type": "search",
"name": "Search bar",
"limit": 1,
"settings": [
{
"type": "header",
"content": "Block spacing"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 14
}
]
}
],
"presets": [
{
"name": "Mobile menu",
"category": "Text",
"blocks": [
{
"type": "menu"
}
]
}
],
"enabled_on": {
"groups": ["header"]
}
}
{% endschema %}