Modifying the appearance and content of your Storefront | SRBG_002

Whilst we configured many of the initial appearance options during the creation of the Storefront, we may wish to modify it at a later date.

These settings are located in the Appearance Settings screen.

Here, you will find many of the options related to your general Storefront theme. This includes settings such as:

• Logo selection

• Colour selection

• Font selection

• Styling choices

Next, we will navigate to an area where we can create additional supplementary pages on our Storefront.

These are additional pages of information which may be considered supplementary to our core content. Such as, for example, some of the pre-created Content Pages such as the "Contact Us" and "About Us" pages.

New Content Pages can be created by clicking Add new

Whilst Content Pages are an important part of Infigo sites, they are not critical, nor a necessity.

Introducing you to Content Pages at this early stage has instead been done due to its effectiveness in introducing a much more important bit of functionality within your Infigo system, Content Templates.

Content Templates enable the creation of beautiful storefront content without having to tackle the specialised topic of HTML coding.

 These features are specifically designed to make storefront creation accessible to Infigo users from a range of different backgrounds, not just web developers.

Content Templates allow you to construct website content using intuitive building blocks and context relevant settings. Infigo provide pre-made, default templates to get you started, but advanced users can create fully customised templates.

The concept of Content Templates can be used all over Infigo to build your site content. This includes:

• Content pages

• Home page

• Product pages

• Email templates

• Category pages

• Much, much more.

Generally, wherever you see a "Body editor type" dropdown, you will be able to select the Content Template Editor.

Also available in this dropdown is a Code Mirror editor. This may be more suitable for those with the skills to write HTML themselves.

Select Content Template Editor from the Body editor type dropdown.

Select a Content Template to utilise for this page. In this case, the Builder* option.

The Builder Content Template uses a building block style system of generating page content.

You first create a section, a visually distinct, separate area on your web page.

Within the section you specify a layout. This is information such as the number of columns you wish the content to be split between.

Within the columns specified by the layout you can add content. Content covers a huge range of input types, such as titles, paragraphs and images.

Some content types also let you create even further nested building blocks. For example, the Block content type allows you to place a separate sectioned off area within the column which can then subsequently be populated by further content.

A section is created automatically, as it is the start of any content using the Builder template.

Click the Section block to see the layouts contained within the section.

Many of the building blocks (of varying different types) will contain the "Configure" gear icon.

This provides you access to additional configuration settings for that particular building block.

For example, a Section configuration menu will show options such as those controlling the background colour of the section, alignment of contained content, etc.

This is the specification of rows, and will control how the content displayed within the section appears on the web page.

A range of layout options exist, including the ability to create columns of custom design. For this example, we will stick to a basic 2 column layout.

Add Content elements into the columns of the Layouts with the Add Content button.

Numerous sections, layouts and content elements can be applied to each of the preceding sections. This gives you full flexibility to create a complex and beautifully designed web page without having to tackle HTML.

Some Content elements will have additional nested building blocks.

Such as, for example, buttons. Adding one Buttons* element will allow you to design and link multiple buttons.

Save will save the page and return you to the preceding menu.

Save and Continue Edit will save but keep you on the current page in order to further amend the content.

Specifically for a Content Page, you can view the page from the front-end of your site by clicking on the URL.

You will see your designed content as your site visitors would see it.

Editable Content is likely the main area where you will utilise Content Templates in the early part of your Infigo journey.

The Editable Content page provides access to a multitude of areas and locations on your site which can be customised as you see fit.

The Editable Contents page is split into sections, grouping different areas of your site.

One of these sections, for example is Home Page. The contents of this section allow you to completely design the content of your Storefront landing page.

Other examples of Storefront design which can be tackled using this menu are the Header and Footer. These cover the top and bottom of virtually every page on your Storefront. You only have to design these once, within the Editable Contents page, and the same template will be re-used for each page on your site.

We will slightly amend the header as our first example.

This Editable Contents block will be utilising a Content Template by default. This time, the purpose built "Header" template type.

A few entries are populated by default to demonstrate the functionality.

We will also add a separate link on our header, taking us to our newly created Content Page.

When creating a linked content element, you can either directly input a URL, or utilise the search features to locate a specific URL from other pages within this Storefront.

For example, you can search through a list of products, content pages or categories.

This allows you to instantly switch to the front-end of your Storefront.

Note, you will NOT see this when logged in as a Platform Administrator (when not impersonating) as they don't have direct access to the Storefront front-end.

You will see your header updated with the link to your Content Page

Next, we will briefly look at modifying our Home Page contents.

The Homepage section is split into three areas.

Homepage banner appears at the top of the screen , followed by the "Above Midpage Content" section and the "Below Midpage Content" section.

Midpage Content in this case is additional content which appears on the Homepage, such as when you specify products or categories as featured (more on this in later tutorials).