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.
