How can I add picture in my mobile menu

[Aleksander22]

Hello,

I got some struggle with adding picture to my menu like here

Someone could help me with solving it

[BSSCommerce-B2B · Accepted solution]

@Aleksander22 , 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file header-drawer.liquid

Step 3: Add this code above the </nav> tags

 {% if section.settings.menu_mobile_image != blank %}
              <div class="menu-drawer__image">
                <img src="{{ section.settings.menu_mobile_image | img_url: 'master' }}" alt="Menu Image">
              </div>
            {% endif %}

Like this

Step 4. Search the file header.liquid and add this code before "block"

{
      "type": "image_picker",
      "id": "menu_mobile_image",
      "label": "Menu mobile image",
      "info": "Add an image that will appear in the mobile menu"
    }

Like this image 

Step 5. Save all the files

Step 6. And you'll  have this custom part in your customize

Hope it helps you 😊

[BSSCommerce-B2B · Accepted solution]

@Aleksander22,

1. Change the code at the step 3. Like this

{% if section.settings.menu_mobile_image != blank %}
              <div class="menu-drawer__image-wrapper">
                <img class="drawer-menu-image" src="{{ section.settings.menu_mobile_image | img_url: '' }}" alt="Menu Image">
                {% if section.settings.menu_mobile_link_text != blank %}
                  <a href="{{ section.settings.menu_mobile_link_url }}" class="menu-drawer__link"
                     style="color: {{ section.settings.menu_mobile_link_text_color }}; font-size: {{ section.settings.menu_mobile_link_font_size }}px;">
                    {{ section.settings.menu_mobile_link_text }}
                  </a>
                {% endif %}
              </div>
            {% endif %}

2. Add this code at the very bottom of base.css file

.drawer-menu-image {
  max-width: 100%!important;
}
.menu-drawer__image {
  text-align: center
}
.menu-drawer__image-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.drawer-menu-image {
  width: 100%;
  height: auto;
  display: block;
}

.menu-drawer__link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  text-align: center;
  font-weight: 600;
}

3. Change the code at the step 4 like this

   "type": "image_picker",
      "id": "menu_mobile_image",
      "label": "Menu Mobile Image",
      "info": "Add an image that will appear in the mobile menu"
    },
    {
      "type": "text",
      "id": "menu_mobile_link_text",
      "label": "Image Title"
    },
    {
      "type": "url",
      "id": "menu_mobile_link_url",
      "label": "Image URL",
      "default": "/"
    },
    {
      "type": "color",
      "id": "menu_mobile_link_text_color",
      "label": "Image Title Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "menu_mobile_link_font_size",
      "label": "Image Title Font Size",
      "default": 24,
      "min": 12,
      "max": 50,
      "step": 1,
      "unit": "px"
    }

[BSSCommerce-B2B]

@Aleksander22, You want to add a fixed image or custom image section?

[Aleksander22]

Custom Image section

[BSSCommerce-B2B · Accepted solution]

@Aleksander22 , 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file header-drawer.liquid

Step 3: Add this code above the </nav> tags

 {% if section.settings.menu_mobile_image != blank %}
              <div class="menu-drawer__image">
                <img src="{{ section.settings.menu_mobile_image | img_url: 'master' }}" alt="Menu Image">
              </div>
            {% endif %}

Like this

Step 4. Search the file header.liquid and add this code before "block"

{
      "type": "image_picker",
      "id": "menu_mobile_image",
      "label": "Menu mobile image",
      "info": "Add an image that will appear in the mobile menu"
    }

Like this image 

Step 5. Save all the files

Step 6. And you'll  have this custom part in your customize

Hope it helps you 😊

[Aleksander22]

And could you help me to add title here an make image clickable

[BSSCommerce-B2B · Accepted solution]

@Aleksander22,

1. Change the code at the step 3. Like this

{% if section.settings.menu_mobile_image != blank %}
              <div class="menu-drawer__image-wrapper">
                <img class="drawer-menu-image" src="{{ section.settings.menu_mobile_image | img_url: '' }}" alt="Menu Image">
                {% if section.settings.menu_mobile_link_text != blank %}
                  <a href="{{ section.settings.menu_mobile_link_url }}" class="menu-drawer__link"
                     style="color: {{ section.settings.menu_mobile_link_text_color }}; font-size: {{ section.settings.menu_mobile_link_font_size }}px;">
                    {{ section.settings.menu_mobile_link_text }}
                  </a>
                {% endif %}
              </div>
            {% endif %}

2. Add this code at the very bottom of base.css file

.drawer-menu-image {
  max-width: 100%!important;
}
.menu-drawer__image {
  text-align: center
}
.menu-drawer__image-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.drawer-menu-image {
  width: 100%;
  height: auto;
  display: block;
}

.menu-drawer__link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  text-align: center;
  font-weight: 600;
}

3. Change the code at the step 4 like this

   "type": "image_picker",
      "id": "menu_mobile_image",
      "label": "Menu Mobile Image",
      "info": "Add an image that will appear in the mobile menu"
    },
    {
      "type": "text",
      "id": "menu_mobile_link_text",
      "label": "Image Title"
    },
    {
      "type": "url",
      "id": "menu_mobile_link_url",
      "label": "Image URL",
      "default": "/"
    },
    {
      "type": "color",
      "id": "menu_mobile_link_text_color",
      "label": "Image Title Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "menu_mobile_link_font_size",
      "label": "Image Title Font Size",
      "default": 24,
      "min": 12,
      "max": 50,
      "step": 1,
      "unit": "px"
    }

[Aleksander22]

Thanks its working

[BSSCommerce-B2B]

@Aleksander22 , Glad to help you bro  😊

[Aleksander22]

Hello, If you still there could you help me with adding section like here 

Its testemonials section where you can scrolling. I would be really grateful for your help

[BSSCommerce-B2B · Accepted solution]

@Aleksander22, I think the section you've sent is using this app: Section Store: Theme sections

You can follow this tutorial to create it: https://www.youtube.com/watch?v=4BeK4wyspJg