Skip to content

Instantly share code, notes, and snippets.

@reggi
Last active August 29, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save reggi/9183015 to your computer and use it in GitHub Desktop.
Save reggi/9183015 to your computer and use it in GitHub Desktop.

Summary

Hello and welcome to the Signup App documentation! Please feel free to comment below and request anything you'd like to see more of or explained in further detail. I'd love to engage with the community of shop owners that enjoy the app, feedback and critique is always welcomed. You can tweet me directly at @thomasreggi if you need to get in touch with me regarding the app or any of this documentaiton. Now, let's get into it.

If you need help please fill out this form.

Table of contents

The WWWWWH?

Who is this app for?

The app is for any shop owner who wants to gather customers via a form on their site.

What / why build this app?

I wanted a simple, clean, and easy way to put a form on any shop without any external websites, just using the shopify. I wanted to collect customer information using different forms on the site, with different markers / indicators where they came from. I wanted to be able to make them customers so I can see the effectiveness of their signup via seeing if they ever purchase anything through my shop.

Where / when do I use such an app?

The app generates forms that work anywhere on your site, actually they work anywhere on the internet. You can put one of these forms on any website and it'll make a customer in your shop.

How did I build the app?

I built the Signup app, in my free time. I felt like the shopify platform could benefit greatly from it. I built it with Node.js, express, MongoDB, and a whole host of other great technologies.

Usage(s)

The Passworded Shop

If you're like me and have been checking out other shopify stores, you've most likely seen the password protected shop page.

Passworded shop example

It's drab gray is enough to turn the most interested and engaged away. Understandably the store owner is hard at work getting their shop off the ground and trying their best. However, this page could be up for weeks, and you're wasting a valuable opportunity. You could be capturing interested and engaged potential customers without ever opening your shop.

This is an enormous opportunity because when you do open your shop, you'll have a whole mailing list of customers ready to go, aren't leads great?

Where to edit the password page

Replace you're reggi with your shop name, and you can get to the "general settings" page in the shopify admin.

https://reggi.myshopify.com/admin/settings/general

Passworded shop html

At the bottom of this page (Shopify Admin -> Settings -> General -> Storefront password) You'll see a section "Message for your visitors", this is where you can put in the HTML form embed code (you get a code, when you add a form in the app). That's it now it'll show on your password page!

Styling (pimping) the form

Passworded shop html outa da box

Here it is in all it's glory! Now! It looks like poop. But we can change that with a little bit of CSS magic! Here's the code the spruce up this boring lame form.

<style>
    .signup-app-form label{
        color: #777;
        width:80px;
        display: inline-block;
        font: 12px "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
    }
    .signup-app-form label:after{
        content:":";
    }
    .signup-app-form input{
        width: 348px;
        margin-bottom:10px;
        font-size: 14px;
        padding: 4px 6px;
        border: 1px solid #ccc;
        outline: none;
        background: #e9e9e9;
        background: -moz-linear-gradient(top, #ececec 0%, #fff 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ececec), color-stop(100%,#fff));
    }
.signup-app-form button[type="submit"]{
        margin-bottom:10px;
        font-weight: bold;
        cursor: pointer;
        border: 1px solid #bbb;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #aaa;
        background: #ddd url('http://reggi.myshopify.com/images/admin/btns/bg.gif?1') top left repeat-x;
        padding: 4px 6px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        text-shadow: 0px 1px 1px #fff;
        color: #3a3a3a;
    }
</style>

All you have to do is squeeze this code in the top of the the other code (the form code that should already be in there).

Here's what the styled form looks like:

styled form

Dropping a message to your visitors

You should also drop in a message in there for good measure.

<p>Hey, you, amazing person! I know you're super disappointed that we're not open just yet, but I promise that if you leave your information with us, well drop you a message when we open up. Ya dig?</p>

with a paragraph message

Getting rid of the existing "Enter store using password" form

Now for those shop owners out there that are really rambunctious, and you wanna get rid of your password field (you need it to share with friends / family / coworkers) it's understandable, but automatically get access to your front end shop if your logged in through the shopify admin, so if your not sharing it you don't really need it.

<style>
	form#login_form{
		display:none
	}
</style>

All you have to do is squeeze this code in the top of the the other code that's in the "Message for your visitors" box.

without password field

There you go! Yippie! You made it. You have the dopest "Password Protected" pages on shopify, whatever that means. Now go out there into the wild, and wait for some entries, you earned it kiddo! ✰✰✰

Reference Guide

Number / Number

In the admin for the app you'll see two sets of numbers, the first is unique customers, the second is total submissions to the form including duplicate customers.

Submitted

The number of customer / entries that were created and submitted to shopify via the application.

Withheld

The number of customers that are stuck in the app's database and haven't been sent to shopify. There are a couple of reasons why a form would have withheld signups. In the specific case where you've uninstalled the app and haven't removed the form from your shop, we'll still continue storing Signups. An inactive form will continue to collect signups and withheld them from shopify.

Total

This one is pretty obvious it's the the total number of customers / entries that have entered information to a particular form.

Status

Active

An "active form" is a form that is currently sending customer signups to shopify.

Inactive

An "inactive form" is a form that is storing all information sent to it in the Signup database but never sending it to shopify.

Authorized Form

An "authorized form" is a form that you created with the Signup Application's backend. It's a way to confirm that a shop owner created the form and wants submissions from that form to be inserted into shopify. Authorized forms are automatically set to "Active".

Unauthorized Form

An "unauthorized form" is a form that was submitted from your site but the hidden "tag" input (same as a form name) that was sent, wasn't found to have been created by the shop owner. The customer signup was captured and stored in the applications database but it was never sent to shopify.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment