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

Most homepage sections in Pipeline already have an option to include a call to action button. However, 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:

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

How to create:

We will use the Rich Text section (if you're running Pipeline 4 there is a new Page section which is quicker to use) and a content option called Page. This feature allows you to add any Page you've created in the Page Editor, right into the homepage. For this example, we'll create a button in the Page Editor and then have the Rich Text section call that page. 

1

Create a page

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

Click to open the 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 page. 

2

Add the Rich text or Page section in the Theme Editor

Open the Theme Editor:

Click to open the Theme Editor

Under Sections:

Choose Add section:

Part 1

Earlier versions of Pipeline (before Pipeline 4), add the Rich text section:

If you're running Pipeline 4, add the Page section instead:

Use the Add button to complete. 

Pipeline 4 users, after completing Part 1, skip Part 2 and proceed to Part 3

Part 2

(This part is for earlier versions, before Pipeline 4). 

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

48d8198ba5adf20789fe4e1a8c5c7a75.png
Choose: Page
c80c5a44373a09e0d81ce9b05ae11bc2.png

Part 3

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.

Pipeline 4 users, after completing Part 3, skip Part 4 and proceed to Part 5

Part 4

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:

Part 5

Remove the title of the page

This is optional, if you don't need the title above your button to appear, then uncheck the Show page title checkbox (2) - This is under the Page block (1):

In Pipeline 4, the setting looks like this:

Save the changes. 


Results

Example without page title:

Example when show page title is used:


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