How can I add arrow emojis to my drop down menu headers?

[willmvalmadre]

I want to add an arrow emoji next to the menu items that have lists.

Please see attached a photo example of what I would like. Could someone please help me because I cannot find a solution. I use the pipeline theme.

Website link:

https://willvalmadre.com

Password - Indi

[made4Uo]

HI @willmvalmadre ,

Unfortunately, this can be done by editing the code inside the file. Do you mind sharing the code you have for the header?

[willmvalmadre]

Would this be the header.liquid that you are looking for?

[made4Uo]

@willmvalmadre

Yes, can you copy/paste the code here

[willmvalmadre]

{%- liquid
assign transparent_header = false
if template contains ‘collection’ and collection.image and section.settings.transparent_collection
assign transparent_header = true
elsif template contains ‘article’ and article.image and section.settings.transparent_article
assign transparent_header = true
elsif template contains ‘blog’ and section.settings.transparent_blog
assign transparent_header = true
elsif template contains ‘page’ and section.settings.transparent_page
assign transparent_header = true
elsif template == ‘index’ and section.settings.transparent_home
assign transparent_header = true
endif

assign width_wrapper_class = ‘wrapper’
if section.settings.full_width
assign width_wrapper_class = ‘wrapper–full’
endif

if section.settings.main_menu_linklist
assign main_menu_linklist = section.settings.main_menu_linklist
else
assign main_menu_linklist = ‘main-menu’
endif

if section.settings.logo != blank
assign logo_denom = section.settings.logo.aspect_ratio | default: 1
assign logo_height = section.settings.logo_max_limit | divided_by: logo_denom
assign menu_height = logo_height | floor | plus: 30

assign logo_width = section.settings.logo_max_limit | append: ‘px’
else
assign menu_height = 80
assign logo_width = ‘auto’
endif
-%}

:root { --COLOR-NAV-TEXT-TRANSPARENT: {{ section.settings.transparent_text_color }}; --menu-height: calc({{ menu_height }}px); }

{% capture logos %}
{%- if transparent_header and section.settings.transparent_logo != blank and section.settings.logo != blank -%}
{%- assign has_transparent_logo = true -%}
{%- endif -%}

