Theme page layouts

Updated 15 November 2023 04:36

Recruitment Marketing Public

Introduction

Sometimes you'll want full control over how a page's layout and underlying HTML is generated. Recruitment Marketing gives you this capability, however, it's important to be careful when editing a layout, as it can drastically alter the rendering of pages (including on mobile devices) if a bug is introduced in the layout templates.

Uses of custom page layouts

Some common examples are:

Creating custom headers and footers that are complex in nature and often match a company's other corporate websites.
Adding analytics scripts. Note: There is built-in support for Facebook & Google under the Third Party Analytics link of your theme.
Adding other third-party components.

Layouts are found within a theme in the Theme Editor. A theme can have multiple layouts, allowing for very dynamic and different pages from within the same theme.

Creating a page layout

From the side menu, under Organisation click Themes.
Click the name of the relevant theme.
Alternatively, click the Edit icon.
Click the Layouts tab.
Click the New button.
Enter a Name for the layout.
Click the Save button.
On the Theme Layout screen, a default template will already be displayed.
Note: This default template is bug-free and is the minimum code required to render a page correctly.
Add your code changes as required. Often scripts should be placed between the <head/> tags.
On the left side are some Template Variables, which can be used within the template, as required.
Click the Save button.

Using a page layout

From the side menu, under Content click Web Pages.
Click the name of the relevant campaign.
Next to the relevant page, click the Actions icon then Settings.
On the Edit Page Settings pop up, click the Appearance & Behaviour tab.
From the Theme drop down, select the relevant theme which will determine the layouts available.
From the Page Layout drop down, select the new page layout.
Click the Save button to keep the settings.

Using Liquid

The Recruitment Marketing layout syntax uses the Liquid Templating engine.
For more information, including advanced syntax, refer to shopify.github.io/liquid.

Template variables

Template variables are placed with double curly-brace pairs, for example:

<html lang="{{page.properties.locale}}">

As the page is being rendered, these variables are evaluated and HTML content is outputted.

page.content.head

This is placed within the <head> tag and will output meta tags, CSS scripts and javascript calls. This template variable is mandatory.

<head>
<title>{{page.properties.title}}</title>
{{page.content.head}}

page.content.body

This is placed within the <body> tag, usually after the menu and will output the HTML for the rows and blocks created in the page editor. This template variable is mandatory.

<body>
  <nav class="site-header sticky-top py-1">
    <!-- put menu here -->
  </nav>
  {{page.content.body}

page.content.footer

This is placed before the end of the closing </body> tag and will output html for modals, consent footers and third party integration javascript. This template variable is mandatory.

<footer>
  .....
</footer>
{{page.content.footer}}
</body>

page.properties.locale

This will output the code of the current locale e.g. <html lang="en-US">. If a French translation of a page is being viewed it would output <html lang="fr-FR">. This allows locale specific CSS targeting.

For example, consider a single page which has a hero image of the Empire State building for the English version, with a CSS class value of "en-visible". Underneath it, there is a hero image of the Eiffel Tower for the French version, with a CSS class value of "fr-visible". Here is how to hide and show the correct image, depending on the current locale.

Page layout:

<html lang="{{page.properties.locale}}">
<head>

Theme CSS:

.en-visible, .fr-visible{ /* by default hide these 2 blocks */
  display: none;
}

.editing .en-visible, /* show bot blocks in the editoer  */
.editing .fr-visible{
  display: block; 
}

[lang="en"] .en-visible{ /* if the current locale is English, only show the English block*/
  display: block;
}

[lang="fr-FR"] .fr-visible{ /* if the current locale is French, only show the French block*/
  display: block;
}

page.properties.uid

This will output the uid of the current page which allows page specific CSS targeting.

page.properties.title

This will output the title of the current page. It is typically placed within the <title>.

<title>{{page.properties.title}}</title>

pages.<page-uid>.title

This will output the title of another page e.g. {{pages.83eeb1b30236ba42c18f644d5440aeec.title}} .

candidate.is_known

This will output true or false, depending on whether the current candidate is a known candidate or not.

{%if candidate.is_known%}
  Hello {{candidate.first_name}}
{%endif%}

candidate.first_name

This will output the current candidate's first name.

candidate.last_name

This will output the current candidate's first name.

common.current_year

This will output the current year. It is useful for copyright statements for example:

Copyright {{common.current_year}}