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:


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:

Choose: " Page"
Now you can browse and choose the Button Example page you created:


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:


Still need help? Contact Us Contact Us