00:00:12:18 - 00:00:13:17
In this video, we're going to
00:00:13:17 - 00:00:16:23
take a look
at how to change the header logo
00:00:17:12 - 00:00:19:16
in your public storefront.
00:00:20:24 - 00:00:24:03
So as you can see at the moment,
it's just displaying the Infigo logo
00:00:24:18 - 00:00:28:28
that's on our default storefront.
00:00:29:01 - 00:00:34:24
Then on this other tab, I have the admin
window open and just the context
00:00:34:24 - 00:00:38:20
I'm walked in here is the storefront
administrator to make these changes.
00:00:43:11 - 00:00:44:02
So what we're going to do,
00:00:44:02 - 00:00:49:01
first of all, is to upload a file
which contains our new logo.
00:00:49:11 - 00:00:52:02
So what we want to display on the website.
00:00:53:03 - 00:00:55:12
To do this, I'm
going to go to content management
00:00:56:07 - 00:01:00:07
and appearance settings.
00:01:00:07 - 00:01:02:19
And then there's a lot of appearance
options in here,
00:01:02:19 - 00:01:04:27
most of which will be covered
in different videos.
00:01:05:10 - 00:01:09:07
What we're going to focus on
today is just these options here.
00:01:09:07 - 00:01:13:21
So you can see we have the Infigo logo
by default in two boxes.
00:01:14:02 - 00:01:18:17
One is a logo color
and one is a logo white.
00:01:19:02 - 00:01:22:09
And if you hover over these
little information boxes next to that,
00:01:22:09 - 00:01:25:20
you can see the color version is for use
with the white backgrounds.
00:01:26:10 - 00:01:30:13
White is for use with dark backgrounds.
00:01:35:20 - 00:01:36:19
So we're going to click on
00:01:36:19 - 00:01:42:09
the select icon underneath the image.
00:01:42:09 - 00:01:43:11
And then what it's going to do
00:01:43:11 - 00:01:47:20
is show us any image
that's been uploaded to our platform.
00:01:48:01 - 00:01:51:00
So you can see
I've already got an image uploaded in here
00:01:51:25 - 00:01:55:07
that was for another storefront,
not this particular storefront.
00:01:56:06 - 00:01:58:08
And let's say this isn't the image
00:01:58:08 - 00:02:01:26
I particularly want for this storefront.
00:02:02:10 - 00:02:04:06
I might want to avoid another image.
00:02:04:06 - 00:02:07:26
So I'd go to manage images,
which is basically just going to take us
00:02:07:26 - 00:02:12:13
to this tap here
where we can upload some more.
00:02:13:10 - 00:02:16:05
So I can see on the bottom here the images
that have already been uploaded,
00:02:17:03 - 00:02:19:03
but I can upload some more
if I wish to do so.
00:02:19:03 - 00:02:20:09
So I can click on upload,
00:02:21:14 - 00:02:23:27
locate the file that I want to upload.
00:02:25:01 - 00:02:32:02
so I'll just navigate to one of these files here
so the blue logo for example
00:02:32:11 - 00:02:39:25
and click open. That will upload that file instantaneously
and that is now available for selection
00:02:39:25 - 00:02:43:02
in this images list.
00:02:43:25 - 00:02:50:27
Now, to actually get that into use on our storefront
If I go back to Manage Theme
00:02:52:18 - 00:02:57:20
Click select, and you will see either one of
those logos now available.
00:02:57:28 - 00:03:03:22
So I could double click on either one of those
and it will utilise that on my storefront.
00:03:06:23 - 00:03:08:24
Now I hit save at the top of the screen
00:03:09:15 - 00:03:12:13
just to make sure that it actually applies
those changes that are made
00:03:13:11 - 00:03:15:26
and you might expect that
00:03:15:29 - 00:03:19:04
that will now appear on our main web page.
00:03:19:05 - 00:03:22:13
However, if you refresh that page,
you'll see it doesn't update.
00:03:22:13 - 00:03:24:19
And there is a reason for this. So
00:03:25:19 - 00:03:26:19
the header
00:03:26:19 - 00:03:31:28
here is controlled by what we call
editable content sections within.
00:03:32:04 - 00:03:32:16
So you
00:03:34:01 - 00:03:36:15
and that editable content
00:03:36:15 - 00:03:40:18
is currently using a static image
which is not referencing
00:03:40:27 - 00:03:43:05
this particular
00:03:43:28 - 00:03:46:08
input here.
00:03:46:12 - 00:03:48:26
So what we'll do now is actually go
and modify
00:03:48:26 - 00:03:52:11
this editable content for this home
page header.
00:03:54:26 - 00:03:57:03
So for this,
I'm going to go to content management
00:03:58:03 - 00:04:01:14
and editable content.
00:04:01:14 - 00:04:04:19
And what we have here
is loads of different
00:04:04:25 - 00:04:08:15
sections of content
which we as users are allowed to change
00:04:08:25 - 00:04:13:01
and they're generally grouped together
for ease of access.
00:04:13:19 - 00:04:17:18
So you can see, for example, that we have
very, very top of the page here.
00:04:17:18 - 00:04:19:10
We have 404 page area.
00:04:19:10 - 00:04:21:29
So you can control what
00:04:22:11 - 00:04:25:24
visuals and what text appears
when you hit the 404 error.
00:04:25:25 - 00:04:30:08
We've got photos, we've got header details
which we're going to go into
00:04:30:08 - 00:04:34:18
in a second and loads
more sections which you can edit.
00:04:35:16 - 00:04:36:11
There's also
00:04:36:11 - 00:04:40:01
the ability
to put custom content in here as well.
00:04:40:01 - 00:04:43:28
If you want to make
your own customized sections very similar
00:04:44:07 - 00:04:51:19
to the sections in the system part
here, editable content will be covered
00:04:51:23 - 00:04:55:23
more detail in other videos.
00:04:57:09 - 00:05:00:18
However, in this case, we're going to go
underneath the general section.
00:05:01:11 - 00:05:04:00
Right down at the bottom
there is they had a section
00:05:04:24 - 00:05:08:20
that I'm going to go to edit on the right
hand side.
00:05:09:07 - 00:05:14:24
What this will bring up is an editor,
which by default will be in the code
00:05:14:25 - 00:05:19:28
mirror editor form and it will be
pre-populated with some code.
00:05:20:12 - 00:05:23:10
And that's because, as you've seen
on our main storefront here,
00:05:23:10 - 00:05:26:00
we already have a header populated
00:05:28:12 - 00:05:30:20
and it's this code here which is driving
00:05:31:02 - 00:05:42:05
that particular header.
00:05:42:05 - 00:05:44:23
So there's lots of
changes we can make here. So
00:05:46:23 - 00:05:49:02
you're able to add, adjust or remove
00:05:49:02 - 00:05:52:15
sections of this code as you like
to make changes to your Web page header.
00:05:53:03 - 00:05:56:25
For this particular video,
we're focusing just on the logo,
00:05:56:25 - 00:06:01:20
which if we look through the code,
even if you don't know
00:06:02:03 - 00:06:03:17
HTML very well.
00:06:03:23 - 00:06:05:29
You can generally look
through these lines of code
00:06:05:29 - 00:06:09:04
and you can get a grasp for
00:06:09:04 - 00:06:11:18
what is controlling certain elements
00:06:11:19 - 00:06:14:01
of that piece of editable content.
00:06:14:19 - 00:06:17:23
So for the header, for example,
if we look in here,
00:06:17:23 - 00:06:20:10
it says nav bar
00:06:20:24 - 00:06:22:26
and quite early on
00:06:22:26 - 00:06:27:05
I can see that I have a section here
which is pointing out to PNG
00:06:28:05 - 00:06:31:01
which says Infigo software logo new.
00:06:31:13 - 00:06:35:02
So that kind of stands to reason
that it's an image file, it's Infigo
00:06:35:02 - 00:06:36:21
software logo. That's
00:06:36:28 - 00:06:39:20
this image that we're seeing here
00:06:39:20 - 00:06:41:27
and we need to change this
00:06:41:27 - 00:06:44:22
now, you could there's a few ways
in which you could do this.
00:06:44:23 - 00:06:48:10
I'm going to show you
how to use tokens at this point
00:06:49:01 - 00:06:52:27
so tokens can be found further down
the screen.
00:06:52:27 - 00:06:55:29
And tokens are
00:06:55:29 - 00:06:57:14
pieces of information that are
00:06:57:14 - 00:07:00:14
predefined elsewhere in Infigo.
00:07:01:05 - 00:07:06:04
So, for example, we've got a context
section which is storing things like the
00:07:07:06 - 00:07:09:17
the user's email, the user's name
and so on.
00:07:10:06 - 00:07:12:27
If I come further down,
we've got the layout tokens
00:07:13:16 - 00:07:17:02
and even further down to that
we have theme tokens
00:07:17:29 - 00:07:19:28
and this is where
we're going to find the one we want now.
00:07:19:28 - 00:07:23:23
So most of these settings or tokens
00:07:23:23 - 00:07:27:08
are to do with some
kind of appearance options.
00:07:28:16 - 00:07:28:26
They're all
00:07:28:26 - 00:07:32:02
things that have been defined
or are predefined elsewhere.
00:07:32:02 - 00:07:36:14
And you can see right at the start of
the list here we have theme dot logo color
00:07:37:03 - 00:07:39:11
and that is linking to
00:07:39:20 - 00:07:42:01
the inputs that we specified earlier on.
00:07:43:04 - 00:07:45:07
So I'm just going to click that
and that will copy.
00:07:45:07 - 00:07:46:24
It's a clipboard.
00:07:47:13 - 00:07:50:24
If I then go further up the screen
and I'm just going to replace
00:07:51:02 - 00:07:52:15
that PNG
00:07:54:27 - 00:07:57:29
with what was copied to clipboard,
00:07:58:10 - 00:08:07:10
which is theme dot logo color.
00:08:07:10 - 00:08:10:20
And I'm going to say
either save or save and continue. Edit
00:08:12:28 - 00:08:15:14
that will update my header
to include the new code.
00:08:15:27 - 00:08:19:01
So now if I go back to my storefront
and refresh,
00:08:20:11 - 00:08:22:15
we should see that my selected logo is
00:08:22:15 - 00:08:24:00
now being utilized.
