Set Up Newsletter Opt-in Form in Penelope

Please Note: This can also be set up to be a blog subscription form by inserting your Google / Feedburner ID instead. However, this tutorial will only cover the use of it with MailChimp.

To add a newsletter form to your website, go to the Sections panel and select Newsletter Area.

From there you may edit the heading of this section, add custom text, form action, and customize the button text.

Step 1:

Log into your MailChimp account and go to Lists > Signup Forms > Embedded Forms > Unstyled.

Step 2:

Scroll to the bottom of the page and copy/paste the code into a separate text document, for later use. Please use either TextEdit (Mac) or Notepad (Windows), not Microsoft Word, as this can potentially alter the code.

Step 3:

There’s a short snippet of this code that we need. Copy/Paste the highlighted portion of the code (within the quotation marks) into the Form Action area.

Change the Background Image

To change the background image you will need to edit the themes CSS file, but this is super easy I promise. To begin, upload the image you want to use onto Shopify by going to Settings > Files > Upload Files. 

After you upload the image copy the image URL and save for later use.

From there go to Themes > Actions > Edit Code.

From there click on the Assets folder and navigate to the theme.scss.liquid file and search the keyword "newsletter" (CMD + D).

Under the "Newsletter Section" there is a snippet of code called #fixed, in there is a background url link. Replace the image link that is currently there (within the quotation marks) with your image link, then save.