Adding buttons to various pages

New Member
1 0 0

Like pagebuilder with GoDaddy or others, how can I simply add a "button" to a page?  I would like to add simple buttons that point to other web pages, images, etc.

0 Likes
Highlighted
Shopify Expert
540 24 116

Two ways you can do this:

1) If you're comfortable editing HTML code, you could use something like http://www.bestcssbuttongenerator.com/ to create your button and then simply add the code in the editor's HTML mode, which you can access by clicking the < > button in the top right corner.

2) Use a page builder app like https://apps.shopify.com/shogun.

★ ThemeUp: Nifty Upgrades for your Shopify Store ★ https://themeup.net
0 Likes
Highlighted
Shopify Partner
240 0 21

Sorry I'm late to the party here. (and thanks for the referral)

As mentioned, if you want to play around with making changes on your own, you can import your existing Shopify pages into Shogun's Drag and Drop Page Builder, and start editing them, and building new pages for your store.

No coding required (drag and drop), and works with any theme.

Let me know if you have any questions.


support@getshogun.com

Nick Raushenbush | Co-founder, Shogun | nick@getshogun.com | Try Shogun Page Builder for Shopify for FREE!
2 Likes
Highlighted

Thought I'd chime in with a consolidated solution gathered by this and a couple other articles I just read in case anyone needs this.

 

I used the below code to add in a center-aligned button underneath a Shipping Policy page on a client's site. I don't like how policy pages just dead-end and force the user to have to choose between your footer menu options on where to go next; I'd rather place a button at the end of the policy that leads them back to continue shopping.

 

The button reflects the template's settings, and instead of using the default Shipping Policy page as generated by Shopify > Settings > Legal, I ended up copying the policy text from the field (I used Shopify-generated policy text and tweaked it, by the way,) and then I pasted into a new page under Online Store > Pages > New. Having this new page gave me the ability to assign Site Code specific to a page template, and I applied the page template to my new Shipping Policy Page.

 

To do this, first, I created a new Page Template in the site code editor (Online Store > Themes > Actions > Edit Code,) naming it page.shopbutton.liquid. The name shopbutton for the page template can be changed to anything you like.

 

Next, this is the code that I ended up adding to the bottom of my page.shopbutton.liquid Template in the Site Code:

 

 

{% comment %}
  Below is a button that leads users back to the home page. Button uses theme button settings.
{% endcomment %}

<div class="text-center">
  <p>
    <p>
   <a href="/" class="btn">
    Back to Shopping
   </a>
    </p>
  </p>
</div>

 

 

Finally, I went back into the new Shipping Policy Page (Online Store > Pages) and changed the Template Suffix to "Page.shopbutton" in the dropdown.

 

Hope this helps!

 

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
3 Likes
Highlighted
New Member
1 0 0

Ksachse,

How do you point this button to a particular URL instead of the home page?

0 Likes
Highlighted

Hey clhester,

 

Super easy, for the part of the code that reads this:

 

   <a href="/" class="btn">

 

Go ahead and swap out the / for anything you'd like.

The forward slash is just a quick shortcut code for the home page.

 

For example, 

   <a href="https://bit.ly/2wEHEz0" class="btn">

 

Hope this helps!

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
1 Like
Highlighted
Tourist
5 0 3

Hi

 

I have installed the code and it works perfectly. However it is align to the left of the page and I want to center the button. How do I do it?

 

I hope you can help me since coding is new to me. 

 

Skærmbillede 2020-03-30 kl. 21.48.35.png

1 Like
Highlighted

All good!

Try adding:

 

  vertical-align: middle;

before the end carrot > and test it.

So would look like this:

   <a href="/" class="btn" vertical-align: middle;>

 

 

If that does not work then replace vertical-align: middle; with this:

    align-items: center;

Please let me know which works for you.

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
1 Like
Highlighted
Tourist
5 0 3

Hi 

 

I tried both of your suggestions but unfortunately they didn't work. But I managed to find a solution by using this code:

 

<div class="text-center">
<p>
<p>
<center> <a href="/" class="btn" >
Back to Shopping
</a> </center>
</p>
</p>
</div>

 

But thanks for the help anyway! 

2 Likes
Highlighted
Tourist
5 0 3

Hi again 

 

I would like to add some spacing (margin) underneath the button since it is very close to the newsletter sign-up/footer section. Do you know how to add a bit of spacing? 

0 Likes