Squarespace Ecommerce tutorial: Customizing your online shop (7.1)

Squarespace
Written By Paige Brunton
 
 

Prefer to watch?

Here’s that video!

 
 

Rather read about it instead?

Here are those steps written down!

In this post/video we walked through how to set up shop, add your first products or services, add a way for people to pay you, and which Squarespace pricing plan to pick in order to start selling! 

So now it’s time to go over the basics for customizing the look and layout of those shop and product pages you created!

How to customize your online shop in Squarespace 7.1

Alrightie, so as I mentioned in the previous tutorial, your shop page for the most part acts like any other page on your site, meaning you can add in new sections, fill them with content, and adjust the style settings for each individual section or block by clicking it’s Style Icon.

Pssst! If you need to take a step back and learn how to start adding pages, sections, and content to your site, I have just the refresher you need right here: How to start building a website in Squarespace version 7.1.

When it comes to page-building, the only thing that separates your shop page from your regular pages is that built-in shop section we talked about.

This was specifically designed by Squarespace to display your products and will automatically populate with any new listings you add to your store.

So while you can’t add or remove content blocks from this type of section, or delete the section itself, you do have quite a few options for how your products display. 


Step 1:

Editing the appearance of your shop section

Let’s go through the options you have for making edits to your built-in shop section…

(You’ll find those settings by clicking Edit on your shop page, then clicking the Style Icon on your Shop Section.)

  • Spacing: the amount of space between your product thumbnails

  • Columns: how many products should appear in a row on the page

  • Aspect ratio: how you want your images to be uniformly cropped

  • Text display settings: where your product’s title and price will appear in relation to your thumbnail

  • Header/Category display settings: where you tell Squarespace to hide or show your category title and how to align it on the page

  • Breadcrumbs: the little trail of links it took for your visitor to get to any given product in your shop (ie. clothing > womens clothing > tops > short sleeve tops)



You can also use your pre-built color themes to change the look of your shop section background and text. Just head under the Colors Tab of your Section Settings window.)

Remember, these themes have already been decided over in your Site Styles Panel (A.K.A Design Panel) before you start to build the bulk of your site. Then you just use these buttons to try on your different color themes to see which one you think fits that specific section.

If you have yet to check out my 2 part guide to using site styles in Squarespace 7.1, I walk you through all the steps to setting your themes and then applying them to your site, as well as setting your font and button styles sitewide:


Step 2:

Editing the order of your shop categories or products

If you want to change the order the categories appear on the page, we have to head back into the Store Page Settings by going to the Pages Panel, clicking on your store to open it, then clicking the Gear Icon in your Store Panel.

Head under the Categories Tab.

This is where you would make changes to the order your categories appear on your shop page navigation.

But if you want to want to change the order of your products that a visitor sees when they click on a specific category, just open that category in your Store Panel on the left, and drag and drop your products in order there.

Psst… Friend! Before I go any further, lemme tell you summin you might not want to hear (a little loving truth talk you could say). You can have the most lovely lookin’ shop in the world, but if you haven’t built it with a bit o’ strategy, it’s not going to be selling anything!

👇👇👇 So make sure to grab this free training where I break down 4 simple steps to double your site sales, so your store can be both beautiful AND effective… 👇👇👇

CTA Graphics for summary blocks
SS EG Webinar


step 3:

Customizing your product pages

To view a product’s page, click the category it lives in, then on the product itself.

Squarespace automatically creates a basic page based on the information you put in your product settings while setting it up, but if you want to tweak the layout or style, here’s how that’s done…

Click Edit Design (top left).

Then click the Style Icon to open up a styling panel with options for:

  • Spacing and padding for your thumbnail image

  • How your images will be cropped

  • How your text will align compared to your image

  • Whether you will display breadcrumbs on that specific product page

  • How large to display the image compared to the text

  • Whether to display your images as stacked, carousal or a slideshow

  • What you’d like to have happen when your visitor clicks or hovers over the image

  • And whether your product gallery or images will be on the left or right of the page


step 3:

Additional styling of your shop content

Next lets head under our Design Panel to see what site styles we can be changing in there for our store…

If you remember from my tutorial on using site styles to customize your site, most of the font, colors and button styles are decided prior to designing your site.

This is because the changes you make in your Design Panel are site-wide, so you wouldn’t want to update something here and have it totally change a design you were already happy with somewhere on another page.

But when it comes to site styles, Squarespace will only give you options for styling that which already exists on your site.

Meaning, if you didn’t have a shop added by the time you went to set all your site styles, you may not have had the option to tweak them just then!

So now that your shop has been added, you can tweak:



Fonts

You don’t want to go messing with your site wide font pack, but you can go in and customize the fonts that will appear on your shop page or individual product pages.

To do that, scroll down to Assign Styles, and depending on whether you currently have your shop page or a product page open, Squarespace will show you your options for editing your shop text there (title, description, price, etc.)



Colors

You will have already picked your main site color palette and 10 custom color themes to apply to whichever sections you choose. But now that you’ve added your shop, you have the option to go in and edit shop-specific color settings within each of those themes.

The easiest way see what’s possible to edit is to have your Color Panel open, then click the element on the page to bring up your options for changing it.

Remember, any changes you make to the section themes will be applied anywhere on your whole site that theme is being used, not just your shop and product pages.



Cart icon & shop button

Your options for tweaking your cart icon and shop button can be found right in your header section on the page. So click Edit on any page, and click Edit Site Header.

Open up Elements.

You don’t necessarily need to use your header button for your shop. You can choose to include a link to your shop in your regular main navigation instead by dragging and dropping your shop page up into your Main Navigation section of your Pages Panel.

Choose the cart icon that you like the best and use the slider to resize it!

Your header’s shop button color is decided in the Design Panel when creating your section themes. So if you apply your White Minimal section theme to your header, it will use whatever header button color was assigned to the White Minimal Theme.

Your shopping cart icon will always match whatever you set for your main navigation links color.

Now if you’re looking for a way to completely change up how you show your products, or maybe you want to display your products on other pages of your site, there’s a small but might duo that are gonna help you… introducing Squarespace Tags & Categories! Make sure to check this out next for everything you need to know!

 
/
/
 
Paige Brunton

Paige Brunton is a Squarespace expert, website designer and online educator. Through her blog and Squarespace courses, Paige has helped over half a million creative entrepreneurs design and build custom Squarespace sites that attract & convert their ideal clients & customers 24/7. She also teaches aspiring designers how to take their new Squarespace skills and turn them into a successful, fully-booked out web design business that supports a life they love!

https://paigebrunton.com
Previous

How I'd learn web design if I had to start over
Next

How to use Squarespace tags and categories to organize your site