00:00:07:14 - 00:00:08:10
This tutorial will

00:00:08:10 - 00:00:11:08
introduce you to products and categories
within Infigo

00:00:12:05 - 00:00:16:05
products come in various different types
ranging from basic stock products

00:00:16:12 - 00:00:20:16
that's akin to pick and pack products
to fully customizable

00:00:20:22 - 00:00:24:11
and design ready products
using Infigos, templates, editors

00:00:26:07 - 00:00:29:05
here will create
two of the simpler product

00:00:29:05 - 00:00:31:24
types
and group them together within a category.

00:00:32:06 - 00:00:35:08
And we'll discuss
some of the critical settings associated

00:00:35:08 - 00:00:39:18
with these areas.

00:00:39:18 - 00:00:46:04
So again,
navigate to our product management area.

00:00:46:04 - 00:00:48:19
So start searching for product management
and top left

00:00:49:12 - 00:00:55:17
and then go to that section.

00:00:55:17 - 00:00:56:20
This will show us details

00:00:56:20 - 00:00:59:26
of all of the products
currently added to the active storefront.

00:01:00:19 - 00:01:02:04
There isn't any
in this case at the moment,

00:01:02:04 - 00:01:10:24
so I'm just going to go to add new up
on the top right?

00:01:10:24 - 00:01:17:00
So enter a name for your new product,

00:01:17:00 - 00:01:19:23
then select the type of product
that you wish this to be.

00:01:20:13 - 00:01:22:26
So the default list contains stock

00:01:23:06 - 00:01:26:10
static pdf and mega edit type products.

00:01:26:21 - 00:01:30:10
More product types are available
but require enabling before

00:01:30:10 - 00:01:33:10
they appear in this list, and we'll cover
this up a little bit later on

00:01:34:17 - 00:01:34:25
for a

00:01:34:25 - 00:01:38:15
stock product, and that's the type
that will select here.

00:01:38:27 - 00:01:42:05
No additional configuration
or inputs are required

00:01:42:11 - 00:01:53:27
prior to clicking create.

00:01:53:27 - 00:01:57:12
So your product is now created
and you'll be taken to the product details

00:01:57:12 - 00:01:58:18
page.

00:01:58:27 - 00:02:02:03
The product details page is used to design
and populate

00:02:02:03 - 00:02:05:18
the frontend
landing page for that particular product.

00:02:06:11 - 00:02:10:27
Every product, regardless of type,
will have a product details page

00:02:11:06 - 00:02:17:20
and a corresponding
frontend product landing page.

00:02:17:20 - 00:02:21:06
So the first thing I'm going to do here
is click on Show on Home page.

00:02:21:18 - 00:02:24:24
Now this is not a requirement,
but we'll add the product

00:02:24:24 - 00:02:28:09
to a special section on the home page
called Featured Products.

00:02:28:27 - 00:02:31:15
During the developmental stage
of your storefront,

00:02:31:25 - 00:02:34:28
it gives easier access
to your key products.

00:02:34:28 - 00:02:36:12
on a live site is used to

00:02:36:12 - 00:02:38:23
draw attention to particular products.

00:02:38:23 - 00:02:42:17
The next area down
gives us several description editors

00:02:42:26 - 00:02:46:00
on the product details
page allowing you to design

00:02:46:00 - 00:02:49:10
different areas of your eventual product
landing page.

00:02:50:00 - 00:02:54:13
Each of these will be populated
by a rich editor input by default,

00:02:54:13 - 00:02:57:09
which just allows you to input
and design your text.

00:02:57:23 - 00:03:02:03
However, like we've seen in previous
tutorials, these can be switched to either

00:03:02:03 - 00:03:07:16
a Code Mirror editor for fluent HTML users
or the content template

00:03:07:16 - 00:03:09:07
editor tools.

00:03:12:14 - 00:03:13:08
in our example.

00:03:13:08 - 00:03:14:21
I'm just going to populate text

