Add A Clickable Button to the Header or Navigation

Solved
zulasurf
Tourist
3 0 1

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!

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
0 Likes
KetanKumar
Shopify Partner
22589 2282 8397

@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
0 Likes
zulasurf
Tourist
3 0 1

where do i put this in the header.liquid?

0 Likes
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 1

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

0 Likes