Adding picture to sidebar-menu (Prestige Theme)

CuteGeek
Excursionist
17 0 11

Hi,

Is it possible to add a small picture to the sidebar menu? I'm using the Prestige Theme.

www.cutegeek.dk (Code: 1234)

KetanKumar
Shopify Partner
19190 2013 7080

@CuteGeek 

Yes is possible can you please have sidebar menu code so i will update code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
CuteGeek
Excursionist
17 0 11

Is this what you need? It's from Sections/sidebar-menu.liquid 

{%- assign main_menu_handle = section.settings.primary_menu | default: 'main-menu' -%}
{%- assign main_menu = linklists[main_menu_handle] -%}

<section id="sidebar-menu" class="SidebarMenu Drawer Drawer--small Drawer--fromLeft" aria-hidden="true" data-section-id="{{ section.id }}" data-section-type="sidebar-menu">
    <header class="Drawer__Header" data-drawer-animated-left>
      <button class="Drawer__Close Icon-Wrapper--clickable" data-action="close-drawer" data-drawer-id="sidebar-menu" aria-label="{{ 'header.navigation.close_sidebar' | t }}">
        {%- render 'icon' with 'close' -%}
      </button>
    </header>

    <div class="Drawer__Content">
      <div class="Drawer__Main" data-drawer-animated-left data-scrollable>
        <div class="Drawer__Container">
          <nav class="SidebarMenu__Nav SidebarMenu__Nav--primary" aria-label="{{ 'header.navigation.sidebar_title' | t }}">
            {%- for link in main_menu.links -%}
              <div class="Collapsible">
                {%- if link.links != blank -%}
                  <button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" {% if link.links != blank %}aria-expanded="false"{% endif %}>
                    {{- link.title | escape -}} <span class="Collapsible__Plus"></span>
                  </button>

                  <div class="Collapsible__Inner">
                    <div class="Collapsible__Content">
                      {%- for sub_link in link.links -%}
                        <div class="Collapsible">
                          {%- if sub_link.links != blank -%}
                            <button class="Collapsible__Button Heading Text--subdued Link--primary u-h7" data-action="toggle-collapsible" {% if sub_link.links != blank %}aria-expanded="false"{% endif %}>
                              {{- sub_link.title | escape -}} <span class="Collapsible__Plus"></span>
                            </button>

                            <div class="Collapsible__Inner">
                              <div class="Collapsible__Content">
                                <ul class="Linklist Linklist--bordered Linklist--spacingLoose">
                                  {%- for sub_sub_link in sub_link.links -%}
                                    <li class="Linklist__Item">
                                      <a href="{{ sub_sub_link.url }}" class="Text--subdued Link Link--primary">{{ sub_sub_link.title | escape }}</a>
                                    </li>
                                  {%- endfor -%}
                                </ul>
                              </div>
                            </div>
                          {%- else -%}
                            <a href="{{ sub_link.url }}" class="Collapsible__Button Heading Text--subdued Link Link--primary u-h7">{{ sub_link.title | escape }}</a>
                          {%- endif -%}
                        </div>
                      {%- endfor -%}
                    </div>
                  </div>
                {%- else -%}
                  <a href="{{ link.url }}" class="Collapsible__Button Heading Link Link--primary u-h6">{{ link.title | escape }}</a>
                {%- endif -%}
              </div>
            {%- endfor -%}
          </nav>

          {%- assign secondary_menu = linklists[section.settings.secondary_menu] -%}

          <nav class="SidebarMenu__Nav SidebarMenu__Nav--secondary">
            <ul class="Linklist Linklist--spacingLoose">
              {%- for link in secondary_menu.links -%}
                <li class="Linklist__Item">
                  <a href="{{ link.url }}" class="Text--subdued Link Link--primary">{{ link.title | escape }}</a>
                </li>
              {%- endfor -%}

              {%- comment -%}We automatically add some links to the secondary menu{%- endcomment -%}

              {%- if shop.customer_accounts_enabled -%}
                <li class="Linklist__Item">
                  <a href="{{ routes.account_url }}" class="Text--subdued Link Link--primary">{{ 'header.navigation.account' | t }}</a>
                </li>
              {%- endif -%}
            </ul>
          </nav>
        </div>
      </div>

      {%- if section.settings.show_social_media -%}
        {%- capture social_media -%}
          {% render 'social-media', class: 'SidebarMenu__Social', spacing: 'fill' %}
        {%- endcapture -%}
      {%- endif -%}

      {%- if social_media != blank -%}
        <aside class="Drawer__Footer" data-drawer-animated-bottom>
          {%- if social_media != blank -%}
            {{ social_media }}
          {%- endif -%}
        </aside>
      {%- endif -%}
    </div>
