Narrative Theme - Add a "Buy" button in the Header

Technical Q&A
1

Hello the Shopify community!

Hope you are all doing well :slight_smile:

I’m using the Narrative Theme, and would like to add a “Buy” button directly in the top right of the Header, next to the basket icon (if possible on Mobile and Desktop), as you can see here on the Apple website :

Capture d’écran 2020-06-20 à 12.53.57.png
Capture d’écran 2020-06-20 à 12.53.57.png2560×1388 259 KB

My content is quite long on my Homepage (I sell 1 product, so I will only use the Homepage), and it would be great if my customers could buy from everywhere on my page through the sticky Header.

Do you know how I could do that?

I already had a look at the other topics, but could find any solution working on this theme.

Many thanks for your help, and do not hesitate to get back to me if you need more information :slight_smile:

Have a great day,

Bastien

2

There are couple of ways with which you can achieve it.

  1. Using edit code in theme, If you are comfortable with editing your theme code then I can help you to add Buy button directly to theme

  2. Using Navigation, add last as Buy Link, Later with CSS we can add code to highlight and pop that as a button.

Added button with solution 1
Added button with solution 1994×361 34.7 KB

Code added :

      <a href="#" class="button btn">BUY</a>

I have added this code to header.liquid
Line Number : 217, if you haven’t edited this file then it will be there.

image.png
image.png1903×937 104 KB

Let me know if you face any issue with it.

You can always play with css for button styling.

Regards
Robin

if this solution solve your problem, you can mark it selected :wink:

3 Likes
3

Perfect, thanks a lot Robin, it looks great !

4

If its good you can mark it as Solved :wink:

1 Like
5

Hi there,

What if I wanna add the buy bottom on product detail page instead of the home page? I have multiple products that I want to add to the product detail page but not home page. Could you help me on that?

6

Hey thanks for the solution it helped me too! Is there anyway I can make the button a bit smaller on mobile? I would like to edit the dimensions.

Thanks!!

2 Likes
7

This worked great!

Just want to see if it is possible to change the sizing of the button, specially for mobile, without affecting the other buttons.

I don’t know how to work with CSS.

Thank you.

8

HOW to do this on Debutify 3.0.2

9

hi there, any idea how to add this button on nav only show it on desktop but not on mobile?

10

Bonjour Robin,

Peux tu m’aider stp à ajouter un bouton dans mon header ?

J’aimerai offrir un guide à télécharger à mon audience pour récupérer des mails pour ma solution e-mailing.

Dois-je télécharger une application sur shopify qui me permet de garder les mails ?

je t’envoi un exemple du bouton que j’aimerai mettre en place.

Merci d’avance pour ton aide,

Salim

11

Didn’t serve