Add a custom button in main menu

Shopify Discussion
,
1

Hi,

I want to add a custom button with the words “Buy Now” and a link to my product. How do this, my theme is refresh.

My website: www.cardtag.net

2

@cardtag

Let me know that where you want to add that custom button in your site ?

so i can tell you as per your requirement !

3

I want to the most right. Right of cart. Did this help?

4

Hi @cardtag

Can you kindly provide detailed information about what you want to adjust (screenshots)? We will check it and suggest you a solution.

5

The Buy Now button i imagine to look like this.

Skärmavbild 2023-02-23 kl. 15.42.25.png
Skärmavbild 2023-02-23 kl. 15.42.25.png1546×754 118 KB

6

Hi @cardtag

Please find the header.liquid file and find the

tag with the class header__icons. Then, paste

this code in the found tag:

Buy Now

This is the result that we tested, you can change the URL to be able to link to your favorite product

view (26).png
view (26).png1880×965 177 KB

We hope that this can help you.

7

Hi,

It works great but it needs to be deactivated on mobile because it looks
very bad on mobile. Can we do something about this?

8

Hi @cardtag

Please add the button–mobile class to the previously added button:

Buy Now

then add this CSS inside tag in header.liquid:

@media screen and (max-width: 750px) {
    .button--mobile{
      display: none;  
    }
  }

We hope that this can help you.