00:00:07:01 - 00:00:09:08
This part of the tutorial series,
we're going to look at
00:00:09:08 - 00:00:13:12
modifying the appearance
and content of your storefront.
00:00:14:15 - 00:00:18:01
So to begin, we'll go to our Appearance
Settings section.
00:00:18:27 - 00:00:21:16
So over on the left hand
side, you've got a list
00:00:21:16 - 00:00:24:15
of all the different areas
within your Infigo admin area.
00:00:24:29 - 00:00:27:28
However you want the easiest way to access
many of these areas,
00:00:27:28 - 00:00:30:02
if you know the name is,
just search for them
00:00:31:07 - 00:00:33:12
to search for appearance settings
00:00:33:12 - 00:00:35:19
and then click on that section.
00:00:38:08 - 00:00:38:29
Now, whilst
00:00:38:29 - 00:00:42:03
we configured
many of the initial appearance options
00:00:42:03 - 00:00:47:07
during the creation of the storefront,
we may wish to modify it at a later date.
00:00:47:19 - 00:00:50:18
And what of these appearance options
that we did
00:00:50:18 - 00:00:53:26
modify are located in this appearance
settings screen.
00:00:54:20 - 00:00:59:08
So for example, one thing I might want
to do is to amend the logo white option.
00:00:59:18 - 00:01:01:28
So that means
we've got a contrasting logo.
00:01:01:29 - 00:01:04:01
If we've got a dark background.
00:01:04:01 - 00:01:05:28
Now elsewhere on this page,
00:01:05:28 - 00:01:12:21
you'll find a lot of the options
related to your general storefront theme.
00:01:13:03 - 00:01:16:16
So this includes things such as logo
selection, as we've seen color
00:01:16:16 - 00:01:20:14
selections, font selections,
styling choices.
00:01:21:03 - 00:01:24:14
This is probably your first location
if you're looking for general styling
00:01:24:14 - 00:01:27:09
of your storefront.
00:01:31:00 - 00:01:31:10
Next,
00:01:31:10 - 00:01:33:24
we're going to navigate to content pages.
00:01:34:19 - 00:01:37:10
So again, we can use our search box over
on the top left
00:01:38:00 - 00:01:40:26
and click on content pages.
00:01:40:26 - 00:01:42:20
So this is an area where you can create
00:01:42:20 - 00:01:46:00
additional supplementary pages
on our storefront.
00:01:46:20 - 00:01:48:27
These are additional pages of information
00:01:48:27 - 00:01:52:03
which may be considered supplementary
to our core content,
00:01:52:20 - 00:01:56:17
such as, for example,
some of the pre created content pages
00:01:56:26 - 00:02:05:00
such as Contact US and about us pages,
and we can create new content pages
00:02:05:00 - 00:02:11:02
if required by going on this add
new button on the top right?
00:02:11:02 - 00:02:12:14
And then we get this page here,
00:02:12:14 - 00:02:15:29
which is just allowing us
to specify the content of that page.
00:02:16:19 - 00:02:19:12
The primary thing we need
to import is the system name
00:02:26:14 - 00:02:28:20
and then click on Save and continue
to edit
00:02:29:25 - 00:02:30:17
the system name.
00:02:30:17 - 00:02:33:16
Just give the system something
to relate to this particular page.
00:02:34:16 - 00:02:38:17
You can also see that's been utilized
in the construction of the URL
00:02:38:17 - 00:02:42:03
for that particular page as well.
00:02:42:03 - 00:02:43:25
Now, whilst
00:02:43:25 - 00:02:47:27
content pages
are an important part of our Infigo sites,
00:02:47:27 - 00:02:50:29
they're not critical nor a necessity.
00:02:51:26 - 00:02:55:13
Introducing you to content pages
at this early stage
00:02:55:20 - 00:02:58:28
has instead been done
due to its effectiveness in introducing
00:02:58:28 - 00:03:02:12
a much more important bit of functionality
within your Infigo system,
00:03:02:23 - 00:03:04:25
which is content templates.
00:03:06:17 - 00:03:10:00
So content templates enable
the creation of beautiful storefront
00:03:10:00 - 00:03:14:20
content without having to tackle
the specialized topic of HTML coding.
00:03:15:12 - 00:03:19:05
These features are specifically designed
to make storefront creation accessible
00:03:19:05 - 00:03:23:26
to Infigo users from a range of different
backgrounds, not just web developers.
00:03:24:28 - 00:03:27:25
Content templates
allow you to construct website content
00:03:28:13 - 00:03:32:27
using intuitive building
blocks and context relevant settings
00:03:33:19 - 00:03:37:29
Infigo provides pre-made default templates
to get you started,
00:03:38:09 - 00:03:42:06
but more advanced users
can actually create fully customized
00:03:42:18 - 00:03:47:03
content templates
to reuse over and over again.
00:03:47:27 - 00:03:52:00
So the concept of content templates
can be used all over
00:03:52:13 - 00:03:55:15
your Infigo sites
to build out your site content.
00:03:55:28 - 00:03:59:15
So this includes things
such as content pages as we've seen here.
00:04:00:00 - 00:04:03:03
They can be used on your home
page, product pages,
00:04:03:03 - 00:04:06:20
email templates,
category pages and much, much more.
00:04:07:05 - 00:04:10:00
Now, of course, at this stage
we've not covered most of those things.
00:04:10:09 - 00:04:15:12
Just to give you an understanding that
content templates can be used sitewide.
00:04:15:12 - 00:04:19:22
Generally speaking, wherever you see
this option here, which is body type
00:04:19:22 - 00:04:25:01
editor or body editor type, you'll be able
to select content templates.
00:04:25:01 - 00:04:25:16
Editor
00:04:27:05 - 00:04:30:04
Also available in this dropdown is a Code
Mirror editor.
00:04:30:13 - 00:04:33:06
This may be more suitable
for those with the skills to actually
00:04:33:06 - 00:04:36:09
write HTML themselves.
00:04:36:09 - 00:04:39:02
In this case, we're going to stick
with content template editors.
00:04:39:21 - 00:04:43:12
So I'm going to click on that option
and then confirm that I want to switch
00:04:43:12 - 00:04:50:17
to content templates.
00:04:51:22 - 00:04:53:23
Now the next thing we want to do
is to select
00:04:53:23 - 00:04:57:08
a content template
to utilize for this particular page.
00:04:57:26 - 00:05:00:08
So we have a list of available templates
here.
00:05:00:20 - 00:05:02:19
These may be context dependent.
00:05:02:19 - 00:05:06:28
So if you're somewhere
where you're amending your header
00:05:06:28 - 00:05:08:06
for your website, for example,
00:05:08:06 - 00:05:11:21
you might see a header content templates
or a footer.
00:05:12:19 - 00:05:16:02
In this case, we've got a few which are
applicable to this particular location.
00:05:16:16 - 00:05:19:17
And now we're going
to select the builder option.
00:05:23:28 - 00:05:26:04
So the builder content template uses
00:05:26:04 - 00:05:30:14
a building block style system
for generating page content.
00:05:31:10 - 00:05:33:14
You first create a section
00:05:33:14 - 00:05:35:17
using a visually distinct,
00:05:36:10 - 00:05:39:11
separate area on your web page.
00:05:41:01 - 00:05:43:07
Within that section, you'll then specify
00:05:43:07 - 00:05:46:11
a layout.
00:05:47:20 - 00:05:50:04
This is for information
such as the number of columns
00:05:50:04 - 00:05:53:12
that you wish, the contents
of that section to be split into.
00:05:54:11 - 00:05:57:15
And then within the columns
that are specified by the layout,
00:05:57:24 - 00:06:00:15
you can
then add individual bits of content.
00:06:01:08 - 00:06:04:13
So content offers
a huge range of input types, such
00:06:04:13 - 00:06:08:22
as titles, paragraphs,
images, buttons, and so much more.
00:06:09:13 - 00:06:14:04
Some content types also let you create
even further nested building blocks.
00:06:14:19 - 00:06:18:01
For example, the block content type,
which you'll find near the bottom,
00:06:18:23 - 00:06:23:01
allows you to place a separate
sectioned off area within the column,
00:06:23:07 - 00:06:28:02
which can then subsequently
be populated with further content.
00:06:29:20 - 00:06:30:13
So what we find
00:06:30:13 - 00:06:33:14
when we initially switch
to the builder content template
00:06:33:22 - 00:06:36:13
is that a section is created automatically
00:06:36:22 - 00:06:40:18
as it is the start of any content
using the builder template.
00:06:41:03 - 00:06:43:08
So you can click on the section block
00:06:44:14 - 00:06:46:17
or you can add an additional section
00:06:47:02 - 00:06:50:00
using the dropdown here.
00:06:51:07 - 00:06:53:20
Click on that section block
to expand it to show
00:06:53:20 - 00:06:56:18
what's contained within it.
00:06:59:13 - 00:07:00:06
Now, before we go
00:07:00:06 - 00:07:03:06
any further,
I want to mention this gear icon here.
00:07:03:17 - 00:07:07:17
So many of the building blocks of varying
different types
00:07:07:25 - 00:07:10:22
will contain the configure gear icon.
00:07:11:05 - 00:07:15:02
Now this provides
you access to additional configuration
00:07:15:02 - 00:07:17:06
settings
for that particular building block.
00:07:18:08 - 00:07:19:21
So for example,
00:07:19:21 - 00:07:24:08
a section configuration menu that I just
clicked on here will show options
00:07:24:08 - 00:07:28:21
such as those controlling the background
color of that particular section,
00:07:29:05 - 00:07:34:05
the default alignment of any text, a
00:07:34:13 - 00:07:38:01
default text, colouring
various other bits and pieces.
00:07:38:23 - 00:07:40:21
And again,
that will all be context dependent.
00:07:40:21 - 00:07:44:15
So the options that you see in here
will be different based on where it is
00:07:44:15 - 00:07:47:29
that you've gone
to these configure options.
00:07:47:29 - 00:07:51:13
So next we need to apply a layout
to our particular section.
00:07:51:23 - 00:07:52:11
We do this
00:07:52:11 - 00:07:56:10
by going to the add content option,
which is nested within the section layout,
00:07:57:26 - 00:08:02:01
and this allows us to specify
a number of columns
00:08:02:14 - 00:08:05:06
and will control
how the content is displayed
00:08:05:15 - 00:08:09:28
within the section
that appears on the web page.
00:08:10:03 - 00:08:11:29
This example will keep it quite simple.
00:08:11:29 - 00:08:14:17
We'll just go on a two column layout,
00:08:15:16 - 00:08:17:23
so a range of different layout options
exist.
00:08:17:24 - 00:08:21:23
This includes the ability
to create columns of custom design.
00:08:21:23 - 00:08:23:05
So custom width.
00:08:23:05 - 00:08:25:20
For this example,
as I say, we'll just stick on the basic
00:08:25:28 - 00:08:28:25
two columns layout.
00:08:30:12 - 00:08:32:23
You can see
those two columns have then been added
00:08:33:15 - 00:08:38:21
and then we can add content elements
into those columns using again
00:08:38:28 - 00:08:44:22
the add content button nested
within those particular columns.
00:08:45:07 - 00:08:48:03
So what we'll start doing here is creating
00:08:48:03 - 00:08:50:12
some basic content
that we want to build out.
00:08:53:11 - 00:08:55:25
So I'll just had a few basic content
elements here.
00:08:55:25 - 00:08:59:05
As an example in our column, one
which is going to appear over
00:08:59:05 - 00:09:03:22
on the left hand side, all I want in
this particular example is an image.
00:09:04:07 - 00:09:07:20
So I'm just going to
go add content and an image.
00:09:08:20 - 00:09:09:11
We get a separate
00:09:09:11 - 00:09:11:29
section there related to the image
that we want to show.
00:09:12:13 - 00:09:15:02
And then you'll see again that we have
these additional configuration
00:09:15:02 - 00:09:17:06
options for that particular
00:09:18:06 - 00:09:20:09
content type that we've added.
00:09:22:02 - 00:09:23:11
I'm just going to select the image
00:09:23:11 - 00:09:25:04
that I want to utilize.
00:09:25:04 - 00:09:26:25
that I want to utilize.
00:09:26:25 - 00:09:28:01
And for our simple example,
00:09:28:01 - 00:09:30:28
that's all I need to do for our left
column or column one.
00:09:32:10 - 00:09:35:17
Now, for column two, we might want
to make it a little bit more detailed.
00:09:35:17 - 00:09:38:10
So this might contain multiple different
00:09:39:00 - 00:09:41:06
elements,
multiple different bits of content.
00:09:41:25 - 00:09:43:19
So let's put a few examples in here.
00:09:43:19 - 00:09:45:21
The first thing I might have is
00:09:46:22 - 00:09:48:27
a title
00:09:50:07 - 00:09:53:29
and I can customize that title text
00:09:58:06 - 00:10:01:00
and I can then add additional content
again to column two.
00:10:01:01 - 00:10:03:24
So that will just show the one
after the other.
00:10:03:24 - 00:10:06:17
Therefore, a subtitle,
00:10:06:17 - 00:10:10:22
then maybe a WYSIWYG or a paragraph.
00:10:13:25 - 00:10:16:04
And then I might finish off this section
with something
00:10:16:04 - 00:10:18:09
a little bit more detailed.
So maybe a button,
00:10:18:25 - 00:10:21:12
a button which will take us back
to the home page, for example.
00:10:22:00 - 00:10:25:02
So this again is just added
as a separate content element.
00:10:26:28 - 00:10:29:16
You can see again that we have a range
of different content elements.
00:10:29:16 - 00:10:32:22
We won't be covering all of these
in the rapid Build series,
00:10:33:01 - 00:10:34:27
but there are additional
tutorials available
00:10:34:27 - 00:10:37:09
should you wish to look at them
in more details.
00:10:38:01 - 00:10:41:28
In this case,
I'm just going to go for a button.
00:10:41:28 - 00:10:45:29
I'm going to add a new button so I can add
multiple buttons to a button section.
00:10:46:19 - 00:10:49:01
And once I've added an individual button,
which you can see
00:10:49:01 - 00:10:52:11
has been nested
within the buttons section,
00:10:52:11 - 00:10:56:05
I can apply some text to that
and then a target.
00:10:56:05 - 00:10:57:10
URL
00:11:06:19 - 00:11:09:09
now the target URL
you'll find in multiple places
00:11:09:09 - 00:11:11:20
when you're creating different links
throughout your site,
00:11:12:04 - 00:11:15:16
it basically gives you the option
to either directly input a URL
00:11:15:17 - 00:11:17:06
if that's useful for you.
00:11:17:06 - 00:11:20:27
Alternatively, you can search through
your existing Infigo site.
00:11:21:15 - 00:11:23:25
This includes
even though we've not made any quite yet
00:11:24:03 - 00:11:27:11
products, categories and blog entries.
00:11:27:28 - 00:11:32:14
Or we can go to other content pages
or general Infigo areas.
00:11:32:14 - 00:11:35:18
In this case the home page,
and once you click on a relevant link,
00:11:36:10 - 00:11:40:13
you can see that
it populates the URL for you.
00:11:43:17 - 00:11:44:25
Once we've finished creating
00:11:44:25 - 00:11:47:17
our content, I'm just going to scroll
to the top of the page.
00:11:48:00 - 00:11:50:24
Click Save and continue. Edit
00:11:50:24 - 00:11:52:25
and then for a content page
we can access it
00:11:52:25 - 00:11:55:08
on the front end of the storefront to see
00:11:56:20 - 00:12:00:23
what we've created.
00:12:00:23 - 00:12:03:28
So we can see there on the left hand side,
I've got the image I uploaded in column
00:12:03:28 - 00:12:09:09
one, and on the right hand side
we have our title subtitle
00:12:09:10 - 00:12:16:26
WYSIWYG or paragraph, and then our button,
which takes us to the homepage.
00:12:18:14 - 00:12:22:09
Now that's a general overview
of how to utilize content templates,
00:12:22:09 - 00:12:24:29
and now we're going to utilize them
in slightly different areas.
00:12:25:19 - 00:12:29:14
So what we're going to do next
is navigate to our editable content area.
00:12:29:29 - 00:12:33:05
So again, go to our menu
search type in editable
00:12:33:05 - 00:12:36:05
content.
00:12:36:05 - 00:12:39:10
Now editable
content is likely the main area.
00:12:39:18 - 00:12:44:00
We will utilize your content templates in
the early part of your of your Infigo journey.
00:12:44:21 - 00:12:48:25
The editable content page
provides access to a multitude of areas
00:12:48:25 - 00:12:54:26
and locations on your site,
which can be customized as you see fit.
00:12:54:26 - 00:12:58:14
So the editable content page
is split into different sections.
00:12:59:09 - 00:13:01:27
So these group
different areas of your site.
00:13:02:11 - 00:13:05:07
So you can see we've got
general, we've got homepage
00:13:05:21 - 00:13:07:29
products and editors and so on.
00:13:09:12 - 00:13:09:23
One of
00:13:09:23 - 00:13:14:02
these sections is, for example,
the home page.
00:13:14:02 - 00:13:17:02
The contents of this section
allow you to completely design
00:13:17:02 - 00:13:23:08
the content of your main storefront
landing page.
00:13:23:08 - 00:13:28:08
Other examples of the storefront design
which can be tackled using this particular
00:13:28:08 - 00:13:33:10
menu of options are things
such as the header and footer.
00:13:34:14 - 00:13:37:23
These cover the top and the bottom
of virtually every web page
00:13:37:23 - 00:13:41:04
on your storefront,
and you only have to design these once
00:13:41:11 - 00:13:44:01
and this is done
within the editable contents page,
00:13:44:13 - 00:13:47:16
and then the same template
will be reused over and over again.
00:13:47:23 - 00:13:52:05
Wherever that is utilized on your site.
00:13:52:05 - 00:13:55:18
So as an example here,
we're going to slightly modify our header
00:13:55:18 - 00:13:58:11
just as a very simple example.
00:14:00:02 - 00:14:02:07
So locate the header section
00:14:02:07 - 00:14:05:27
inside your editable content page
and click on Edit
00:14:05:27 - 00:14:15:05
over on the right hand side.
00:14:15:05 - 00:14:19:18
Now this editable content block will be
using a content ten point by default,
00:14:20:03 - 00:14:24:28
and this time it's the purpose
built header template type.
00:14:24:28 - 00:14:29:21
A few entries are pre-populated by default
to demonstrate the functionality,
00:14:30:09 - 00:14:33:29
so if I just skip straight
to my public store,
00:14:33:29 - 00:14:37:05
button up on the top of the page
here, I'll just open that in a new tab.
00:14:37:19 - 00:14:39:27
We can actually see the header
that's being utilized.
00:14:40:21 - 00:14:43:29
So we've got a home button,
we've got a categories dropdown
00:14:43:29 - 00:14:47:04
with a few options and a products dropdown
with a few options.
00:14:48:02 - 00:14:50:16
We can see how that's being built.
00:14:50:16 - 00:14:51:09
Home button
00:14:54:04 - 00:14:56:10
categories with a few sub items
00:14:57:18 - 00:15:00:01
and columns with a few sub items.
00:15:00:01 - 00:15:02:13
Even though we're using a separate content
template
00:15:02:13 - 00:15:06:13
type, the head of this time we can see
is still constructed in the same manner
00:15:06:13 - 00:15:10:24
as we saw on the content page.
00:15:10:24 - 00:15:14:26
Now what we're going to do is one example
here is to put one additional entry
00:15:15:02 - 00:15:19:25
on our header and this is going to link
to that sample page that we just created.
00:15:21:02 - 00:15:24:13
So to add an additional option
to our header, I'm just going to go to add
00:15:24:13 - 00:15:27:23
content
is going to be a singular header item
00:15:27:23 - 00:15:31:28
because it doesn't need a separate
submenu dropdown and that all we need to
00:15:31:28 - 00:15:37:12
do is give that section a name
and then assign a URL.
00:15:37:12 - 00:15:40:03
So I'm going to get this to link
to our sample content page
00:15:41:11 - 00:15:43:12
and then to locate the relevant URL
00:15:43:12 - 00:15:47:04
same as before.
00:15:47:04 - 00:15:48:28
This time
I'm searching for a content page,
00:15:48:28 - 00:15:51:11
which is one of the ones
we already created
00:15:51:11 - 00:15:55:00
so that I can search through a filter
00:15:55:05 - 00:15:57:27
list of the current entry type
00:15:58:16 - 00:16:00:28
so I can see I'm working
through my content pages
00:16:01:12 - 00:16:03:27
for something
called my sample content page,
00:16:04:12 - 00:16:06:25
and then it will populate
the relevant URL.
00:16:06:25 - 00:16:16:00
Alternatively,
I can just put the URL straight in here.
00:16:16:00 - 00:16:19:04
I'm going to save that entry
00:16:19:04 - 00:16:21:10
and then refresh my home page.
00:16:21:10 - 00:16:22:06
And what we should see
00:16:22:06 - 00:16:25:25
is that that extra link has now
been made available on a header.
00:16:26:27 - 00:16:29:26
I can click on that
to take us to our additional sample page
00:16:29:26 - 00:16:31:26
that we just made, but we can see that
00:16:31:26 - 00:16:34:24
that button is still available
because it's attached to a header.
00:16:35:04 - 00:16:45:23
It's going to be visible wherever our header is utilized.
00:16:48:05 - 00:16:49:16
Now before we move on, just a
00:16:49:16 - 00:16:52:28
quick note about the public store button
that we have here.
00:16:53:09 - 00:16:57:06
You will not see this when you logged in
as your platform administrator
00:16:57:22 - 00:17:00:15
specifically when you're not impersonating
another user,
00:17:00:28 - 00:17:04:02
as they don't have direct access
to the storefront front end.
00:17:04:16 - 00:17:08:26
So just keep that in mind
when you're utilizing your accounts.
00:17:10:17 - 00:17:10:28
Okay.
00:17:10:28 - 00:17:15:15
So next, we're just going to briefly
look at modifying our home page contents.
00:17:16:09 - 00:17:19:16
So navigate
back to your editable contents page
00:17:20:01 - 00:17:21:18
and then we're going to go to the home
00:17:21:18 - 00:17:24:06
page section,
which at this time is section two
00:17:25:14 - 00:17:28:02
and this is split into three areas.
00:17:28:02 - 00:17:30:24
We've got the home page banner,
which appears at the top of the screen,
00:17:31:12 - 00:17:33:20
followed by the above mid page content
00:17:34:16 - 00:17:36:27
and the below page content section.
00:17:38:02 - 00:17:40:19
In our example,
we'll just go to the home page banner
00:17:41:00 - 00:17:43:00
and just to demonstrate
what we're going to do here.
00:17:43:08 - 00:17:45:20
We're just going to delete the slider
00:17:46:16 - 00:17:49:03
to just to show those changes in action.
00:17:49:03 - 00:17:52:05
So if I navigate back to my home page,
you can see by default
00:17:52:05 - 00:17:56:25
we have a slider at the top of the screen.
00:17:56:25 - 00:17:59:03
Now let's say in this case
we just don't want this section.
00:17:59:27 - 00:18:03:18
So I can just navigate to my home page
banner section within editable content
00:18:04:05 - 00:18:09:02
and just completely delete
that slider section.
00:18:09:02 - 00:18:14:15
Click Save, refresh my home page
00:18:15:08 - 00:18:17:16
and we should see those changes instantly
00:18:17:16 - 00:18:19:21
reflected.
