Coming to us in the middle of this blog series? Welcome new bestie! So stoked you could join us! If you are looking to sell products or services in your online shop then this post is for you!

But you mightttt want to circle back around and check out some of our earlier posts on the subject first, because with each Squarespace basics post we are sort of building on the last!

Here are those Squarespace posts in order for ya…

Well friend, I have total faith that you went back and did the necessary reading to get caught up to speed, so without further ado…

How to set up an online shop in Squarespace 7.1

In order to sell your first product or service on Squarespace you have to create an actual shop page (need a refresher? Read up on store collection pages in Squarespace basics: pages & navigation options).

Once a shop page has been added, you can get to work listing your products!

Click on your shop (home > pages > shop) then add a new listing by clicking on that plus sign!

Next, you’ll need to tell Squarespace what type of product listing this is, so it knows which information to ask you for when setting up your product. Here’s a superrr quick rundown of your options:

Physical: This lets Squarespace know that a physical product is going to change hands and needs to be shipped or delivered to your customer.

Digital: This tells Squarespace that no shipping address is needed! This product will be delivered to your customer electronically via a link in an email.

Service: This tips Squarespace off that no product needs delivering, electronically or physically and that in order to fill this order, a service will be provided.

Gift Card: Pretty self-explanatory! Similar to a digital product, only your customer is receiving a store credit rather than a digital download.

Building product listings & editing inventory

Thankfully, Squarespace has made using their product listing editor pretty straightforward. Still, there are few important steps you will not want to miss!

I’m going to quickly walk you through the most important tabs within the product editor window, so you know what goes where when building your listing.

Ps. some tabs are specific to certain product types, so you may not see all of the options below depending on what type of listing you are working on.

The Item Tab

Your first step for any listing, regardless of the product type is to head under the item tab and name your product, and then upload any images you want to appear on that product’s page.

This is also where you will fill in your product’s description, as well as add any tags or categories to your product. (More on why and how we use product tags and categories later in this post)

The item table is also where you go to tell Squarespace if the product or service you are selling is a subscription. This is only available on the advanced commerce plan. (You can find more on offering subscriptions on Squarespace here…straight from the source!)


Pricing & Upload Tab

This is where you will go to enter the price of your product. Want your item to go on sale? Pop in a sale price and check or uncheck the box as needed to display or hide the sale price. (Looking for more advanced discount and sale pricing options for your store? You’ll want to bookmark this handy little help doc for later.)

This is also where you will go to upload the file that will be delivered to your customer via email when they purchase a digital product.


Pricing & Variants Tab

This tab will only appear when adding a physical product to your shop, and it is where you will add the product’s price, how many are in stock, and it’s weight and dimensions. Your product’s weight and dimension info is important when it comes to shipping your product! (For more on choosing shipping options based on your specific business, head here.)

Also, say for example you sell jeans in your online shop. Each pair of jeans may come in different washes or colors, as well as different sizes for each wash or color. These are called variants, and they can be added here under the pricing & variants tab.



You will need a different line item for every possible combination or variant for that item (ie. one line item for a size small dark wash jean, one line item for a size medium dark wash jean, one line item for large dark wash jean, one line item for a size extra-large dark wash jean, etc.) Then you would do the same for each color or wash you have in stock.

Now the customer can use the drop downs on that product page to select the combination that suits them, rather than you having to create a separate product page for every single combination or variant of that same item.

Values Tab

This tab will only appear when adding a gift card to your shop. Similar to the pricing and variants tab, this tab allows you to tell Squarespace the different gift card values you wish to offer in your shop. ($10, $25, $50, etc.)

Again, only one product page is created, and the customer selects the value of the gift card they wish to purchase using those fancy little drop downs Squarespace automatically creates.

Additional Info Tab

Have some information that is important for your customer to know, but is not exactly sexy enough to include in the product description?

