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

Solved
Bastien-AL
Tourist
8 1 1

Hello the Shopify community!

 

Hope you are all doing well :)

 

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

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 :)

 

Have a great day,

 

Bastien

 

0 Likes
robin_ca
Shopify Partner
54 9 12

This is an accepted solution.

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 1Added button with solution 1
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

 

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 ;) 

If helpful then please Like & Accept Solution. | Buy me a coffee
Customizing Store or upgrading with custom functionality - Hire Me

Feel free to contact me on rrrobin@yahoo.com regarding any help regarding
Shopify Customization | Automation of Tasks | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Functions into Shopify.
Bastien-AL
Tourist
8 1 1

Perfect, thanks a lot Robin, it looks great !

0 Likes
robin_ca
Shopify Partner
54 9 12

If its good you can mark it as Solved ;) 

If helpful then please Like & Accept Solution. | Buy me a coffee
Customizing Store or upgrading with custom functionality - Hire Me

Feel free to contact me on rrrobin@yahoo.com regarding any help regarding
Shopify Customization | Automation of Tasks | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Functions into Shopify.
47985924
Tourist
10 0 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?

0 Likes
Dylan13
Tourist
4 0 1

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!!

Alia_Makarem
Explorer
46 0 15

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.

0 Likes
unlimited1q
New Member
1 0 0

HOW to do this on  Debutify 3.0.2

 
 
 
0 Likes