00:03:14:21 - 00:03:17:09
in some of those editors
which are further down the page,

00:03:18:03 - 00:03:23:01
still using the rich editor template
just so we can determine their location

00:03:23:06 - 00:03:27:01
on the eventual product landing page

00:03:28:21 - 00:03:30:12
once those are complete,
I'm just going to scroll

00:03:30:12 - 00:03:33:06
to the top of the page
and click Save and Continue. Edit

00:03:40:09 - 00:03:42:28
We can navigate directly to the front end

00:03:43:05 - 00:03:47:14
landing page for this particular product
by clicking on View Product page.

00:03:48:16 - 00:03:51:05
Now we know the differentiation
between storefront

00:03:51:14 - 00:03:54:11
and platform administrator accounts.

00:03:54:11 - 00:03:57:21
If you logged in as the storefront
administrator, you will be able

00:03:57:21 - 00:04:00:26
to view your products on the frontend,
assuming they are published.

00:04:01:13 - 00:04:04:22
However, you won't be able to do this
as a platform administrator.

00:04:05:04 - 00:04:09:18
As the platform administrators don't have
direct access rights to the front

00:04:09:18 - 00:04:14:14
end of an individual storefront
unless they are impersonating a user.

00:04:14:15 - 00:04:18:08
As we discussed previously.

00:04:18:08 - 00:04:21:12
So I'll view the product landing page

00:04:22:06 - 00:04:25:15
and we'll see the beginnings of the
development of our product landing page.

00:04:26:00 - 00:04:30:18
This stage is quite basic due
to a lack of input information.

00:04:30:18 - 00:04:33:18
We can see the product name along with

00:04:33:18 - 00:04:37:02
some of our basic descriptions with input
and the placeholder

00:04:37:07 - 00:04:43:26
for our eventual images
that we're going to position as well.

00:04:43:26 - 00:04:45:22
So let's start off with one of these
images.

00:04:45:22 - 00:04:47:10
If I go back to my

00:04:49:00 - 00:04:52:10
product details, page editor

00:04:52:10 - 00:04:54:23
and I'm going to navigate
to my Pictures tab,

00:04:54:23 - 00:04:57:10
which is about halfway along

00:05:01:11 - 00:05:04:04
now, this page gives you the ability
to upload one

00:05:04:04 - 00:05:08:08
or multiple images
to that particular product landing page.

00:05:08:08 - 00:05:11:12
So click on upload
a file underneath the pictures tab

00:05:11:25 - 00:05:13:27
and then just select a picture
from your machine.

00:05:14:22 - 00:05:17:13
Now for this particular
example, will not be

00:05:17:13 - 00:05:19:25
too focused on the sizing of images,

00:05:20:14 - 00:05:23:23
particular images that we want to use
as if we just doing this as an example.

00:05:24:13 - 00:05:27:24
But when you're actually doing this
for real on your own products, you do

00:05:27:24 - 00:05:31:16
want to make sure that all the products on
the images are sized equally.

00:05:32:06 - 00:05:34:24
They've got the correct ratio
for your particular web page,

00:05:35:18 - 00:05:37:23
and they'll need to be designed to such.

00:05:42:12 - 00:05:44:07
So I've selected an image I want to use,

00:05:44:07 - 00:05:48:01
but we need to make sure that it's
actually being utilized by the product.

00:05:48:10 - 00:05:51:23
At this stage, we've only uploaded
the image we might want to use.

00:05:52:13 - 00:05:56:17
I want to click on Add Product Picture
in order to finalize that selection

00:05:58:25 - 00:06:01:05
and then we can repeat the process
if we want multiple

00:06:01:05 - 00:06:17:16
images, click

00:06:17:16 - 00:06:20:14
on Save or Save and continue
edit at the top of the page

00:06:20:27 - 00:06:23:19
and then either reload
or refresh the product

00:06:23:19 - 00:06:25:03
landing page

00:06:27:28 - 00:06:28:15
and then you'll see.

