Button: How to create a button on your homepage

Most section modules in Pipeline already have a button options within the section with many customization features. If you find the need to add a custom button outside of these section modules, there is a handy trick you can use by using the Rich Text section module and adding a Page block.

Example when added right after a News/Blogs section:

How to create:

Step 1

First, create a Page in your regular Shopify admin Page Editor. 

In this example, we'll call our new page " Button Example". In that page, using the regular editor, create a link to where you want your button to go.

Next, switch to code view - Click the code icon.

We'll add a class to your URL, "btn"

Here's an example of a link to view all you collections:

1f645920617bee434fad27435f14d739.png

Sample code used in the Page Editor code view:

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

Save the page. 

Step 2

Add the new page you created into a Rich Text section on the homepage: 

In the Theme Editor, add a Rich Text section

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 Button Example page you created:

7010b8f0d5a100cbd754eb4d34492427.png

Step 3

If you'd like to remove the extra default text that's created when you add the Rich Text section:

1. Click on "Rich Text" to open the addition options 

2. Use the "Delete" link to remove it. Be sure you're in the Rich Text block and not the Page block:

Save the changes. 

To also remove the title - Uncheck the checkbox for Show page title:

1. Open the Page block

2. Uncheck the option "Show page title"

Save the changes. 

Final result when added after a section like recent blogs:

To rename the label " Button", simply go back to the Page in the Page Editor and rename there.


Button Classes

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

Still need help? Contact Us Contact Us