You’ll want to add that here. What it’s made of, where it’s made, size, weight, disclaimers, warranties, turn-around time, etc. Basically, anything that could be used to explain in more depth what the customer can expect when purchasing that product or service. This will always appear below your products images and description.

Pro tip: you can add any type of content block your little heart desires here in the additional info tab (buttons, images etc.) so don’t feel like you are limited to just wall-to-wall text when showing off your product! The options are endless!

Form Tab

This little tab is just another way that Squarespace helps you run your online shop on auto-pilot, and it’s going to save you a tonne of back and forth between you and your customer!

Say for example you sell monogrammed coffee mugs. When a customer makes a purchase, you’re going to need a way to collect the information needed to fill that custom order! Rather than having to send and keep track of a bunch of emails, you can use Squarespace’s built in e-commerce form to collect any additional info you need from the customer before completing their order.


Options tab

This is the tab you’ll visit to tweak your product page’s URL. Squarespace is going to automatically use the name of your product to create a unique link.

But if you remember from Squarespace basics: blogging, these days it’s best practices to tidy up your URLs by removing any fluff words and keeping only the most important SEO keywords associated with your product.

This is also where you go to upload your thumbnail image (the preview image of the product appearing on your shop page), and change the name of the button used to add that product to the cart.

Want to feature your product somewhere else on your site? Check that box here! Then use summary blocks to display them throughout your site and blog.


SEO TAB

The info under the SEO tab is automatically pulled from your product’s name and description, so as long as you’ve been intentional about using your SEO keywords when writing those, you shouldn’t need to fiddle too much with these settings.

Okie dokie! Now comes the fun part!

Designing and customizing your online shop in Squarespace 7.1

Product Page Design

Once you’ve added all your product listing’s information, it’s time to head to home > design > product items to customize the style and layout of your product pages. Oh, and one thing to keep in mind: any changes you make here in the design panel of your site are going to be site wide, or in this case, shop wide.

Within the style editor, you have tonnes of options for customizing your product pages. Most are honestly just style preferences that you set by playing around with the different sliders and drop down options and deciding what you think looks best. But there are a few options that may leave you scratching your head, so I’ll quickly touch on those below.

Breadcrumbs: Say you sell clothing in your shops. A shop like that is going to have a lot of subcategories! Breadcrumbs are the little trail Squarespace leaves behind when they’ve arrived at a certain page. (ie. shop > clothing > women > dresses > evening gowns.)

By displaying the breadcrumbs, you make it so that the customer can navigate back to any one of those stages by clicking on them, instead of having to start back at square one each time.

Form width: If you created a form within the form tab of the product listing editor, and a customer purchased your product, the form will pop up as a sort of overlay on that product page. Use this slider to decide how wide to make that pop-up window within the page.

Click or Hover Action: This tells Squarespace what to do when a customer clicks or hovers over an individual photo.

Wondering where to go change font, color, button, and spacing options for your product page?

Something tells me you’ll want to revisit this post on using Squarespace’s site styles. You’ll find that product pages have plenty of their own options for styling within each of your font, color, button, and spacing design panels.

STYLING YOUR CHECKOUT PAGE

Ok, so this is one area where you don’t have oodles and oodles of options for customization, but if you ask me, this was a brilliant move on Squarespace’s behalf!

Confusion kills conversion, and the last thing you want to do is confuse your customer right off your checkout page! You want as few distractions as possible when they are reaching for their wallet to buy the thing you are selling, so this wouldn’t be the time to get super creative with your design skills! (Good lookin’ out, Squarespace.)

That being said, our friends over at Squarespace knows it’s important for even the checkout page to be on brand, so the few options you do have for styling can be found under design > checkout page.  

Designing your shop page

Shop navigation

Remember when you went under the item tab in the product listing editor earlier in this post and added all your categories to your products?

Squarespace will automatically display those categories in your shop’s navigation. If a customer clicks on that link, it will display only the listings you’ve marked as falling under that category.

