Skip to content
Documentation
NFT Studio
Create Collection Tool

Overview

The Create Collection Tool is a user interface in Aptos Build that allows you to launch an NFT collection in just a few steps:

  1. Connect your wallet
  2. Enter collection details (name, image, description) and create collection
  3. Enter NFT details (name, image, description) and create NFT(s)

Mint Page

Once you’ve created your collection and NFTs via the frontend tool, you will need to deploy a mint page to allow the public to start minting your NFTs. Download the template and follow the instructions below for you to get started.

Template

Mint Page Template Github Repo

Populate environment variables

In order to add a collection to the public mint page, VITE_APP_NETWORK and VITE_COLLECTION_ADDRESS must be populated in the .env file at the root of the repository.

VITE_APP_NETWORK="" # "testnet" or "mainnet"
VITE_COLLECTION_ADDRESS="" # "0x..."

You can use a collection that you have minted using the tool by going to the “My Collections” page in the Aptos Build UI and copying your collection’s address.

The network you provide in the .env must match the network of the project under which you created your NFT collection.

Modify static content

Once the collection address has been configured, view the frontend/config.ts file to change any static content on the page. You can also modify the code itself as you wish.

How to add static images?

The public mint page uses static images in the UI. Initially, the images are imported from frontend/assets/placeholder folder.

  1. To use custom images, add the image you want to use to the frontend/assets (under any new folder you want to create).

  2. Import the image in the frontend/config.ts file using this code snippet.

    import MyImage from "@/assets/<my-new-folder>/my-image.png";

  3. Add it under the desired section on the page.

For example, to update an image in the “Our Team” section, add the image in the folder frontend/assets/<my-new-folder>, import the image with import MyImage from "@/assets/<my-new-folder>/my-image.png"; and update the img property in the ourTeam section with MyImage.

Update the look and feel of the page

This template is styled with Tailwind CSS and shadcn/ui. These libraries provide the app with a neutral and clean look and feel while leaving it open to a lot of customization so that you can make the app truly yours.

Please refer to the following questions in the FAQ to learn about how to customize the UI of your dapp:

Deploy to a live server

This template provides an npm command to easily deploy the static site to Vercel.

At the root of the folder, simply run

npm run deploy

Then, follow the prompts. Please refer to Vercel docs to learn more about the Vercel CLI.

NFT StudioNFT APIs