Ecommerce pages in Squarespace are similar to Blog pages in that you have a main Products page which displays a collection of individual Products. You can also display your products elsewhere on the site using Summary blocks the same way you can with blog posts.
Before you can start adding individual products you have to first add the main Products page. This page is added just like the others on the site - by going to Pages from the Home menu, then clicking the (+) symbol to add a new page and selecting the Products page type. Make sure to add it to the right Module, if you don’t want the page to show up in the menu you’ll add it to Not Linked, otherwise you can add it to one of the navigation Modules.
Once you’ve added a Products page you can begin adding products by clicking on the next screen. You can also add products from the Inventory Module by going to the Home menu, clicking Commerce, and then clicking Inventory.
You’ll have a choice between a Physical or Digital product or a Service. The differences here are explained on this screen, but basically a physical product is one that has to be shipped out by you, a digital product would be something like an ebook, meditation album, or anything else that can be downloaded straight to someone’s computer. A service would be something like a coaching consultation or logo design, where you have to render a service.
If you’re selling physical products you’ll need to add at least one shipping option to your store by going to Home and then Settings and clicking Shipping.
Once you’ve chosen your product type the Product Editor will appear in a popup window. Add your product’s Name, Image, and Description in the appropriate fields here. From the first screen you’ll also be asked to enter a price and add Categories and Tags to your product. The Categories and Tags are used to create an automatic navigation on your Products page and organize and filter Modules in your store, so you should take advantage of those.
You can add multiple images to a product listing, but the very first one will be the main product image, the rest will show up as thumbnails that can be clicked and enlarged. Specific images also can’t be associated with different variants of a product.
Pricing & Variants
From the Pricing & Variants tab you can add different attributes to Service and Physical products. If you’re creating a Digital product this is where you’ll enter a sales price instead.
Physical and Service products have several options that can be set on the Pricing & Variants tab, including a SKU number to track the item in your inventory, pricing, and stock quantity. Physical products have additional areas to enter weight and dimensions that are used to calculate shipping. You can change your units of measurement for these by going to Home, Settings, and Regional.
If you’re selling a Physical or Service product you can add product variants here. A product variant is a variation of a product defined by attributes like color or size. They show up on the individual product page as options in a dropdown menu. Each product can have up to 100 variants, and each variant has it’s own SKU.
To add variants to a Physical or Service product first click the (+) symbol on the Pricing & Variants tab. You’re creating an Option here, so enter a name that defines what someone will be choosing, this could be Color, Size, Number of Legs, or something similar.
After you save the option it becomes the title of a new column on the Pricing & Variants tab. You’ll now be able to fill in info for your product in that column and then add a second variation of the product by clicking the (+) symbol below the original item SKU. This adds a new row of options for your product variation. Each variation can include it’s own SKU, pricing, stock, weight, and dimensions. Make sure you also fill in the option name, because that’s how people will select this new option from the dropdown box. If it sounds confusing I promise it really isn’t, just start adding one and it becomes self explanatory!
You can add multiple options to each product variant, for example adding Size and Color. We won’t get into that because it can get super complex, but there are plenty of resources out there to help you. Once you’ve finished adding variants you can reorganize them by dragging the rows up and down, or delete one by clicking the trash can icon next to it.
If you’re selling Digital products this tab is where you’ll enter your price, add a sale price and mark the product as on sale, and upload the file to be delivered to a customer after they purchase. Files can be up to 300mb.
This tab lets you add a longer description to your product, and allows you to use Content Blocks to lay it out. You could use this Module to add additional images, videos, related products, shipping and return info, reviews, or basically anything else you wanted.
This longer description shows up differently depending on your theme. In most templates it will show up right below the main product description, but there are two templates (Galapagos and Supply) that show this info a little differently.
I personally think this is one of the coolest product options. You can create a custom form to collect information from your customers, and they’ll automatically be asked to fill it out when adding the product to their cart. This is perfect for things like collecting information for engraving, lettering, or other customizations. I use it in my own shop to collect info for branding kits.
Creating the form is just like setting up the Form Block, you’ll title the form, add fields by clicking the (+) symbol, and click Save when you’re done. You can reorganize the fields by dragging them up or down, and delete them using the trash can icon.
Remember that this is meant for collecting information you’ll actually need for the product being ordered, so don’t go crazy asking a bunch of unnecessary questions here or your potential clients might get frustrated and move on.
The first image you uploaded on the Item tab will automatically be the product thumbnail, but you can replace that here if you need to. The thumbnail is what displays when you add the item to a page using Product or Summary blocks, and also on social media.
From this tab you can also edit the product URL. This will match the Product Name if no edits are made.
Finally you can change the default Add to Cart button text or set the product as Featured. Summary Blocks can be filtered to display featured products.
From the Social tab you can use the toggle buttons to set which social media accounts your product is automatically shared to when you publish it. Just like with blog posts, if you don’t see any accounts here you’ll need to go to Home, then Settings and Connected Accounts to add those.
When you’re finished creating your product you can click Save to keep it hidden until you’re ready to publish it, or Save and Publish if you’re ready for the product to be visible in your shop.
After you’ve created and saved a product you can edit it by going to your Products page and double clicking the product. You can also duplicate it to create a new product with the same options by opening the Edit Product window and clicking Duplicate at the bottom. From the Products page you can rearrange products by dragging them around, or delete them by opening the Edit Product window and clicking Delete at the bottom. Alternatively, you can manage all the products on your site by going to Home, then Commerce and Inventory.
Site-Wide Shop Options
There are a few options you’ll need to check before you start selling products. You have to tell Squarespace how you want to handle things like payments, taxes, shipping, notifications, and your checkout process. All of these can be found by clicking Settings from the Home menu and scrolling down to Commerce. We’ll go over the basics of those here and talk about adding a payment processor in the next lesson.
This is actually a lot of different options rolled into one screen, but they all revolve around the process your customers go through when checking out from your shop. You can have customers automatically added to your mailing list when they checkout, which I highly recommend.
Here you can also set the country that automatically selected for shipping addresses and tell the system to use the customer’s shipping address as their billing address by default.
If your shop contains something that customers should only be buying one of, like a single ebook, you can enable Express Checkout, which is basically a Buy Now button to replace the Add to Cart buttons, your buyers will go directly to checkout when they click it.
You can change your shopping cart style here. To style your checkout pages you’ll go to Home -> Design -> Style Checkout Page.
Don’t be overwhelmed by the options here, it can look a little intimidating if you aren’t sure what you’re doing. You can more than likely get by at first without changing a thing on this page, although I would recommend at least setting up a list in Mailchimp for your shop customers and having them subscribed to that list at checkout, even if you don’t do anything with that list right now you’ll be glad you have it down the road.
You can customize the emails your customers receive when they purchase an item here, as well as customizing the template itself. It’s also okay to leave the default notifications for now. You can change it anytime in the future.
Some of the information here is pulled from Settings -> Business Information, so you’ll want to make sure that’s accurate.
If you’re selling physical products you can create shipping options that automatically calculate at checkout when the buyer enters their shipping address. There are four different shipping options available in Squarespace: Flat Rate, Rates by Weight, Carrier Calculated, and Free. If you have a Squarespace Commerce Advanced account you’ll have even more options available.
I won’t go into the nuances between the shipping options because I don’t sell physical products and every shop will need a different setup. If you aren’t sure what to use I would definitely do some research into the options and maybe ask other people who are selling items similar to yours.
Once you’ve figured out your shipping options you can set them here by clicking Add Shipping Option.
Not all shops will need to charge tax, and your tax situation may be more or less complex depending on where you live and where you’re selling items. You should definitely check with someone experienced in small business tax if you aren’t sure. Once you know what to do you can walk through that process here. You can also click the gear icon here to indicate that tax is already included in your product prices.
This won’t apply if you’re selling products, but there may be times you want to accept donations through your site. This is great for nonprofits accepting donations but also for cash gift registries for weddings or housewarmings.
As long as you have a Stripe account connected (we’ll talk about how to do that in the next lesson) you can use the Donation Block to allow visitors to click a button, enter a donation amount or choose from preselected amounts, and donate to your cause. You can add a custom form too if you want to collect information from your donors.
From this Module you can edit the thank you email that’s sent to donors. Some of the information here is pulled from Settings -> Business Information as well, so you’ll want to make sure you’ve filled in any important info over there.
That’s the basics, and now you have a functional shop set up ready to start selling! Before you can make your first sell though you need to have a payment processor like Paypal or Stripe connected, so we’ll go over how to do that in the next lesson.