Re: Help add phone menu

Solved

How can I add a phone menu similar to PC version?

Elias10
Excursionist
25 0 3

Hello, i want to have a phone menu similar to the one on PC. Appriciate any help!

 

Website: https://d8106d-4.myshopify.com/

 

Accepted Solution (1)
BSS-Commerce
Shopify Partner
3477 463 542

This is an accepted solution.

Hello, if you want to have a shortcut element right below the logo for mobile devices, do the following:
1. Access your Shopify admin page, select add and select edit code:

view - 2024-01-15T180442.625.png

2. In your code folder, find the theme.liquid file and add the following code before the </html> tag

view - 2024-01-15T180511.333.png

<script>
var headerElement = document.querySelector('.header');
var newAnchor = document.createElement('a');

newAnchor.href = '/products/clever-cook-laga-mat-utan-en-spis'; // Thay thế bằng đường dẫn mong muốn
newAnchor.textContent = 'Utforska Clever Cook™';
newAnchor.id = 'custom-element';

headerElement.appendChild(newAnchor);
</script>
<style>
a#custom-element {
    grid-column: 2 / span 1;
    font-size:15px;
    text-decoration:none;
    text-align:center;
}
@media only screen and (min-width: 769px) {
  #custom-element {
    display: none;
  }
}
</style>

Result:

view - 2024-01-15T180558.410.png

Hope it helps @Elias10 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 3 (3)

BSS-Commerce
Shopify Partner
3477 463 542

Hello, if you want to use desktop menus on mobile, they will be very ugly. Because the difference in the size of the devices makes the elements on the menu not have enough space and breaks the interface.
I will provide sample images as they are displayed on mobile devices.

view - 2024-01-11T094214.295.png

However, if you really want to fix it or have an idea about editing the menu interface to make it more beautiful, please describe it carefully in the next comment. I will help you fix it.

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Elias10
Excursionist
25 0 3

Can i have the burger menu on the side but a "shortcut" to my product only, that looks like the one on PC? Like just in the middle under the logo?

 

Regards Elias

BSS-Commerce
Shopify Partner
3477 463 542

This is an accepted solution.

Hello, if you want to have a shortcut element right below the logo for mobile devices, do the following:
1. Access your Shopify admin page, select add and select edit code:

view - 2024-01-15T180442.625.png

2. In your code folder, find the theme.liquid file and add the following code before the </html> tag

view - 2024-01-15T180511.333.png

<script>
var headerElement = document.querySelector('.header');
var newAnchor = document.createElement('a');

newAnchor.href = '/products/clever-cook-laga-mat-utan-en-spis'; // Thay thế bằng đường dẫn mong muốn
newAnchor.textContent = 'Utforska Clever Cook™';
newAnchor.id = 'custom-element';

headerElement.appendChild(newAnchor);
</script>
<style>
a#custom-element {
    grid-column: 2 / span 1;
    font-size:15px;
    text-decoration:none;
    text-align:center;
}
@media only screen and (min-width: 769px) {
  #custom-element {
    display: none;
  }
}
</style>

Result:

view - 2024-01-15T180558.410.png

Hope it helps @Elias10 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency