Prefer to watch?

Here’s that video!

Mentioned in the video:

Rather read about it instead?

Here it is written down!

Want someone to walk you through the step-by-step of setting up shop in the new version of Squarespace?

In this tutorial, we’ll be covering the basics of adding your shop to your site, creating your first product or service listings, setting up a way for people to pay you, and a look at which Squarespace plan to choose based on what you need your shop to do!

How to create an online store using Squarespace 7.1

Step 1:

Adding a shop to your Squarespace 7.1 site

So before we can start setting up shop, listing our products, and tweaking our store’s design, we need to physically add an online store to our site.

To do this, go to Pages, click on the Plus Sign to add a new page, then choose Shop.

You’ll be able to tweak the style and layout of your store once you add it, so just pick which example you feel looks like the best starting point.

Step 2:

Navigating the backend of your Squarespace shop

Once you’ve added and named your shop, go ahead and click on it to open it!

To the right, you’ll see your Store Page (the page your site visitors will see when they click “shop” in your main navigation and want to browse through all your products or services).

A shop page has all the same capabilities as a regular page meaning you can add, drag, and drop whichever sections or content blocks you choose.

There’s just one teensy exception…and that is the special Shop Section that your page automatically comes with.

This special collection section is built into your shop page to help instantly display any products you add to the shop, and so it can’t be deleted, or blocks added to it.

Only the display Section Settings can be tweaked to style the look of the section.

On the left, you’ll find your Store Panel (the BTS place where you go to add and manage all your products)!

Step 3:

Editing your shop page settings

To open your shop page settings, click the Gear Icon in your Store Panel.

This window is where you will edit:

  • Shop page URL

  • Product categories & subcategories

  • SEO title & description: to make your shop easier to find in a Google search

  • Shop preview image: the image you want to display when someone shares a link to your online store

  • Advanced settings: this is where you go to enable quick view previews when someone hovers over your product thumbnail on your shop page, and also to add product tags, which are just another way to help organize your store

step 4:

Adding your shop categories & tags

You can choose to create all your categories and subcategories ahead of time by entering them into your shop page settings all at once, or by creating them as needed when you are adding individual products to the shop.

Any category you add will be a visible, clickable category on your shop page, so you don’t want to have any categories without actual products in them when you do launch your shop!

To make a subcategory, just drag and drop one of your categories under another inside your shop page category settings. And to create a sub-sub-category, just drag it under another subcategory!

Let’s use a jewelry shop for example…

Your categories might be rings, necklaces, earrings etc. To help shoppers further narrow down their search, you might add subcategories like gold, silver, diamond, cubic zirconia, etc.

Tags are a little different, and can only be added in an individual product’s settings, but once they are added, they can also be managed here in your store page settings.

Think of tags as a way to organize your shop using non-product feature related descriptions, like “New Arrivals,” “Best Sellers” or “Mother’s Day Gift Ideas.”

For more on this, check out: How to use Squarespace tags and categories to organize your site.

step 4:

Adding product & services listings to your online shop

To add your first product or service, click the Plus Sign in your store panel.

Choose the category that best describes what you’re trying to sell:

  • Physical products: you’ll physically be sending them a package when they make their purchase

  • Digital Products: goods are delivered via email like a link to a downloadable file or a password protected page on your site

  • Services: rather than sending them anything electronically or in the mail, in order to fulfill their purchase you’re going to have to actually provide them with a service

  • Gift cards: this are also electronically delivered, meaning they won’t get a physical copy of their gift card. But they can apply the balance of that virtual gift towards future purchases in your store.

(For more on how to use Squarespace 7.1 to sell gift cards online, check out this post: How to sell gift cards on your Squarespace site.)

step 5:

Editing your product description

Depending on when you created your online shop, you may have the option to use either the Classic Editor or the New Editor.

Each has the same settings, just in a slightly different location. The Classic Editor has all the settings you’ll need sorted under specific tabs within the editor, whereas the New Editor will have all the settings on one long scrolling page.

When you fill in the information under each of these settings, you are telling Squarespace what to include on that specific product’s page!

