00:00:12:19 - 00:00:13:24
This tutorial aims

00:00:13:24 - 00:00:16:17
to introduce you to the page
layout functionality

00:00:16:24 - 00:00:21:21
within the Infigo
front end of your storefront.

00:00:21:21 - 00:00:25:14
So a few bits of terminology
to be aware of before we begin.

00:00:25:28 - 00:00:28:17
You might hear me talking about something
called a layout

00:00:29:01 - 00:00:33:22
that is sort of the overall structure
and configuration of your page.

00:00:34:06 - 00:00:36:20
So for example,
the fact that we have a header

00:00:36:20 - 00:00:39:10
at the top of our page,
the fact that we have a footer,

00:00:40:19 - 00:00:45:00
that we have various bits of content,
we might consider that as a layout.

00:00:45:11 - 00:00:49:28
We might have numerous layouts
that we can switch between.

00:00:50:07 - 00:00:53:09
You might hear me talking about
something called page groups.

00:00:53:20 - 00:00:56:04
That's a group of pages on your storefront

00:00:56:16 - 00:00:59:13
which follow the same layout structure.

00:01:00:05 - 00:01:04:15
So this could be, for example,
product pages or category pages.

00:01:04:26 - 00:01:09:21
If you navigate to any of those pages,
when you looking at your store front

00:01:09:21 - 00:01:12:18
frontend, then you may find that their

00:01:13:16 - 00:01:18:03
that layout is all going to match
as you would most likely expect.

00:01:18:04 - 00:01:22:10
You'd want consistency between your pages.

00:01:22:29 - 00:01:25:09
You might hear me
talking about a container.

00:01:25:24 - 00:01:31:04
So this is an area within your layout,
and it might include elements

00:01:31:04 - 00:01:35:06
such as the header, the footer
or the main content.

00:01:35:27 - 00:01:40:02
So for example, we've got some information
for our header up here.

00:01:40:13 - 00:01:41:29
This would be in the

00:01:43:28 - 00:01:45:16
header container

00:01:45:16 - 00:01:48:23
and we could add more information
to the header container.

00:01:49:08 - 00:01:51:27
We could take information away
from the header container.

00:01:52:08 - 00:01:54:20
It just means that we can structure
where things appear

00:01:54:29 - 00:01:58:01
on our particular layout.

00:01:59:14 - 00:02:03:09
And then the last bit of terminology
we need to look at is a module.

00:02:03:20 - 00:02:07:22
So this is an element
that sits within or relative to containers

00:02:08:06 - 00:02:12:01
and adds information
or functionality to your page.

00:02:12:23 - 00:02:16:09
So this could include, for example,
it could be a search bar,

00:02:16:24 - 00:02:21:27
product navigation, imagery, text,
whatever you need it to be.

00:02:22:08 - 00:02:25:10
But modules sit within the containers

00:02:26:20 - 00:02:29:24
and actually allow is to put information

00:02:29:27 - 00:02:33:13
on our store front page.

00:02:36:04 - 00:02:37:10
So to help you structure

00:02:37:10 - 00:02:41:14
your storefronts pages
in a consistent manner, the layout manager

00:02:41:14 - 00:02:47:07
allows you to assign different layouts
to different page groups.

00:02:48:08 - 00:02:49:07
So Infigo

00:02:49:07 - 00:02:52:20
facilitates consistency
across the page on your site

00:02:52:28 - 00:03:02:25
by ensuring that page groups
utilize a shared layout.

00:03:03:14 - 00:03:05:20
So what we're going to do in this
particular video

00:03:06:12 - 00:03:10:11
is we're going to load two products

00:03:10:21 - 00:03:13:08
that are on our storefront,
a separate taps.

00:03:14:07 - 00:03:18:06
So if I just load up a couple of products
and the reason I'm doing this

00:03:18:06 - 00:03:22:14
is that we want to be able to compare
when we're changing our layout options.

00:03:23:02 - 00:03:26:08
Because we're kind of looking at product
groups here, we want to make sure

00:03:26:08 - 00:03:29:21
that the changes are consistent across

00:03:29:21 - 00:03:32:04
all products on our storefront.

00:03:32:21 - 00:03:35:06
So if I look at this one here,

00:03:35:06 - 00:03:37:10
maybe this one as well.

00:03:37:10 - 00:03:37:23
So we'll see.

00:03:37:23 - 00:03:41:27
I've got one product and two products
which look very different

00:03:42:05 - 00:03:52:28
but still follow
the same general page layout.

00:03:56:13 - 00:03:57:00
Okay.

00:03:57:00 - 00:04:01:15
And then what we're going to do next is go
on the show layout administration panel.

00:04:01:29 - 00:04:06:00
This is this icon
here on the bottom left of your page

00:04:06:08 - 00:04:09:03
when you are viewing
the front end of your storefront.

00:04:09:18 - 00:04:11:28
Now, general users won't see this.

