How to Build a Custom Store Product Page | Part 1 | Wix Store | Editor X Tutorials

hello everyone and welcome back to i love editorics so this is a product page a custom one with my layout uh basically this is not my layout i saw this layout in the video after the editorics is came out from beta so inside this video there is a crazy product page so let’s see this with robust ecommerce solutions and unlock the potential to build advanced right so this is the layout and you can see this is not a regular layout that you can
just go and select from the product page design layout it’s a custom one and it has a video with 360. let’s see web applications with custom javascript and apis on a built-in open development right so i saw lots of people asking well how can i create it i mean you cannot choose you cannot go to the product page and select from the application the layout you wanted to get this layout so basically they said in specifically in the in this video they
said you can achieve it by using javascript and the product api so let’s applications with custom javascript and apis all right so with custom javascript and api so i really was interesting to to build it uh and and see if this is actually work so as you saw this is the final layout we have all this kind of information here it’s all function uh function and i can let’s say select a number and you can scroll to the to a specific product and you
even have a video and in this video you can basically display a 360 video and you get same effect um and also let’s see so if i want to add this item to my cart so i click it and i have a message that i didn’t select size and color so let’s select color and it’s updated but you missing the size so let’s select size and i will click add to cart and you see it like this is actually working right um okay so and let’s say i want to select a different
item so i i need to get the right uh information right so if i click these different headphones so i get you see everything is updated and i got the real uh a real product information uh to this uh inside this dynamic page so let’s click add to cart again and you see i add the right product all right so i only already built it but we rebuild it this is the editor and this is the default application uh application design that it’s a bit unlimited
but with the value api with the product api we can do basically whatever we want uh so this is is very interesting uh and gives you the ability to do a crazy layout for a product page so we will rebuild it from scratch uh this video will focus on the layout how to create this layout uh and the second video will cover how to use the product api to make things work uh properly all right so let’s jump in so i have a fixed header you can see that
when i’m scrolled it’s coming with me uh and i have one section that is uh hold all the information inside so let’s see how i build it so if i inspect it and you can see that i have a section with grid of four columns okay basically you don’t need a four you can use three but here i uh i did four columns with a bit of gap between i think this is like um eight or four pixels uh and the information is inside uh all the all the information is inside
the one container and all these product images is inside a repeater and the main image is also inside a container and we have here another repair that hold the navbar uh it’s same like this image but it’s more easier to to navigate from here and you can see also right here we have a small repeater for the colors why because uh we because each product have different amount of colors so this information needs to be dynamic and this one is a simple
input drop down and here we have another repeater uh with the information with the product information basically this is like a collapsed element like accordion and because because sometimes we have only two two fields sometimes we will have four field basically it’s up to you you can add how many field that you want so this information should be also dynamic all right so let’s start by creating a grid to this uh container to this section and we
will go to four columns all right uh let’s add gap because i use gap between the cells so let’s do four uh eight pixels gap and my page background is black this is why you see black and now i will add a container to the information and i will make it 100 from its cell and the height should be 100 all right we will change it later but currently we will do this way and i will change the background to be this uh it’s not blackish something not not
fully black and i will increase for now the height of this section to fill the screen but we will change it later all right so i know that this first row will hold the nav bar this one and i know that this is a 50 pixels width so i will change this row to be 50 pixels right and these uh images uh i forgot what the size of it so i will check right here so it’s 18 vw how i came to this number basically i working on the biggest screen and let’s
convert this one to pixels so for some reason i picked this this uh pixels and i converted to vw so it will be a responsive oh i know why because each item uh i want the item to be a perfect square okay so you can see this is same this is 346 pixels so yeah height and i want the weight to be exactly the same that’s why and when i do it i get a perfect square so if the height is 18 uh vw so the grid is the the column should be the same okay all
right so let’s change in our grid this should be 18 vw alright and this one will take all the rest of the place that is left um i forgot about this one let’s see it’s 500 pixels why why this is like when i set something to be in pixels that means it’s not responsive why i select this one to be a fixed size basically because we have here uh a text and text if the weed will be too much responsive that’s mean when i sh when i start to shrink the the
page uh the page with the screen with this uh container will be very narrow and all the text will start to breaking so i prefer to make it fixed and it’s always same with all right so we have the main layout let’s go back to normal screen width and now and now let’s start to add our uh information so first thing i need to you know let’s skip this one i will just copy this one you can see i have a stack element with uh the ribbon the product name
the description of the product and the price this should be 100 all right and you can see that inside this container i have a grid of uh just grid i have one two three four uh four rows okay so i will copy this stack element and let’s apply grid of four columns and i will paste it in the first column right this is the stack element and i know that i want to i will set it to start on a column on row one end on two and it should be a hundred
percent from the width all right and you can see that now it’s filled the whole container so i will add some padding so let’s say 80 pixels from left eight so this is margin uh padding 80 from left and 80 from right and i need also from top how much did i do here at 20 percent so it should be a bit uh responsive and from bottom it’s fixed side all right and i need to remove the this stack element margin from top and from bottom okay so this is
look something like this and now we need the colors and size um information right so you can see that i build i put everything inside the container and okay let’s do it so i know this information is need to sit right here so let’s add a container and it should be on column two on row two and i will stretch it up to three and for now it will be stretch but i will change it later and i will apply grid of four two on two okay something like this
and you can see that in the first row and column i have this text element i just copy and paste it in the first one and i will set it to be a hundred percent and i will adjust the grid so the first column will always be uh as the my text okay so it should be max content right and i will add like a gap between these cells let’s say 20 pixels and also from the top 20 pixels all right and now we need a repeater that will hold the colors okay so to
to select these colors i use a container i think there is a better way to do it but for now i will use i will create a container why because i can add styling to container like a background color and border color on click or on on hover so we need a list uh and we need a card and i don’t remember what is the size of each item so let’s oh what is the size of each item so let’s see the container itself is 18 pixels so i guess the item is same all
right so i will make this one um 18 pixels all right and each element should be why cannot set it let’s see change layout what i cannot set the width of the item oh basically i think because change layout it should be automatically yeah okay so 18 pixels and i will make it rounded all right something like this and now i can drag this co this repeater inside the right uh column row and it should be a hundred percent no mean weed and it should be
dark to the left side all right something like this and now we have the sizes so let’s duplicate this text element and put it in the second row and the first column and it should be also 100 percent with and i will change this text element to size perfect all right and now we need a simple input element you will get this tab only if the dev mode is on okay so i will take a drop down element it will put it right here and i just copy the design
from here so i will select it and click uh so it’s from right here and i will click uh copy element design from all back breakpoint and now you see the crossover the pointer is change and i’m hovering same element and i can select right and this should be also 100 percent width and it should be higher something like 50 pixels i guess let’s see how much i did right here 36 all right so 36 pixels and you can see that my container is higher than the
content so i will adjust the grid wait i need to go to the main container first of all i just agreed edit degree the first one should be max content the second one also should be max content right and now i need to make sure that my elements is also not taking too much height so it should be also max content and max content all right and i need to make sure the text is uh exact exactly in the middle and i will remove the border for my container
right so it’s it looks something like this uh just for this uh input i will ch i will remove the margin all right so it looks something like this and i just need a gap here between these ones so i will add margin from 50 pixels from bottom to the stack element and now it’s better all right this feels like too much gap so i will make it uh 10 pixels no this one should be 20 and this should be 10. all right so we have the product information and we
have the sizing and now i need to create this drop down this um like this product info with textual info inside of it so basically this is like another repeater so how can i create it i will uh i will create wait if this is a repeater yes it is so let’s add another repeater quick add repeater right and now i need to change the layout to list because they are basically on top of each other i mean one below and another and the height should be that
should be auto okay but first um we have we have like a hidden information right so this is the default you can see only the first uh only the button and then when you click you it’s discover more information right so first of all we need a button let’s change this background to be not let’s keep it just to see what we are doing so i will add a button and it should fill the whole width of the item so let’s set it to be 100 and i will copy the
design from here so let’s select this button and copy design element from all bread points and i will hover the button element and click all right it’s not changing the layout so i will do it manually and what else we need what what is the height of this button it’s 40 pixels all right so let’s set it to 40 and now i need a text element i will copy it from right here so let’s copy it this is the information okay so let’s paste it here and wait so
i need another grid here why need grid because i don’t want the the item the repeater item to be to have a height so i need to remove the height and now i need to apply grid of two column of two rows the first row will hold only the button so its call its row should be max content the second row should be also max content why because this information is collapsed on load so when it’s collapsed on load this whole cell should should be shrink to
zero so that’s why i need this to be also max content but i will add a bit of i will wait i will remove the collapsing node just for now and i will add a bit of um padding to this item so it so we have a bit of gap let’s say 20 pixels and margin from top to this information let’s say that 20 pixels and i wanted to to push it a bit inside you know what let’s let’s keep it the same uh so i just remove the background from the item it will be zero
and it look something like this okay so this one should be like tab uh one and basically i need to remove all the extra uh information because um because this information is came from the database so i don’t need like three elements i need only two elements but but for now because we didn’t connect it yet to the database so to the product information so i will keep it just to that we can see uh like uh like a real it’s not really information but
just a placeholder okay so now we can drag this uh repeater inside our container and we need to place it correctly so how we can do it uh right from here it should be docked to the left side aside and and it should be row uh let’s think this is one on two this is two on three this is three on four three on four and now you can see that uh we have overflow content right here basically this is because the main container is set to be a hundred
percent so i need to say to be auto and then it should increase the section height so let’s set the section height to be also order and now it’s fill the contact so let’s add another margin to with the repeater itself let’s say 50 pixels from top okay so it’s look something like this uh and i will copy the arrow from here it’s a basic basic vector out so it’s copy then i will add it to each button because we don’t have button with arrow right now
all right all right so it looks something like this and don’t forget that this text element it should be collapsed on load not hidden collapsed because hidden is still taking the play the its own place and all we are missing is this button okay so let’s copy this button and i will paste it directly here in its this container and you can see now that this grid is like cut when you see something like this you you you need to know that uh you have
another row here that it’s not that you don’t see so how can you see it when you pass the element inside this container so you need to make sure to set to set it to be like in the right row so let’s set it like this 50 pixels margin and now when i will see the the grid you can see that now the the the grid is look complete it’s not broken all right so this is how my information container look like okay the textual one and the cta okay i just
forgot to add the alert message so let’s copy it and paste it right here and i will paste it something like this right and i think it’s yeah it’s okay all right so let’s publish it and see how it look on the live site okay so it looks something like this all right so you can see when i click nothing is happened because i didn’t uh connect the code yet but i forgot to remove the uh from this repeater i need to remove the gaps between the elements
okay all right so next next thing what we need to do we need to set the the product items okay this repeater okay so let’s create another uh let’s add another repeater it should be also uh the layout should be also a list because they are on top of each other uh one below there another and it should be uh no mean with it should be a hundred percent but look what happened when i said it to be a hundred percent it gets huge because it’s not in the
right column so it should be if this one these two this this three so it should be three to four right so let’s just position it correctly and it has a gap of i think four yeah four pixels okay but you can see that there is a four pixels on top also so i will just set it to be minus four pixels from top minus oh it is spreading minus four all right so now you can see that my item is not not fully square right so if you remember we set this column
to be 18 vw so the item also should be same size so instead of 350 it should be 80 pw and i will remove the mean height and you can see now it’s perfect square so i will change this background to be this dark okay and what we need we need an image let’s add an image and i will stretch it and just for demonstrate you how why i add this background is basically because i use uh product images which is png with transparent background so when i will
add an item i see the background of the item okay so if i change what i do what i did so this is another method to do it but i always love to play with a item background so if i change the the you can see that i can change the background dynamically and basically in this video you can see that it’s toggle between drag dark and light basically this is like like a concept it’s not it’s not very useful on on real store but this is allow you the
options to change the background of the the site the containers built-in open development platform so i can change the the background of this container to be from black to white uh with velo okay and i can change the element based on my selection like give me all the the elements that under light category for this uh the light color for this element but i i won’t do it because it’s i think it’s not that useful so and this is like a different
tutorial so this is like an example so i love to use a placeholder for images that is solid color and the best is to be same as the background color so you don’t see any flickering or something like this so i have a placeholder right here you can see that this image is exactly the same as my background okay but for now let’s keep it like this uh okay so we have the information we have repeater with the product uh product images and now we have um
the main content right so if you remember it it can be a an image or it can be a video okay so i want to show you the video okay so if i select this one i have a video in it so if i scroll all the way to the button you can see that this one is a video so i need two options or to display a video or to display image right so i will add another container and this i will stretch this container to fill the whole uh the whole column but it will it will
continue to the first column okay so this is an option it’s up to you if you want the image to be a bit behind this nav bar or or you don’t you want the image never to cross this uh this column for example you can see when i play the video it’s also uh behind this novel okay so it’s up to you basically um all right so i will make it to grow from column one to three and i again add i will remove the border and i will add same background as the
others all right so this is the main layout and now all i need to do i need to add a video but i will use uh not as i will use the video box because video box when you stretch it it’s smartly uh you know you never have the the the black uh lines okay i will show you the difference if i will set the video player and i will stretch it so when i play the video you will see that it’s always keep its proportion and you will see like a black lines you
can see these black lines but the difference is when i use the benefit of this video player is that you never lose the content you always see the whole video but if you use a video box if the video is like a background it’s like more um artistic feeling but uh but you won’t see the any black lines you see so but i prefer to use this video just for now uh so let’s if we are here let’s change this one to be white all right so we have a video um
and let’s change the video just to my product video where i put it maybe here yeah this is the video all right and i need an a an option to display image an image right so image is more important why because most of the time you will have an images on your product page so it’s more important to me that you will see the whole image um so let’s see how i set the image here you can see that it’s not stretch it’s scale proportionally okay so it it’s
perfectly square because all my image my images are square so i will do the same here i will make it first of all i will make it perfectly square okay and then i will change it to be fluid and now i will make it absolute center and it should be 100 percent of this uh column width and let’s change an image just to see a beautiful stuff and you can see that the video is behind this image right so if i will click uh on this video and click on
display you can see that uh we see only the image okay same version but bigger so let’s change it back all right what i did here okay okay we are in the right way so last thing i think this is the last things yes we need this nut bar all right so basically this is like a really simple um uh use of repeater it’s only have buttons but i need to drag a new repeater right here but you can see that this container that hold the video and the image is
covering my both uh columns so if i drag a repeater right here it will go inside this container so just for a second i will don’t display this container of the main media so i will change the name of this container to main media so i will know what it stands for and i will don’t display it and now when i drag a new repeater it won’t go inside this container so i can design it and then go back and show the the main media container so this is again
should be a list and the repeater width should be 50 pixels something small like this and the height of each item should be also not 50 let’s say 40 maybe uh let’s see how i did it right here no it’s basically perfect square so i will copy this button you know what let’s not copy let’s set this one to be 50 and i will uh drag right here another button and i will copy the design from this button copy design element for more breakpoints and i will
hover this button and let’s change this number to one and simply i can drag it inside my repeater item and set it to be fluid and the height should be 100 percent and now it’s fill the item right so all i need to do i need to remove the background from the item itself let’s go to style zero and the repeater layout i will remove the gaps all right so now i need to what happened all right so i will add another container right in this first column
and i will show you why i am adding a container basically because if the if the screen will be very if the height will be very small so you can see i have here lots of media so what happened this um this repeater items will will make an overflow content when this screen size will be like let’s see if we can demonstrate it um let’s do uh responsive how do i do responsive yes and desktop i need this conversion you can see now the numbers is like
you don’t see the all of them right so i want this numbers always to be like here in the first row in this first row and they’re able to scroll inside of this one okay not is not to have an overflow content so let’s um make this one width is 100 and i know this is like a 50 pixels and it should be dark to the top basically not not to the top it always should be not yet let’s drop it to the top and it should be 100 and i will remove the border
default border and now i can drag this repeater inside this container and it should be always absolute center like floating in the center right but you can see that here all our content is filling the screen right is exactly filling the screen but right here you can see that uh it’s not the case why it’s not the case because this content is pushing our container because it’s dynamic it can be very long so what i what i need to do i need to let me
think i forgot what i did i need to set the section itself let’s see what i did here because i don’t remember so yeah basically i will oh forgot to bring back the main media so let’s bring it back okay so this container that holds all the main media should be not stretch but 100 v h right let’s see if i did it correctly container yes 100 vh okay and same for this navbar it should be vh 100 and this one should be i think regular okay so let’s see
how it looks on the live site right this is our design okay so you can see that we have a video behind um we have here the nav bar we have here the repeater with only three items and here we have the drop down right so this is the right layout so just for now i will um i will add i mean i want to avoid the situation where the image have when you can see the video behind the image so what i will do i will add a container inside this main media
container right and i will stretch it okay so it fills the whole section the whole container and i will add same background as the background we did before like this and i will select the image from here i know it’s behind this container so i will cut it from here and let’s remove the border from this and i will paste it in this container and again it should be absolute center and now you won’t see the the video behind okay why we need to do it
because basically when we select and we select the different images so it’s the images change but correctly but when we toggle between video and image i don’t want to have this this tiny second that you you can see the video also and the image together all right so that’s why i add this background to this image and for this example let’s create let’s add another images to our uh distributor okay so let’s add this one i will make it there let’s
change this image to this one we’ll change the main one now the main one i i need the main one but let’s add another item items uh like more items let’s duplicate it let’s go with six items okay so let’s change this image i will select this one it’s just to get the feeling of real product you know but you know that this is not the right the right content it’s not connected to anything right so let’s see how it looks on the live site this is our
design and you can see that it’s not behave as we want it to be behave okay so what is the problem basically we want when we scroll we want to this this product information to scroll with us and also this main image but but this uh this product images it’s need to be scrolled just like here see i want to get this effect right so how can i do it so basically i need to make this man maybe a container uh let’s select it from here because we have
too much container so this main media container it should be fixed not fixed sticky to the top what happened when you set something to be sticky it automatically became uh the highest in the layers panel you can see so now it’s covered the repeater of of the navbar right so let’s change this one to nav and i will set it to be sticky also so just it just pop up to be the highest all right so also for this uh product information i will set it to be
um also on scroll should be sticky all right but it’s important for us to say that it should be at least um at least 100 vh i think so mean height it should be 100bh i think this is what i should do so let’s publish it and see how it behave so everything is sticky except this repeater with a product image okay so it looks like this and look when i scroll what happened all these elements are stick to the top so they scroll with me and these uh
product uh images are scroll regular as their default behavior was calling okay and now i reach to the bottom of the scroll options okay so basically this is uh basically now we create this layout like the video okay you can see that it’s same layout we have the navbar we have the main media we have the repeater items and we have the product information okay so mission one accomplished and we saw how to build this layout okay so in the next video
i will show you how to take all this information and put it in the right place like to get the right product man and product information and place it right here just like in this example you can see this is live information okay so i just need i just forgot to this this should be a black so i will change this background to black and we’re done okay so um what’s next so yeah as i said next time next video i will add a link to it next video we will
connect all the data so you will have a real product page with real data and you can add to this information to cart and when you go between different products you get different content and we make everything work right so till next time keep building amazing saturn editorics see you later