Comment on page
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 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
- 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
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
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'.