WL_Catalog_and_Product_1280x720.mp4

00:00:00

In this tutorial, I'm going to be explaining the catalog widget as well as the product widget both in the same tutorial because they're very closely related

00:00:10

The catalog lets you sell multiple products online

00:00:14

As you can see here, this is a demo sample site just for vintage accessories like rings and women's necklaces and hats

00:00:26

And when you create the catalog, first thing you're going to see is this is going to be blank and you can click add a new item to the list

00:00:36

And this is where you would create your individual products

00:00:40

So for example, let's just look at these ones to see how they work

00:00:44

This one is $50 for the ring with an original price of $75

00:00:50

And if you notice here, that original price is crossed out

00:00:53

Anything you put in here is going to be crossed out and it's going to show this actual price instead

00:00:58

So this is actually for $50

00:00:59

It looks like it's on sale

00:01:01

So that's the illusion

00:01:02

You can add shipping costs that will be automatically calculated and the maximum number of quantities

00:01:07

Here is where you can add different options like if you want different sizes or colors

00:01:13

You can enter size here or color here

00:01:16

And then the option choices you can do like small, medium, large or the different color options available

00:01:21

And then down here is where you would enter your title, your subtitle, and then the abstract

00:01:26

The abstract is what's shown initially in the catalog

00:01:30

And then the main text is what would show up when you actually open it

00:01:42

So if you were to open this up, there's the main text right there

00:01:46

You can add your images right here

00:01:52

If you add multiple images, it'll automatically create a slider that will slide back and forth

00:01:57

And then here is where you would adjust your slider settings

00:02:03

And you can even add a video as well if you wanted

00:02:07

The buttons, you can add a button to each product that will maybe like link you to a different place or send an email, many different options and buttons

00:02:16

And those are gone over in the buttons tutorial

00:02:19

And then here is the SEO and the open graph

00:02:24

This is for like search engine optimization and Facebook and social media and that's gone over in a separate tutorial

00:02:31

Once you have all of your information and all of your product, it's very simple to just upload the picture, tell a bit about the product, set your prices right here

00:02:41

Once everything is set, make sure it's saved and then you would go back to the main catalog

00:02:46

You can do that either by clicking the catalog up here in the menu or going down and clicking the back button down here

00:02:53

Once you're back in the main catalog, you can add a new item and then you would just simply add each product as you go down

00:03:02

It'll create them with the price

00:03:06

Here is where you would add your initial title and the subtitle

00:03:14

This hide add to cart button, what this does is this actually hides the little cart so if you want it to maybe just test everything, make sure all the products look good

00:03:27

Everything is looking nice

00:03:29

You can hide this and then you can see now it's all gone

00:03:34

You can update everything, put all your list items, make sure everything's looking real nice, make sure everyone's happy with it, and then it's a very simple matter of just switching that off and that'll make everything

00:03:45

available for purchase

00:03:48

Well, that is after you've set up your e -commerce in order to actually set those purchases and that has gone over in the e -commerce tutorial

00:03:54

But as far as the rest of the catalog, we have search options

00:04:01

So if you click this, this will actually upload a little search bar, which is pretty neat

00:04:08

So people would be able to search if you have multiple pages

00:04:10

That helps as well

00:04:11

And then down here is where you would organize the options for the multiple pages

00:04:16

And then here you can add different tabs that will open up in each option within each product

00:04:24

Like if you wanted to show it a map or a calendar, you can do that as well

00:04:28

And then RSS is for uploading from an RSS feed, that's gone over in the RSS tutorial

00:04:36

This list style and layout will let you determine how it looks on mobile versus desktop, which is pretty neat

00:04:43

You can have each one separate

00:04:45

So for example, if I wanted to have two columns for mobile, you would just simply change this to two

00:04:53

And then instead of being all in one line, it'll now do it in sections of two, which is pretty neat

00:05:00

And you can separate them differently for mobile versus desktop

00:05:04

Like I said, you can have the image above below or to the left or right of the text and mobile versus desktop differently

00:05:10

And then whether or not you want to open it in a modal or a page, the modal is the thing that pops up here

00:05:16

See how it's a separate page that kind of pops up and lets you easily close out and go back to it

00:05:21

Whereas if you open it up in a page, it'll open up in a separate page that they would then have to click the back button to go back to the main list

00:05:43

And then a cordian is just a different look

00:05:46

The way it organizes it, you can collapse the cordian and different stuff

00:05:49

And then the additional options let you determine whether or not they have to be logged in to actually see and purchase anything

00:05:56

And whether or not the cart even shows up on mobile or desktop

00:05:59

And additional styles are pretty similar to many of the other widgets that let you determine the desktop space

00:06:06

You want to take up less space on a desktop and then change the different margins

00:06:09

You can also determine like a background where this whole section would have a background if you want to set an image or a color or even a video

00:06:18

And different animation styles where it fades in from the top

00:06:22

So it's really easy to just make all your settings, list all your items out here

00:06:27

And then once it's all set, then you would turn on your e -commerce and just simply watch the e -commerce video in order to figure out how to set that up

00:06:34

What we're going to do now is we're actually going to do this separate product page, not separate product page, separate product widget

00:06:41

So if you go back to the main page and let's say that you have just one product you want to sell, it's very easy to simply add a single product

00:06:49

You would go to add a widget and then go down to product here

00:06:52

And this is a single product that you just can buy right away

00:06:55

And you'll notice that everything's pretty much the same here

00:06:59

So you would simply enter your price, your $50 and the original price of $100

00:07:05

You can have your title here and then upload your text and images of the product

00:07:16

So let's say I wanted to sell this wine

00:07:21

And then now if you scroll down below this initial catalog, we have see the single product right here

00:07:30

There's all the info in the text and obviously you'd probably stylize it

00:07:35

You can stylize the text to make it match

00:07:37

You would do all that right here

00:07:38

You can adjust the size, the font, the color of everything

00:07:44

And down here is if you have multiple pictures, you can adjust the different slides and slider settings

00:07:53

And then you'll see here everything else is the same as the previous widget because it's another product

00:08:00

It's just a single product

00:08:01

So you wouldn't have that list, but you can still do the mobile desktop, still all the additional styles and widgets

00:08:08

So once you have that set, then you would go to your e -commerce, like I said, watch that video

00:08:15

And the product and catalogs are very easy to use