Review how customers experience your store, from browsing to checkout.

This guide shows what your customers see as they browse your products, add them to a shopping cart, and check out. Before customers can check out, you'll need to add products to your site and connect a payment processor.

Tip: Register for our Design tips to increase your store’s sales webinar where we’ll present tools and tips that you can use to help make your products stand out across your site and drive sales.

The example screenshots in this guide are from a mock version 7.1 site. If you have a version 7.0 site, the customer experience may be slightly different. Your customer's shopping experience may also vary slightly depending on how you set up your store. Running test orders is the best way to get to know how your checkout works.

Browse your site

When a customer visits your site, they get around your site using your site’s navigation. To view your products, they click a link to your store page.

On the store page, they can view your products and filter them by category. 

The store page shows up to 200 products. If there's more than 200 products, customers can click Next to view more products. If a product has multiple variants with different prices, the store page displays "From [the lowest variant price]" in the price field.

If you’ve enabled store page special features, like quick view or product zoom, they interact with these features as they hover over the featured product images.

Other ways to shop

Customers can shop for products on other parts of your site if you use product blocks or summary blocks to display them on different pages.

If you market your products via Squarespace Email Campaigns or sync your products with Facebook or Instagram, customers can also find your products while they’re not visiting your Squarespace site.

Add products to cart

When customers click a product, the product details page opens, where they can review the product’s information, images, and more. If the product has multiple options, like color and size, they can select them from a drop-down menu or click a button. To add the product to their cart, they click Add to cart. You can customize this button text. Customers can add up to 500 products to their cart. If carrier calculated shipping is enabled, they can add up to 150 products. If they enter a greater quantity than what you have in stock, an error message displays telling them the maximum number they can order. 

In version 7.1, you can also display the Add to cart button on your store page beneath product thumbnail images, which lets customers add items to their cart more quickly. If a product has one variant, customers can select the option and click Add to cart on the store page. If the product has more than one variant, customers click a View options button, which takes them to the product details page where they can make their selection.

Review the shopping cart

After customers add an item to their cart, a cart notification displays at the top of the page, which shows the number of items in the cart and the total cost. To send visitors directly to checkout after choosing a product, enable express checkout. Customers can continue shopping or click the cart icon to open the shopping cart.

In the shopping cart, they can change the quantity of products or remove products. Customers click Checkout to complete the purchase.

If they remove all products from the shopping cart, it displays a Continue Shopping link. This directs to your homepage by default, but you can direct it to a different page instead.

Check out

Clicking the Checkout button opens the checkout page, which is protected by SSL to keep your customers’ credit card data safe and secure. A typical checkout follows these steps:

1. Email - The customer enters their email address. If you’ve enabled the newsletter subscribe option at checkout, they can check or uncheck this option.
2. Customer account login - If the customer has a customer account, they can log in to speed up the checkout process. If you’ve enabled customer accounts, customers can create an account at checkout.
3. Delivery methods - The customer chooses between shipping or local pickup. If they choose shipping, they enter their shipping address. When they start typing, a Google-powered list of autofill suggestions displays. The customer then selects a shipping option. These display in ascending order of price, with the least expensive option selected by default. If all options are the same price, they display in the order you added them.
4. Payment & Discounts - The customer enters their credit card information and billing address, or they can use PayPal, Apple Pay, or Afterpay. If you have active discounts, customers can enter a discount code. Discounts apply to the cost of the product, not shipping. Only free shipping discounts affect the shipping cost.
5. Review & purchase - The customer clicks Purchase to place their order. If you added store policies, these display here as text links.
6. Confirmation - After checkout, customers land on a confirmation page. 

If you have an automatic, free shipping discount, it displays after customers select the shipping option the discount applies to. If this option is more expensive than other options before the discount, customers will need to select it manually.

If customers check out with multiple products that have different fulfillment profiles, products will be divided by fulfillment profile at checkout, and customers will select a shipping option for each profile. Customers will check out once, but their order will be divided into multiple orders with separate order numbers, one for each fulfillment profile. You’ll fulfill each order individually in the orders panel. Customers will receive multiple order confirmation emails.

The order confirmation page

An order confirmation page displays after a successful checkout. What's included on the page depends on the kind of product your customer bought. If the customer bought a physical, download, or service product, the confirmation page displays the order status, order details, and the option to create a customer account. If your customer bought a gift card, subscription, or membership, the page displays the text Order Confirmed and the order number. To preview these pages, place a test order with a supported product type.

Strong customer authentication (SCA)

Customers with credit cards issued in the EEA may have an extra authentication step during checkout. This may be a browser pop-up or a push notification from a banking app asking the customer to verify the transaction. The exact authorization process depends on the customer’s bank. To learn more, visit Strong Customer Authentication (SCA).

Review order emails

After completing checkout, the customer will receive an order confirmation email. If they bought a download product, they’ll receive an email with a download link to the product. For physical products, they’ll receive a second email when you fulfill their order. Customers can also click a link in the order confirmed email to view their order status.

This screenshot shows the order confirmation email layout, which you can customize in the customer email notifications panel.

Review the order status page

After checkout for physical, download, and service products, customers land on the order status page. They can also click a link in the order confirmed email to return to this page. The order status page displays the order details, like the order number and order total. It also shows the order’s status, which may be “pending fulfillment” or “fulfilled,” depending on if you’ve fulfilled the order. If the customer chose a carrier calculated shipping option and you bought a USPS shipping label through Squarespace, the tracking information also displays if the customer is logged into their account.

Customers can also review their shipping and billing information if they’re logged into their customer account. If your site has SSL enabled, customers can also view order details by entering their email address and a code from their order confirmation email.  If they don’t have an account, they can create one from the order status page. If a customer is having trouble creating or logging into their customer account, visit the Customer accounts guide for troubleshooting tips.

The order status page appears blank

If the order status page appears blank or has other display issues, it may be because of custom code you've added to your site. Custom code can sometimes interfere with Squarespace’s built-in code and cause issues. To resolve the issue, remove all custom code from your site, save it in a text document for safe keeping, then refresh the page. Custom code is an advanced modification that falls outside the scope of Squarespace support. For more help, you can visit the Squarespace Forum, our online forum where customers help each other with coding solutions.