How to add a shop to Squarespace - step by step walkthrough (7.1 and 7.0)
Are you on a mission to sell?
In 2021, side hustling is more popular than ever, with many of us choosing to go digital and sell through online ecommerce platforms. In fact, the majority of full-time business owners harnessed the power of digital through 2020 and moved their shop online. Easy access to your shop drives sales and makes money. So, how do you set up an online store that’s fully integrated with your website?
How to Set Up A Shop In Squarespace
Setting up a shop can be quite daunting as there are a lot of settings and aspects to consider. But, luckily Squarespace makes it pretty easy. We’ll discuss the set up and design basics in both versions 7.0 and 7.1 (they’re really similar!
You can add a shop in any Squarespace site 7.0 or 7.1 and the backend resources are pretty much the same.
The biggest differences between 7.0 and 7.1 when it comes to Commerce, is that:
Squarespace 7.0 has a product limit of 200, while 7.1 has a limit of 10,000
Squarespace 7.1 has the ability to add sub-categories
These may not make much of a difference to you, but it’s worth noting!
The only other difference is how the shop displays to the customer. In Squarespace 7.1, the template does not have an impact on how you work with a shop. But, in version 7.0, the shop will display differently depending on the template you’re using. So take a look at which template you have. If it’s different to mine (Brine 7.0), some of the design settings might be a little bit different.)
Adding your shop in Squarespace (7.0 and 7.1)
Click Pages > ‘+’ on Main Navigation
Click Store (or Products). It will prompt you to choose a layout but since this is fully customizable, it doesn’t matter which one you choose.
Rename the store, I’m calling mine “Shop”
Note: if you don’t want the shop to show up on your main site, choose ‘+’ on the Not Linked section of the navigation bar instead of ‘Main Navigation’.
Edit the main Shop Settings
Click on the cog to open up settings.
On the General tab, you can edit:
Page Title: edit this to the new name you’ve just changed from Store
Navigation Title: match this to the above
URL Slug: should be the same as the page title
Categories tab:
You can manage your categories in bulk here, but if you want to add one per product we do this on the individual product settings.
For the SEO tab:
Update your title (again to match the renamed version)
Add a description to make people want to click on your store (this is shown on search engines)
For the Advanced tab:
Enabling quick view is optional and will create a pop-up when the mouse hovers over the product, also displaying a short description.
Managing tags will be an extra layer of organization for the store, your customers can search or filter out products via their tags.
How to Add Products to the Store
Either click Add Product or the “+” button to add a product. There are now four options for the type of product:
Physical
Digital
Service
Gift Card
Note: Squarespace has two different product editors trialing at the moment so yours may be displayed a little differently. However, the same information should display. You can switch back and forth between the versions by clicking on the classic editor. These next tips and tricks refer to the new version of the editor.
Once you’ve chosen your product type, here’s what to do next:
Add a product name
Add the description
Add the thumbnail image(s)- you can add as many as you like and edit the design of how they display in your shop later
Add the product price (or add if it’s on sale)
If you’re working with a digital product, upload the file OR, if you’re working with a physical product, add the inventory numbers.
There are a number of optional features too. For example, if you have a launch set for a new product, you can schedule the release to your ecommerce platform at a later date (or set it to public if you are ready now).
Under categories, add the specific categories for this product. Once they’re added, categories will display in the product page. On the 7.1 version, the cool thing about adding categories is that you can drag subcategories.
Another organization feature is tags. You can tag products with certain words, and you can use these to filter in Summary Blocks around your site. However, categories are more beneficial for organizing products in your actual store.
Featured products are shown in the summary blocks on any page. It helps your chosen product to stand out and is displayed separately from the classic store layout. To create a featured product:
Toggle the featured product setting to ON
Add a summary box to any page and click filter feature products
The SEO tab for your products is much like the overall store SEO. You’ll change the title and URL to match the product title, and add a unique description to each product which will show in search engines like Google.
There are plenty of other customization features you can add to your product and store that fit with the overall easy DIY ethos of Squarespace. Here are some of the best ways to personalize your customer experience.
Forms- collect customer information upon checkout
Create a new form and make it very descriptive to collect name, email etc. Select “Custom Forms” to add a new form for this specific product only.
Related Products
Enable related products below your items on product pages (Save this for later as you will be redirected to commerce settings)
Button Label
Customize this to a call-to-action to maximize sales
Social Accounts
Connect your shop to push products on all of your relevant social platforms (set this up under Settings > Connected Accounts)
Additional Information
Design in product pages can be limited so add blocks within this section (images, summaries, galleries etc) to display other info. It will display just below the product description and image.
Remember to hit save after you make any changes and check out how the product looks on the front end. For example, check the sale price, and any other settings or designs.
Setting up your Squarespace Commerce Settings
This is all of the nitty-gritty stuff like Payment Processors, Customer Notifications and Customer Management (etc!)
Luckily, Squarespace makes this really easy. Click on Commerce in the sidebar and you will see a list of links.
You will be able to change settings relevant to:
Orders:
This is where you will see and manage your orders as soon as you start getting them.
Inventory:
If you have physical products.
Customers:
This is where you will be able to view all of your customer information when you get some customers.
Discounts:
Here you can add discounts to specific products around your site or set up discount codes.
Selling Tools
Point of Sale:
If you sell in person, I highly recommend getting set up with Point of Sale so you can manage all of your orders, on and offline.
Product Status:
Customize the settings for when your product is out of stock or limited availability.
Waitlists:
Set up waitlists to gather customer information while they wait for your products to restock. This is a premium feature, but can be really useful for physical and service-based products (isn’t available for digital products!)
Related Products:
Turn on related products by toggling the setting. This gives Squarespace access to automatically choose products from the same category. You can change the default Title and Display Options.
You then must enable this for your individual products, too.
Go to your product and click Edit > Scroll down to Related Products. Click to change the related products category, then hit Save to update.
Notifications
Customer Notifications:
Customer notification settings are super easy to edit and really important. They are the emails that customers will receive if they abandon cart, purchase or interact with your shop in another way.
You can add branding to these by editing the global email style. Once you’ve clicked Edit, you’ll see a front-facing editor where you can make changes to anything.
Low Stock Alerts:
The other notification setting to change is low stock alert, so ensure you’ve toggled that to ON if that’s something you want.
Set up
Payments:
Add a payment method. Squarespace gives you the option to connect Stripe or Paypal (and Square if you are in the US and have customers paying in person). I highly recommend connecting both as it gives your customers 2 options. Click connect and sign up if you haven’t already.
Set your store currency by scrolling down to the bottom of this panel.
Checkout:
Squarespace also has the capability to let you change many checkout settings. You can:
Enable abandon cart recovery emails (premium feature)
Connect your domain
Connect your mailing list (only with Mailchimp or Squarespace email campaigns)
Set a default country for checkout addresses
Add a minimum order amount
Change the color of your cart
Add a ‘Continue Shopping’ link
Set limits on the number of orders per person
If all of your products require the same customer information, you can create a specific form at the checkout under the Additional Fields tab.
Under that, you can also add store policies, such as returns, terms of service and privacy policies. This is useful for your customers to access prior to their purchase. Squarespace also allows you to customize invoice information depending on your personal requirements.
Set up your Invoices to display specific information based on your business requirements, where you live and who you sell to.
Customer Accounts:
A good premium feature is customer accounts. This enables your customers to set up a log in to your shop, and can be really useful for returning clients or those who need to access their order information.
Shipping:
Shipping is personal depending on the size and type of business you run. If you’re a smaller shop maybe you ship manually, whereas bigger shops might have a contract with a shipping company. Either way, choose from the list to either connect with a shipping company or select shipping via weight or flat rate.
Taxes:
Enter in your tax information here. This of course depends on where you’re selling from and who you are selling to. Make sure to look up your own tax information.
Accounting:
Use the accounting settings to download sales reports and other useful accounting information.
Now that we’ve discussed all of the boring set up, let’s get into the fun stuff: design!
Designing your Squarespace Shop in Squarespace 7.1
The cool thing about your shop page is that it is completely editable, just like any regular page. This gives you more options than in Squarespace 7.0. The shop shows up as a section rather than the full page. This means you can add completely editable sections above and below the shop.
If you are accustomed to designing pages on Squarespace, simply add or move sections on the shop page just like any other. It means that your shop can fit into a bigger overall page.
Shop Section Changes
To edit the actual shop section, click on EDIT on your shop page, then click the Pencil Icon on the shop section. A settings panel will appear.
Scroll down the FORMAT settings and play around with your settings. You can change things like:
Spacing
Columns
Aspect Ratio (of images)
Text alignment
Image Text Spacing
Show/ Hide price
In the COLOR tab you can edit the color theme. But please note that this will change the color on all of your products too.
To make font changes, head into Design > Fonts. Scroll down to Assign Styles and find your Products: List Page. Here, you can change fonts for the List Title, List Price and List Status.
To make color changes, click Section Themes. Find the theme that your shop is using (for example, white minimal) and change any color settings in that theme
Product Page Design
To get into product design changes, click Edit on your product page then click the Pencil Icon on the product section. A settings panel will appear.
You’ll see a bunch of similar options to change features like the content alignment, gallery placement and quick action. Turning breadcrumbs on will display the subfolders (categories) on the page.
Caution: when you make changes inside of a product page, these will populate to the rest of the product pages. Just be aware that design changes will be constant throughout the website
To make font changes, head into Design > Fonts. Scroll down to Assign Styles and find your Product Details Page. Here, you can change fonts for the item title, price and description etc. To do this in the main shop, follow the same steps but find Product Lists instead of Product Details.
To make color changes, click Section Themes. Find the theme that your shop is using (for example, white minimal) and change any color settings in that theme. The product settings area will allow you to change colors of the title, price and sale price, for example.
Cart:
In Squarespace version 7.1, the cart icon does not automatically show. However, this is a really useful feature and can improve sales within your site. To display the cart in your main navigation header, click Edit > Site Header > Elements, then toggle the cart to ON.
Designing your Squarespace Shop in Squarespace 7.0
The design of your Squarespace 7.0 store heavily depends on the template you’re using, but the product page design is extremely limited in Squarespace 7.0. Unlike version 7.1, you can’t add different sections above and below as the shop is a page, not a section.
Your template may allow you to add a header by hovering the cursor above the shop and clicking Edit. The other change Squarespace allows is to add a background image to the header area, by clicking on the page settings Settings Cog > Media > Upload Image. This is only possible on some 7.0 templates, not all.
Shop Design Changes
First, make sure you are on your Shop page. Then, head to Design > Site Styles and scroll down to Shop Settings. There are three areas that you can change: Product Layout, Product Details and Products Sort & Filter.
Play around with all of those design settings like:
Items per row
Spacing
Aspect ratio
Image hover action
If you’d like to change category settings, change the Products Sort & Filter settings. You can access the display settings, width, margin, alignment, font and colors.
Product Design Changes
First, make sure you are viewing a product in your shop. Head to Design > Site Styles to unlock a ton more product settings. Here you can edit the:
Fonts
Colors
Gallery
Breadcrumbs
Thumbnail alignment and size
Spacing
Title settings
Note that these product settings will populate across ALL products, not just the one you’re currently viewing.
Cart:
To display the cart, go into Design > Site Styles > Header Layout. Set the cart from hide to showing.
And that’s it!
I hope this guide helped your overall set up and design of the shop page. If you’re new to setting up a website, I’d recommend using Squarespace 7.1 to access the better features across the website build (especially because of the 200 product limit and sub-categories!)
But, overall, both versions of Squarespace are pretty equal when it comes to shop settings. If you’d like more information, Squarespace has a whole series on getting set up with commerce, you can check it out here.
If you liked this post, Pin it to Pinterest! 👇🏻
