Banner: Add a newsletter sign-up option

This customization allows you to add a newsletter sign-up form to a banner section - Image with text overlay. This won't replace your current version, it will be an additional section option. 

Example:

Or with a call to action button:

How to:

1

Create a new section

Open your Code Editor. 

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

In the Sections folder, choose Add a new section:

Call the section:

index-banner-newsletter

Example:

Use the Create section button to complete. 

Erase all the default code that generated:

Replace the default code with one of these options - Choose your version of Pipeline:

If you're unsure of your version:
What version of Pipeline am I using?

Pipeline 4, use:

Click to view code

Earlier versions of Pipeline, use:

Click to view code

Save the file after replace code.

2

Add style code

/* -- code for newsletter form on homepage banner  -- */
@media screen and (min-width: $large) {
.wrapper.newsletter {max-width: 50%}
}
.wrapper.newsletter {margin-top:2em;}
/* - end - */

Where to add the code:

In the Code Editor find your theme's CSS file, this will vary depending on which version of Pipeline you're running:
Which version of Pipeline am I using?

Once you know your version, find the right file in the left Assets folder:

Pipeline 4 - If you're working with a draft theme, open this file:

You'll be opening this file:

assets/theme.scss.liquid

Quick link if the theme is live/published:
assets/theme.scss.liquid

Earlier versions of Pipeline - If your theme is older than Pipeline 4 open this file for draft themes:

You'll be opening this file for earlier versions of Pipeline:

assets/style.scss.liquid

Quick link if the theme is live/published and an earlier version of Pipeline:
assets/style.scss.liquid

Add the code to the very bottom of the file on a new line. Make a couple blank lines before pasting the code snippet. 

Example:

Save the file after adding your code.

3

Add the new section

Open the Theme Editor:

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

Under Sections:

Choose Add section:

The new section will appear under IMAGE:

Add the section.

In the settings, you'll see a new Newsletter checkbox option:

You can use that to toggle the newsletter on and off. 

Save your settings after. 

This newsletter form is the same as the one in the footer. You can configure the text in the Language Editor. 

Still need help? Contact Us Contact Us