</section>

{% schema %}
{
  "name": "Sidebar menu",
  "settings": [
    {
      "type": "link_list",
      "id": "primary_menu",
      "label": "Primary menu",
      "default": "main-menu"
    },
    {
      "type": "link_list",
      "id": "secondary_menu",
      "label": "Secondary menu",
      "info": "This menu won't show dropdown items."
    },
    {
      "type": "checkbox",
      "id": "show_social_media",
      "label": "Show social media",
      "default": true
    }
  ]
}
{% endschema %}

 

Ninthony
Shopify Partner
1907 286 746

You can put an image in the Drawer Header after the button and then add some CSS so that it fits:

{%- assign main_menu_handle = section.settings.primary_menu | default: 'main-menu' -%}
{%- assign main_menu = linklists[main_menu_handle] -%}

<section id="sidebar-menu" class="SidebarMenu Drawer Drawer--small Drawer--fromLeft" aria-hidden="true" data-section-id="{{ section.id }}" data-section-type="sidebar-menu">
    <header class="Drawer__Header" data-drawer-animated-left>
      <button class="Drawer__Close Icon-Wrapper--clickable" data-action="close-drawer" data-drawer-id="sidebar-menu" aria-label="{{ 'header.navigation.close_sidebar' | t }}">
        {%- render 'icon' with 'close' -%}
      </button>
<!-- Here's Your Image -->
<img src="https://images-na.ssl-images-amazon.com/images/I/81LyLwhZeBL.png">
    </header>

    <div class="Drawer__Content">
      <div class="Drawer__Main" data-drawer-animated-left data-scrollable>
        <div class="Drawer__Container">
          <nav class="SidebarMenu__Nav SidebarMenu__Nav--primary" aria-label="{{ 'header.navigation.sidebar_title' | t }}">
            {%- for link in main_menu.links -%}
              <div class="Collapsible">
                {%- if link.links != blank -%}
                  <button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" {% if link.links != blank %}aria-expanded="false"{% endif %}>
                    {{- link.title | escape -}} <span class="Collapsible__Plus"></span>
                  </button>

                  <div class="Collapsible__Inner">
                    <div class="Collapsible__Content">
                      {%- for sub_link in link.links -%}
                        <div class="Collapsible">
                          {%- if sub_link.links != blank -%}
                            <button class="Collapsible__Button Heading Text--subdued Link--primary u-h7" data-action="toggle-collapsible" {% if sub_link.links != blank %}aria-expanded="false"{% endif %}>
                              {{- sub_link.title | escape -}} <span class="Collapsible__Plus"></span>
                            </button>

                            <div class="Collapsible__Inner">
                              <div class="Collapsible__Content">
                                <ul class="Linklist Linklist--bordered Linklist--spacingLoose">
                                  {%- for sub_sub_link in sub_link.links -%}
                                    <li class="Linklist__Item">
                                      <a href="{{ sub_sub_link.url }}" class="Text--subdued Link Link--primary">{{ sub_sub_link.title | escape }}</a>
                                    </li>
                                  {%- endfor -%}
                                </ul>
                              </div>
                            </div>
                          {%- else -%}
                            <a href="{{ sub_link.url }}" class="Collapsible__Button Heading Text--subdued Link Link--primary u-h7">{{ sub_link.title | escape }}</a>
                          {%- endif -%}
                        </div>
                      {%- endfor -%}
                    </div>
                  </div>
                {%- else -%}
                  <a href="{{ link.url }}" class="Collapsible__Button Heading Link Link--primary u-h6">{{ link.title | escape }}</a>
                {%- endif -%}
              </div>
            {%- endfor -%}
          </nav>

          {%- assign secondary_menu = linklists[section.settings.secondary_menu] -%}

          <nav class="SidebarMenu__Nav SidebarMenu__Nav--secondary">
            <ul class="Linklist Linklist--spacingLoose">
              {%- for link in secondary_menu.links -%}
                <li class="Linklist__Item">
                  <a href="{{ link.url }}" class="Text--subdued Link Link--primary">{{ link.title | escape }}</a>
                </li>
              {%- endfor -%}

              {%- comment -%}We automatically add some links to the secondary menu{%- endcomment -%}

              {%- if shop.customer_accounts_enabled -%}
                <li class="Linklist__Item">
                  <a href="{{ routes.account_url }}" class="Text--subdued Link Link--primary">{{ 'header.navigation.account' | t }}</a>
                </li>
              {%- endif -%}
            </ul>
          </nav>
        </div>
      </div>

      {%- if section.settings.show_social_media -%}
        {%- capture social_media -%}
          {% render 'social-media', class: 'SidebarMenu__Social', spacing: 'fill' %}
        {%- endcapture -%}
      {%- endif -%}

      {%- if social_media != blank -%}
        <aside class="Drawer__Footer" data-drawer-animated-bottom>
          {%- if social_media != blank -%}
            {{ social_media }}
          {%- endif -%}
        </aside>
      {%- endif -%}
    </div>
