1 00:00:00,690 --> 00:00:01,810 Hey, everyone, welcome back. 2 00:00:02,220 --> 00:00:08,990 So in our last video, we built a quick homepage and I am actually going to build another page. 3 00:00:09,000 --> 00:00:15,390 I was thinking about building the product image page, our product description page. 4 00:00:16,160 --> 00:00:20,020 Let's call it product page for now until we figure out a better name for that. 5 00:00:20,580 --> 00:00:21,750 So we've got product page. 6 00:00:21,750 --> 00:00:25,650 And what I'm going to do is I'm just going to start copying some of the stuff that we made. 7 00:00:25,650 --> 00:00:29,310 I mean, this is where using these types of things comes in really handy. 8 00:00:29,880 --> 00:00:30,510 OK. 9 00:00:32,280 --> 00:00:34,590 So do I have here 40 percent. 10 00:00:34,990 --> 00:00:36,390 Let's just copy that. 11 00:00:36,840 --> 00:00:42,540 And when I think about the products page, so I've just laid out my navigation because I may repeat 12 00:00:42,540 --> 00:00:42,840 it there. 13 00:00:42,840 --> 00:00:43,580 I don't know yet. 14 00:00:43,590 --> 00:00:47,150 I'm not sure what's going to be best for this page just yet. 15 00:00:47,700 --> 00:00:53,460 I'm going to go and reference some of my do I have a product page here? 16 00:00:53,460 --> 00:00:54,420 My site map. 17 00:00:58,670 --> 00:00:59,500 Mm hmm. 18 00:01:00,360 --> 00:01:01,020 No, not yet. 19 00:01:01,550 --> 00:01:07,930 OK, so I'm going to actually go to my user flows, so I have my product page here and what I see is 20 00:01:07,930 --> 00:01:10,240 I probably got a full screen image. 21 00:01:10,270 --> 00:01:14,410 I may have some like, you know, similar products. 22 00:01:14,650 --> 00:01:16,860 We obviously have a description of some sort. 23 00:01:16,870 --> 00:01:19,780 There's probably going to be much more there, some content there. 24 00:01:19,810 --> 00:01:22,590 Let's take a look at my sketches as well. 25 00:01:24,370 --> 00:01:25,700 So that's making a purchase. 26 00:01:25,720 --> 00:01:28,680 OK, so let's take a look at my sketches. 27 00:01:28,690 --> 00:01:34,060 So, yeah, I do have like an image with the content, an add button. 28 00:01:37,110 --> 00:01:38,290 Mm hmm. 29 00:01:38,350 --> 00:01:38,700 Yeah. 30 00:01:38,740 --> 00:01:39,150 OK, 31 00:01:42,280 --> 00:01:46,840 so this is going to give me a little bit to start off from. 32 00:01:47,260 --> 00:01:50,200 OK, so let's take a look at what we can do. 33 00:01:50,590 --> 00:01:58,120 I'm just going to start copying some content here, going to just remove this, you know, keep the 34 00:01:58,120 --> 00:01:58,930 price. 35 00:01:59,180 --> 00:02:00,670 Maybe we'll keep that for now. 36 00:02:03,700 --> 00:02:08,080 I think we can keep that so we can definitely create. 37 00:02:10,130 --> 00:02:16,870 Our own I think it's fine to be like featured there. 38 00:02:20,110 --> 00:02:27,280 We're going to create some so I'm thinking like a carousel is going to be here or something just so 39 00:02:27,280 --> 00:02:29,290 users can see multiple images. 40 00:02:34,610 --> 00:02:37,020 OK, so we have that. 41 00:02:37,070 --> 00:02:39,220 What else do we have to turn on? 42 00:02:40,370 --> 00:02:44,780 So I'm just going to actually make a grid style. 43 00:02:47,350 --> 00:02:52,750 Some call it a grid, and I'm going to bring that grid into here as well. 44 00:02:55,480 --> 00:02:56,410 There it is. 45 00:02:56,980 --> 00:02:57,760 Perfect. 46 00:02:58,360 --> 00:03:03,670 OK, so we have a grid and we're just going to give this generic product name. 47 00:03:04,880 --> 00:03:05,840 That's cool. 48 00:03:07,530 --> 00:03:12,360 It's not going to expand more than that amount. 49 00:03:13,930 --> 00:03:19,420 Maybe we'll have some coffee in terms of, like, the description. 50 00:03:20,200 --> 00:03:21,940 Let's build this over here. 51 00:03:21,950 --> 00:03:27,090 So price is of the utmost importance. 52 00:03:28,820 --> 00:03:30,230 That's my assumption right now. 53 00:03:33,500 --> 00:03:37,790 I was thinking maybe something along the lines of like 18 pixels. 54 00:03:38,820 --> 00:03:42,890 Yeah, OK, maybe Bolds, that's much better. 55 00:03:43,340 --> 00:03:45,530 OK, so we have our price. 56 00:03:45,770 --> 00:03:47,720 We have our product name. 57 00:03:49,440 --> 00:03:50,700 I think that's a good start. 58 00:03:51,780 --> 00:03:54,150 Let's think about like maybe we'll need a button. 59 00:03:59,480 --> 00:04:01,790 Oh, OK, perfect. 60 00:04:02,560 --> 00:04:03,160 Is this. 61 00:04:10,940 --> 00:04:19,850 So what we can do is we can actually make this button ours if we wanted to, we can just. 62 00:04:21,960 --> 00:04:26,760 I'm going to go over here and a press option can be and that's just going to detach that instance and 63 00:04:26,760 --> 00:04:30,450 we'll be able to essentially do what we kind of want to with it. 64 00:04:31,010 --> 00:04:34,470 We'll have to do the same option B. You can also. 65 00:04:34,470 --> 00:04:38,280 Right click and detach instance so you can do that as well. 66 00:04:39,060 --> 00:04:41,730 OK, so I'm just going to bring that in. 67 00:04:46,000 --> 00:04:47,120 Two cards. 68 00:04:47,830 --> 00:04:49,750 I like it, that's good. 69 00:04:51,270 --> 00:04:54,850 OK, so we have our big button here that just add to cart. 70 00:04:55,470 --> 00:04:57,690 Let me turn off this grid so you can see it better. 71 00:04:59,750 --> 00:05:05,840 OK, and now a little description here, so I'm going to just. 72 00:05:06,890 --> 00:05:08,660 Go to my IPSUM plugin. 73 00:05:13,790 --> 00:05:15,750 You're like three sentences worth. 74 00:05:17,970 --> 00:05:19,080 OK. 75 00:05:19,380 --> 00:05:21,570 And 16 regular. 76 00:05:26,420 --> 00:05:31,230 Well, that's a little bit so maybe like 14 regular for text like that. 77 00:05:31,520 --> 00:05:32,260 OK. 78 00:05:33,730 --> 00:05:39,160 And obviously, it's not looking beautiful, beautiful, but I mean, we can start seeing, like, how 79 00:05:39,160 --> 00:05:40,590 the hierarchy of this page set up. 80 00:05:41,050 --> 00:05:47,710 So when they do come here, they're going to see this big, like call to action or see a button to instantly 81 00:05:47,710 --> 00:05:48,850 add this to our cart. 82 00:05:48,880 --> 00:05:54,670 They'll be able to like it if they want to look at all the details they need right out front will be 83 00:05:54,670 --> 00:05:57,620 able to even swipe through a carousel. 84 00:05:58,150 --> 00:05:59,500 What else should we give them? 85 00:05:59,950 --> 00:06:06,760 When I think of product pages, I'm thinking about reviews, definitely reviews. 86 00:06:07,960 --> 00:06:10,480 Let's think of how we can layout reviews. 87 00:06:12,230 --> 00:06:13,610 Let's go to our assets. 88 00:06:19,510 --> 00:06:20,500 Perfect. 89 00:06:22,900 --> 00:06:24,550 Actually, let's just grab that. 90 00:06:28,590 --> 00:06:30,240 We can detach this instance. 91 00:06:32,510 --> 00:06:35,030 We can just delete these, we don't need them. 92 00:06:36,960 --> 00:06:38,850 So I'd like to do sometimes, I mean. 93 00:06:39,900 --> 00:06:45,790 Because it's such a vague component library, it's not going to suit all our needs. 94 00:06:47,180 --> 00:06:54,510 I don't expect it to really, but we can just start using the components and then just like editing, 95 00:06:54,510 --> 00:06:55,430 no moving. 96 00:06:55,890 --> 00:07:01,320 We don't need to necessarily keep them the way they are just because I mean, at the end of the day, 97 00:07:01,320 --> 00:07:03,020 you need to use it the way it's going to work for you. 98 00:07:03,030 --> 00:07:06,810 So don't just stick to it even though it's a pain. 99 00:07:06,870 --> 00:07:09,840 So edit it in any which way you need. 100 00:07:10,680 --> 00:07:14,400 OK, so we have a name they just randomly came up with. 101 00:07:14,520 --> 00:07:18,600 What we can do is maybe have like an avatar. 102 00:07:18,630 --> 00:07:19,600 OK, perfect. 103 00:07:19,800 --> 00:07:22,020 I mean we can use a real image or we can just. 104 00:07:23,220 --> 00:07:24,560 You something like that for now. 105 00:07:26,880 --> 00:07:28,720 You like the name goes beside it. 106 00:07:28,840 --> 00:07:30,100 I believe it. 107 00:07:34,170 --> 00:07:35,060 OK. 108 00:07:45,680 --> 00:07:47,270 OK, that's good for now. 109 00:07:48,260 --> 00:07:49,880 This is just going to be. 110 00:07:53,330 --> 00:08:00,320 Confined to the size of the content and what we're going to do here is we're going to. 111 00:08:03,720 --> 00:08:04,620 Maybe like the date. 112 00:08:07,850 --> 00:08:12,290 Maybe it's a dated review, like we need to start thinking about these types of little. 113 00:08:13,260 --> 00:08:16,440 Pieces of content, so I want a day on here. 114 00:08:17,820 --> 00:08:20,340 We need a name, most definitely. 115 00:08:22,380 --> 00:08:26,310 Or user name or whatever we decide to go with. 116 00:08:27,090 --> 00:08:34,050 So the name can be the fact that we have our stars, so we have like a five star general one. 117 00:08:35,130 --> 00:08:37,350 We can even copy this down here and. 118 00:08:38,960 --> 00:08:42,180 Amazing, this can be like the title of the review. 119 00:08:42,800 --> 00:08:44,270 Amazing product. 120 00:08:46,580 --> 00:08:47,540 This poll that. 121 00:08:50,740 --> 00:08:57,950 Can copy this down here, so like you can tell, my workflow is pretty quick now that I have all the 122 00:08:57,950 --> 00:09:00,230 pieces I kind of need and like, there you go. 123 00:09:00,230 --> 00:09:09,110 We kind of have a review already built, so just don't get bogged down by too many details, worry about 124 00:09:09,110 --> 00:09:11,110 the type of content you're working with. 125 00:09:11,720 --> 00:09:19,670 So I'm going to just group this and call it review and put it right here and we can just copy and paste 126 00:09:19,670 --> 00:09:19,900 it. 127 00:09:21,620 --> 00:09:26,950 And right now I'm just going to think about, OK, three reviews if there's no here. 128 00:09:26,960 --> 00:09:28,100 Let me just fix this. 129 00:09:31,050 --> 00:09:34,560 Fix the constraint top and left is fine. 130 00:09:36,700 --> 00:09:38,610 OK, so there we go. 131 00:09:40,040 --> 00:09:43,700 Yeah, so just think about the type of content you need, like I was just thinking about reviews, what 132 00:09:43,700 --> 00:09:44,950 do I often expect? 133 00:09:44,960 --> 00:09:46,160 I expect the user's name. 134 00:09:46,160 --> 00:09:50,240 I expect like maybe an image, possibly not required. 135 00:09:50,920 --> 00:09:52,310 Definitely the reviews. 136 00:09:52,310 --> 00:09:55,620 So if we're going based off of stars, need that. 137 00:09:55,640 --> 00:09:59,830 Maybe like a title and some content, like their actual review is helpful. 138 00:10:00,200 --> 00:10:01,820 Maybe they have images in their reviews. 139 00:10:01,820 --> 00:10:04,430 So I need to maybe think about that in the future. 140 00:10:05,630 --> 00:10:08,840 But for now, for our VH1 or our version one, 141 00:10:11,720 --> 00:10:13,670 we're just going to stick to this. 142 00:10:13,940 --> 00:10:16,190 So maybe like there's a secondary button. 143 00:10:19,090 --> 00:10:27,160 And it says something along the lines of see more reviews and there you go. 144 00:10:27,790 --> 00:10:36,280 So we already have like our product information, we have reviews and I think maybe like the last kind 145 00:10:36,280 --> 00:10:38,230 of bit would be to have. 146 00:10:44,840 --> 00:10:54,860 Let's bring in this like I created this before, and we can just reuse it and call it like similar products. 147 00:10:56,180 --> 00:11:00,320 So if they don't like this product, maybe they'll find another one and they'll do like. 148 00:11:01,470 --> 00:11:06,600 And without the actual description. 149 00:11:07,880 --> 00:11:13,370 And there you go, I mean, we've just come up with our own product page pretty quickly, just by kind 150 00:11:13,370 --> 00:11:16,850 of like thinking about the details that we wanted on this page really quickly. 151 00:11:17,160 --> 00:11:17,570 Definitely. 152 00:11:17,570 --> 00:11:18,430 We needed a name. 153 00:11:18,440 --> 00:11:22,370 We need imagery and the ways to kind of customize that. 154 00:11:22,760 --> 00:11:25,070 I'm probably missing some things. 155 00:11:25,070 --> 00:11:26,300 I'm guaranteeing you. 156 00:11:26,300 --> 00:11:27,280 I'm missing some things. 157 00:11:27,280 --> 00:11:33,010 There's probably stuff like what happens if this certain product has like options like color. 158 00:11:33,020 --> 00:11:38,270 So we need to also think about that maybe sizing if it's like a shirt or something like that or shoes. 159 00:11:39,710 --> 00:11:42,260 So we need to think about all those different types of options. 160 00:11:42,260 --> 00:11:44,900 I think reviews is pretty solid for now. 161 00:11:45,380 --> 00:11:47,240 Similar products looks pretty solid. 162 00:11:47,780 --> 00:11:48,920 See more reviews. 163 00:11:48,920 --> 00:11:50,560 I have to think about that interaction. 164 00:11:50,570 --> 00:11:51,860 Will it go to a new page? 165 00:11:51,860 --> 00:11:53,320 Will it just expand? 166 00:11:54,230 --> 00:11:59,690 So there's definitely a lot of work to do here, but I think this is very good for the first part. 167 00:11:59,710 --> 00:12:04,730 So what I would do here is just kind of like bring your teammates in, get their feedback on this, 168 00:12:04,730 --> 00:12:08,560 you know, maybe even start testing with some people if you can, if you have the time. 169 00:12:09,260 --> 00:12:15,080 So this is how you make a quick product page and figure using our library. 170 00:12:16,110 --> 00:12:18,570 In the next video, we're going to create one more page.