Adding buttons on pages or blog posts on the Brooklyn theme

Highlighted
New Member
17 0 0

Hi,

 

Up to now I have been creating images of buttons and simply inserting them in to pages or blog posts with hyperlinks. 

 

In an effort to do things properly, how can I can create a proper button and add whatever link I require to it in the code?

 

Cheers

0 Likes
Highlighted
Shopify Staff
Shopify Staff
400 49 87

Hello.

 

I'm Lizzy, one of the Gurus on the support team at Shopify.

 

There are a few different options for how you can code buttons into your pages. The first way would be to add a snippet directly into the HTML of your page or blog post. You can switch the rich text editor to html mode by clicking this button.


27-33-kw527-bnb9j


This guide from Quora then explains how to create the button with HTML and apply the same CSS rules as other buttons on your site by giving it the same class. This will make it match the other buttons visually. Our teams aren't able to support code written in the rich text editor, so I would suggest trying this out on a test page first.

 

If you're quite comfortable with coding, we do have a guide that walks you through how to create a button within your theme files. You can read that here. Before making any changes to the theme code I always like to suggest duplicating your theme so that you have a backup. You can do this by going to Online Store>Actions>Duplicate.

 

Another option, mentioned in this forum thread, is using a drag and drop page builder app. This would give you a lot more flexibility in how your pages are set up. I've listed a few of the ones we have in the Shopify app store below.

 

Shogun Page Builder 
PageFly Advanced Page Builder 
GemPages Page Builder 

 

How have you been using these buttons so far? Are they linking to products on your site, or to external sources?

 

Thank you,
Lizzy

Lizzy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

1 Like
New Member
17 0 0

Hi Lizzy,

 

Thanks for replying.

 

After a lot of trial and error I finally managed to get buttons on pages working, but it should also work on blogs too. Here's the first page I have completed:

 

https://commercialfinancearena.co.uk/pages/mortgages

 

I actually created this a new page template which you can see includes images. I have two more to do on this website.

 

I have also created a button on a product page (for another website) which sells books. The new button sits directly below the Add to Cart button as a View On Amazon button. It searches for the book ISBN number (which is saved in the products Barcode field) on Amazon and includes the Amazon Affiliate referrer tag. Pretty pleased with that too! 

 

Cheers

 

Richard

0 Likes
Highlighted
Shopify Staff
Shopify Staff
400 49 87

Hey, Richard.

 

No worries, I'm glad you were able to get the buttons working as you'd like. The site is looking great so far.

 

I also wanted to thank you for sharing your solution with us in the forums! Page templates are a great way to set something like this up. It really helps to contribute to and build the discussion. Feel free to share more if you'd like, as you continue to work on the blog pages.

 

That View On Amazon button sounds pretty clever! I wanted to ask, are you currently a Shopify partner? If not I would definitely recommend looking into the program. It sounds like you've got some skills other store owners could benefit from.

 

Thank you

Lizzy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
17 0 0

Hi Lizzy,

 

Thanks! 

 

Yes I already have a Partner account and I've built quite a few sites for businesses already. 

 

 

0 Likes
Highlighted
Excursionist
13 0 1

I used the Quora guide @Lizzy provided in a previous reply and thanks to it I now have the same style and class on the buttons on my pages as on the homepage. The image is my result.

 

This is the code I use on the pages: <span style="color: #ffffff;"><a href="/yourlink" class="btn" style="color: #ffffff;">To The Shop</a></span>

 

Thanks! / Jesper

 

Skärmavbild 2019-12-23 kl. 11.37.10.png

1 Like