How to change the style of ecommerce store product pages in WIX

hi guys Nicole Herrick here with hewing a tutorial on how to change the style of your product pages in weeks okay so to get to the place where you can change the style of your product pages I want you to go up to your pages tab and find where you have your store page that has the little squares on it here so you want to click on these little squares and then choose product page and this is where we change the style okay I’ll close that and I’m
going to click on the main element here and go to settings and here we go so there’s several different layouts that you can choose from let me just take you through how they look so this first one that they have is default it’s quite sort of you know even on both sides but the one problem I have with this is that the first piece of information that you kind of see over here is usually in the product info section which is the second section not a
lot of people use so the product description which is the thing that most people want to be able to read first is actually below the images and that color doesn’t really make too much sense to me because most people will not be able to see that when they’re looking at the full page unless they actually scroll down so it’s not a bad layout it’s quite nice and even but it’s not my favorite let’s have a look at the other ones okay so here is the
next one so there’s a really big landscape view and then all very kind of straight up and down I don’t really like this one either because when you’re doing products you don’t really be wanting to do sort of very landscape images settings and let’s have a look at the next one okay so over here as well it’s sort of sitting on top of the product so you’re losing a little bit of it so again I don’t really like this layout as much look at this one so
this one’s called spotlight and this is the my favorite one to use so you can see here that I’ve got a relatively square image and we can actually make sure that that’s definitely square I’ve got my simple product information over here here is my product description nice and high my select and everything might add to cart’ and then here is my secondary information so I think that that makes a lot more sense in a layout for any kind of product
store to have the description above the fault so this is the fold here at the bottom of the screen so anything that below the fold is anything that I have to scroll down to see so I really like this one I’ll just show you the last one as well okay simple and again so it’s sort of just like this massive image and then you know probably the formation over here and yeah it just doesn’t do it for me that one so again just to show you my favorite
setting for most product stores is the spotlight okay so now that we’ve chosen this let’s have a little look at the other things that we can change here so we can take off things like we don’t want the price to be on there don’t know why you wouldn’t want the price on there but things like the SKU which is this item number up here if you want to sort of clean it up a little bit you could get rid of that if if you don’t want them to be able to
select how if they want to buy more than one you can take off quantity the navigation is the arrows who’s he on the image actually ignore what I just said there navigation turns on and off this section here which is also known as breadcrumbs and it helps you get back the home page or the previous page if you don’t want to add to cart’ button you can certainly take that off as well if you don’t what the details and the specs which are down here
you can take that off I’m sorry I just took like the last one that’s the take off details and specs and then this social image is over here you can take those up as well if you want to clean that up again you can change the headers strip and I’ll just show you how to do that so there we go you can change that to a different color I like to keep it sort of clean white crisp or you can change the info sections color down here that one doesn’t look
so bad but in the product section I like to keep it nice and clean and simple you can also stretch to full width so it just basically stretches it all the way across the page which can be handy if that’s the style of your website I’m just getting a little bit unstretched okay so you can also go into display settings now in here what I want to show you is the difference between image scaling crop and fit so at the moment it’s on crop and it’s
cropping it to this rectangle that it’s sort of set out but if I change it to fit and my image is automatic in width it makes this a square so I always recommend that whenever you’re setting up an online store for me I always like to have all of my images square it just makes it a lot cleaner and more simple because anything that you previously had portrait or landscape you just crop everything to square and everything looks the same shape you’d
also change where the images sit on the left on the right underneath here and they don’t actually show this thumbnails when they’re here but I quite like on the left okay you also change the thumbnail border you can make it no border if you like and change the color okay so there we go that’s how we change the style of the product images now let’s go to the different fonts and colors for these so named price SKU you can go in here and change the
name of the products what the price font looks like what the SKU font looks like the description body and number of rows to show initially so this is one two three rows initially and then it’s got three more so if I change that to four or five it’ll show more in here okay let’s go back okay product options and quantity you just change the fonts in there but then you can change the color you can change the shape so we might want to make it a nice
brown one we would need to change the text color to a different color so they can see it I always like to have a bold color in there sorry in the actual button itself I think it’s better to have a bold color so that they know exactly this is where you click this is where you coming by come on and you can also change the button text as well so if you wanted to call all of the buttons by now instead of Add to Cart you could certainly do that all
right let’s go back info sections you can change them let me go down to the info section so at the moment they are two horizontal paragraphs you can do just a single one and they’re above each other you can do tabs and you can do expand and collapse tabs as well so it’s really nice to be able to play with that and you can also change their fonts in there as well okay and the social media you can change what if you have all of these on there or
not and whether they’re aligned underneath the cop button more to the right that’s handy so there’s everything you need to know I hope that was helpful I’m just going to run you through really quickly again exactly where to find that settings so you want to go to your pages panel look for your you need to hover over it and find your shop page that has the store pages icon on it which is this little square thing is click on product page click on
in the center of the page and click settings and there you’ll find your different layouts adding in subtract and subtracting components and then you’ll display settings I hope that was helpful guys hit me up if you’ve got questions on Wix