00:06:28:15 - 00:06:30:20
Our page is now updated
to show a main image

00:06:33:19 - 00:06:35:08
and then an area where we can select

00:06:35:08 - 00:06:45:19
between the image being shown.

00:06:45:19 - 00:06:48:10
So next
we'll talk briefly about display settings.

00:06:48:10 - 00:06:54:07
So that's an additional tab
which is on our product details page.

00:06:54:07 - 00:06:55:13
So this page can be used to

00:06:55:13 - 00:06:59:06
change the design
and layout of your product landing page.

00:06:59:06 - 00:07:04:09
For this particular product, it contains
settings such as changing the location

00:07:04:09 - 00:07:07:14
of different description boxes
and showing additional links on

00:07:07:14 - 00:07:08:17
the page

00:07:10:19 - 00:07:12:06
will not be describing these settings

00:07:12:06 - 00:07:15:13
in detail as part of the Rapid Build
Tutorial series.

00:07:15:25 - 00:07:18:26
However, additional
tutorials are available

00:07:19:03 - 00:07:27:08
where you can take a look at these
in greater detail.

00:07:27:08 - 00:07:29:14
Okay,
so let's create a different product type.

00:07:29:14 - 00:07:31:18
Now we've finished with our product
to begin with.

00:07:32:09 - 00:07:36:02
I'm going to go to back to Product List
and then click on Add New.

00:07:36:02 - 00:07:36:16
You have to get

00:07:40:02 - 00:07:42:26
this time
we'll create a static PDF product,

00:07:43:13 - 00:07:45:25
so switch the product type to static PDF

00:07:46:25 - 00:07:56:08
and enter a name.

00:07:56:08 - 00:07:58:22
We can see that
when we switch to static PDF,

00:07:59:05 - 00:08:02:26
an additional button appears
asking us to upload the PDF

00:08:02:26 - 00:08:05:10
which you want to associate
with this particular product.

00:08:06:24 - 00:08:10:00
So static PDF products
allow users to purchase

00:08:10:00 - 00:08:14:14
a static piece of printed artwork
which is not editable.

00:08:14:14 - 00:08:21:07
So for example, it might be an artist
print or a static brochure.

00:08:21:07 - 00:08:25:24
All we need to do is click on upload
or click to upload and then find the PDF

00:08:25:24 - 00:08:27:12
that we want to connect to it.

00:08:27:12 - 00:08:34:04
Once that's done, just click on Create.

00:08:34:04 - 00:08:37:05
So what you'll be presented
with is a near identical product.

00:08:37:06 - 00:08:38:19
Details page, to what

00:08:38:19 - 00:08:42:16
We saw to what we saw
with the stock product.

00:08:43:05 - 00:08:46:08
So this product details
page is still dedicated

00:08:46:08 - 00:08:50:07
to the design of the product landing page.

00:08:50:07 - 00:08:51:09
So once again, I'm going to say

00:08:51:09 - 00:08:54:18
show this on home page
just for ease of use later on

00:08:55:08 - 00:09:00:01
and then give that a save.

00:09:00:01 - 00:09:03:00
Now, settings
related to the specific product type

00:09:03:09 - 00:09:06:23
can often
be found to the top right of this product.

00:09:06:23 - 00:09:08:21
Details page.

00:09:08:21 - 00:09:12:01
It is access, generally speaking,
to a slightly lighter colored button

00:09:12:13 - 00:09:17:08
and you can see it's the product type
with config written on the end.

00:09:17:08 - 00:09:19:06
these will take you to product type

00:09:19:06 - 00:09:26:09
specific configuration options
for this particular product.

00:09:26:09 - 00:09:29:27
So we can see, for example, that these are
the options available for a static PDF

00:09:30:05 - 00:09:34:10
product configuration things
such as uploading a new PDF.

00:09:34:10 - 00:09:36:25
So utilized for this product,

00:09:36:25 - 00:09:40:15
changing the preview
that we provide to the user

