Hey, everyone, welcome back.
So in our last video, we built a quick homepage and I am actually going to build another page.
I was thinking about building the product image page, our product description page.
Let's call it product page for now until we figure out a better name for that.
So we've got product page.
And what I'm going to do is I'm just going to start copying some of the stuff that we made.
I mean, this is where using these types of things comes in really handy.
OK.
So do I have here 40 percent.
Let's just copy that.
And when I think about the products page, so I've just laid out my navigation because I may repeat
it there.
I don't know yet.
I'm not sure what's going to be best for this page just yet.
I'm going to go and reference some of my do I have a product page here?
My site map.
Mm hmm.
No, not yet.
OK, so I'm going to actually go to my user flows, so I have my product page here and what I see is
I probably got a full screen image.
I may have some like, you know, similar products.
We obviously have a description of some sort.
There's probably going to be much more there, some content there.
Let's take a look at my sketches as well.
So that's making a purchase.
OK, so let's take a look at my sketches.
So, yeah, I do have like an image with the content, an add button.
Mm hmm.
Yeah.
OK,
so this is going to give me a little bit to start off from.
OK, so let's take a look at what we can do.
I'm just going to start copying some content here, going to just remove this, you know, keep the
price.
Maybe we'll keep that for now.
I think we can keep that so we can definitely create.
Our own I think it's fine to be like featured there.
We're going to create some so I'm thinking like a carousel is going to be here or something just so
users can see multiple images.
OK, so we have that.
What else do we have to turn on?
So I'm just going to actually make a grid style.
Some call it a grid, and I'm going to bring that grid into here as well.
There it is.
Perfect.
OK, so we have a grid and we're just going to give this generic product name.
That's cool.
It's not going to expand more than that amount.
Maybe we'll have some coffee in terms of, like, the description.
Let's build this over here.
So price is of the utmost importance.
That's my assumption right now.
I was thinking maybe something along the lines of like 18 pixels.
Yeah, OK, maybe Bolds, that's much better.
OK, so we have our price.
We have our product name.
I think that's a good start.
Let's think about like maybe we'll need a button.
Oh, OK, perfect.
Is this.
So what we can do is we can actually make this button ours if we wanted to, we can just.
I'm going to go over here and a press option can be and that's just going to detach that instance and
we'll be able to essentially do what we kind of want to with it.
We'll have to do the same option B. You can also.
Right click and detach instance so you can do that as well.
OK, so I'm just going to bring that in.
Two cards.
I like it, that's good.
OK, so we have our big button here that just add to cart.
Let me turn off this grid so you can see it better.
OK, and now a little description here, so I'm going to just.
Go to my IPSUM plugin.
You're like three sentences worth.
OK.
And 16 regular.
Well, that's a little bit so maybe like 14 regular for text like that.
OK.
And obviously, it's not looking beautiful, beautiful, but I mean, we can start seeing, like, how
the hierarchy of this page set up.
So when they do come here, they're going to see this big, like call to action or see a button to instantly
add this to our cart.
They'll be able to like it if they want to look at all the details they need right out front will be
able to even swipe through a carousel.
What else should we give them?
When I think of product pages, I'm thinking about reviews, definitely reviews.
Let's think of how we can layout reviews.
Let's go to our assets.
Perfect.
Actually, let's just grab that.
We can detach this instance.
We can just delete these, we don't need them.
So I'd like to do sometimes, I mean.
Because it's such a vague component library, it's not going to suit all our needs.
I don't expect it to really, but we can just start using the components and then just like editing,
no moving.
We don't need to necessarily keep them the way they are just because I mean, at the end of the day,
you need to use it the way it's going to work for you.
So don't just stick to it even though it's a pain.
So edit it in any which way you need.
OK, so we have a name they just randomly came up with.
What we can do is maybe have like an avatar.
OK, perfect.
I mean we can use a real image or we can just.
You something like that for now.
You like the name goes beside it.
I believe it.
OK.
OK, that's good for now.
This is just going to be.
Confined to the size of the content and what we're going to do here is we're going to.
Maybe like the date.
Maybe it's a dated review, like we need to start thinking about these types of little.
Pieces of content, so I want a day on here.
We need a name, most definitely.
Or user name or whatever we decide to go with.
So the name can be the fact that we have our stars, so we have like a five star general one.
We can even copy this down here and.
Amazing, this can be like the title of the review.
Amazing product.
This poll that.
Can copy this down here, so like you can tell, my workflow is pretty quick now that I have all the
pieces I kind of need and like, there you go.
We kind of have a review already built, so just don't get bogged down by too many details, worry about
the type of content you're working with.
So I'm going to just group this and call it review and put it right here and we can just copy and paste
it.
And right now I'm just going to think about, OK, three reviews if there's no here.
Let me just fix this.
Fix the constraint top and left is fine.
OK, so there we go.
Yeah, so just think about the type of content you need, like I was just thinking about reviews, what
do I often expect?
I expect the user's name.
I expect like maybe an image, possibly not required.
Definitely the reviews.
So if we're going based off of stars, need that.
Maybe like a title and some content, like their actual review is helpful.
Maybe they have images in their reviews.
So I need to maybe think about that in the future.
But for now, for our VH1 or our version one,
we're just going to stick to this.
So maybe like there's a secondary button.
And it says something along the lines of see more reviews and there you go.
So we already have like our product information, we have reviews and I think maybe like the last kind
of bit would be to have.
Let's bring in this like I created this before, and we can just reuse it and call it like similar products.
So if they don't like this product, maybe they'll find another one and they'll do like.
And without the actual description.
And there you go, I mean, we've just come up with our own product page pretty quickly, just by kind
of like thinking about the details that we wanted on this page really quickly.
Definitely.
We needed a name.
We need imagery and the ways to kind of customize that.
I'm probably missing some things.
I'm guaranteeing you.
I'm missing some things.
There's probably stuff like what happens if this certain product has like options like color.
So we need to also think about that maybe sizing if it's like a shirt or something like that or shoes.
So we need to think about all those different types of options.
I think reviews is pretty solid for now.
Similar products looks pretty solid.
See more reviews.
I have to think about that interaction.
Will it go to a new page?
Will it just expand?
So there's definitely a lot of work to do here, but I think this is very good for the first part.
So what I would do here is just kind of like bring your teammates in, get their feedback on this,
you know, maybe even start testing with some people if you can, if you have the time.
So this is how you make a quick product page and figure using our library.
In the next video, we're going to create one more page.