Most people are not going to subscribe to your email list by using the little form in your site's footer or sidebar. This is especially true if you don't offer an incentive for people to subscribe. The fastest way to quickly build up your email list is to drive quality traffic to a landing page that offers a good reason for the visitor to subscribe (like a newsletter, free email course, or discount code), and features a big signup form that they simply can't ignore.
I recently did a podcast episode about how I'm building my email list for my survival knife shop. The basic idea is this: I put up a landing page clearly explaining that I put out a free, weekly survival newsletter, and that visitors can receive it by entering their email address. The page features bullet points and a big signup form to make it incredibly easy for visitors to know what I'm offering and how to sign up.
Here is a screenshot of that landing page:
I use Facebook ads to drive traffic to this page, and about 15% of the visitors to this page sign up for my newsletter. Within 4 weeks of driving traffic like this, I went from less than 50 to over 1000 subscribers.
Email marketing is a powerful tool, so I wanted to provide a free resource to help other ecommerce entrepreneurs put up landing pages like this and start building their email lists. I know that most of you aren't designers or developers, so I've made things really easy for you. The video tutorial below will walk you through exactly how to set up a landing page like mine in your Shopify store. I'll also show you how to do things like change the colors to match your branding, change out the icons and pictures, and change the wording.
Ready to jump in? Here we go!
Before you watch the video, you'll need to download this ZIP file containing the code and images that we'll be using in the tutorial.
Extras
Arrow Colors
In the video, I talked about how to change the signup button to match the color of the arrow image. To simplify things for you, here are the hex codes for all of the arrow colors so that you can plug those into the CSS:
- Orange arrow: #f69700
- Tan arrow: #c69c6d
- Gray arrow: #c2c2c2
- Red arrow: #ff0000
- Green arrow: #81c329
- Blue arrow: #00bff3
Where to find new icons and photos
The two resources I mentioned in the video for finding icons are iStockPhoto and FindIcons.com. As far as photos, you can find some good photos on iStockPhoto, although you will have to purchase them. Free photos can be found on sxc.hu and Flickr (make sure they are licensed for commercial use). You can also find cheap stock photos on PhotoDune.net.
Need help?
Like I said in the video, feel free to leave comments below if you run into any problems.
Comments (58)
Hey Markus, so the issue is that some of the CSS I provided is overriding CSS that your theme was already using. So to fix the problems, you should be able to just delete the offending CSS from the landing page template. I looked at your code, and here are the items I’d recommend that you remove from the landing page (ellipses represent code between the brackets):
.column.omega, .columns.omega { … }
.one-third.column { … }
.column, .columns { … }
Removing those 3 sections should fix the problems in your header and footer. Let me know if that doesn’t work or if I can help with anything else!
Excellent!
Thanks very much for your help Leighton, removing the offending CSS has indeed fixed the layout.
This will be a great addition to our site!
Many thanks
Markus
Hi Leighton,
Thanks for the excellent tutorial. As you know, I used it to create the landing page at http://namee.co.uk.
I’m using a time limited offer with Hello Bar, along with the Just Uno app pop up box to try and increase sign-ups. It’s early days but I’ve had some success with it.
I posted the page in the Shopify forum ‘Feedback on My Store’ and got a comment suggesting I shouldn’t use the time limited offer. I’d be interested in your views on this.
Shopify forum link: https://ecommerce.shopify.com/c/ecommerce-gallery/t/landing-page-feedback-namee-co-uk-197382
Leighton,
Awesome tutorial and super helpful! I really appreciate you walking us through the whole set up and I was able to implement everything you laid step by step easily! Question – is there a way to replace the page title on the top left with a logo instead of just the text? I have been struggling to find out how to do that. If you have time for a reply I would be very thankful! We appreciate your time it takes for you to do these.
This is EXTREMELY helpful. Thank you!!! I’m wondering, do you have a solution for those who use Aweber? I can make my way around code, but not sure I can figure that one out…
I spent a lot of time looking for a way to create a landing page with minimal effort and found this universal template http://justpx.com/just-lp-free-wordpress . I hope you’ll find my comment helpful.
Hi Leighton,
really loved your landing page tutorial, thanks so much! Just playing around to add the finishing touches.
What I wanted to ask was how do I get my landing page to show up on the site? I want only this to display before we launch the business next month.
Id like any visitor to see only the landing page, so Ive hidden all other pages, but the site still opens up on the homepage we have already designed.
Any help you could give me would be great!
Excellent tutorial, much thanks and appreciation.
May I know if there’s a way to hide the navigation and/or footer, for example easily?
Additional question, Leighton, if you have the time.
How do I add a Name field to the box? Thanks.
http://wideo.co is an excellent tool to make a company presentation. It has some templates for reuse. I used to sell my project.