00:04:11:29 - 00:04:14:13
You only see this
if you're logged in as an administrator.

00:04:15:14 - 00:04:18:22
And if you click on this,
you get this new panel appearing

00:04:18:22 - 00:04:24:13
at the bottom of the screen,
which has numerous bits of information.

00:04:26:29 - 00:04:29:26
So on the left hand side,
we have the ability to select

00:04:29:26 - 00:04:31:25
between our page layouts.

00:04:31:25 - 00:04:35:02
This is what we're going to be focusing on
in this particular tutorial.

00:04:35:28 - 00:04:38:25
And then on the right hand side,
we have the ability to select

00:04:39:11 - 00:04:43:03
between containers and adds modules
to containers, for example,

00:04:43:23 - 00:04:48:13
that functionally will be covered
in a different tutorial.

00:04:51:19 - 00:04:52:15
So as I

00:04:52:15 - 00:04:55:24
mentioned, focusing on the left,
the list on the left hand side,

00:04:56:11 - 00:04:59:06
it gives us the option
to select our page layout.

00:05:00:00 - 00:05:04:18
Now if you go provides you
with a set of pre

00:05:04:19 - 00:05:07:07
created layouts and you can

00:05:08:12 - 00:05:11:07
see all the ones that are available
by clicking on the dropdown list.

00:05:11:26 - 00:05:14:03
And those are
all of our available layouts.

00:05:15:01 - 00:05:17:22
And when those are applied,
your current page

00:05:17:22 - 00:05:21:01
will be reloaded
with the new utilize layout.

00:05:21:17 - 00:05:23:28
So you'll see at the moment
I'm on column one.

00:05:24:20 - 00:05:27:00
If I switch to

00:05:27:00 - 00:05:29:10
one column
B, for example, and change layout,

00:05:29:26 - 00:05:32:00
the page will automatically reload.

00:05:32:21 - 00:05:34:18
I just happened
to have chosen the layouts,

00:05:34:18 - 00:05:36:12
which is pretty much identical.

00:05:36:12 - 00:05:43:10
So let me pick another one.

00:05:47:21 - 00:05:48:08
So there we go.

00:05:48:08 - 00:05:51:03
For example,
let's switch that to a two column layout.

00:05:51:16 - 00:05:52:13
And you can see that

00:05:52:13 - 00:05:55:15
the default configuration
for my two column layout is to have

00:05:55:15 - 00:05:57:15
all the information on the left hand side.

00:05:57:15 - 00:06:00:20
But I have my category search
over on the left hand side,

00:06:00:20 - 00:06:05:07
and that's just how that layout
is currently configured.

00:06:05:27 - 00:06:08:11
Please do keep in mind
that many of the layouts

00:06:08:11 - 00:06:11:03
that are in this list,
they have been left unconfigured.

00:06:11:15 - 00:06:14:16
Hence why I was just clicking
a few through a few of those.

00:06:14:16 - 00:06:16:19
There
and the layout wasn't really changing.

00:06:17:28 - 00:06:20:20
They are basically awaiting your input.

00:06:20:21 - 00:06:23:18
They serve as a blank slate
for you to work with.

00:06:23:26 - 00:06:26:00
If you want to make your own custom
layouts.

00:06:27:22 - 00:06:32:07
We do also recommend sticking with any
layout that begins with one column or

00:06:32:08 - 00:06:36:06
two column, as
these are the officially supported layouts

00:06:36:06 - 00:06:38:16
at present.

00:06:44:15 - 00:06:44:26
Okay,

00:06:44:26 - 00:06:48:21
so I switch this particular product
to a two column layout.

00:06:49:03 - 00:06:52:16
What we actually want to do
now is to confirm that

00:06:53:04 - 00:06:56:28
that layout is being applied
to our entire product page group.

00:06:57:14 - 00:07:01:15
So if I go to my other products
that we have loaded and refresh,

00:07:02:01 - 00:07:05:04
that should now
automatically be using that page layout.

00:07:05:04 - 00:07:08:10
So you can see my category, which is now
appeared on the left hand side.

00:07:09:06 - 00:07:10:10
So that's just confirming

00:07:10:10 - 00:07:13:18
that these page groups
are all linked with the same layout.

00:07:14:05 - 00:07:16:24
And that doesn't just apply to products

00:07:16:24 - 00:07:22:04
or the things that fall within our page
groups could be category

00:07:22:04 - 00:07:28:06
pages, content pages, accounts,
pages, basket pages, blog pages.

00:07:29:19 - 00:07:31:25
All of those will be will be linked
together

00:07:32:03 - 00:07:35:07
as you would expect them to be.

00:07:36:06 - 00:07:38:11
In the next tutorial,
we're going to look at actually

00:07:38:11 - 00:07:40:13
how to modify our page layouts.

00:07:40:27 - 00:07:44:08
But for now, I'm just going to revert
my products back to our

00:07:45:03 - 00:07:55:01
default one column layout.