FROM CACHE - en_header

Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!

Add Button in Navigation Bar - Icon Theme

Solved
Poky
New Member
2 0 2

Hi everyone 🙂

I've checked online and then found a similar topic here but I still can't figure out how to add a simple black "buy now" button at the end of the navigation bar (on the right).

I'm using the Icon theme on Shopify and I couldn't find in the snippets folder the file called "site-nav.liquid". I guessed it was the navigation menu so I opened the file called "navigation.liquid" instead and added this code at the very end of the page as suggested in the other post beetween {% endfor %} and </ul>:

<a href="/collections/all" class="btn hero__btn
          Buy Now
        </a>

Unfortunately, it didn't work - the only thing that happened was an additional item in every drop-down menu.

It would be really amazing if anyone could help me.

Thanks,

Daniela

 

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
36264 3609 11701

This is an accepted solution.

Hello, @Poky 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 10 (10)
KetanKumar
Shopify Partner
36264 3609 11701

This is an accepted solution.

Hello, @Poky 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Poky
New Member
2 0 2

Thanks @KetanKumar! The URL is https://www.framechasers.com/ and you can see the mock-up below. The button should be on the right where there is currently the text in red called "NEW BUTTON HERE". Would this work on desktop only or also on mobile?

Screen Shot 2020-04-23 at 2.46.58 pm.png

Many thanks.

Daniela

KetanKumar
Shopify Partner
36264 3609 11701

Thanks for URL

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
36264 3609 11701

Hello, @Poky 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ecotec
Excursionist
34 0 8

Hey

I have a similar question:  I am using the warehouse theme and want to add a HTML widget at the side of my nav bar. How do i do that? I suppose after the nav bar loop? This is the code:

 

 

  {%- if section.settings.desktop_navigation_layout == 'inline' and navigation_menu.links.size > 0 -%}
    <nav class="nav-bar">
      <div class="nav-bar__inner">
        <div class="container">
          <ul class="nav-bar__linklist list--unstyled" data-type="menu">
            {%- for link in navigation_menu.links -%}
              <li class="nav-bar__item">
                {%- if link.links.size == 0 -%}
                  <a href="{{ link.url }}" class="nav-bar__link link" data-type="menuitem">{{ link.title }}</a>
                {%- else -%}
                  <a href="{{ link.url }}" class="nav-bar__link link" data-type="menuitem" aria-expanded="false" aria-haspopup="true">
                    {{- link.title -}}
                    {%- render 'icon', icon: 'arrow-bottom' -%}
                    {%- render 'icon', icon: 'nav-triangle' -%}
                  </a>

                  {%- capture index -%}desktop-menu-0-{{ forloop.index }}{%- endcapture -%}
                  {%- render 'desktop-menu', menu: link, index: index -%}
                {%- endif -%}
              </li>
            {%- endfor -%}
          </ul>
        </div>
      </div>
    </nav>
  {%- endif -%}
</section>

 

 

KetanKumar
Shopify Partner
36264 3609 11701

@ecotec 

not this full code html can be done more 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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ecotec
Excursionist
34 0 8

Im sorry i don't understand what you mean? Do you mean i need to show you more of the code? 

I was thinking of making an extra container div to place in nav_bar--inner in which i can place the widget

but i don't know how to appoint it to a certain place in the nav bar..

KetanKumar
Shopify Partner
36264 3609 11701

@ecotec 

yes it can be done some more custamization

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
GreenDoorAdmin
Tourist
15 0 1

Hi @KetanKumar ! I have read through many posts on this subject and still can't figure it out for my own site. I don't have many of the sections/snippets that people normal insert the code into, so I've tried it in a few spots but it doesn't work. 

I did manage to add a button to the main navigation by placing one into the menu_links.liquid using [class="btn hero__btn"] at line 43, but this is really just a button pasted in with a redirect link.

I prefer your solution where you make one of the menu-links into a button using [li:nth-child(#)] so that changes made in Shopify Admin>Navigation update the button accordingly. 

My website is https://www.thegreendoor.ca/password (login is #2getmein#).

Let me know if you need more info & if you have any suggestions at all. Thank you!

KetanKumar
Shopify Partner
36264 3609 11701

@GreenDoorAdmin 

thanks for post can you please explain what do you want exactly? now i can see button at header 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing