Button: How to create a button on your homepage or any page

This article demonstrates how to add a custom button to the homepage. The button will be created on a standard Shopify page and then called-in to the homepage using a section. 

Example:

Call to action button for account login added below a section:

HOW-TO:

We will add a section to the homepage which allows you to add any page you've created in the Page Editor. For this tutorial example, we will create the button in the Shopify page editor using HTML.  

1

Create a page

Begin by creating a page in your regular Shopify admin Page Editor:

Call the page anything you like, if you choose to show the title - The title will become the heading above the button. 

Next, switch to code view - Click the icon on the far right, that toggles code and regular modes:

Once you click the code view icon, the other toolbar icons will disappear. That's a good way to know you're in code view:

While in code mode, add the following code to create a sample button:

<a class="btn" href="/account">Account Login</a>

You can customize where the button links to in that code and change the name of button link. This example will view the all products page:

<a class="btn" href="/collections/all">Shop</a>

If you're not sure of the URL, browse to that page and then check the address in your browser address bar. 

Save the file:

2

Add homepage section in the Theme Editor

Open the Theme Editor:

Under Sections:

Choose Add section:

Follow the next steps based on the version of Pipeline you are running:

Pipeline 4 and higher: Earlier versions of Pipeline:
If you're running Pipeline 4, add the Page section:
Use the Add button to complete. 

Now you can browse and choose the Page you created in Step 1: 
Browse to the page, use the search bar to quickly find the page you created:

Choose and accept the page you created.
 Add the Rich text section:
Use the Add button to complete. 

After adding the section, choose Add content and pick the Page type: 

48d8198ba5adf20789fe4e1a8c5c7a75.png
Choose: Page
c80c5a44373a09e0d81ce9b05ae11bc2.png
Now you can browse and choose the Page you created in Step 1: 
Browse to the page, use the search bar to quickly find the page you created:

Choose and accept the page you created.

Remove the extra default text block that's created when you add the Rich Text section:

1. Click on Rich Text (1) to open the addition options 
2. Use the Delete link (2) to remove it. Be sure you're in the Rich Text block and not the Page block:


3

Remove the title of the page

This is optional, uncheck the Show page title checkbox to hide the title:

Pipeline 4 and higher: Earlier versions of Pipeline:

Save the file (all versions):

Example Results

Page title hidden (button displayed below another section on the homepage):

Page title shown:


Button Style Options

Here are the already styled button classes that you can use in Pipeline:

btn
btn--small
btn--large
btn--full
btn--clear
btn--splash
btn--square
btn--outline

Example code - Combine classes to achieve a different button style. Always start with btn and add any or the following. You can combine multiple classes (example: clear and large). 

btn--small:

<a class="btn btn--small" href="/account">Account Login</a>

btn--large:

<a class="btn btn--large" href="/account">Account Login</a>

btn--full:

<a class="btn btn--full" href="/account">Account Login</a>

btn--clear:

<a class="btn btn--clear" href="/account">Account Login</a>

btn--splash:

<a class="btn btn--splash" href="/account">Account Login</a>

btn--square:

<a class="btn btn--square" href="/account">Account Login</a>

btn--outline:

<a class="btn btn--outline" href="/account">Account Login</a>

btn--clear btn--full:

<a class="btn btn--clear btn--full" href="/account">Account Login</a>

Still need help? Contact Us Contact Us