00:09:40:15 - 00:09:42:09
and that kind of thing

00:09:44:01 - 00:09:46:03
you'll want to return
to the product details page.

00:09:46:27 - 00:09:54:25
Just click on Product
Config, the top of the screen.

00:09:54:25 - 00:09:56:20
Let's take a look
at this product on the frontend.

00:09:56:20 - 00:09:58:21
So I'm going to click on
View Product Page again

00:10:00:10 - 00:10:03:26
where we can see that generally speaking
this is very similar layouts.

00:10:04:09 - 00:10:07:11
However,
because we're using a static PDF product,

00:10:07:23 - 00:10:11:14
the default layout of this
will show the uploaded PDF

00:10:11:22 - 00:10:15:26
as a preview over on the left hand side
instead of a product image.

00:10:16:11 - 00:10:25:06
Everything else is largely the same.

00:10:25:06 - 00:10:26:24
So the next thing we want to show you here

00:10:26:24 - 00:10:29:15
is how to enable additional product types.

00:10:30:02 - 00:10:31:06
This is quite easy to do.

00:10:31:06 - 00:10:38:03
So if we just navigate to our menu
over here, go to admin area settings

00:10:43:17 - 00:10:45:21
and then under the product type section,

00:10:45:21 - 00:10:50:06
you can enable other types of products
that are available within Infigo.

00:10:50:06 - 00:10:51:17
With the exception of mega

00:10:51:17 - 00:10:55:09
edit products, these will not be covered
as part of the Rapid Build series.

00:10:55:18 - 00:10:58:10
However, many of them have additional
tutorial resources

00:10:58:17 - 00:11:01:28
available within the Infigo academy.

00:11:01:28 - 00:11:03:25
It's just a case
of clicking the product type

00:11:03:25 - 00:11:14:29
that you want to be available
and then clicking save.

00:11:14:29 - 00:11:19:00
So next we're going to navigate
to creating categories.

00:11:20:03 - 00:11:22:25
So on the search menu up on the top left

00:11:22:25 - 00:11:25:17
type manage categories

00:11:25:17 - 00:11:27:18
and then go to that screen.

00:11:28:08 - 00:11:30:25
So categories
are a means of grouping products

00:11:30:25 - 00:11:35:00
that you wish to be associated with one
another on your particular storefront.

00:11:35:24 - 00:11:38:24
So for example,
you may have a stationery category

00:11:39:12 - 00:11:42:06
or a brochure category containing

00:11:42:11 - 00:11:49:13
related products.

00:11:49:13 - 00:11:55:10
Like products, categories
have customizable landing pages.

00:11:55:10 - 00:11:58:26
So if we click on Add
New to create a new category,

00:11:59:25 - 00:12:00:05
we get

00:12:00:05 - 00:12:03:13
taken
immediately to a category details page.

00:12:03:13 - 00:12:04:18
So this is very similar

00:12:04:18 - 00:12:07:12
to the product details page
that we've been working on previously.

00:12:07:26 - 00:12:08:18
On this page

00:12:08:18 - 00:12:13:11
you can input imagery and descriptions
associated with that particular category.

00:12:13:11 - 00:12:16:23
As with the product details page,
you can also construct these pages

00:12:16:23 - 00:12:19:20
utilizing content template functionality

00:12:19:28 - 00:12:25:24
should you wish to do so.

00:12:25:24 - 00:12:29:21
So in our example here, I'm just going
to do a couple of simple things here.

00:12:30:04 - 00:12:36:21
I'm going to make it so that we can see
this category on the home page.

00:12:36:21 - 00:12:39:24
As with products,
this isn't a requirement.

00:12:39:24 - 00:12:43:12
As such, however, it will make
the category more easily accessible

00:12:43:18 - 00:12:49:03
whilst we're setting up
and configuring our storefront.

00:12:49:03 - 00:12:52:17
Then additionally,
we have this parent category section here,

