Newsletter: Add the newsletter section to other pages

If you'd like to use the homepage newsletter section on other pages, you can use this code snippet and add to various template files. This can be used if you prefer to remove the newsletter sign-up from the footer and have a nice full-width section instead. 

Section example:

Code:

{% section 'index-newsletter' %}

Note: This works for Pipeline 4 and up. If you have an earlier version of Pipeline, you'll need to first create the section, see link at the bottom. 

For all collection pages, add to:

For all product pages:

For all Shopify Pages, use both template files:

For the main blog index page:

For all blog posts (individual blog pages):

Save each file after adding the code. 

Optional: Remove extra padding at the bottom of the page

When the newsletter section is placed just above your footer, you can use this extra code to help remove the extra padding between your footer and the newsletter section.

For Shopify Pages:

/* -- Remove extra bottom padding: Pages -- */
.template-page .main-content {
    padding-bottom: 0px;
}
/* - end - */

For product pages:

/* -- Remove extra bottom padding: product pages -- */
.template-product .main-content {
    padding-bottom: 0px;
}
/* - end - */

For collection pages:

/* -- Remove extra bottom padding: collections  -- */
.template-collection .main-content {
    padding-bottom: 0px;
}
/* - end - */

For blog posts:

/* -- Remove extra bottom padding: blog posts -- */
.template-article .main-content {
    padding-bottom: 0px;
}
/* - end - */

For the blog index page:

/* -- Remove extra bottom padding: blog index page -- */
.template-blog .main-content {
    padding-bottom: 0px;
}
/* - end - */

For all pages use:

/* -- Remove extra bottom padding on all pages -- */
.main-content {
    padding-bottom: 0px;
}
/* - end - */

Where do I add the CSS style code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code