The first step to making a living as an artist is pretty simple. People need to be able to pay you. Today, we’re going to continue adding e-commerce to an artist website with one very simple step–the Patron Button.
Patronize Me, Please
There was a time when patrons were common. A great artist would have a ’sponsor’–not so different perhaps from a great race car driver today. Someone who believed in the artist and really wanted them to create work would pay them to do so. Not for the work itself, necessarily, but to support a life of creating. To support their development and output as an artist. Sounds pretty great, huh?
A relatively new website called Patreon is bringing this model back and you should definitely check it out because it offers a lot more than what we’re going over today. BUT, even if you do set up an account with Patreon, I recommend adding a payment/donation button to your own website, too. Remember way back when I said this is your digital headquarters?
The Donate Button
Today’s lesson will achieve one simple task. If you follow along there will be a donate button on your website.
Next week I’ll be working on Karla Adolphe’s new artist website again, adding some actual inventory to her online store. For now, I’m going to add a donate button to my own artist website as the example. And then I’m going to ask all of you to help me … uh … test it.
Getting Ready
First things first, you need to have some things in place to follow along with us. Most importantly, you need to have a Stripe account set up to accept payments. If you don’t know what I’m talking about, go back to last week, read through it, then meet me back here.
Connecting Your Squarespace Site to Stripe
This part is going to be focussed on Squarespace websites. Stripe works just about everywhere, but it may be more complicated to connect with other store platforms. If your website is on Wordpress, I’m sure the world of Plugins could help you out here, but I’m not going to go there today.
Step One: Login to your Squarespace admin panel
So, you know. Just do that.
Step Two: Connect Stripe to your website
We actually did this step last week. BONUS! In case you didn’t play along, here are the brief instructions again.
From the main menu on the left, you’ll click COMMERCE. Next, click Store Settings. This is where the magic happens.
There is a big button that says CONNECT STRIPE. If you guessed ‘click that button’, you guessed right!
This will open a Stripe window for you. You can now either sign in to your existing Stripe account to connect or create a brand new account. Once you do either, your account will connect with Squarespace and you’ll be brought back to Squarespace.
Test Mode
Your store is now connected to Stripe, and in theory you can take orders. In practice, you want to test things first. Squarespace has a test mode, which you will now be in by default. This allows you to kick the tires without actually spending money on a credit card. Which is awesome. When you are ready for the real deal, you’ll come back here and flip the big toggle to ON.
Step Three: Add a Donate Button
Can you feel the excitement? We’re almost there!!
You can add a donate button anywhere you like on your site. And you can add more than one. For today, let’s put one right where it belongs. On the home page.
You’ll want to go back to the top level admin menu in Squarespace (click the arrow at the top of the left-hand menu until you get to HOME). Next, click PAGES.
Now click your homepage (whatever you named it, you’ll know it’s your homepage because there is a little ‘house’ icon next to it)
To edit the page, hover over the content area and click ‘EDIT’.
Now, we’re going to add a DONATE button.
Click on the ‘blob’ shaped insertion point, and add scroll down to the COMMERCE section, where you will see Donation as an option. Click that.
The DONATION window will pop up with a bunch of relevant options.
Title is basically telling people what they are giving to. It will show up in a couple of places for the donor, including the thank you email they get. So be sure to put something short, descriptive and friendly for your fans.
Description is a longer form of this. It may describe why the donor would want to be your patron. This may be a good place to make clear that donations are not tax deductible. Because unless you are a registered charity, they are not.
Custom Button Label will change the button itself. I changed mine from Donate to Support Dave Von Bieker.
With the tabs at the top of this window you can also set up suggested amounts, which can be helpful for supporters (ie. $10 buys me new paint, $50 buys me a great big canvas, etc.). Under Additional, you can add custom fields. Things like ‘why did you decide to support me’ or ‘where can I mail a thank you card’ may be a good idea. If you use MailChimp for your email newsletter, you don’t need to ask them to sign up here, because Squarespace works that right into the payment process for all of your ‘customers’!
For now, we’ll keep it simple. Just click SAVE.
Test it out
You can now click that donate button and test it out. So do so! You can choose an amount, fill out your details and proceed right through checkout, without putting in a credit card. Once you give your ‘donation’, you’ll be taken to a thank you page, and even get a thank you email. You can actually customize that email in your admin panel under COMMERCE/Email Settings/DONATION CONFIRMATION if you like.
I went through the entire process on my own website, davevonbieker.com … and it worked! I got a confirmation email. I got an email telling me someone had donated. Viola!
Go live
Now I am ready to go live. This means I’m taking my site out of test mode, and making it so that real live people can give me their hard earned cash. Not that they will, mind you, but that they can.
But first, a word about policies and privacy
The nice thing about this Squarespace and Stripe setup is that you are not hosting your site yourself, and you are not processing credit cards (Stripe is doing that), so you don’t need to get involved in all of that.
You will see this at the bottom of the checkout page:
"All transactions are secure and encrypted, and we never store your credit card information. Payments are processed through Stripe. Payment information is also governed by Stripe's privacy policy."
This is very nice and gives your shoppers some peace of mind. You may also notice that the browser shows a ‘secure site’ icon on the checkout page (a little lock most likely), and the page address flips to secure.squarespace.com. That means transactions are encrypted on a secure server. More peace of mind.
You may still want to set up some policies for your store, especially if you are collecting additional information on transactions that will be stored on your site (like any of those extra questions we were talking about, the customer’s contact information, etc.) You can do this under your STORE SETTINGS in Squarespace.
I won’t get into what your policies should be here, but even something simple like "Your information will only be used by the administrators at WEBSITE.COM to better serve you as a customer/donor. We take privacy seriously and never share your information with anyone without asking your permission first.”
You know. Something like that.
Now flip that switch!
Go to COMMERCE / STORE SETTINGS, then flip the big switch in the white ENABLE LIVE ORDERS box. That’s it, that’s all.
Well, as long as your toggle in Stripe is already set to LIVE too. You may want to log-in to Stripe and make sure that your Stripe account is also live.
So many toggle flips.
You now have a real live donation button. Let’s call it our Patron Button. You know all of those would-be patrons you have waiting to give you money? Now’s a good time to send them an email or a phone call.
If you want to test my Patron Button out, you can find it on my homepage at davevonbieker.com. You can even give me a real live donation. Go ahead. I won’t mind.
Of course, you can also add any sort of products you might like to your store now, too (now that it’s alive and kicking). If you’re a real keener, go right ahead.
Happy sale-ing!