This guide will walk you through an end-to-end example of how to create your own shop, list some assets, and begin selling — all in just a few minutes.
At the end of this guide, you will have created and launched a shop just like this one:
In your shop, your visitors are able to connect their wallet and directly purchase (mint) any of your assets!
Table of Contents
- Creating a Project
- Designing Your Shop
- Image Banner
- Text Block
- Creating a Collection & Uploading Assets
- Creating a Collection
- Creating Assets/NFTs
- Activating Collection & Deploying Smart Contract
- Linking Collection to Shop
- Publishing Your Shop
- Crypto Wallet: This guide walks you through how to deploy a smart contract using our platform, and also asks you which wallet you’d like to recieve profits in, therefore it’s recommended that you prepare by creating a crypto wallet with your preferred provider. We recommend Metamask or Coinbase Wallet.
- Image Samples: During this guide, we will create a fictional NFT collection called “Fiery Friends”, which uses a set of images we generated. To download these images, click here.
Creating a Project
To get started, after creating your noonshot account, you’ll be taken to the main dashboard. From here, click on “Create New” and provide a name in order to create your first project. Each project corresponds to a single independent website/shop, which can contain multiple collections and pages (more on that later).
After creating your project, the next thing we’ll do is create a simple design for our shop.
Designing Your Shop
Open the Site editor by clicking on “Edit Site”.
With the editor open, we’ll now add 3 elements to begin building the page;
- An Image Banner
- A Text Block
- An NFT Grid
To add an element onto a page, simply switch over to the Elements tab on the left side nav, then drag and drop your desired element onto the page itself.
Now that we have the basic layout for our shop, let’s personalize the shop to fit our brand. We’ll start with the Navbar.
To begin personalizing an element on the page simply click on it and the right edit panel will appear.
On the navbar, let’s edit the header title to
Fiery Friends and then upload the
logo.png file (which you can find in the example assets here).
Now, let’s personalize the background color of the Connect Wallet button, to a fiery orange
#D0740B, and we’ll change the button text to white.
Lastly, we’ll add a Discord and a Twitter link to enable those buttons to show up on the navbar. We’ll copy/paste the follwing (Noonshot) links:
Now that our Navbar is looking like this, we can move on to the rest of the page:
Next, we will set up the image banner. For this, we’ll select the banner on the canvas, remove the current placeholder image, and then upload the
banner.png file (which you can find in the example assets here).
Now, let’s personalize our Text Block’s content and colors to the following:
Our felines are pretty fire.
10 original fiery friends living on Polygon.
To edit the copy, we simply need to click on the canvas and we can edit the text in-line.
With our Text Block selected, we can edit the background color and the padding on top and bottom using the edit panel on the right.
Let’s edit our next block to match the following settings:
- Background Color:
- Padding Top:
- Padding Bottom:
We’ll skip over the collection block as we will adress that next, but for now, let’s edit our footer to say
Fiery Friends | 2022 before we proceed with creating our NFT collection.
Simply select the footer element, and edit the text in the canvas.
We’ll keep this in black color.
Creating a Collection & Uploading Assets
Next, we’ll move on to our collection. Earlier we added an NFT grid block between our Text Element and our Footer.
An NFT grid is used to show a grid of NFTs you intend to sell. Since we don’t have a collection yet, these currently appear as only placeholders.
Clicking on the Grid, reveals the right panel options, which let us select which collection to display along with the background color, and the number of cards we want to display per row.
Creating a Collection
Since we dont yet have a collection created, we can simply click on
Go to Collections to get started creating our first collection.
Afterwards we will be taken to the collections page where we can click on
Add Collection and provide a name. Let’s enter
Fiery Friends as our name.
Now that we have a collection created we’re ready to being uploading images that will become the NFTs we want to sell.
When we first create a collection, it is
inactive. This means, that we have not yet deployed a Smart Contract, and it is not yet enabled for sale.
Creating assets while a collection is inactive, enables us to populate our store, but will not allow us to sell — until we activate our collection.
First, we’ll upload a few NFTs, and later we’ll walk through the steps to activate our collection/contract.
To create our first assets, within our collection, we’ll click on
Create Asset, now a modal will open where we can upload an image, provide a name, a description, and the price we want to sell our asset for (later, once our contract is active).
Let’s go ahead and upload our Fiery Friend images (which you can find in the example assets here).
While we are asked to provide a title, price, and description, we can edit these values later, so long as we have not yet sold this specific asset. Once an NFT is sold, it can no longer be edited.
0.05will always be in the currency of the network you end up activating your collection to. For example, if you activate an Ethereum collection, this corresponds to 0.05 ETH, while if you activate a Polygon collection, this will correspond to 0.05 MATIC
Simply repeat these steps to create a couple more Fiery Friends for our collection.
We can edit the desriptions by simply clicking on the description field, let’s edit it to include the following text:
A limited edition, one-of-one, digital collectible.
Activating Collection & Deploying Smart Contract
Now that we have our assets created, all that’s missing in our collection is activating it.
This requires us to deploy a Smart Contract (which is a small program in the Blockchain that will handle your transactions). While this may sound complicated, don’t worry, we make this very easy, just a couple of clicks.
As a creator, any contract you deploy using Noonshot will always belong to you. Currently, we support Ethereum, Polygon, and Avalanche chains with more chains coming soon.
To continue, we’ll activate this collection in Polygon. We can do this by clicking
Activate Collection and following the steps on the modal.
Simply click on
Let's Go to begin.
During this activation process you will be asked to:
- Select your preferred network for this Collection.
- Connect your wallet.
- Switch to the correct network.
- Specify the wallet that should recieve profits, royalties, and select a royalty %.
- Deploy your contract.
After confirming the transaction for the deployment, you will have to wait anywhere from a few seconds to a few minutes for the transaction to go through.
Once successful, you will recieve a notification, and your collection will now say
Congratulations, you just deployed your very own smart contract, which is owned and tied to your personal crypto wallet!
We’re now ready to link our collection to our shop, publish, and share with the world.
Linking Collection to Shop
To link a collection to the shop we created earlier, we simply need to head back to editor, select the NFT Grid element, and choose our collection from the dropdown.
Now our feline friends will appear as shoppable cards in our shop. We’re now ready to go live.
Publishing Your Shop
Before publishing, it’s recommended that you click on
Preview to view your shop, as it will appear to your audience.
Once you’re happy with your result, you’re ready to publish. To do this, simply click on “Back to Editor” to return to the editor.
Then, click on the
Publish button and select
Update this will publish your latest changes and make them visible to the world.
🎉 Congratulations! You now have a fully functional NFT shop that you can share with the world.
Simply copy the URL by clicking on the link in the publish popout, or by copying it from the address bar after publishing, and you can begin promoting your project and selling NFTS.
We hope you found this guide helpful, below are additional documents where you can find general information about how to use the platform.
Browse additonal documentation: