Add A Clickable Button to the Header or Navigation

Solved
zulasurf
Tourist
3 0 2

Hi! I need the code and the steps on how to add a clickable button to my Header or Navigation. 

Theme: Debut

Reason: I need a Call to Action for our Job Posting. Pretty much a Button that says Now Hiring! Apply Today! Click the button and it directs to the job posting. 

Thanks!

Accepted Solution (1)

Accepted Solutions
meenal
Shopify Expert
10 1 1

This is an accepted solution.


@zulasurf wrote:

where do i put this in the header.liquid?

 

Search  {% include 'icon-search' %} and put your new button link just above the search button

Just above this code

 

<button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top">
            {% include 'icon-search' %}
            <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
          </button>

 

So It will look like this

 

  <div class="site-header__icons-wrapper">
<button class="btn" onclick="window.location.href='https://www.teamonclick.com'">Click me</button>
          
          <button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top">
            {% include 'icon-search' %}
            <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
          </button>

          {% if shop.customer_accounts_enabled %}

 

 

and it will look on your website like this

meenal_0-1628059767787.png

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on hello@teamonclick.com regarding any help
Shopify Partner | Skype : workonl9

View solution in original post

Replies 7 (7)
meenal
Shopify Expert
10 1 1

<button class="btn" onclick="YOUR URL of JOB Post Page">Click me</button>

put this code by replacing your url between quotes in header.liquid file at the position where you want 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on hello@teamonclick.com regarding any help
Shopify Partner | Skype : workonl9
KetanKumar
Shopify Partner
32500 3268 10837

@zulasurf 

sorry for that issue can you please try this 

<a class="custom-btn" href="your page url here">button text</a>
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
zulasurf
Tourist
3 0 2

where do i put this in the header.liquid?

meenal
Shopify Expert
10 1 1

This is an accepted solution.


@zulasurf wrote:

where do i put this in the header.liquid?

 

Search  {% include 'icon-search' %} and put your new button link just above the search button

Just above this code

 

<button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top">
            {% include 'icon-search' %}
            <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
          </button>

 

So It will look like this

 

  <div class="site-header__icons-wrapper">
<button class="btn" onclick="window.location.href='https://www.teamonclick.com'">Click me</button>
          
          <button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top">
            {% include 'icon-search' %}
            <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
          </button>

          {% if shop.customer_accounts_enabled %}

 

 

and it will look on your website like this

meenal_0-1628059767787.png

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on hello@teamonclick.com regarding any help
Shopify Partner | Skype : workonl9
zulasurf
Tourist
3 0 2

Thank you so much for your help, figured it out! 

fangbaby123
Tourist
6 0 3

hi there, any idea that how to show the button only on the desktop?

KetanKumar
Shopify Partner
32500 3268 10837

@fangbaby123 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you 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