Replace the newsletter sign-up with a button link

If you'd like to replace the Newsletter sign-up in the footer with a button, use the Page block option in the footer:

Replace:

With:

1

Create a page which has your button

Open your Page editor
https://myshopify.com/admin/pages

Create a new page which has your button code.

Add a title for your page, then use the Code mode icon in the toolbar (1):

Note: The page title will be used as the column heading in your footer. Choose a title that will be appropriate for your footer column heading.

You'll know that you're in Code mode as the other icons will disappear:

Add some HTML to create the button and link:

<a class="btn btn--splash" href="/pages/mailchimp">Newsletter</a>

Let's breakdown the example code:

(1) The class btn is needed to create a button style

(2) the additional class btn--splash styles the button for you, see reference chart below.

(3) this is where your link will go, it can be any page and you'll need to customize that based on what page you'd like to send them to.

(4) the button text (label)

In that example, I've linked (3) to an already created MailChimp form page which I've created. The URL "/pages/mailchimp" I obtained from when I use the "View" option of my Page editor:

Button Classes

Here are the already styled button classes that you can use in Pipeline (1) and (2):

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

Save your page after adding the HTML. Additional text can be added if you like before the button.

Before proceeding to Step 2, View your page and test the button link to make sure it goes to the correct page you'd like. Make adjustments like button styles or links, then continue to Step 2.

2

Add the button page to your Footer

Open your Theme Editor (Customize Theme):

https://myshopify.com/admin/themes/current/editor

In the Footer section settings, remove the existing Newsletter block and add a new one:

Choose Add content:

Select the Page block:

Browse to the page you created in Step 1:

Use the filter bar (1) to find your page quickly (2):

Choose the correct page (2)

Now your preview will show you the button/page you created. The title of the page is also used as the heading here:

If you want to change the heading/title go back to the page you created and modify it there. 

Save your settings (top-right) and now test your button. 


Modifications

You can now control what's displayed here by updating the original Page created. If you'd like to add more text before the button, update the Page and add the text there. 

Example:


Resulting in:

Using other Button Classes - Example of using btn--large:

Resulting in:

To fix the button color use this:

Add the following code to the very bottom of this file on a new line:
assets/style.scss.liquid

/* -- code to change footer button link color -- */
.site-footer-wrapper a.btn {
    color: #FFFFFF; }
/* - end - */

Save the file.

That will result in:

Still need help? Contact Us Contact Us