Adding content with sections and blocks

If you read Squarespace basics: pages & navigation options, you’ll know that your shop page automatically comes with a special shop collection section where your products live, and that collection sections cannot be styled in the same way as other sections.

You can, however, add as many sections above and below your shop section as your little heart desires, and you have all the options to add content using blocks to those sections as you would anywhere else on your site.

Not loving how that special shop collection section looks on your blog page? Display your products using summary blocks instead!

You can easily build a brand new shop page from scratch by adding a new blank page (NOT a shop page…that’s important) to your site. Then you simply drag this new shop page into your main navigation.

The summary blocks will allow you to display products from your old shop page, from whatever categories or tags you tell it to. And when a product preview in that summary block is clicked, it will lead straight to that product’s page. No one ever has to know that this isn’t your real “shop page.”

Meanwhile, your original shop page gets moved to the unlinked section of your pages panel where it quietly continues to host/store your products in the background. (Read: don’t delete your old shop page, because that’s technically where all your products still live.)

If you want to get even more specific about how and where your products are displayed, you can opt for adding products individually to your newly created shop page using an e-commerce block. Unlike summary blocks, which add as many products as you have tagged in that category, the e-commerce block adds just one specific product at a time.

Oh, and just an FYI…if you’re using summary blocks or e-commerce blocks to display your products anywhere on your site, you have to actually create the products first!

Adding a search bar to your shop page

A search bar can be a super handy tool for helping shoppers to quickly find exactly what they are looking for through a simple keyword search. To add one to your shop, choose any insert point and insert a search bar block. Pretty simple, right?

There’s just one important tweak you may want to make! If someone is searching for something in your shop, you probably don’t want them to have to sift through results from your blog or site.

To limit the search bar to only show products from the shop, check search specific page. Then select your shop.

Connecting a payment processor to your online shop

At last! All your fabulous products and services have been listed, and you are ready to drop your shop page into your main navigation and launch it to the world!

Not so fast friend, because you’re kinda gunna need a way to get paid first!

As I mentioned above, Squarespace already has a built in check-out page where customers will go to enter in their payment deets, but an additional bit of software is needed to check that your customer is actually good for the money!

Think of a payment processor as the thing that communicates between their bank account and yours. The processor does the work of chasing down the funds and storing them in your payment processor account, before being paid out to your actual business account however many business days later.

So to get started, head into commerce > payments. 

Now, you have two payment processor options: PayPal (which is obviously used to collect funds from Paypal) or Stripe – which is used to collect payment from any major credit card. You can choose to connect one or both of these options.

Heads up! Before you can start connecting your payment processor, you are going to need to come prepared with a stripe or PayPal account! Then within your payments panel in Squarespace, simply click which one you want to connect and enter in your shiny new login deets!

Oh and btw, you’ll also find the option to change your store currency under the payments panel.

So there you have it! The 101 on setting up your online shop using Squarespace’s e-commerce function (aka everything you need to start killing it with online sales!)

Feeling a little overwhelmed with all that you need to learn in order to DIY your Squarespace site or online shop? I created my course Square Secrets justttt for you!

Here’s what past Square Secrets student Karen Young had to say…

“Before taking Square Secrets I felt overwhelmed with where to start and how to craft a site that not only looked the part but that made my customers want to buy and to make it easy for them to buy from me.

After taking the course, I finally have a working website that doesn’t make me want to run and hide in shame, and I no longer rely on Etsy as my online sales platform!

Having a fully functioning e-commerce website that also acts as a showcase for my custom work helps my business look more professional, and I have been able to increase my prices.

There is nothing more powerful that being in total control of your online front window!”

Karen Young

The most popular, advanced & comprehensive online course teaching you how to build a Squarespace site that attracts your ideal clients & customers 24/7!

/


/

Looking for more basics?

You’ll also love . . .

Squarespace basics: e-commerce online shop