Okay. You want to build a powerful capture page to begin collecting subscribers during your pre-launch campaign, and you want to do it on the cheap.
In this tutorial I’m going to show you how I transformed the boring default Shopify theme into the ultimate capture page for your pre-launch in about ten minutes. Using this capture page, I collected over 1000 subscribers during my own pre-launch.
I am going to show you two different methods that you can use to replicate or even surpass my results.
The first method is for “dummies”. It is literally a one-step, copy and paste process. It is probably around 80% as effective as the method I used myself but will require less than 10% of the time and effort. Not a bad trade off.
The other method is for those who are comfortable working around HTML and CSS code. You won’t need to be an advanced programmer (I’m definitely not), but you’ll need to be able to recognize basic syntax and commands or you might end up breaking your whole page, and we don’t want that.
Method #1: For “Dummies”
First of all, no need to be offended. Most successful ecommerce entrepreneurs are not programmers and don’t know HTML. There’s no shame in it. If you ever find yourself in a position where you can get 80% of the results for less than 10% of the work, do it.
Let’s get started.
Step 1: Turning on the Capture Page
Start by installing one of Shopify’s free themes called “Simple”. If your Shopify account didn’t come with it pre-installed, simply go to the theme store search for the theme named “Simple” and install it.
This theme already has a basic capture page baked right in. However, it’s not really designed to have a high capture rate, so we’ll need to edit it. But before we do that, the first step is turning the “password page” on.
Start by logging into your Shopify account. If you don’t have Shopify yet, you can follow this tutorial out by starting a free 14-day trial.
Then scroll to the bottom and check the box for “password protect your storefront”. (See below.)
This will replace your normal storefront with a locked capture page when people visit your website.
If you’re following the “for dummies” tutorial, there’s just one final step. If you prefer to follow the advanced method, skip straight to step 3.
Step 2: Add a Capture Message
Remember, there’s a psychology to creating a capture page that converts at a very high rate. No one is going to sign up just to hear about when your store opens.
Instead we’re going to offer a great incentive, and then we are going make our offer “scarce”. And we can accomplish all of that simply by using the right words.
You can play around with different phrasing, but I’ve found through experimentation that this basic format will get the best results.
Simply copy the exact text (and tags) below:
We’re giving away $10 gift cards <br>
to our first 500 subscribers. <br> <br>
<strong>Gift cards remaining:<em>74 </em> </strong>
Sign up below 👇
And paste it in the box labeled “Message for your visitors”. (See below.)
Now save your changes, and you’re all done. Now you have a pretty killer capture page.
Method #2: Advanced
Step 3: Editing the Liquid File
If you want to copy the exact method I used to edit my capture page, I documented the whole transformation.
If you don’t have a computer background, you may be intimidated by some of the screenshots I’m about to show you. Relax, if you can type in a few short lines of text exactly like I show you, then it will be easy.
Now click on themes. Make sure the default Shopify theme called “Simple” is activated.
Then click the three dots indicating more options → then click Edit HTML/CSS:
Here’s where most people will begin to feel intimidated. Don’t. This will be pretty easy. Now scroll down and select the file named “password.liquid”.
This is the source code for the password page we just turned on. Next, I’m going to show you a few simple edits that will transform it into the ultimate capture page. Pay close attention. I’ve highlighted the specific lines of code that you’ll need to change. Do not change anything else. You could potentially disable the password page, and you’d have no real way to fix it without hiring a programmer. But don’t worry, I believe in you!
Start on line 71 and add a short “coming soon” type message.
Next, add your incentive on line 73. Keep it simple like I did. “Join the list. Get XYZ Incentive.” Note: the < br > tag creates a line break for a more pleasing aesthetic.
Next, explain your offer. Again, keep it as simple as possible. For example: “We’re giving XYZ Incentive to the first XYZ subscribers”.
Use a < br > tag whenever you want to skip to the next line.
Finally, you’ll want to add the “counter” to reinforce the scarcity of the offer. I wrote “Gift cards remaining:” and then chose a random number less than 20.
There’s just one last tweak to make to really achieve a killer capture rate. We want to change the default “submit” button to be more congruent with our offer. In my case, I changed the “value” to “Get My Gift Card Now”.
If you’ve never worked with code before, you’ll probably find this pretty scary to deal with. However, as long as you type in exactly what you see in my screenshots, you shouldn’t have a problem.
Congratulations. You just programmed an absolutely KILLER capture page. Now go get your Instagram campaign running so you can start getting customers.