Add An Email Signup Form To Your Storenvy

‘Ello again!

I’ve been spending a lot of time in Storenvy Community Groups on Facebook lately, and have had a few people ask me the same questions repeatedly. So, I thought to myself, “Self, you should just write this all down somewhere and maybe add some pictures for people.”

Guess who’s starting a mini-series of SE customization tips? The Rambler, that’s who. Some of what I plan to include: email signup forms, four product images across when viewing a category, adding a Disqus commenting system, making your menu vertical /to the left, and some fun CSS tips.

First stop on the custom train is today – adding a MailChimp email subscription form to your page. Clearly, I’m assuming you’ve already got these accounts set up, as I don’t plan to walk you through sign up. This also assumes you’ve got a mailing list set up, even if it’s empty. If you want to see a finished product, check out our shop, at the very bottom.

If you have iContact instead of Mailchimp, see my post: Adding iContact To Storenvy

Get Where You’re Going

Log in to your Mailchimp dashboard. You might see, in the upper left, a symbol that looks like three horizontal lines sitting next to a magnifying glass. Click that to open your menu, if it isn’t already visible. Then, select “Lists” from the menu – it’s the second option.

MailChimp Step 1 - the menu

From your list of… lists, select the arrow next to Stats and then choose “Signup forms”

Lists Buttons

Then you get to this:

Create A FormLots of options, right? There’s clearly other good stuff you can do here, but that’s not what we want right now. For now, pick the middle option, “Embedded forms” to work with.

Make It Up

From here, you get to make your form all pretty! I use Classic, but if you’re looking to use less real estate on your page, pick Super Slim. Just remember that you can ONLY have a required field of email address for Super Slim to work. Naked works too, but you’ll definitely have to play with CSS for that.

Design your formGot it all prettied up? Awesome. Don’t worry if it’s not exactly how you want it because you can tweak appearances with CSS once it’s on your site.

Drop It In

Now, select all that lovely gibberish in the lower right hand box and copy it. Toddle on over to Storenvy and log in. From your dashboard, select Design, then choose “Pages” or “Edit HTML” as either one brings you to the same place.

SE Design Tab

From your Page Templates list, select the type of page you want it on. Layout will add the form to every page in your shop, like I’ve done. Home will add it to only the home page. Contact or FAQ are also good places for a signup form. Once you’ve selected the template you want, choose “Using Custom HTML” on the right to show the page code. If you don’t know HTML don’t get too scared – even if you mess up there’s a reset button in the upper right so you can set it back. Yay for undo!

Place your code where you feel it will work best. Most sections have little notes about what they are (thank you, SE team!). If you look at the picture, I’ve pasted my code immediately after the <–! end #main –> indicator so that my form is at the very bottom of each page.

Storenvy HTML

Hit Save

That’s it. Really. Okay, so you could go to the CSS and add some fancy stuff there. You don’t need to, though. Especially if you really gussied it up from the MailChimp panel.

Advertisements

6 responses to “Add An Email Signup Form To Your Storenvy

  1. Tanya, I used your suggestions and I am SO HAPPY that I have a signup page on my SE site!! Problem: the grey ‘Subscribe’ button is too large, cutting off the bottom portion. Purely cosmetic, but since I am selling high-end jewelry I am thinking maybe I should change it. Ideas?

    • Hi Tara, happy to help! 🙂

      I can see what you mean (thanks for adding the link!), and I think it’s an easy fix. Because the style info for that button is being loaded in after the info for Storenvy, your best bet is to edit the button right in the HTML that mailchimp gave you.

      Find a section of code that looks like this:
      <input type="submit" class="button" id="mc-embedded-subscribe" name="subscribe" value="Subscribe">

      and add style=”height: auto; padding: 10px;” after “Subscribe” to get this:
      <input type="submit" class="button" id="mc-embedded-subscribe" name="subscribe" value="Subscribe" style="height: auto; padding: 10px;">

      Feel free to play with the padding value to adjust your button size as you see fit! Let me know if you have any trouble with it.

      On another note, I read your about blurb at the bottom of your shop. Thank you, truly. I’m incredibly impressed at your skill as an artist, and inspired by your perseverance.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s