How to build your own Crypto art gallery
Let me start by saying I’ve never written a technical guide before, but I had also never built a front end for a crypto art contract before now. In this guide im going to show you how to build your own front end for pre-existing tokens. How you create those tokens is up to you, there are many choices including soon a form for the BAE which will give you 100% freedom. For now though we will be doing it for ease using an opensea created contract.
The site we are going to build will let you sell all your crypto art from any platform all in the same place. That is pretty awesome right. Other amazing things about the site we are building is you’ll be able to accept paypal, stripe, BTC, ETH pretty much anything you want. All while bypassing platform fees. If you find your self shouting at the screen a question like how I install a plugin, just google that question plenty has been written before on all the basics in this guide. I would think anyone who has built a website before could do this in a day no code is required. If you’ve never built a website, it will take 3 days to a week I would think.
“Nothing in the world is worth having or worth doing unless it means effort, pain, difficulty… I have never in my life envied a human being who led an easy life. I have envied a great many people who led difficult lives and led them well." - Theodore Roosevelt
Pros and cons
With all systems there are pros and cons before we get started lets look at the ones that this set up has and see if it is for you;
Pros
- No coding required.
- You can list all your NFT’s in one place and have them transfer automatically on sale.
- You pay 0 platform fees.
- You can take almost any payment method or currency(paypal, all erc-20 coins and all major cryptos. Hell you can even take doge if you want.)
- Full customisable you can make the site look and run however you want.
- Sell your physical art and crypto art in the same place.
- Collect information from your buyers and build a mailing list.
- Free yourself for any chance of censorship or your artwork being blocked.
- Upload any size artwork and self-host it so file size and type restrictions are gone.(coming in part two)
- almost limitless possibilities for kinds of sales (subscriptions, auctions, offers are all possible)
- buyers can buy multiple items at the same time without going to each page.
Cons
- Can only sell no resale on your site will be possible.
- Takes work to maintain and build a website.
- No benefit from charts or on chain data.
- No instant listing each product will take apox 5 minutes to list. (depending on how in depth you want to go)
- We are using wordpress (this is both a pro and a con a massive con if you are some kind of web3 nazi)
- Checkout is a little lengthy.
- Paypal fees and 1% possible fee on eth payment plugin(but there are options for 0%).
- Monthly cost of 30usd - 60usd depending on set up
You heard right we are going to be building a WordPress that allows you to list and automatically distribute on sale all your crypto art in one place. More than that you could even sell your crypto kitties on it. This guide will take you one day of solid work to complete in its basic form. How advanced you go from there is up to you, but thanks to WordPress the possibilities are pretty much limitless
Step one hosting your site.
You might already have a webpage set up and a domain but for this guide your going to need to do things a bit differently. First get your domain for godaddy don’t buy hosting from them it isn’t fit for this use. Next you need to buy hosting and set up the site.
You can host most places, but the most important thing is you have power to install PHP libraries on your site. Go daddy does not let you do this so don’t use them. I would say use cloudways they come with everything you need installed. However, what hosting provider you use with them really doesn’t matter as long as you can install php library’s cloudways is already set up for you. So, if you have no idea what PHP even is, go set up a cloudways site and get a WordPress running on it.
Here is a video guide that gives you how to set up a WordPress on cloudways if all of this is new to you watch it https://youtu.be/vVvEkeT2wOQ
If this sounds confusing, I promise it is really easy Cloudways has a lot of information on how to do this and it is a breeze. You’ll also need to hook up your domain to your cloudways hosting how to do this can be found here. https://beaverhero.com/how-to-point-godaddy-domain-to-cloudways-hosting/
Finally, cloudways comes with a free SSL tool so that saves a lot of money. Upgrade your PHP to 7.2 and you are good to go(remember look up how to upgrade php on cloudways on google if lost). Finally get cloudflare working on the site look up again on google how to do this. This isn’t vital to do but a lot of browsers don’t like it if you don’t have this running. Don’t know what ssl is don’t worry it is the thing that adds an s to http without it your site will throw a warning to anyone viewing it. With cloudways you can get it running without much technical knowledge. https://createandcode.com/how-to-install-cloudflare-on-wordpress/
Don’t get overwhelmed, the technical words im using here are just to be precise but you can work it out I promise. To finish this step head to {yourdomain}/wp-admin and login with the one your created. I know, that confused me too the first time I saw it example; bananas.com/wp-admin where bananas is your websites name.
If your lost and feel like this guy just go back watch the guides linked, you will get it i promise
.
“Nothing in this world can take the place of persistence. Talent will not; nothing is more common than unsuccessful men with talent. Genius will not; unrewarded genius is almost a proverb. Education will not; the world is full of educated derelicts. Persistence and determination alone are omnipotent. The slogan Press On! has solved and always will solve the problems of the human race.”― Calvin Coolidge
Step two plugins and theme
A lot of this step is optional and really depends on how much you are willing to spend. The parts that aren’t are as follows and are the only things you will have to spend money on. First some free stuff woo commerce is required so grab that plugin in and get it set up https://woocommerce.com/posts/how-to-set-up-a-new-woocommerce-store/.
Next is the most important part head to https://ethereumico.io/ and grab the Ethuerem plugin that allows you to sell eth you will need to get the pro version that also allows for the sale of erc-20 tokens and then also the erc-721 token extension. If you are an advanced user who is used to WordPress you can properly stop reading this guide right here and carry on alone.
How to install a wordpress plugin https://www.siteground.com/tutorials/wordpress/install-plugins/#:~:text=In%20WordPress%202.7%20and%20above,plugin%20will%20be%20installed%20shortly.
If you are not keep reading. You most likely want to also accept eth as a payment so grab the free plugin from the etherem ico site linked above that allows for eth payments (Ethereum payment gateway) as part of the woo commerce payment gateway. After you have got these plugins installed. Go to the settings for each plugin and set them all up, the settings link can be found on your plugins page below each one.
You will need to do one thing that presents a security issue. The erc-721 plugin needs your wallets private key to function. Do not use your wallet that has all your cash in that would be dumb. Set up a new wallet just for this site and put the tokens you intend to sell into that one. You will also need to add cash to the wallet to pay for gas fees for transfer on sale. Like 40usd should be good don’t put more but make sure it is always topped up. Then adjust gas fees the higher the faster. Set you gas fee to 4000 and around 25 for price this is a good median, but it depends on the network speed. You will also need to get an https://infura.io/ API key(it is free) this is 100% required for any of this to work so make sure you set it in the etheruem plugin settings.
The nice thing about these plugins is they operate independently of each other so your eth receiving address can be totally different to the one holding the collection for sale. Further, you don’t need to provide the private key for the one you are receiving the cash into.
Shop around for a nice theme and take some time to get used to wordpress as a whole its really easy just takes some time if you are new to it. if you get stuck don’t freak out just google the issue 99% of wordpress issues can be worked out by using google to find the answer for your question.
For woo commerce you will need to go to settings then payments and chose what payment options you want to use. Paypal on check out should be set up, cos that’s awesome. Also make sure your eth payment gateway is properly configured. A way to get your prices pin point perfect is to add a coin market cap api key (free again) https://coinmarketcap.com/api/. But you don’t have to use this(it will help though if you want to add more ERC-20 coins as payment).
Here are some other plugins that will add new payments to your system if you want to add almost any crypto use this one it goes directly to your wallet which is awesome. https://mycryptocheckout.com/ you can shop around for more but I’ve personally tested a bunch this is the best. Also there are a few that will conflict with the eth payment gateway.
Now what currency do you want to display in? woo commerce only lets you use fiat that could be cool but maybe you want a bit of crypto. Eth is hard to get to be the display currency that sucks but you can get most other cryptos as a display setting by adding this plugin, this one also lets you take btc and other coin payments but it is janky and I hate it. good for the currency pairings it adds though. https://gourl.io/
I would also advice making a few tests between two wallets to make sure that the transfers are working correctly. The orders section of your site (find it under woo commerce then orders on you wp admin) will give you a playback of any errors that happen. Should the erc-721 fail to transfer on sale you probably have your gas fee set too low. Go to the erc-721 addons plugin and adjust your gas until it works.
A note here the paypal short payment that appears below your items on woo commerce will not work with the erc-721 plugin so disable it for a good UX.
Step three listing your collection.
To List your artworks hit add product and you will be greeted with a form, after adding the basics tick cryptocurrency (if you don’t see this option you haven’t installed the erc sale plugin correctly). you’ll need a few things the image, description etc. The two you might be confused by are the tokenID and the contract address these can be found two ways via eth scan if you want but the easiest way is via opensea. Simply go to your account on opensea then click on the token you want to sell. Look at the URL it should look something like this: https://opensea.io/assets/0x677d8fe828fd7143ff3cee5883b7fc81e7c2de60/706
The above URL is broken into three parts the open sea site “https://opensea.io/assets/” the contract address “0x677d8fe828fd7143ff3cee5883b7fc81e7c2de60” and finally the token ID “706” simply input this information into the forms on the product listing section of your wordpress admin and boom as long as your hooked up properly this token will be transferred from your wallet to that of the buyer on sale. Also be sure to click virtual to make it so an address is not required on checkout if that’s what you want. The downloadable option is also pretty cool as you can make something that only buyer can see, high resolution image or something of the kind.
This won’t input the image into the product on its own this just connects the token. You will need to do some leg work this is not instant, but it does allow for full customisation. I will let you think about the pros and cons for this set up. I’m just giving out some information that will allow you with a little work to make a site that puts all your tokens in one place and shows them off in a much better way than opensea.
Step four extras
If you’ve got to this point nice one you’ve set up a platform where you can sell your tokens but now you’ve got to make the UX a bit better. A few really basic ways you can do this is with the woo commerce check out form editor don’t buy the one from woos site there are plenty of free ones. The point of this is you can make it so only the eth address is required on checkout as long as you hit the cryptocurrency tick box on the product it will add this. Go into the plugin settings for the checkout editor settings and remove all the undesired fields.
Other cool plugins or features you want just look them up google “WP” followed by the desired plugin function. Don’t pay for plugins for basic stuff you can always find free alternatives. You may want to buy a nice theme too, but this is up to you. With WordPress you can make almost any kind of site and it look anyway you want.
That’s it you have the power, this might not be a perfect solution but nothing ever is. What this does is gives you power to sell however you want. The benefits for having your own front end are huge, Mailing lists, blog etc all can be yours and you don’t pay any platform fees. As a collector you don’t have to pay any resale fees. You totally should pay royalty’s to the artist but really it is and should be up to you.
Final thoughts
The main reason I’m putting this out is because I see the crypto art space becoming centralized. Far more centralized than the art-world, platforms for better or worse don’t allow you to tokenise the same work in two different places.
This creates a weird situation where you can’t hunt for artwork like you can in the normal artworld. The platforms are both gallery and producer of the art. With this tool you can become the gallery and the platforms producers. This spreads the market out, the platforms own their site but the smart contracts don’t really belong to them. As soon as you publish to ETH scan your contract belongs to the community and what you chose to display on your platform is up to you. But a smart contract isn’t whatever is published on there is spread out. What is shown on the BAE site is on our site, what is shown on opensea is on openseas site. Ethereum is open, now the front end can be too.
This can be used to fight censorship and take the power back to the artist where crypto art promised to place it in the first place. Not to a platform which as a private place can censor at will, the contract they simply cannot touch even if it was created by them.
The BAE is also built on WordPress with a lot of extras from what is provided in this guide. However, we will be building with anyone who decides to build their site in this manner and providing plugins to improve it. Next up in this series we will be talking tokenisation where to do it what the pros and cons of each method are. As well the release of our custom token creation form which will give you the freedom to tokenise anything you wish, with a bit of work.
