Search
⌃K
🛒

Storefront

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.

Example

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
Exp: 12/2030
CVV: 123
​

Prerequisites

To get started using HyperMint Experiences you will need 2 things
  1. 1.
    An EVM (Ethereum/Polygon) contract deployed in the HyperMint Dashboard (testnet contracts are recommended as a starting point)
  2. 2.
    Some basic technical knowledge about websites

Getting Started

  1. 1.
    Ensure you have NodeJS installed on your machine. If you are using Mac, NVM is the best way to do this
  2. 2.
    Clone the public repository https://github.com/moonpay-hypermint/storefront​
  3. 3.
    Navigate into the cloned repository
  4. 4.
    Remove the .git folder: rm -rf .git
    • If you are using your own git repository you can now initialise it in this project
  5. 5.
    Ensure you are using the correct version of node. If you have NVM installed, simply run nvm use
    • Currently the storefront runs on node v16
  6. 6.
    Install all dependencies by running npm install
  7. 7.
    Copy your details from the Developers tab of your contract in the HyperMint Dashboard and paste them into the exported object inside src/config/contract.ts
  8. 8.
    Run npm run start
    1. 1.
      If you already have something running on port 3000 of your development environment you will have to confirm the use of another port in the terminal
  9. 9.
    Visit the URL logged in the terminal to view your NFT storefront
​

Customization

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.

Changing Imagery

To change the logo and hero background image:
  • Open src/config/theme.ts
  • Change the background and logo attributes inside of the images property
For local files, you can use a require statement as in the example. For remote files, you can paste in the full URL of the remote an image.

Changing Colours

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 colors property in the same src/config/theme.ts file.
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 src/scss/_varaibles.scss file.

Changing Content

All content can be easily managed by editing the src/config/content.ts file. The hideSoldOutTokens value 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'.

Feedback

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.
Reference - Previous
Tutorial Series
Next - Reference
Setup Fiat Purchases (with MoonPay)
Last modified 1mo ago