Rather than having to build and design each product page completely from scratch, Squarespace will take the info you put in your product editor and use your template’s colors, buttons, fonts, and other site styles to automatically create you a product page.

Let’s look at the first settings you’ll want to tweak within each editor when setting up a product or service listing…

  • Product name, images & description

  • Product visibility: whether your listing will be visible, scheduled to go live at a later date, or hidden from your storefront

  • Categories & tags: you can create new categories or tags here, or start typing to auto populate one you’ve already created!

Looking for these settings in the classic editor? Check under the Item tab!

step 6:

Setting your product prices & creating variants

(The following settings can be found under the Pricing or Value tab in the Classic Editor, depending on which type of product you’ve added.)

Adding a single product is pretty self explanatory here, but if you are selling a product or service with more than one option, rather than creating multiple listings, you’ll create what are called Product Variants.

Say you sell a ring that comes in sizes 6-10. You’d want to add in a new variant for every size option your customer has.

But you also carry this same ring in silver and gold. Rather than creating a whole new product listing, you would want to add in separate line items for every single size in gold, as well as separate line items for every single size in silver.

This will create a little drop-down for your visitors to use to select which options they want before ordering.

You can also upload a specific image to display when the customer chooses a certain combination of options and wants to preview your product.

This also allows you to set different prices for different options of that same product, and put some on sale but not others.

Step 7:

Additional product information & product settings

The Additional Info tab or window is where you put in any information you want to appear under the product image and “Add to cart” area at the top of the page.

This could include the non-sexy stuff you wouldn’t want in your super enticing description like where it was made, the materials it’s made out of, etc.

But you can also use this area to get super fancy and detailed about your product or service, and you can add, drag and drop content blocks inside your Additional Info window just like you would on a normal page.

There are just a few more settings your want to edit before hitting publish on your product:

  • Product Form

    If the purchase requires you to collect information from your customer to fulfill it, like if you need to have the ring custom engraved, or your a service provider who needs to learn more about your client so you are prepared for their project or appointment, then you would add those questions to your product’s form.

  • Product URL:

    Squarespace will automatically generate a URL, but if you want to create a custom product URL, you can do that under the Options Tab in the Classic Editor, or under SEO & URL in the New Editor.

  • Add to cart button:

    Want your “buy now” button to say something else? You’ll find that setting under the Options Tab in the Classic Editor, or under Customize in the New Editor.

  • Product Thumbnail image:

    This is the image that will display on your main shop page feed. If you don’t choose a custom thumbnail, Squarespace will automatically use the first product picture you uploaded. (Once again, under the Options Tab in the Classic Editor, or at the top of your product editor window in the New Editor.

  • Social Sharing & Social Accounts

    Use these settings to swap out the preview image that you would want to appear when your link for that product is shared on social, or to automatically update any connected social accounts when that product is posted.

  • Shipping

    For physical products, you’ll need to let Squarespace know the weight and dimensions of your product to be able to calculate shipping rates. These numbers get entered into the Variants Tab in the Classic Editor, or Advanced Shipping in the New Editor.

To set up your storewide shipping options, you’ll want to return to your Home Panel then select Commerce > Shipping > Add Shipping Option. Don’t forget to add which zones your store will ship to!

Step 8:

Connect a payment processor to your online store

Let’s add a way for customers to pay you, shall we?

Back at the Home Panel, hit Commerce > Payments.

Click on the payment processor you want to add, and follow the prompts it gives you for filling in your info to create an account. If you already have an account with either, you should be able to login top right of that pop-up window!

Once connected, you can choose whether or not your store will accept Apple Pay. This is also where you go to view any payment activity, without having to log in to your stripe account.

You’ll also set your store’s currency in your Payments Panel.

Ready to start selling?

You’ll need to upgrade your account to a plan that supports Ecommerce!

Not sure which Squarespace plan is right for you?

Check out: A guide to Squarespace plans & premium features 

New to squarespace? You can sign up for a free trial here and I also got ya a little off the price! Use code PAIGE10 for 10% off your first year. (Yes, that’s an affiliate link!)



You’ll Also Love…

Squarespace Ecommerce tutorial: getting started with your online shop (7.1)