</section>

{% schema %}
{
  "name": "Sidebar menu",
  "settings": [
    {
      "type": "link_list",
      "id": "primary_menu",
      "label": "Primary menu",
      "default": "main-menu"
    },
    {
      "type": "link_list",
      "id": "secondary_menu",
      "label": "Secondary menu",
      "info": "This menu won't show dropdown items."
    },
    {
      "type": "checkbox",
      "id": "show_social_media",
      "label": "Show social media",
      "default": true
    }
  ]
}
{% endschema %}

 

Then add in your css:

.Drawer__Header img {
    max-width: 50px;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
}

 

This is for if it's a square image. If different dimensions, just adjust your max width till it looks the way you'd like.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
KetanKumar
Shopify Partner
19190 2013 7080

@CuteGeek 

thanks,

 

{%- assign main_menu_handle = section.settings.primary_menu | default: 'main-menu' -%}
{%- assign main_menu = linklists[main_menu_handle] -%}

<section id="sidebar-menu" class="SidebarMenu Drawer Drawer--small Drawer--fromLeft" aria-hidden="true" data-section-id="{{ section.id }}" data-section-type="sidebar-menu">
    <header class="Drawer__Header" data-drawer-animated-left>
      <button class="Drawer__Close Icon-Wrapper--clickable" data-action="close-drawer" data-drawer-id="sidebar-menu" aria-label="{{ 'header.navigation.close_sidebar' | t }}">
        {%- render 'icon' with 'close' -%}
      </button>
    </header>

    <div class="Drawer__Content">
      <div class="Drawer__Main" data-drawer-animated-left data-scrollable>
        <div class="Drawer__Container">
          <nav class="SidebarMenu__Nav SidebarMenu__Nav--primary" aria-label="{{ 'header.navigation.sidebar_title' | t }}">
            {%- for link in main_menu.links -%}
              <div class="Collapsible">
                {%- if link.links != blank -%}
                  <button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" {% if link.links != blank %}aria-expanded="false"{% endif %}>
                    {{- link.title | escape -}} <span class="Collapsible__Plus"></span>
                  </button>

                  <div class="Collapsible__Inner">
                    <div class="Collapsible__Content">
                      {%- for sub_link in link.links -%}
                        <div class="Collapsible">
                          {%- if sub_link.links != blank -%}
                            <button class="Collapsible__Button Heading Text--subdued Link--primary u-h7" data-action="toggle-collapsible" {% if sub_link.links != blank %}aria-expanded="false"{% endif %}>
                              {{- sub_link.title | escape -}} <span class="Collapsible__Plus"></span>
                            </button>

                            <div class="Collapsible__Inner">
                              <div class="Collapsible__Content">
                                <ul class="Linklist Linklist--bordered Linklist--spacingLoose">
                                  {%- for sub_sub_link in sub_link.links -%}
                                    <li class="Linklist__Item">
                                      <a href="{{ sub_sub_link.url }}" class="Text--subdued Link Link--primary">{{ sub_sub_link.title | escape }}</a>
                                    </li>
                                  {%- endfor -%}
                                </ul>
                              </div>
                            </div>
                          {%- else -%}
                            <a href="{{ sub_link.url }}" class="Collapsible__Button Heading Text--subdued Link Link--primary u-h7">{{ sub_link.title | escape }}</a>
                          {%- endif -%}
                        </div>
                      {%- endfor -%}
                    </div>
                  </div>
                {%- else -%}
                  <a href="{{ link.url }}" class="Collapsible__Button Heading Link Link--primary u-h6">{{ link.title | escape }}</a>
                {%- endif -%}
              </div>
            {%- endfor -%}
          </nav>

          {%- assign secondary_menu = linklists[section.settings.secondary_menu] -%}

          <nav class="SidebarMenu__Nav SidebarMenu__Nav--secondary">
            <ul class="Linklist Linklist--spacingLoose">
              {%- for link in secondary_menu.links -%}
                <li class="Linklist__Item">
                  <a href="{{ link.url }}" class="Text--subdued Link Link--primary">{{ link.title | escape }}</a>
                </li>
              {%- endfor -%}

              {%- comment -%}We automatically add some links to the secondary menu{%- endcomment -%}

              {%- if shop.customer_accounts_enabled -%}
                <li class="Linklist__Item">
                  <a href="{{ routes.account_url }}" class="Text--subdued Link Link--primary">{{ 'header.navigation.account' | t }}</a>
                </li>
              {%- endif -%}
            </ul>
          </nav>
          {% if section.settings.logo1 != blank %}
          <div class="new-img">
          <img src="{{ section.settings.logo1 | img_url: "master" }}"  alt="{{ section.settings.logo1.alt | default: shop.name }}"/>
          </div>
            {%- endif -%}
        </div>
      </div>

      {%- if section.settings.show_social_media -%}
        {%- capture social_media -%}
          {% render 'social-media', class: 'SidebarMenu__Social', spacing: 'fill' %}
        {%- endcapture -%}
      {%- endif -%}

      {%- if social_media != blank -%}
        <aside class="Drawer__Footer" data-drawer-animated-bottom>
          {%- if social_media != blank -%}
            {{ social_media }}
          {%- endif -%}
        </aside>
      {%- endif -%}
    </div>
</section>

{% schema %}
{
  "name": "Sidebar menu",
  "settings": [
	{
        "type": "image_picker",
        "id": "logo1",
        "label": "image"
      },
    {
      "type": "link_list",
      "id": "primary_menu",
      "label": "Primary menu",
      "default": "main-menu"
    },
    {
      "type": "link_list",
      "id": "secondary_menu",
      "label": "Secondary menu",
      "info": "This menu won't show dropdown items."
    },
    {
      "type": "checkbox",
      "id": "show_social_media",
      "label": "Show social media",
      "default": true
    }
  ]
}
{% endschema %}

 

i have update code please check

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
CuteGeek
Excursionist
17 0 11

@Ninthony  Thank you, how do you then change the position of the image? - would like it at the bottom

0 Likes
CuteGeek
Excursionist
17 0 11

@KetanKumar The code doesn't seem to work, no image is showing up when adding the URL.

0 Likes