Show details for Creating custom Content Templates | ID: BG_ADV_CCT_001

Creating custom Content Templates | ID: BG_ADV_CCT_001

In this tutorial, we will learn how to begin creating customised Content Templates. Content Templates aim to eliminate the need for HTML knowledge to create beautiful storefronts, by replacing the standard Code Mirror Editor with a series of simple inputs and controls to create the content that works for you. Whilst Infigo provide a range of default Content Templates which can be utilised straight out of the box, we also provide users the ability to generate their own custom Content Templates.

Tutorial Video Transcript

A transcript of our tutorial video, ensuring you can find exactly what you need, when you need it.

You can search this page to find the relevant time-stamp in the video. Also, this text can be used as part of the tutorial search feature.

00:00:12:24 - 00:00:13:24
In this tutorial.

00:00:13:24 - 00:00:17:20
we’ll learn how to begin
creating customized content templates.

00:00:18:16 - 00:00:21:13
So content templates
aim to eliminate the need

00:00:21:13 - 00:00:24:27
for HTML knowledge
to create beautiful storefronts.

00:00:25:22 - 00:00:26:07
They do this

00:00:26:07 - 00:00:31:04
by replacing the standard Code Mirror
editor with a series of simple inputs

00:00:31:04 - 00:00:33:26
and controls to create the content
that works for you.

00:00:35:05 - 00:00:37:16
Whilst Infigo, provide a range of default

00:00:37:16 - 00:00:40:16
content templates
which you can use straight out of the box.

00:00:40:25 - 00:00:44:16
We also provide users
the ability to generate their own custom

00:00:44:16 - 00:00:48:05
content templates.

00:00:48:05 - 00:00:49:29
Some thing to note on this configuring

00:00:49:29 - 00:00:53:26
a content template
does require HTML and coding knowledge.

00:00:54:09 - 00:00:57:29
However, once those content templates
have been set up and configured,

00:00:58:07 - 00:01:02:12
it can be used over and over again without
the need to interact with any code.

00:01:03:09 - 00:01:06:06
This makes them perfect for use cases
where a particular

00:01:06:06 - 00:01:09:29
configuration of content
will need to be repeated numerous times.

00:01:10:15 - 00:01:13:12
So for example, this could be
what you need to make identically

00:01:13:12 - 00:01:16:03
laid out product pages.

00:01:16:16 - 00:01:17:23
A person with HTML

00:01:17:23 - 00:01:21:15
knowledge can set up the templates
and other administrative uses

00:01:21:15 - 00:01:26:24
are then able to utilize them
and populate them as required.

00:01:26:24 - 00:01:31:00
Over this short series of videos
will be generating a very simple content

00:01:31:00 - 00:01:34:23
template aimed at showcasing
some of the key features.

00:01:35:04 - 00:01:38:07
This includes things
such as the creation of input fields,

00:01:38:15 - 00:01:46:10
utilization of custom scripts, and more.

00:01:46:10 - 00:01:50:08
So to begin, we want to navigate
to our content templates section.

00:01:51:00 - 00:01:55:24
Now you will likely need to request access
to this section from our customer

00:01:55:24 - 00:02:01:27
support team if you want to use it
as it's not enabled by default.

00:02:01:27 - 00:02:04:27
However, once it's enabled once
you'll be able to create content

00:02:04:27 - 00:02:15:06
templates on any of your storefronts
or future storefronts.

00:02:15:06 - 00:02:18:09
So once you click on the content templates
area, you'll see a list

00:02:18:09 - 00:02:21:00
of existing default content templates.

00:02:21:12 - 00:02:24:23
Any custom ones that have already been
made will be at the bottom of the list

00:02:25:03 - 00:02:27:14
and they are the only ones that
are editable.

00:02:27:17 - 00:02:28:14
The rest are

00:02:29:16 - 00:02:33:22
fixed and can't be changed by the user.

00:02:33:22 - 00:02:37:18
We can add a new content template
by clicking on Add New on the top right

00:02:37:18 - 00:02:38:24
hand corner.

00:02:38:24 - 00:02:41:06
We're going to start off
just by entering a name

00:02:56:12 - 00:02:57:07
you can check

00:02:57:07 - 00:03:00:24
for enabling or disabling
this particular content template.

00:03:01:08 - 00:03:04:17
So if you want it to be

00:03:04:19 - 00:03:07:09
a unusable, then turn that off
so it's selected

00:03:07:09 - 00:03:10:08
and then it'll mean that that content
template is not currently in use.

