【ThirdWeb × CocoShop】How to build an NFT mint site without coding
In this guide, We’ll introduce how to build an NFT minting site using ThirdWeb and CocoShop without any coding.
Ultimately, you will be able to construct a minting site like this:
https://my-test-drop.mycocoshop.io
If you get lost along the way or have questions, please inquire through the following Discord link:
What are ThirdWeb and CocoShop?
Let’s briefly explain these two services.
ThirdWeb is a DApp construction tool that comes equipped with commonly used smart contracts, allowing for easy no-code creation of NFTs and ERC20 tokens.
CocoShop is a tool that lets you construct NFT marketplaces and NFT minting sites without any coding.
NFT Drop Contract
The contract we will be using for this guide is ThirdWeb’s NFT Drop contract.
If you’re unsure about what an NFT drop is, please refer to OpenSea’s article on “What are NFT Drops”.
To briefly explain the specifications of the ThirdWeb NFT Drop contract, you set the image and attributes (metadata) of the NFT to be issued during minting, and users can actually mint the NFT by executing the Mint function from the NFT minting site.
Furthermore, you can also set the start time for when minting can begin and configure an allowlist.
Let’s Get Started
Now, let’s deploy the NFT Drop contract.
Deployment
Click “Deploy Now” and enter the Contract Parameters. Ensure you input the Name and Symbol. There’s no issue if you don’t set any other values.
Once you’ve filled in the required information, scroll down, select the chain you want to deploy on, and click the “Deploy Now” button.
Setting NFT Metadata
After deployment, the next step is to set up the metadata for the NFT.
From the admin panel’s sidebar, select NFTs and click “Batch Upload.”
For this guide, we’ll use the following sample metadata. Feel free to download them if you’re using them for testing.
Select _metadata.json and all the images simultaneously.
Once selected, it will display as shown below. If everything appears correctly, proceed to the next step.
On the next screen, you can choose between “Reveal upon mint” and “Delayed Reveal”. The “Reveal upon mint” option reveals the NFT as soon as a user mints it. “Delayed Reveal” keeps the NFT concealed until the administrator chooses to reveal it.
For this guide, we’ll select the commonly used “Delayed Reveal.”
Set up the Reveal.
The password will be used when conducting the Reveal.
The image to be displayed before the Reveal is the one we’ll be using from the link below:
By checking the “Shuffle” box, you can prevent predictability of which NFT will be minted before the Reveal.
Once all the information is entered, click the “Upload” button.
Setting Up Mint Conditions
Next, we will set the conditions for minting.
From the sidebar, select “Claim Conditions” and click on “Add Phase”. Several options will appear, but for this guide, we’ll choose “Public” so that anyone can mint.
Now, input the conditions.
“How many NFTs will you drop in this phase?” refers to the number of NFTs that can be minted in this phase.
“How many NFTs can be claimed per wallet?” is the maximum number a single wallet can mint.
“How much do you want to charge to claim each NFT?” is the amount of tokens users need to pay to mint one NFT.
Once all the details are input, click the “Save Phases” button to save the settings.
With this, the smart contract setup is complete. Please keep the ThirdWeb tab open.
Setting Up a Mint Site
First, log in to CocoShop at https://cocoshop.io/login
After logging in, click the “Create” button, input your store and domain name, and then create.
Importing
Next, go to “Collections” from the sidebar and click “Add Collection.”
Metamask will pop up, so click “Sign.”
Since we are using the smart contract created in ThirdWeb, choose Import.
Fill in the necessary values.
For “Contract Address”, copy and paste the contract address displayed at the top of ThirdWeb.
For “Creation transaction hash”, open “polygonscan” located to the right of the aforementioned address, and click on the link next to “at txn” under “Contract Creator.”
Click on the displayed Transaction hash to copy and then paste it.
For “ABI”, select “Source” from ThirdWeb’s sidebar and scroll to the bottom to find the ABI. Copy and paste it.
Lastly, for “Blockchain”, select the chain on which the smart contract was deployed. In this case, choose “Polygon Mumbai Test Network.”
Once everything is input, click the “Import” button.
After importing, you will see a screen like the following:
Setting Up an Online Store
Next, you’ll set up an online store. Click on “Online Store” from the sidebar and then click on the “Open online store” button.
Once set up, add the “Alchemy” theme from “Popular themes”.
After adding, click on “Set as a main theme” to set it as your main theme.
With this, the store setup and theme selection are complete.
Customizing the Theme
Next, you’ll customize the theme.
Click on the “Customize” button.
The theme editor will appear. Here, you can customize text, images, colors, and more to create your own brand.
For a trial, let’s edit the “Hero” section.
We’ve changed the title to “Welcome to the CocoShop”.
Next, click on the “Global Settings” icon button, the second one from the left sidebar. Here, you can make settings that are common to all sections, components, and pages.
For another trial, let’s edit the “Gradient Colors”.
We used the color picker to choose colors. The gradient used in text and background colors has been changed.
In this way, you can modify various parts and design according to your brand.
To save the changes, click the “Save” button in the upper right corner.
Review
Finally, let’s check.
By clicking on “Preview” in the header, the actual minting site will be displayed.
Once the minting site is displayed properly as shown below, you’re all set.
https://my-test-drop.mycocoshop.io
If you want to test minting on the testnet, change the start time of the “Claim Condition” you set up in ThirdWeb earlier to a state where minting is already possible.
Before connecting the wallet
After connecting the wallet
After minting
Conclusion
In this guide, we built an NFT minting site without code using ThirdWeb’s NFT drop contract and CocoShop’s drop theme Alchemy.
If you have any questions, please ask on CocoShop’s Discord! Also, please let us know if you have any feature or guide requests.
Announcements from CocoShop are made on Twitter, so if you’d like, please give us a follow.
