Learn how to reformat the physical product to have a different image display and to include an image zoom feature. Quick view of products is enabled in Squarespace.
- [Instructor] So, from our last video, we went ahead and created a product here, this is our vitamins, and this is the product page for that. If you click on Shop, then click on the bottle of vitamins, you'll get a page that looks like this. This looks reasonably good, if you launched your store looking like this, that would be no cause for shame at all. But as you know with Squarespace from my Squarespace essential training course, there's always a way that you can tweak things and maybe make them look a little bit better. So, I have some tweaks I'd like to make here in my design view, in the Style Editor.
So I'm gonna go ahead and go back to the Home version of my navigation, I'm gonna go to Design. Then I'm gonna click on my Style Editor. And this is all of the items that are gonna control the look of this theme. Make sure you're on the actual product listing page, because this has got some items that I want to adjust. And as always, the easiest way to do that is simply roll your mouse over what you want to change, and click. This will go ahead and adjust the options over here on the left to the things that you're most interested in.
So, in this particular case right now, what I have is, I've put the product on the left. Notice that you have the option of switching it to the right side if you choose to do that. That the current design is a slideshow, but I can switch that as well. I can just have these items stacked on top of each other instead. And, sometimes the screen doesn't quite redraw correctly, as it's not doing here, but you should see some pictures on top of each other, one on top of each other here on the screen. You can change the width of the picture, I'm pretty happy with that, I'm gonna leave it.
You can change the spacing between the pictures. We'll revisit that in a moment. And then down here, notice too that we have the ability to enable an image zoom, in other words, when you roll over the picture, that things enlarge. And that's turned on by default, but right now the Zoom Factor is set to one. Which means that it's no bigger than what it was originally. If you want it to get to be bigger, then you're gonna need to change this. I'm just gonna move it up to, like, 1 1/2. And then finally, do you want that zoom to happen on click, or on hover? I'm gonna change mine to On Hover, I think that matches better with some stores that I've seen online.
And then finally, since there's an On Hover, do we want that to come in a lightbox? And what a lightbox is is just another window with the larger version of that picture in it, and I'm gonna go ahead and say yes to that as well. We'll go ahead and say Save. I'm gonna go ahead out of this. And I'm gonna go all the way back to my pages. I'm gonna go back to my Home page. Back to Shop. Click on my multivitamin here. And you'll see that now we do have the pictures, they're stacked on top of each other.
When you roll over them you can see what's going on here. You can also click to get a full lightbox that will actually show you something that you can read in terms of these particular supplements, which is great because these pictures have a lot of information on them, them being supplements, and we wanna be sure that people can read them. So, rolling your mouse over them is gonna blow them up a little bit. Clicking on them will make them even bigger. One other thing that you might wanna change here on this website, if we go back to our Shop page. Right now, if I roll over this, it's becoming a little bit transparent, sort of indicate that it's clickable to go to the page.
But another feature that you'll find a lot of stores have is the quick add, or the quick view, or quick add to cart kind of thing. And that is something that we can add here, too. Basically, we don't have to click and go into a whole nother page, that we actually just have a pop-up that comes up and we can quickly see information about that product and order it from there. So, to get there, we're gonna go to Settings, and we're gonna go to Features over here on the side. And it's gonna ask us if we would like to enable Quick View.
So, this will allow people to do exactly that. Gonna go ahead and check that and say Save. And so once you've done that, when you roll your mouse over this, you still can click somewhere in this other area and get the full version of the page, but now you also have this Quick View available to you. So the Quick View is simply going to give you the most basic information here. In other words, this one photo, a couple of smaller additions of this photo, and only that short description, in other words, not the full description.
If we wanna see the full item, we can. You can see all the pictures, and you can see the rest of the information down here at the bottom. So that's just a few quick little changes that you can make to your product very quickly and easily using the design view inside of Squarespace.
- Planning your Squarespace online store
- Creating product listings for physical goods
- Configuring shipping and creating discounts
- Create product listings and stores for digital goods
- Create product listings and stores for service-based products
- Adding a workshop as a service product
- Configuring payments and emails for physical, digital, and service products