Hello,
I am looking to add icons next to the text in my shopify drop down menu. I have attached a screenshot of what I am trying to get done.
My store is running symmetry theme, the link is
Any help is greatly appreciated.
Best,
Cameron
Hi @diamors
Because your theme is not free. So I can handle code.
May I suggest to update code these steps:
Method 1: use image
- Go to Store Online-> theme → edit code
-
Sections/header.liquid
-
Find code that show child after that follow code below to update code on your store
{% assign ImageNameChild = childlink.title | handle | append: '.png' %}
{{ childlink.title | escape }}
- Create image files for menu with format name ( handle format)
Ex: Hidden Halo → hidden-hallo.png
- Go go Content → file → upload all images for menu.
Method 2: use CSS
- Go to Store Online-> theme → edit code
- Assets/base.css add CSS like format below
EX: background for Hidden Halo
.header__submenu .header__menu-itemp[href=“/collections/hidden-hallo”]{
background-image: url(‘hidden-hallo.png’);
background-size: 30px auto;
background-position: left center;
background-repeat: no-repeat;
padding-left: 50px;
}
background for Bezel
.header__submenu .header__menu-itemp[href=“/collections/bezel”]{
background-image: url(‘bezel.png’);
background-size: 30px auto;
background-position: left center;
background-repeat: no-repeat;
padding-left: 50px;
}
3. Upload all images to Assets
Hello,
In the header.liquid, I didnt see that exact code as your screenshot. I found the inline nav with children, can you please let me know if any of these lines are where I am supposed to paste your code?
Thank you for the reply,
Cameron
Hi @diamors
Because your theme is custom theme. So I don’t know your structure theme. So I suggest code above for Dawn theme. You only find code related to menu to custom.
Or could you please share header.liquid? I will help to find it
Hello Again, I have copied and pasted the code. If there is a better way to do this, please let me know. Thank you
Show More
{% if section.settings.enable_search %} {%- render 'svg-search' -%} {{- 'layout.search.open' | t -}} {% endif %} {% if section.settings.menu_layout contains 'inline' %}
{% for link in linklists[section.settings.menu_linklist].links %} {%- liquid assign has_dropdown = false if link.links != blank assign has_dropdown = true endif assign use_columns = false if link.levels >= 2 assign use_columns = true else assign link_title_sanitised = link.title | downcase | strip for block in section.blocks assign dropdown_link_title_sanitised = block.settings.dropdown_link_title | downcase | strip if dropdown_link_title_sanitised == link_title_sanitised assign use_columns = true assign has_dropdown = true endif endfor endif -%}- {{- link.title | escape -}} {% endfor %}
{% endif %}
{%- if request.page_type == 'index' and section.settings.logo_h1 -%}# {%- endif -%} {%- if section.settings.logo != blank -%} {%- capture img_size -%}{{ section.settings.logo_img_width_int | times: 2 }}x{%- endcapture -%} {%- if section.settings.enable_transparent and template.name == 'index' and section.settings.transparent_logo != blank -%} {%- endif -%} {%- else -%} {{ shop.name }} {%- endif -%} {%- if request.page_type == 'index' and section.settings.logo_h1 -%}{%- endif -%}
{% if shop.customer_accounts_enabled %} {% if customer %} {{ 'layout.customer.account' | t | escape }} {% render 'svg-user' %} {% else %} {{ 'layout.customer.account' | t | escape }} {% render 'svg-user' %} {% endif %} {% endif %} {% if section.settings.enable_search %} {{- 'layout.search.open' | t -}} {%- render 'svg-search' -%} {% endif %} {{- 'layout.header.cart' | t | escape -}} {%- if section.settings.cart_icon == 'basket' -%} {%- render 'svg-basket' -%} {%- elsif section.settings.cart_icon == 'bag' -%} {%- render 'svg-bag' -%} {%- else -%} {%- render 'svg-cart' -%} {%- endif -%} {%- if cart.item_count > 0 -%} {{ cart.item_count }} {%- endif -%}
{%- if section.settings.enable_search -%} {%- liquid assign show_search_suggestions = false if section.settings.search_suggestions_title != blank or section.settings.search_suggestions_menu != blank assign show_search_suggestions = true endif -%}
{% if show_search_suggestions %}{% if section.settings.search_suggestions_title != blank %}
{{ section.settings.search_suggestions_title }}
{% endif %} {% if section.settings.search_suggestions_menu != blank %} {%- liquid assign suggestions_menu = linklists[section.settings.search_suggestions_menu] if settings.coll_grid_image_shape == 'portrait-23' assign collection_aspect_ratio = 0.67 elsif settings.coll_grid_image_shape == 'portrait-45' assign collection_aspect_ratio = 0.8 elsif settings.coll_grid_image_shape == 'square' assign collection_aspect_ratio = 1.0 elsif settings.coll_grid_image_shape == 'landscape-54' assign collection_aspect_ratio = 1.25 elsif settings.coll_grid_image_shape == 'landscape-32' assign collection_aspect_ratio = 1.50 elsif settings.coll_grid_image_shape == 'tallest' assign collection_aspect_ratio = 999 for link in suggestions_menu.links for child_link in link.links if child_link.type == 'collection_link' if child_link.object.featured_image.aspect_ratio < collection_aspect_ratio assign collection_aspect_ratio = child_link.object.featured_image.aspect_ratio endif endif endfor if link.type == 'collection_link' if link.object.featured_image.aspect_ratio < collection_aspect_ratio assign collection_aspect_ratio = link.object.featured_image.aspect_ratio endif endif endfor else assign collection_aspect_ratio = 0 for link in suggestions_menu.links for child_link in link.links if child_link.type == 'collection_link' and child_link.object.featured_image.aspect_ratio > collection_aspect_ratio assign collection_aspect_ratio = child_link.object.featured_image.aspect_ratio endif endfor if link.type == 'collection_link' and link.object.featured_image.aspect_ratio > collection_aspect_ratio assign collection_aspect_ratio = link.object.featured_image.aspect_ratio endif endfor endif if settings.prod_thumb_shape == 'portrait-23' assign product_aspect_ratio = 0.67 elsif settings.prod_thumb_shape == 'portrait-45' assign product_aspect_ratio = 0.8 elsif settings.prod_thumb_shape == 'square' assign product_aspect_ratio = 1.0 elsif settings.prod_thumb_shape == 'landscape-54' assign product_aspect_ratio = 1.25 elsif settings.prod_thumb_shape == 'landscape-32' assign product_aspect_ratio = 1.50 elsif settings.prod_thumb_shape == 'tallest' assign product_aspect_ratio = 99 for link in suggestions_menu.links for child_link in link.links if child_link.type == 'product_link' and child_link.object.featured_media.preview_image.aspect_ratio < product_aspect_ratio assign product_aspect_ratio = child_link.object.featured_media.preview_image.aspect_ratio endif endfor if link.type == 'product_link' and link.object.featured_media.preview_image.aspect_ratio < product_aspect_ratio assign product_aspect_ratio = link.object.featured_media.preview_image.aspect_ratio endif endfor else assign product_aspect_ratio = 0 for link in suggestions_menu.links for child_link in link.links if child_link.type == 'product_link' and child_link.object.featured_media.preview_image.aspect_ratio > product_aspect_ratio assign product_aspect_ratio = child_link.object.featured_media.preview_image.aspect_ratio endif endfor if link.type == 'product_link' and link.object.featured_media.preview_image.aspect_ratio > product_aspect_ratio assign product_aspect_ratio = link.object.featured_media.preview_image.aspect_ratio endif endfor endif -%}
{% for link in suggestions_menu.links %} {% if link.links != blank %}
{{ link.title | escape }}
{% for child_link in link.links %}
{% if child_link.type == 'collection_link' %} {% render 'collection-block', collection: child_link.object, custom_aspect_ratio: collection_aspect_ratio, manual_image_load: true %} {% elsif child_link.type == 'product_link' %} {% render 'product-block', product: child_link.object, custom_aspect_ratio: product_aspect_ratio, manual_image_load: true %} {% else %} {{ child_link.title | escape }} {% endif %}
{% endfor %}
{% else %}{% if link.type == 'collection_link' %} {% render 'collection-block', collection: link.object, custom_aspect_ratio: collection_aspect_ratio, manual_image_load: true %} {% elsif link.type == 'product_link' %} {% render 'product-block', product: link.object, custom_aspect_ratio: product_aspect_ratio, manual_image_load: true %} {% else %} {{ link.title | escape }} {% endif %}
{% endif %} {% endfor %}
{% endif %}
{% endif %}
{%- endif -%}
{% render 'main-nav-links', link_list: section.settings.menu_linklist, mobile: false, featured_links: featured_links %}
{%- assign mobile_linklist = section.settings.menu_linklist_mobile | default: section.settings.menu_linklist -%}
{%- if section.settings.menu_layout contains 'inline' -%} {%- endif -%} {%- endif -%} {% schema %} { "name": "Header", "class": "section-header", "settings": [ { "type": "image_picker", "id": "logo", "label": "Logo", "info": "520 x 200px (recommended)" }, { "type": "range", "id": "logo_img_width_int", "min": 30, "max": 500, "step": 5, "unit": "px", "label": "Logo width", "default": 180 }, { "type": "range", "id": "mobile_logo_img_width_int", "min": 30, "max": 300, "step": 5, "unit": "px", "label": "Mobile logo width", "default": 100 }, { "type": "checkbox", "id": "logo_h1", "label": "Enable logo# on home page", "info": "For SEO. Deselect only if another section on the home page contains a primary page heading. [Learn more](https://cleancanvas.co.uk/support/symmetry/section-h1-setting)", "default": true }, { "type": "checkbox", "id": "enable_sticky", "label": "Enable sticky header", "default": false }, { "type": "header", "content": "Transparent header" }, { "type": "paragraph", "content": "Home page only. Ensure a full width image section is at the top, like a slideshow." }, { "type": "paragraph", "content": "Store messages will be hidden." }, { "type": "checkbox", "id": "enable_transparent", "label": "Enable transparent header", "default": false }, { "type": "color", "id": "transparent_color", "label": "Text color", "default": "#ffffff" }, { "type": "image_picker", "id": "transparent_logo", "label": "Logo", "info": "Match your main logo size." }, { "type": "header", "content": "Navigation" }, { "type": "link_list", "id": "menu_linklist", "label": "Menu", "default": "main-menu" }, { "type": "link_list", "id": "menu_linklist_mobile", "label": "Mobile menu", "info": "Select a different menu for mobile. Main menu is used if not selected." }, { "type": "select", "id": "menu_layout", "label": "Menu alignment", "info": "Alignment will switch to 'Underneath' if the links do not fit beside the logo", "options": [ { "value": "inline-menu-left", "label": "Left" }, { "value": "inline-menu-center", "label": "Center" }, { "value": "underneath", "label": "Underneath" } ], "default": "underneath" }, { "type": "text", "id": "nav_featured_link", "label": "Featured link", "info": "Enter the title of a link to highlight it in a different color", "default": "Sale" }, { "type": "header", "content": "Mobile navigation" }, { "type": "checkbox", "id": "enable_mobile_promo_carousel", "label": "Enable carousel layout for menu promotions", "info": "Disabled for dropdown menus containing only promotions", "default": true }, { "type": "checkbox", "id": "enable_nav_mob_products", "label": "Enable featured products", "info": "Shows beneath the main menu", "default": false }, { "type": "text", "id": "nav_mob_products_title", "label": "Featured products title", "default": "Best Sellers" }, { "type": "collection", "id": "nav_mob_products_collection", "label": "Featured products collection" }, { "type": "header", "content": "Search" }, { "type": "checkbox", "id": "enable_search", "label": "Enable search", "default": true }, { "type": "text", "id": "search_suggestions_title", "label": "Suggestions title", "info": "Suggestions show when the search is opened." }, { "type": "link_list", "id": "search_suggestions_menu", "label": "Suggestions menu", "info": "Dropdown menus will show as separate rows. Links to collections and products will show images." }, { "type": "header", "content": "Icons" }, { "type": "select", "id": "icon_strategy", "label": "Show icons", "info": "Only icons show on mobile", "options": [ { "value": "icons_cart_search", "label": "On cart and search" }, { "value": "icons_all", "label": "On all links" }, { "value": "icons_only", "label": "Only icons, no text" } ], "default": "icons_cart_search" }, { "type": "select", "id": "cart_icon", "label": "Cart icon", "options": [ { "value": "bag", "label": "Bag" }, { "value": "basket", "label": "Basket" }, { "value": "cart", "label": "Cart" } ], "default": "basket" } ], "blocks": [ { "type": "menu-promotion-small", "name": "Small menu promotion", "settings": [ { "type": "paragraph", "content": "Menu promotions are shown in dropdown menus. [Read more](https://cleancanvas.co.uk/support/symmetry/header)" }, { "type": "text", "id": "dropdown_link_title", "label": "Link name", "info": "The name of any top-level link" }, { "type": "image_picker", "id": "image", "label": "Image" }, { "type": "text", "id": "title", "label": "Title" }, { "type": "url", "id": "link_url", "label": "Link URL" } ] }, { "type": "menu-promotion-large", "name": "Wide menu promotion", "settings": [ { "type": "paragraph", "content": "Menu promotions are shown in dropdown menus. [Read more](https://cleancanvas.co.uk/support/symmetry/header)" }, { "type": "text", "id": "dropdown_link_title", "label": "Link name", "info": "The name of any top-level link" }, { "type": "image_picker", "id": "desktop_image", "label": "Desktop image" }, { "type": "image_picker", "id": "mobile_image", "label": "Mobile image" }, { "type": "checkbox", "id": "enable_fade", "label": "Enable image fade", "default": false }, { "type": "text", "id": "subheading", "label": "Subheading", "default": "Tell your story" }, { "type": "text", "id": "title", "label": "Heading", "default": "Wide menu promotion" }, { "type": "richtext", "id": "text", "label": "Text", "default": "
Pair text with an image to give customers insight into your brand. Tell a story, explain a product detail, or describe a new promotion.<\/p>" }, { "type": "text", "id": "button_1_label", "label": "Button 1", "default": "Shop this" }, { "type": "url", "id": "button_1_link", "label": "Button 1 link" }, { "type": "select", "id": "button_1_style", "label": "Button 1 style", "default": "secondary", "options": [ { "label": "Button - primary", "value": "primary" }, { "label": "Button - secondary", "value": "secondary" }, { "label": "Link", "value": "link" } ] }, { "type": "text", "id": "button_2_label", "label": "Button 2", "default": "Shop all" }, { "type": "url", "id": "button_2_link", "label": "Button 2 link" }, { "type": "select", "id": "button_2_style", "label": "Button 2 style", "default": "primary", "options": [ { "label": "Button - primary", "value": "primary" }, { "label": "Button - secondary", "value": "secondary" }, { "label": "Link", "value": "link" } ] }, { "type": "select", "id": "image_position", "label": "Image alignment", "default": "right", "options": [ { "value": "left", "label": "Left" }, { "value": "right", "label": "Right" } ] }, { "type": "select", "id": "text_alignment", "label": "Text alignment", "default": "center", "options": [ { "value": "left", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "right", "label": "Right" } ] } ] } ] } {% endschema %} ```
hey, did you ever figure out how to do this? I also am creating a website for the jewelry store I work at and think this would be a cool feature. Thanks
Hi,
I implemented it. You can see this store https://ecstyletheme.myshopify.com/ ( pass: 1234)
Here I used metafields to do it.
Hi
I tried this and the CSS but it’s not working.
I can’t find Base.css
Plesse do you have a solution for this? Thannks