{% if section.settings.logo != blank %} {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {% else %} {% liquid assign classes = '' assign title_length = shop.name | size assign oneword = true if shop.name contains ' ' or shop.name contains '-' assign oneword = false endif if title_length > 15 assign classes = classes | append: ' header__logo__text--long' if oneword assign classes = classes | append: ' header__logo__text--break' endif endif %}

{{ shop.name }}

{% endif %} {% if has_transparent_logo %} {%- assign img_url = section.settings.transparent_logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {% endif %}

{% if section.settings.logo != blank %}



{% endif %}

{% endcapture %}

{% capture cart_status %}


{{ cart.total_price | money }}


({{ cart.item_count }})

{% assign cart_full = false %}
{%- if cart.item_count > 0 -%}
{% assign cart_full = true %}
{%- endif -%}


{% endcapture %}

{% capture minimal %}

{% render 'icon-nav' %}

{{ logos }}

{% render 'icon-cart' %} {{ 'layout.cart.title' | t }} {{ cart_status }}

{% endcapture %}

{% capture cart_content %}
{%- capture text_wrapper -%}
{%- unless section.settings.use_icons -%}
data-text-items-wrapper
{%- endunless -%}
{%- endcapture -%}
{%- capture text_hover -%}
{%- unless section.settings.use_icons -%}
data-main-menu-text-item
{%- endunless -%}
{%- endcapture -%}

{%- if shop.customer_accounts_enabled and section.settings.enable_account -%}

{% if section.settings.use_icons %} {% render 'icon-account' %} {{ 'customer.account.title' | t }} {% else %} {{ 'layout.customer.account' | t }} {% endif %}

{% endif %}

{% if section.settings.enable_search %}

{% if section.settings.use_icons %} {% render 'icon-search' %} {{ 'general.search.submit' | t }} {% else %} {{ 'general.search.submit' | t }} {% endif %}

{% endif %}

{% if section.settings.use_icons %} {% render 'icon-cart' %} {{ 'layout.cart.title' | t }} {{ cart_status }} {% else %} {{ 'layout.cart.title' | t }} {{ cart_status }} {% endif %}

{% endcapture %}

{% capture menu %}

{% for link in linklists[main_menu_linklist].links %} {% render 'nav-item', link: link, section: section, index: forloop.index %} {% endfor %}

{% endcapture %}

{% capture drawer %}

{%- form 'localization', class: 'header__drawer__selects', id: 'localization-form-drawer' -%} {%- if shop.published_locales.size > 1 -%} {%- render 'select-locale', form: form, unique: 'localization-form-drawer', wrapper_class: 'popout--navbar' -%} {%- endif -%}

{%- if shop.enabled_currencies.size > 1 -%}
{%- render ‘select-currency’, form: form, unique: ‘localization-form-drawer’, wrapper_class: ‘popout–navbar’ -%}
{%- endif -%}
{%- endform -%}

{%- if shop.customer_accounts_enabled and section.settings.enable_account -%}

{% render ‘icon-account’ %}
{{ ‘customer.account.title’ | t }}

{%- endif -%}

{% render ‘icon-close’ %}

{% if section.settings.enable_search %}

{% render 'search-predictive', version: 'search-drawer' %}

{% endif %}

{% for link in linklists[main_menu_linklist].links %} {% render 'nav-item-mobile', link: link, section: section, index: forloop.index %} {% endfor %}

{% endcapture %}

{{ minimal }}

{%- case section.settings.header_style -%} {%- when 'logo_center' -%}

{{ menu }}

{{ logos }}

{{ cart_content }}

{%- when 'menu_center' -%}

{{ logos }}

{{ menu }}

{{ cart_content }}

{%- when 'split' -%}

{{ logos }}

{{ menu }} {{ cart_content }}

{%- endcase -%}

{{ drawer }} {%- if settings.cart_style == "drawer" or settings.cart_style == "pop" -%} {%- if template.name != 'cart' -%} {% render 'cart-drawer' %} {%- endif -%} {%- endif -%}

{% if template.name == ‘index’ %}
{% assign potential_action_target = shop.url | append: “/search?q={search_term_string}” %}

{% endif %}

{% schema %}
{
“name”: “Header”,
“settings”: [
{
“type”: “select”,
“id”: “header_style”,
“label”: “Header style”,
“default”: “split”,
“options”: [
{ “value”: “logo_center”, “label”: “Menu | Logo | Cart”},
{ “value”: “menu_center”, “label”: “Logo | Menu | Cart”},
{ “value”: “split”, “label”: “Logo | Spacer | Menu + Cart”},
{ “value”: “drawer”, “label”: “Mobile drawer menu”}
],
“info”: “Learn more about header styles”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Logo image”
},
{
“type”: “range”,
“id”: “logo_max_limit”,
“min”: 5,
“max”: 495,
“step”: 5,
“unit”: “px”,
“label”: “Logo width”,
“default”: 120
},
{
“type”: “header”,
“content”: “Links”
},
{
“type”: “link_list”,
“label”: “Menu”,
“id”: “main_menu_linklist”
},
{
“type”: “checkbox”,
“id”: “full_width”,
“default”: false,
“label”: “Full width”
},
{
“type”: “checkbox”,
“id”: “underline_current”,
“default”: false,
“label”: “Underline current page”
},
{
“type”: “checkbox”,
“id”: “enable_search”,
“default”: true,
“label”: “Show search in header”
},
{
“type”: “checkbox”,
“id”: “enable_account”,
“default”: true,
“label”: “Show account link in header”,
“info”: “Accounts must be optional or required in your checkout settings”
},
{
“type”: “checkbox”,
“id”: “use_icons”,
“label”: “Use icons”,
“default”: false,
“info”: “For cart, account and header”
},
{
“type”: “header”,
“content”: “Sticky header”
},
{
“type”: “select”,
“id”: “header_sticky”,
“label”: “Header scroll behavior”,
“default”: “static”,
“options”: [
{ “value”: “static”, “label”: “Default”},
{ “value”: “sticky”, “label”: “Sticky header”},
{ “value”: “directional”, “label”: “Sticky header only when scrolling up”}
]
},
{
“type”: “header”,
“content”: “Transparent header”
},
{
“type”: “checkbox”,
“id”: “transparent_home”,
“label”: “Enable on the home page”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “transparent_collection”,
“label”: “Enable on collections”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “transparent_blog”,
“label”: “Enable on the blog”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “transparent_article”,
“label”: “Enable on articles”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “transparent_page”,
“label”: “Enable on pages”,
“default”: false
},
{
“type”: “color”,
“id”: “transparent_text_color”,
“label”: “Text and icons color”,
“default”: “#ffffff”
},
{
“type”: “image_picker”,
“id”: “transparent_logo”,
“label”: “Alternate logo”
}
],
“blocks”: [
{
“name”: “Image”,
“type”: “image”,
“settings”: [
{
“type”: “select”,
“id”: “position”,
“label”: “Link position in main menu”,
“default”: “1”,
“options”: [
{ “value”: “1”, “label”: “Item 1”},
{ “value”: “2”, “label”: “Item 2”},
{ “value”: “3”, “label”: “Item 3”},
{ “value”: “4”, “label”: “Item 4”},
{ “value”: “5”, “label”: “Item 5”},
{ “value”: “6”, “label”: “Item 6”},
{ “value”: “7”, “label”: “Item 7”},
{ “value”: “8”, “label”: “Item 8”},
{ “value”: “9”, “label”: “Item 9”},
{ “value”: “10”, “label”: “Item 10”}
]
},
{
“type”: “range”,
“id”: “aspect_ratio”,
“min”: 0.5,
“max”: 1.5,
“step”: 0.1,
“unit”: “:1”,
“label”: “Image scaling ratio”,
“info”: “Wide to tall”,
“default”: 1.3
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
},
{
“type”: “select”,
“id”: “bg_position”,
“label”: “Position”,
“default”: “center-center”,
“options”: [
{ “label”: “Top”, “value”: “center-top” },
{ “label”: “Right”, “value”: “right-center” },
{ “label”: “Center”, “value”: “center-center” },
{ “label”: “Left”, “value”: “left-center” },
{ “label”: “Bottom”, “value”: “center-bottom” }
]
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”
},
{
“type”: “text”,
“id”: “link_text”,
“label”: “Button”
},
{
“type”: “url”,
“id”: “link”,
“label”: “Link”
}
]
},
{
“name”: “Product”,
“type”: “product”,
“settings”: [
{
“type”: “select”,
“id”: “position”,
“label”: “Link position in main menu”,
“default”: “1”,
“options”: [
{ “value”: “1”, “label”: “Item 1”},
{ “value”: “2”, “label”: “Item 2”},
{ “value”: “3”, “label”: “Item 3”},
{ “value”: “4”, “label”: “Item 4”},
{ “value”: “5”, “label”: “Item 5”},
{ “value”: “6”, “label”: “Item 6”},
{ “value”: “7”, “label”: “Item 7”},
{ “value”: “8”, “label”: “Item 8”},
{ “value”: “9”, “label”: “Item 9”},
{ “value”: “10”, “label”: “Item 10”}
]
},
{
“type”: “product”,
“id”: “product”,
“label”: “Product”
}
]
},
{
“name”: “Collection”,
“type”: “collection”,
“settings”: [
{
“type”: “select”,
“id”: “position”,
“label”: “Link position in main menu”,
“default”: “1”,
“options”: [
{ “value”: “1”, “label”: “Item 1”},
{ “value”: “2”, “label”: “Item 2”},
{ “value”: “3”, “label”: “Item 3”},
{ “value”: “4”, “label”: “Item 4”},
{ “value”: “5”, “label”: “Item 5”},
{ “value”: “6”, “label”: “Item 6”},
{ “value”: “7”, “label”: “Item 7”},
{ “value”: “8”, “label”: “Item 8”},
{ “value”: “9”, “label”: “Item 9”},
{ “value”: “10”, “label”: “Item 10”}
]
},
{
“type”: “collection”,
“id”: “collection”,
“label”: “Collection”
},
{
“type”: “range”,
“id”: “limit”,
“min”: 1,
“max”: 10,
“step”: 1,
“label”: “Product limit”,
“default”: 4
}
]
}
]
}
{% endschema %}

[made4Uo]

Hi @willmvalmadre

Thank you for providing the code but the main code to edit is not there based on your theme code. We need the nav-item

Can you copy the Snippet code instead.

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Snippet folder, open the nav-item.liquid
3. Copy/Paste the code here

[KetanKumar]

@willmvalmadre

yes, please provide header code it can be done some custom changes your header

[willmvalmadre]

{%- liquid
assign parent = false
assign grandparent = false
if link.levels == 1
assign parent = true
endif
if link.levels == 2
assign grandparent = true
endif

assign child_count = 0
if grandparent
assign child_count = link.links.size
if child_count > 10
assign child_count = 10
endif
endif

assign index = index | append: “”
for block in section.blocks
if block.settings.position == index
assign grandparent = true
if block.type == ‘collection’
assign child_count = child_count | plus: block.settings.limit
else
assign child_count = child_count | plus: 1
endif
endif
endfor

if parent or grandparent
assign expands = true
assign key = link.url | append: link.title | append: link.levels | md5
endif

if parent and link.levels == 1
assign child_count = child_count | plus: 1
endif

assign link_title_handle = link.title | handle
assign highlight_links = ‘general.header.highlight_links’ | t | strip | split: ‘,’ | join: ‘’ | handle | replace: '-’, ‘’ | replace: '-’, ‘’ | split: '’
-%}
{% capture classes %}{% if grandparent %} grandparent kids-{{ child_count }} {% elsif parent %} parent{% else %} child{% endif %}{% if link.active %} main-menu–active{% endif %}{% endcapture %}

{{ link.title | escape }} {% if expands %}

{%- if grandparent -%}

{% if link.levels == 2 %}
{% for link in link.links %}

{% assign link_title_handle = link.title | handle %} {{ link.title | escape }} {% for link in link.links %} {% assign link_title_handle = link.title | handle %} {{ link.title | escape }} {% endfor %}

{% endfor %} {% elsif link.levels == 1 %}

{% for link in link.links %} {% assign link_title_handle = link.title | handle %} {{ link.title | escape }} {% endfor %}

{% endif %}

{% for block in section.blocks %}
{% comment %} Render block content {% endcomment %}
{%- if block.settings.position == index -%}
{% render ‘header-block’, block: block %}
{%- endif -%}
{% endfor %}

{%- else -%}
{% comment %} Simple dropdown {% endcomment %}
{% for link in link.links %}
{% assign link_title_handle = link.title | handle %}

{{ link.title | escape }}

{% endfor %}
{%- endif -%}

{% endif %}

[willmvalmadre]

{%- liquid
assign transparent_header = false
if template contains ‘collection’ and collection.image and section.settings.transparent_collection
assign transparent_header = true
elsif template contains ‘article’ and article.image and section.settings.transparent_article
assign transparent_header = true
elsif template contains ‘blog’ and section.settings.transparent_blog
assign transparent_header = true
elsif template contains ‘page’ and section.settings.transparent_page
assign transparent_header = true
elsif template == ‘index’ and section.settings.transparent_home
assign transparent_header = true
endif

assign width_wrapper_class = ‘wrapper’
if section.settings.full_width
assign width_wrapper_class = ‘wrapper–full’
endif

if section.settings.main_menu_linklist
assign main_menu_linklist = section.settings.main_menu_linklist
else
assign main_menu_linklist = ‘main-menu’
endif

if section.settings.logo != blank
assign logo_denom = section.settings.logo.aspect_ratio | default: 1
assign logo_height = section.settings.logo_max_limit | divided_by: logo_denom
assign menu_height = logo_height | floor | plus: 30

assign logo_width = section.settings.logo_max_limit | append: ‘px’
else
assign menu_height = 80
assign logo_width = ‘auto’
endif
-%}

:root { --COLOR-NAV-TEXT-TRANSPARENT: {{ section.settings.transparent_text_color }}; --menu-height: calc({{ menu_height }}px); }

{% capture logos %}
{%- if transparent_header and section.settings.transparent_logo != blank and section.settings.logo != blank -%}
{%- assign has_transparent_logo = true -%}
{%- endif -%}

{% if section.settings.logo != blank %} {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {% else %} {% liquid assign classes = '' assign title_length = shop.name | size assign oneword = true if shop.name contains ' ' or shop.name contains '-' assign oneword = false endif if title_length > 15 assign classes = classes | append: ' header__logo__text--long' if oneword assign classes = classes | append: ' header__logo__text--break' endif endif %}

{{ shop.name }}

{% endif %} {% if has_transparent_logo %} {%- assign img_url = section.settings.transparent_logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {% endif %}

{% if section.settings.logo != blank %}



{% endif %}

{% endcapture %}

{% capture cart_status %}


{{ cart.total_price | money }}


({{ cart.item_count }})

{% assign cart_full = false %}
{%- if cart.item_count > 0 -%}
{% assign cart_full = true %}
{%- endif -%}


{% endcapture %}

{% capture minimal %}

{% render 'icon-nav' %}

{{ logos }}

{% render 'icon-cart' %} {{ 'layout.cart.title' | t }} {{ cart_status }}

{% endcapture %}

{% capture cart_content %}
{%- capture text_wrapper -%}
{%- unless section.settings.use_icons -%}
data-text-items-wrapper
{%- endunless -%}
{%- endcapture -%}
{%- capture text_hover -%}
{%- unless section.settings.use_icons -%}
data-main-menu-text-item
{%- endunless -%}
{%- endcapture -%}

{%- if shop.customer_accounts_enabled and section.settings.enable_account -%}

{% if section.settings.use_icons %} {% render 'icon-account' %} {{ 'customer.account.title' | t }} {% else %} {{ 'layout.customer.account' | t }} {% endif %}

{% endif %}

{% if section.settings.enable_search %}

{% if section.settings.use_icons %} {% render 'icon-search' %} {{ 'general.search.submit' | t }} {% else %} {{ 'general.search.submit' | t }} {% endif %}

{% endif %}

{% if section.settings.use_icons %} {% render 'icon-cart' %} {{ 'layout.cart.title' | t }} {{ cart_status }} {% else %} {{ 'layout.cart.title' | t }} {{ cart_status }} {% endif %}

{% endcapture %}

{% capture menu %}

{% for link in linklists[main_menu_linklist].links %} {% render 'nav-item', link: link, section: section, index: forloop.index %} {% endfor %}

{% endcapture %}

{% capture drawer %}

{%- form 'localization', class: 'header__drawer__selects', id: 'localization-form-drawer' -%} {%- if shop.published_locales.size > 1 -%} {%- render 'select-locale', form: form, unique: 'localization-form-drawer', wrapper_class: 'popout--navbar' -%} {%- endif -%}

{%- if shop.enabled_currencies.size > 1 -%}
{%- render ‘select-currency’, form: form, unique: ‘localization-form-drawer’, wrapper_class: ‘popout–navbar’ -%}
{%- endif -%}
{%- endform -%}

{%- if shop.customer_accounts_enabled and section.settings.enable_account -%}

{% render ‘icon-account’ %}
{{ ‘customer.account.title’ | t }}

{%- endif -%}

{% render ‘icon-close’ %}

{% if section.settings.enable_search %}

{% render 'search-predictive', version: 'search-drawer' %}

{% endif %}

{% for link in linklists[main_menu_linklist].links %} {% render 'nav-item-mobile', link: link, section: section, index: forloop.index %} {% endfor %}

{% endcapture %}

{{ minimal }}

{%- case section.settings.header_style -%} {%- when 'logo_center' -%}

{{ menu }}

{{ logos }}

{{ cart_content }}

{%- when 'menu_center' -%}

{{ logos }}

{{ menu }}

{{ cart_content }}

{%- when 'split' -%}

{{ logos }}

{{ menu }} {{ cart_content }}

{%- endcase -%}

{{ drawer }} {%- if settings.cart_style == "drawer" or settings.cart_style == "pop" -%} {%- if template.name != 'cart' -%} {% render 'cart-drawer' %} {%- endif -%} {%- endif -%}

{% if template.name == ‘index’ %}
{% assign potential_action_target = shop.url | append: “/search?q={search_term_string}” %}

{% endif %}

{% schema %}
{
“name”: “Header”,
“settings”: [
{
“type”: “select”,
“id”: “header_style”,
“label”: “Header style”,
“default”: “split”,
“options”: [
{ “value”: “logo_center”, “label”: “Menu | Logo | Cart”},
{ “value”: “menu_center”, “label”: “Logo | Menu | Cart”},
{ “value”: “split”, “label”: “Logo | Spacer | Menu + Cart”},
{ “value”: “drawer”, “label”: “Mobile drawer menu”}
],
“info”: “Learn more about header styles”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Logo image”
},
{
“type”: “range”,
“id”: “logo_max_limit”,
“min”: 5,
“max”: 495,
“step”: 5,
“unit”: “px”,
“label”: “Logo width”,
“default”: 120
},
{
“type”: “header”,
“content”: “Links”
},
{
“type”: “link_list”,
“label”: “Menu”,
“id”: “main_menu_linklist”
},
{
“type”: “checkbox”,
“id”: “full_width”,
“default”: false,
“label”: “Full width”
},
{
“type”: “checkbox”,
“id”: “underline_current”,
“default”: false,
“label”: “Underline current page”
},
{
“type”: “checkbox”,
“id”: “enable_search”,
“default”: true,
“label”: “Show search in header”
},
{
“type”: “checkbox”,
“id”: “enable_account”,
“default”: true,
“label”: “Show account link in header”,
“info”: “Accounts must be optional or required in your checkout settings”
},
{
“type”: “checkbox”,
“id”: “use_icons”,
“label”: “Use icons”,
“default”: false,
“info”: “For cart, account and header”
},
{
“type”: “header”,
“content”: “Sticky header”
},
{
“type”: “select”,
“id”: “header_sticky”,
“label”: “Header scroll behavior”,
“default”: “static”,
“options”: [
{ “value”: “static”, “label”: “Default”},
{ “value”: “sticky”, “label”: “Sticky header”},
{ “value”: “directional”, “label”: “Sticky header only when scrolling up”}
]
},
{
“type”: “header”,
“content”: “Transparent header”
},
{
“type”: “checkbox”,
“id”: “transparent_home”,
“label”: “Enable on the home page”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “transparent_collection”,
“label”: “Enable on collections”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “transparent_blog”,
“label”: “Enable on the blog”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “transparent_article”,
“label”: “Enable on articles”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “transparent_page”,
“label”: “Enable on pages”,
“default”: false
},
{
“type”: “color”,
“id”: “transparent_text_color”,
“label”: “Text and icons color”,
“default”: “#ffffff”
},
{
“type”: “image_picker”,
“id”: “transparent_logo”,
“label”: “Alternate logo”
}
],
“blocks”: [
{
“name”: “Image”,
“type”: “image”,
“settings”: [
{
“type”: “select”,
“id”: “position”,
“label”: “Link position in main menu”,
“default”: “1”,
“options”: [
{ “value”: “1”, “label”: “Item 1”},
{ “value”: “2”, “label”: “Item 2”},
{ “value”: “3”, “label”: “Item 3”},
{ “value”: “4”, “label”: “Item 4”},
{ “value”: “5”, “label”: “Item 5”},
{ “value”: “6”, “label”: “Item 6”},
{ “value”: “7”, “label”: “Item 7”},
{ “value”: “8”, “label”: “Item 8”},
{ “value”: “9”, “label”: “Item 9”},
{ “value”: “10”, “label”: “Item 10”}
]
},
{
“type”: “range”,
“id”: “aspect_ratio”,
“min”: 0.5,
“max”: 1.5,
“step”: 0.1,
“unit”: “:1”,
“label”: “Image scaling ratio”,
“info”: “Wide to tall”,
“default”: 1.3
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
},
{
“type”: “select”,
“id”: “bg_position”,
“label”: “Position”,
“default”: “center-center”,
“options”: [
{ “label”: “Top”, “value”: “center-top” },
{ “label”: “Right”, “value”: “right-center” },
{ “label”: “Center”, “value”: “center-center” },
{ “label”: “Left”, “value”: “left-center” },
{ “label”: “Bottom”, “value”: “center-bottom” }
]
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”
},
{
“type”: “text”,
“id”: “link_text”,
“label”: “Button”
},
{
“type”: “url”,
“id”: “link”,
“label”: “Link”
}
]
},
{
“name”: “Product”,
“type”: “product”,
“settings”: [
{
“type”: “select”,
“id”: “position”,
“label”: “Link position in main menu”,
“default”: “1”,
“options”: [
{ “value”: “1”, “label”: “Item 1”},
{ “value”: “2”, “label”: “Item 2”},
{ “value”: “3”, “label”: “Item 3”},
{ “value”: “4”, “label”: “Item 4”},
{ “value”: “5”, “label”: “Item 5”},
{ “value”: “6”, “label”: “Item 6”},
{ “value”: “7”, “label”: “Item 7”},
{ “value”: “8”, “label”: “Item 8”},
{ “value”: “9”, “label”: “Item 9”},
{ “value”: “10”, “label”: “Item 10”}
]
},
{
“type”: “product”,
“id”: “product”,
“label”: “Product”
}
]
},
{
“name”: “Collection”,
“type”: “collection”,
“settings”: [
{
“type”: “select”,
“id”: “position”,
“label”: “Link position in main menu”,
“default”: “1”,
“options”: [
{ “value”: “1”, “label”: “Item 1”},
{ “value”: “2”, “label”: “Item 2”},
{ “value”: “3”, “label”: “Item 3”},
{ “value”: “4”, “label”: “Item 4”},
{ “value”: “5”, “label”: “Item 5”},
{ “value”: “6”, “label”: “Item 6”},
{ “value”: “7”, “label”: “Item 7”},
{ “value”: “8”, “label”: “Item 8”},
{ “value”: “9”, “label”: “Item 9”},
{ “value”: “10”, “label”: “Item 10”}
]
},
{
“type”: “collection”,
“id”: “collection”,
“label”: “Collection”
},
{
“type”: “range”,
“id”: “limit”,
“min”: 1,
“max”: 10,
“step”: 1,
“label”: “Product limit”,
“default”: 4
}
]
}
]
}
{% endschema %}

[made4Uo]

Hi @willmvalmadre ,

Thank you for the code and sorry for the delay.

Please duplicate your theme before doing some changes. Please replace the contents of the nav-item.liquid under the Snippet folder.

NOTE: We might need to adjust the SVG css. Let me know if you placed the code so I can see what changes need to be made. Thank you

{%- liquid
assign parent = false
assign grandparent = false
if link.levels == 1
assign parent = true
endif
if link.levels == 2
assign grandparent = true
endif

assign child_count = 0
if grandparent
assign child_count = link.links.size
if child_count > 10
assign child_count = 10
endif
endif

assign index = index | append: ""
for block in section.blocks
if block.settings.position == index
assign grandparent = true
if block.type == 'collection'
assign child_count = child_count | plus: block.settings.limit
else
assign child_count = child_count | plus: 1
endif
endif
endfor

if parent or grandparent
assign expands = true
assign key = link.url | append: link.title | append: link.levels | md5
endif

if parent and link.levels == 1
assign child_count = child_count | plus: 1
endif

assign link_title_handle = link.title | handle
assign highlight_links = 'general.header.highlight_links' | t | strip | split: ',' | join: '___' | handle | replace: '___-', '___' | replace: '-___', '___' | split: '___'
-%}
{% capture classes %}{% if grandparent %} grandparent kids-{{ child_count }} {% elsif parent %} parent{% else %} child{% endif %}{% if link.active %} main-menu--active{% endif %}{% endcapture %}

{{ link.title | escape }}

{% if expands %}
    

    

    

    {%- if grandparent -%}
    
          {% if link.levels == 2 %}
              {% for link in link.links %}
                  

                  {% assign link_title_handle = link.title | handle %}
                  
                  {{ link.title | escape }}
                  
                  {% for link in link.links %}
                      {% assign link_title_handle = link.title | handle %}
                      
                      {{ link.title | escape }}
                       
                      
                  {% endfor %}
                  

              {% endfor %}
          {% elsif link.levels == 1 %}
              
              {% for link in link.links %}
                  {% assign link_title_handle = link.title | handle %}
                  
                  {{ link.title | escape }} 
                   
                  
              {% endfor %}
              

          {% endif %}
          
          {% for block in section.blocks %}
          {% comment %} Render block content {% endcomment %}
              {%- if block.settings.position == index -%}
                  {% render 'header-block', block: block %}
              {%- endif -%}
          {% endfor %}
          
    {%- else -%}
          {% comment %} Simple dropdown {% endcomment %}
          {% for link in link.links %}
              {% assign link_title_handle = link.title | handle %}
              
              {{ link.title | escape }}
              
          {% endfor %}
    {%- endif -%}
    

    

    

{% endif %}