Host Your OpenSea NFT Collection On Squarespace With Pinata
The beautiful thing about NFTs is the way that they have pushed the creator economy forward. Marketplaces are great for aggregation, simplicity, and getting started, but many creators want to provide a dedicated experience for their NFTs on their own site. Fortunately, that’s possible with OpenSea, Squarespace, and Pinata.
In this guide, we’re going to walk through how to add NFT files to IPFS through Pinata, mint NFTs on OpenSea, and display our NFT collection on Squarespace—all without writing any code!
Let’s get started. First, you’ll need to sign up for your accounts. You can do so at the following links:
Once you’ve signed up for each account, it’s time to plan what we actually want to achieve. You might already have some NFTs you’ve created in the past, or you might be minting NFTs for the first time. This guide will cover both cases. Let’s start with making sure your existing NFTs are displayed on OpenSea.
Getting Existing NFTs on OpenSea
If you’ve already minted NFTs on some other platform other than OpenSea, that’s usually OK. OpenSea makes it really simple to pull those in and list them on OpenSea as well.
In fact, if you minted your NFT on a platform that conforms to open NFT standards, then OpenSea can pull those in. All you need to do is provide the NFT contract. If you don’t know the address, don’t worry. OpenSea has baked-in connections with some of the other big-name NFT platforms, so if you used those, the assets will automatically show in your collection. For all others, you’ll need to go back to the platform where you minted and get the contract address.
To import NFTs from another contract, create an account on OpenSea or sign in. Then, head on over to your collections page. On the create new collection card, you’ll see a small link that says “or add an existing contract”. You can click that link to start the process of getting your assets imported onto OpenSea.
On the next page, you’ll be asked where your NFTs live (Mainnet, Testnet, etc):
Click on the appropriate option, then paste in the contract address. When you click Submit, OpenSea will try to fetch information from that contract and then import the NFTs into your collection. If successful, you’ll be able to configure a new collection on OpenSea using the NFTs found. This, of course, is only looking at NFTs you own.
Before we look at how we can display our collections on our own site, let’s see what the minting process looks like for a new NFT.
Minting a New NFT
If you’re ready to mint a new NFT, let’s walk through how you would do that on OpenSea. The first thing to do is figure out what you’re minting your token for.
Remember, an NFT is made up of many layers, and the token itself is just one layer. So, before we think about the token, we need to think about the asset. Let’s say you want to mint an NFT for an amazing photo you took. We need to get that asset uploaded so that it can be encoded into the metadata of the NFT you’re going to mint.
IPFS is the best solution for this because it provides a content identifier (CID) that serves as proof to anyone that has it that the file is exactly the file you say it is. No one can tamper with that CID. Pinata makes the experience of getting your files on IPFS easy. So, if you haven’t done so already sign up for an account.
Once you’ve done so, you can upload your file. I’m going to use an image from Unsplash for this example, but in the real world, I would mint something unique that is owned by me. Here’s the image I’ll be uploading to Pinata:
Back on Pinata, from the pin manager, I can easily upload this file by clicking the Upload button and choosing the File option:
Once you’ve uploaded your file, you will want to consider if you want people who are viewing that image to come through a gateway that is branded with your own custom domain and with certainty that the file will be served as fast as possible. Pinata offers a generous free gateway for viewing content on IPFS, but a dedicated gateway is the best way to give yourself and others an optimal experience.
If you want to create a dedicated gateway, you’ll need to upgrade your account. You can do that on the Billing page. Choose any paid plan, and you’ll be all set. When that’s done, you can go to the Gateways page by clicking the link on the left side of the screen.
It’s a pretty seamless experience creating a dedicated gateway and adding a custom domain, but we have comprehensive documentation here for you:
We even have a video walkthrough here:
Ok, back to minting.
On OpenSea’s collections page, you can create a new collection or select an existing collection you have. Once there, you can create a new item within the collection. You’ll be taken to a page like this:
When you upload a file to OpenSea, it will be uploaded to their servers and not IPFS. Because of this many people will provide a lower quality version of the file and then direct people to the full resolution file. If you want to do that, you can adjust the size or quality of your image before uploading it.
Next, give your new NFT a name. The external link is a good place to put the link to the full resolution, high-quality file. Alternatively, you can enable unlockable content and you would provide the full-res, IPFS gateway link here. To get this link, go back to the Pinata pin manager.
If you set up a dedicated gateway, you’ll want to make sure that gateway is selected in the “Gateway to Use” dropdown at the top-right of the files table:
Then, you can click the name of the file you uploaded. A new tab will be opened and you’ll see your image displayed on your gateway (or the public gateway if you didn’t create a dedicated gateway).
This is the link you can use for your external (or unlockable content) link on OpenSea. When you’ve pasted that in, you can optionally add attributes and info to your NFT. Then, at the bottom, just click the Create button.
You’ll be able to visit your new NFT. The external link you provided is accessed through a button at the top of the NFT’s page:
If you click that button, it’ll take you out to your gateway with the image shown in all its glory. In all seriousness, this is important. Being able to share links to files that NFTs represent without the influence of some other company or individual’s brand is a fundamental step in owning your creations.
We haven't marked this NFT for sale yet. We can do that by clicking the Sell button in the top-right of the screen. OpenSea will walk you through setting a sales price or setting up an auction. You’ll be able to configure everything on one page. Once you have set your item for sale, we’re ready to get our collection imported into our Squarespace site.
Setting Up Squarespace
If you already have a Squarespace account, you’ll just need to create a page to handle your new OpenSea collection. If you don’t have an account, you can sign up here.
Once you’ve created your account or signed in and created a page to handle your OpenSea collection, you’ll have to create a section where you can embed the collection. To do so, add a section to your page:
When you click Add Section, you’ll have a lot of different content options, but let’s create a blank section. It’ll end up looking like this:
Notice the plus sign buttons? Click on one of those, and you’ll be given some additional content options. In this case, since we are embedding something from OpenSea, we need to choose the
Squarespace will automatically fill some HTML in the code area. We need to replace that with the snippet provided by OpenSea. We can embed the entire collection, but I prefer embedding individual assets. If you want to embed the whole collection, the documentation for that is located here.
Let’s assume you want to embed individual assets. To do that, return to OpenSea and visit the public page for your asset. In the top-right, you’ll see a share button:
Click that, and you’ll see an embed option. Copy the code provided by that embed option, then head over to Squarespace again and paste it into the code block. Save that, and you’ll see…nothing happened. You might actually see a message that says “Script disabled”. That’s OK. When you save the entire page and exit the editing mode, you will see you’re embedded item.
This is pretty great. Now, I have the flexibility of Squarespace’s editor and the ease of a code snippet from OpenSea. I can build an endlessly customizable site that I own, while still being able to sell my NFTs on the biggest marketplace in the world. You can change the layout, add multiple columns, and continue adding to your page as much as you’d like.
You can even add the direct link to the original file through your IPFS gateway onto the page. Maybe you want to give people a little taste of what they will own. Add a new section below the OpenSea embed in your Squarespace site, then choose the
Code option again. There is an Image option, but then we are uploading our file to Squarespace when we already have it hosted on IPFS. So to get around that, we’ll use one more embed. Here’s the code to provide for that snippet (be sure to replace the “IMAGE_URL” with the gateway URL for your actual image):
style="max-width: 50%; margin-left: 25%;" src="IMAGE_URL" alt="NFT" />
It should look something like this:
It’s looking great!
We’ve hosted files on IPFS through Pinata, minted an NFT through OpenSea, created a site on Squarespace, embedded the NFT into the site, and displayed the original image. With a little bit of creativity, you can now build a completely custom site under your own domain that gives creative power back to you.