HyperMint Experiences are the fastest way to get started in web3. They provide you a solid base for your NFT storefront that can be used out-the-box or as the foundation for a more bespoke project.
To see an example, view our demo storefront that was built using our Storefront Experience - 3 Stages of Being.
To test crypto purchases on the example storefront you can use a Goerli Faucet to fund your wallet with Goerli ETH.
To test card purchases , view the Moonpay docs (if you do not have a MoonPay Account set up yet, please contact your assigned HyperMint account manager to help you get set up) or use these details:
Card Number: 4000 0209 5159 5032
To get started using HyperMint Experiences you will need 2 things
- 1.An EVM (Ethereum/Polygon) contract deployed in the HyperMint Dashboard (testnet contracts are recommended as a starting point)
- 2.Some basic technical knowledge about websites
- 1.Ensure you have NodeJS installed on your machine. If you are using Mac, NVM is the best way to do this
- 3.Navigate into the cloned repository
- 4.Remove the
rm -rf .git
- If you are using your own git repository you can now initialise it in this project
- 5.Ensure you are using the correct version of node. If you have NVM installed, simply run
- Currently the storefront runs on node v16
- 6.Install all dependencies by running
- 7.Copy your details from the
Developerstab of your contract in the HyperMint Dashboard and paste them into the exported object inside
npm run start
- 1.If you already have something running on port
3000of your development environment you will have to confirm the use of another port in the terminal
- 9.Visit the URL logged in the terminal to view your NFT storefront
Once you have setup the storefront to use your contract you can customise any area of the code as you require. For most use cases simply changing some branding and content will be more than sufficient.
To change the logo and hero background image:
- Change the
logoattributes inside of the images property
For local files, you can use a
requirestatement as in the example. For remote files, you can paste in the full URL of the remote an image.
There are 3 main colours that can easily be changed using a simple configuration object:
- Primary brand colour
- Success colour
- Error colour
You can change each of these colour values inside the
colorsproperty in the same
You MUST use RGB colours for these properties. You can use online tools to convert your HEX values into RGB if necessary.
It is also possible to change any colour in the codebase if you have some basic CSS knowledge. The best way to do this is simply alter the values inside the
All content can be easily managed by editing the
hideSoldOutTokensvalue can be set to true to prevent tokens showing up on the store if they have no more supply. By default this is turned off so users can see how many tokens have 'sold out'.
Something not quite right, unclear or can't find what you are looking for? Please let us know at [email protected] and we will get back to you as soon as we can.