00:12:53:14 - 00:12:56:26
so categories can be subcategorised

00:12:56:26 - 00:13:00:16
inside other categories
which are also known as parent categories.

00:13:01:07 - 00:13:03:25
So you can use this option
to specify the category

00:13:03:25 - 00:13:07:03
you wish to have as the parent category.

00:13:07:03 - 00:13:08:12
So i.e.

00:13:08:12 - 00:13:17:28
the next level up in the chain.

00:13:17:28 - 00:13:20:21
So I'm just going to enter
a name for our category here

00:13:26:15 - 00:13:27:05
and then I'm

00:13:27:05 - 00:13:30:17
going to scroll down
and upload a category image.

00:13:30:29 - 00:13:33:23
So this is not a specific requirement.

00:13:33:23 - 00:13:36:00
You can create the category
without an image.

00:13:36:00 - 00:13:39:14
However, uploading
no image will result in this place holder

00:13:39:14 - 00:13:41:24
being displayed instead

00:13:49:27 - 00:13:50:09
and scroll

00:13:50:09 - 00:13:52:29
to the top of the page
and click Save and continue. Edit

00:13:54:25 - 00:13:56:08
That's our category created.

00:13:56:08 - 00:13:57:23
All that’s left to do here

00:13:57:23 - 00:14:00:23
is to actually add products
to that particular category.

00:14:01:21 - 00:14:04:19
So to do this,
we're going to navigate a couple of tabs

00:14:04:19 - 00:14:08:15
over to the right on our category details
page to the products tab.

00:14:10:00 - 00:14:12:04
We can see at the moment
that there's no products

00:14:12:04 - 00:14:15:18
associated with this particular category.

00:14:15:18 - 00:14:17:12
Click on Add New Product.

00:14:17:12 - 00:14:18:12
You'll be shown a list

00:14:18:12 - 00:14:21:12
of all of the available products
on this particular storefront.

00:14:22:04 - 00:14:24:23
And then it's simply a case
of checking the products

00:14:24:23 - 00:14:30:04
that you want to add to the category
and clicking on Save.

00:14:30:04 - 00:14:33:10
As with products,
the layout of the category landing page

00:14:33:10 - 00:14:43:07
can be modified
using the display Settings tab.

00:14:43:07 - 00:14:46:05
Okay,
so let's go ahead and view our handiwork.

00:14:46:05 - 00:14:48:03
So I'm going to go to this public store

00:14:48:03 - 00:14:51:23
button at the top of the screen
that we utilized previously,

00:14:52:04 - 00:14:56:08
and that will take us directly
to the homepage of our storefront.

00:14:57:22 - 00:15:00:18
Now, if you selected Show on Home
Page for your category,

00:15:01:02 - 00:15:03:27
that will be shown in this featured
category

00:15:03:27 - 00:15:08:16
section.

00:15:08:16 - 00:15:13:07
Also further down this page, you'll find
that we have a featured product section.

00:15:13:13 - 00:15:20:07
Again, if you specified show on homepage.

00:15:20:07 - 00:15:21:27
So let's take a look at this
in more detail.

00:15:21:27 - 00:15:26:16
If we go to our featured category section
and click on that category,

00:15:26:16 - 00:15:29:24
that will take us to the actual category
landing page.

00:15:30:19 - 00:15:33:23
Now again, we've not specified much
in the way of customization options

00:15:33:23 - 00:15:36:09
here,
so it's all my basic format at the moment.

00:15:36:25 - 00:15:39:14
But you can see
it is showing us details for the products

00:15:39:20 - 00:15:43:06
that we've put inside that category.

00:15:43:06 - 00:15:45:08
Again, clicking on one of those product
links

00:15:46:17 - 00:15:51:13
will take us to the relevant product
landing page.

00:15:51:13 - 00:15:52:12
So congratulations.

00:15:52:12 - 00:15:55:12
You've now created two new products
and structured them

00:15:55:12 - 00:16:00:11
inside a category.