2024 Squarespace 7.1 Product Setup & Page Styling
About this Squarespace Video Tutorial
In this video I'm going to share a 2024 version of another popular video on my channel to show you and updated version of how to set up a Store on your Squarespace 7.1 website. Then I'll walk you through how to add a physical product and style the product and Store pages, so let's just dive right in!
Want 20% off your new Squarespace subscription?
Subscribe to the Designing the Row® email list and get the exclusive code sent straight to your inbox. You’ll get email updates when new Squarespace tutorials are published, but you can unsubscribe at any time.
You can see I'm already logged into my website. I'm going to click “Website” up here in the top left of this sidebar here to come into my Pages, and what I'm going to do is scroll down to the “Not Linked” section because I'm just making this store as an example, but this might also be a great way for you to get started on your store and set it up before you're ready for people to see it - set it up here under “Not Linked” and then when you're ready, you can click and drag and add it up here to your Main Navigation.
So what I'm going to do is click the “plus button” here and then select “Store” and then I'm going to click “Create a New Store.” You can see you're given two layout options. Don't stress over these too much. You can always add and delete sections on this Store page. If you pick the first option and then later decide you don't want those things up there, you can delete them. Same with the second option. You can always add sections around your products if you'd like.
Let's go with this first option. You can see it's naming it “Store 1.” We're just going to roll with that. Now here we are with the mock-up store page and three mock-up products. Let's style and edit this first little bit of the Store page and then we'll go into the Product. I'm going to click “Edit” on the Store page, and I'm going to replace this text and add in the page title with heading one because that is good SEO practice. I'm going to delete this button because I don't want anybody to click on and go anywhere outside of my store once they've come to my store, right? So we've got our title here to edit that background image. You can do that here. You can replace it, delete it, whatever you want. They do the same thing. And you can change your background there. If you want to change the text here, you can do that. You can change the layout. Or like I said, you can just remove it. And there it is gone. So I'm going to click “Save.” We've got our banner set up. We've got the extra text deleted. And now you can see here we are with our three mock-up products. I always just delete these. They're not helpful for me. For me, they're just in the way. Maybe you would want to dive into them and see how they're set up, but I think they're just in the way. We will not be selling these things, so I just select them all and delete.
Okay, so now we have our blank Store page style. We're going to be doing a physical product in this example, so “Physical Product,” we're going to select that. I have mocked up a pretend Designing the Row t-shirt for this example. First, give it your Product Name and then Description. You're going to want to use more text than I am, but this is just for setup. “Additional Info,” you can click in here if you would want. This will go underneath the product, so you're going to have like a picture, the price, the short description, and then like a buy button. More info, you can add this here and it will go underneath all of that.
Images, let's see if I can just drag and drop in my few mock-ups here. Okay, there we go, those are uploading. It suggests that you add three photos, I don't have a front and a back and a detail, I just have a couple different mock-ups here.
Scrolling down, we'll add in a Price, let's say it's going to be a $20 t-shirt. Obviously you can see here if you'd like to mark it On Sale, you can toggle that on and set a sale price. Stock, if you would like your website to help you track stock, toggle off “unlimited stock.” Let's say we have 15 shirts, but we're going to go into more details with each size in just a minute.
The SKU, if you would like to change your SKU, you can do that. And that, this shows up on the the email that people get when they buy your products, and it also might just help you sort. And manage your products when you are fulfilling orders. Okay, so since this is a t-shirt, we're going to have different sizes, right? So I'm going to click under Variants, add, I'm going to do the drop down and click “Size:” Small, Medium, Large. And when I'm putting the comma between these, it's making those little bubbles for me. Okay, I'm going to click “Save.” Now you can see when I click in to small, it opens up all my options. The SKU. It was all messed up because I added variations, so we're just going to do this. You might think this is a little tedious, and it is, but that's what I like to do. So then if you have maybe 10 Smalls and 10 X-Larges, but 15 Mediums and Larges, your website will track these for you, and it will let you know when you're running low on stock, and it will also let you know when you're out of stock, and it will not allow people to purchase things once they're gone, so that's very helpful here. You can also change your prices if you want the variants to be different prices. Add Dimensions if you would like… a lot of times I've taught in other videos how to do shipping rates and I will do the weight here. I'll just give it a make-believe weight of 1.5lbs here. For each shirt, you do not have to do this - but I want to give you an example of how to set up all of these fields.
Now I'm going to go “Back” and you can see we've got all of our inventory here saved. If you want to set up a different image for each of these sizes you can. This is more helpful for like if you do something with different colors though. Profiles - this is if you want to you can see here do different shipping options. I'm going to click my paid shipping option that I already have set up from other example videos that you can find on my channel so I'll click paid shipping here. Advanced shipping I've got my my weights in here. So I can I can manage my shipping on the back end again a whole different video that's on my channel for you This is mostly about setting up the actual product itself.
Categories, let's add a category and we'll say shirt, maybe, there we go, click add, tags if you would like to do tags, for this example I'd probably do like “shirt, Designing the Row, white t-shirt,” whatever you would want to do here okay, product add-ons, upsell, this is more advanced features, gonna leave these alone for now.
Custom Button, Custom Forms and Subscription. You don't really need these for t-shirts but if you would, if you want to do like a pre-sale of a product, you can change the Add to Cart button to say like pre-sale or pre-order now, you can do that here. I'm just going to discard that.
Custom Forms, if you're customizing a product for somebody, so say you're going to put their name on this t-shirt, you need to know what name they want on the t-shirt, you can set up a form to ask them that here. And Subscription if you are selling something that they need to be billed for on a recurring basis, you can set that up here. We just have a simple t-shirt, we've got all our details in, I'm going to hit “Publish.” And now you can see the shirt here has been added to my store. It says shirt right here because I added a category, so as I add categories, those will be shown here across the top of this page.
Let's go and just click into the product. I think this actually looks pretty nice, but for the sake of this video, let's do Edit Design > Edit Section and just keep in mind here, what you choose for this product will be the same for all the products in your Store. These are not individual settings for each product. This is the product settings for all the products on your Store. So, you can choose your layout here. For right now I'm liking this one. It's got the thumbnails over on the side. You can see everything very clearly. You have all sorts of options here. You can change the picture size. And remember this will be for every product on your site, so keep that in mind. I like the left there. So you can go through these and customize how this page looks here. Let's do a little more change to make it something different, like the product page background color. And click “Save.”
You can see it's still saving here, but I've shown you everything that I've wanted to... We've set up our Store, created our Store, set up our Store “homepage,” we've created a Product, and we've styled the actual Product page. All you should have to do from here is hit Save. And then Exit and you will have your new Store with your new Product styled exactly the way you want it.
And that is all for this video. If you have any questions about your Store, I do have a lot of other videos on my channel about setting up your store, setting up your shipping, all sorts of videos. So go browse the Store Video Playlist or ask me a question in the comments… and I'm gonna get this unstuck and I will see you in the next video.
More Squarespace eCommerce Tutorials…
