BG_ADV_CCT_001_Creating Custom Content Templates

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.

NOTE: Configuring a Content Template does require HTML and coding knowledge. However, once the template has been set up and configured, it can be used over and over again without the need to interact with any code.

This makes them perfect for use cases where a particular configuration of content will need to be repeated numerous times (such as for making identically laid out product pages). A person with HTML knowledge can set up the templates, with other administrative users able to then utilise them and populate them as required.

Over this short series of videos, we will be generating a very simple content template, aimed at showcasing some of the key features. This includes the creation of input fields, utilisation of custom scripts and more.

Infigosoftware

  1. 1. Navigate to the Content Templates section

    You will likely need to request access to this section from our Customer Support team, as it is not enabled by default.

    Once enabled, you will be able to create Content Templates on any of your storefronts.

    Navigate to the Content Templates section

  2. 2. You will see a list of existing, default Content Templates

    These cannot be amended.

    You will see a list of existing, default Content Templates

  3. 3. To create new Content Templates, click Add new

    To create new Content Templates, click Add new

  4. 4. Enter a name for the Content Template

    This will only be used to identify the Content Template. This name will not be shown to your end users.

    Enter a name for the Content Template

  5. 5. Check Enabled

    Ensures the Content Template is available for selection.

    Equally, you can deselect this box to Disable a template if you do not wish it to be used.

    Check Enabled

  6. 6. Click on Save and Continue Edit

    Click on Save and Continue Edit

  7. 7. Click on Settings

    Next, we will select where this new Content Template can be used.

    Click on Settings

  8. 8. Check Content Page

    Content Templates are available for use in all areas listed on this tab.

    You are able to select one or more scenarios where it is able to be selected.

    Check Content Page

  9. 9. Click on Save and Continue Edit

    Click on Save and Continue Edit

  10. 10. Click on General

    Click on General

  11. 11. Next, we will begin populating the HTML Markup

    This is the main HTML content to be used when selecting this template.

    Later on, we will make sections of this code dynamic, however for now we will simply place a section of static "boilerplate" code.

    In our example, we will create a very simple HTML section, containing a h2 title and a paragraph of text.

    The code used in this example is as follows:

    <section class="section is-medium has-background-default has-text-default "> <div class="container content is-flex"> <div class="columns is-multiline is-mobile is-variable is-4 is-vcentered is-justify-content-center has-text-inherit"> <div class="column is-12"> <h2 class="ict-title title has-text-left is-1 has-text-primary has-style-default"> Page Title </h2> <div class="ict-paragraph block has-text-inherit has-text-default has-style-default"> <p>Description goes here</p> </div> </div> </div> </div> </section>

    Next, we will begin populating the HTML Markup

  12. 12. Paste code into the HTML Markup area

    Paste code into the HTML Markup area

  13. 13. Click on Save and Continue Edit

    Click on Save and Continue Edit

  14. 14. Next, we will create a new Content Page and set it to use our new Content Template

  15. 15. Navigate to Content Pages

    Navigate to Content Pages

  16. 16. Click on Add new

    Click on Add new

  17. 17. Type a name for the Content Page

    Type a name for the Content Page

  18. 18. Click on Save and Continue Edit

    Click on Save and Continue Edit

  19. 19. Change the Body Type Editor dropdown to Content Template Editor

    This switches the setup of the page, meaning a Content Template can now be selected.

    Change the Body Type Editor dropdown to Content Template Editor

  20. 20. Select your new Content Template design from the dropdown list

    Select your new Content Template design from the dropdown list

  21. 21. Content Template applied

    Your Content Template has now been applied to this page.

    At the moment we will see no additional fields or options, as we are yet to set them up.

    However, the HTML Markup we entered earlier will now be utilised.

    Content Template applied

  22. 22. Click on Save and Continue Edit

    Click on Save and Continue Edit

  23. 23. View the Content Page

    View the Content Page

  24. 24. The Content Template is now being utilised

    We can see a page title and paragraph, as was detailed in our boilerplate HTML Markup code.

    The Content Template is now being utilised