00:03:10:25 - 00:03:13:14
Enabled of course,
means that you are able to utilize

00:03:13:14 - 00:03:15:19
that content template

00:03:18:08 - 00:03:19:05
and click on Save

00:03:19:05 - 00:03:22:27
and Continue edit
to fix that as a content template.

00:03:23:06 - 00:03:25:22
And you'll see
we now get access to additional settings

00:03:25:29 - 00:03:29:22
and additional taps.

00:03:29:22 - 00:03:32:21
The first thing we want to actually do
is to define

00:03:32:28 - 00:03:35:25
where the new content template
can be used.

00:03:36:11 - 00:03:40:18
To do this, we go on the Settings tab
and what this primarily contains

00:03:40:18 - 00:03:44:10
is the different areas Infigo
where we can use content templates.

00:03:44:28 - 00:03:47:27
So you may be making this content template
specifically

00:03:47:27 - 00:03:51:05
for a product
or specifically for categories.

00:03:51:14 - 00:03:53:08
So you would just site the one.

00:03:53:08 - 00:03:57:18
However, you can select multiple of these
if you want the same templates available

00:03:57:23 - 00:03:58:28
in multiple places.

00:04:00:21 - 00:04:01:06
So for this

00:04:01:06 - 00:04:03:20
example,
I'm going to go for a content page

00:04:04:14 - 00:04:06:15
and then again
click Save and continue. Edit

00:04:12:12 - 00:04:14:15
So I'll go back to General and next

00:04:14:15 - 00:04:18:12
we're going to start
populating the HTML markup section.

00:04:18:26 - 00:04:23:18
So this is the main HTML content
to be used when selecting this template.

00:04:24:04 - 00:04:27:13
Later on, we'll make sections of this code
dynamic.

00:04:27:13 - 00:04:31:28
However, for now, we will simply place
a section of static boilerplate code.

00:04:33:05 - 00:04:37:20
So in our example,
we'll create a very simple HTML section

00:04:37:29 - 00:04:46:27
containing a h2 title block
and a paragraph of text.

00:04:46:27 - 00:04:50:24
I have some preconfigured code available
which I'm just going to

00:04:51:28 - 00:04:54:18
copy and paste, and

00:04:54:18 - 00:04:55:19
from there I'm just going to click

00:04:55:19 - 00:04:58:06
Save and continue, edit

00:05:00:15 - 00:05:01:27
and then it's most simple form.

00:05:01:27 - 00:05:04:18
That's all we need to do,
but we want to actually see

00:05:05:06 - 00:05:08:23
how that's going to be utilized.

00:05:08:23 - 00:05:11:24
So what I want to do
first, we've specified that this template

00:05:11:24 - 00:05:14:07
is going to be available
on a content page.

00:05:14:16 - 00:05:18:04
So I'm actually going to go and create
a new content page to use this on

00:05:18:17 - 00:05:21:05
and we'll use this throughout this short
tutorial series.

00:05:21:25 - 00:05:23:14
So if I go to content pages,

00:05:24:18 - 00:05:27:25
I'll make a new content page

00:05:36:18 - 00:05:38:07
and then I'll save that.

00:05:38:07 - 00:05:41:09
We can access the content templates
by switching the body

00:05:41:09 - 00:05:42:24
editor type

00:05:44:18 - 00:05:47:22
and then that will give us a selection
list of all the default

00:05:47:22 - 00:05:50:00
templates, which are the ones
with the star next to them,

00:05:51:11 - 00:05:54:10
or the custom made templates
which we can see down at the bottom.

00:05:55:13 - 00:05:57:01
So this is the one I've just made.

00:05:57:01 - 00:06:02:04
So if I select this, you see that that
custom template is now loaded, there isn't

00:06:02:04 - 00:06:05:03
any additional settings at the moment
because we haven't specified them.

00:06:05:15 - 00:06:08:17
However,
now once we hit save and continue to edit

00:06:08:27 - 00:06:11:19
and then view this page, the haz

00:06:11:19 - 00:06:16:05
HTML markup code that we had
within the actual template itself

00:06:16:14 - 00:06:22:10
should be defined to that particular page.

00:06:22:10 - 00:06:27:17
So if I go and view that page,

00:06:27:17 - 00:06:31:25
we can see there that we have our H2 title
and our paragraph description.

00:06:33:21 - 00:06:34:27
So that's successfully using

00:06:34:27 - 00:06:37:18
that content template.

Incomplete