How to set up a Shop in Squarespace 7.1

This tutorial explains how to create and stylize a Shop in Squarespace 7.1. As an example, we will be using Osaka 7.1 Design Kit, but the same principle applies to any Squarespace 7.1 website, so go ahead and try this with any with our 7.1 Design Kits! Before you get started, note that you will need a Squarespace Commercial or Business plan to be able to sell your products online. No worries if you don’t have one of these plans, yet. You can still start working on setting up your shop, and upgrade your plan once you decide to sell your products.

Watch the video tutorial below or keep reading the post.

Step 1: Create a Shop

Start by going to your Pages, and add a Store inside the Not Linked area in your dashboard, by clicking on the plus sign. Once you name your store, you will need to choose your preferred layout from the available options. Squarespace offers 2 default layouts, but both are pretty customizable. 

At this point, take your time to set all your payment methods, business address, tax information, and other details. You can either follow the prompted steps from Squarespace Wizard or go directly into your Commerce Tab and configure all the details. Check this article for more tips on how to set up your shop.

Step 2: Build out your Shop Page

Regardless of the layout you chose, you can always add new sections to it or remove the ones that don’t suit your needs. A good structure-example for your Shop Page is a background banner image at the top, followed by a section with some text description, and the product listing at the bottom.

Continue with some general style settings: edit your color scheme, update your images, and add text to make it more engaging. The key is to make this page as clear as possible for your visitors.

If you select a specific color scheme that you used on a different section on your site, know that if you decide to make any changes to it, the changes will apply everywhere on your site. In our case, for Osaka design kit, we’ll only change the Button colors. In the video tutorial, we used color: #F3EBE6 for the background, and #000 for the text. Again, you can always change these to your own brand colors. 

Step 3: Populate your Store

Before you add your own products to the store, go ahead and remove the default products that Squarespace offers you. Start by adding at least 3-4 products inside the store. When you add them, you will be asked to select your product types. With Squarespace, you can sell physical products, digital products, services, subscriptions, and gift cards. Choose the ones that apply best. In this tutorial, we will be setting up a digital products store, which can be online courses, guides, presets, eBooks, various templates, etc. With a digital product, your users will receive a digital file (usually a PDF file) via email, upon purchase. You’d need to add this file to the product options.

For each product, you will assign a name, price, product description, your thumbnail image, and product gallery. If needed, you can use tags and categories, to help your customers find what they're looking for. For the additional information tab, you can create your own custom layout, add some more details like additional text or an image gallery, to make your product look more appealing.

Step 4: Stylize your Shop Product Block

You can edit the format of your shop listing by clicking to edit the section with your products on the page. You have several options, like changing the way your product categories are displayed (on top or as a sidebar), display or hide the name of your shop, display or hide the price, increase or decrease spacing, adjust thumbnail images ratio (vertical, squares, etc.), change the number of columns, columns and row spacings. Tweak until you get the desired look.

Step 5: Display a cart icon on the header

For your users to be able to access the cart page, you need to show a cart icon on your site header. To do that, open your header settings > Elements > Enable the cart. 

Step 6: Further Stylize Individual Product pages

Squarespace offers a variety of design settings for each open product page. To customize your Product pages go to Design tab > Product Items and here you will find some more customization options. You can edit settings like thumbnail images aspect ratio, gallery width and placement, spacing, content and text alignment, and more. To customize your product page layouts even further, go directly inside each product and create custom layouts inside the “Additional Info” tab.

~

When it comes to the Cart Page and checkout page, Squarespace doesn’t offer much in terms of customization. Even if they both look generic, they are very functional. At this point, know that discounts will show on your checkout page only if you have a Commerce plan, the Business plan does not have this option.

Finally, we highly recommend that you use Squarespace Analytics to track your shop performance. Navigate your Analytics and Commerce tab - you can check orders, your inventory, customers, you can create discounts, and more. 

If you’re looking for a design kit with a ready-made shop layout, make sure to check Cosi 7.1 Design Kit. 

Creatively yours,

Squaremuse Team

Did you enjoy this article? Pin it to Pinterest!