Liquid Reference

Appearance

Getting started ​

This guide covers common setup tasks and development patterns used in Syngency website development.

TIP

During development, the output Liquid filter is useful to inspect the content of a objects within the agency and current template context.

Technical requirements ​

Domains ​

By default, a Syngency website will be publicly available on the agency's Syngency subdomain, e.g. agency.syngency.com. Agency custom domains are connected to Syngency under Settings > Domains, where the primary web and email domains can be assigned. Ensure you add both the root and www versions. Domains / subdomains can also be set per office where required, in multi-office agencies. See the following help articles for more information:

reCAPTCHA ​

Syngency website forms use reCAPTCHA Enterprise, and the website domain needs to be added to Syngency's Google Cloud configuration. Ensure the domain is added before going live to avoid form submission issues.

SSL certificates ​

Syngency relies on Cloudflare to provision free SSL certificates for websites. We encourage all agencies to create a free Cloudflare account to manage their domain's DNS, SSL certificates, complex redirections etc. On request, Syngency can manage this - see our Getting started with Cloudflare help article for setup instructions.

Email addresses ​

Ensure the agency email address is set and valid in Settings > General - this is used by website forms as the default recipient address. The email address for each user should also match a configured email domain (see above).

Theme imagery ​

Agency logo and icons ​

Ensure the agency logo exists in Settings > General (many templates use {{ agency.logo }} by default). Where a different logo is needed, upload to website Assets. Alternatively, SVG logos and icons reused through a theme are ideally included as SVG symbols in the Master template, for example:

liquid
<svg class="svg-logo" width="250" height="50" alt="{{ agency.name }}"t>
  <use href="#svgLogo" />
</svg>
liquid
<!-- SVG Symbols -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="svgLogo" viewBox="0 0 1000 200">
    <path fill="currentColor" d="M2.6 295.3c-.4 0-.8..."/>
  </symbol>
  <symbol id="svgIconSelect" viewBox="0 0 48 48">
    <path fill="currentColor" d="M2.6 295.3c-.4 0-.8..."/>
  </symbol>
</svg>

Other theme media ​

  • Create favicons (ICO, 16x16, 32x32, 180x180 PNG) and upload to assets. Ideally the ICO file should include versions up to 48x48 to ensure the favicon displays in SERP indexes. As assets are hosted on the Syngency CDN and not in the site root, all favicon link tags need to be added to the Master template.
  • Upload an og-image.png in suitable dimensions for display when sharing. Typically 1200x630 pixels, and include a corresponding og:image tag in your Master template.

Content ​

Sliders ​

Sliders can be actual sliders or simple editable galleries to include in other templates (e.g. home page hero slider, a recent work gallery, an about page gallery). See the sliders Liquid object for structure.

liquid
{% for slider in sliders %}
  {% if slider.name == 'Home' %}
    {% for image in slider.images %}
      <img src="{{ image.url }}" alt="{{ image.caption }}">
      {% if image.link %}
        <a href="{{ image.link }}">See more</a>
      {% endif %}
    {% endfor %}
    {% break %}
  {% endif %}
{% endfor %}

TIP

If using complex image layouts extensively in pages, consider using snippets and sliders together. Use the 'Liquid' block type in a page or post editor to add a render tag.

Pages as content partials ​

Pages can be included in website templates for partial content on pages which are not otherwise directly editable. For example, if the home page needs text, rather than hard-coding in the template, add home page text content with a new page (Website > Pages) called Home. This can be accessed in any website template with the global pages template object. This approach is often used to add agency-editable content to the Submission template also.

liquid
<!-- Inserted page content -->
{% for page in pages %}
  {% if page.url == 'home' %}
    {{ page.content }}
    {% break %}
  {% endif %}
{% endfor %}

TIP

A page used as partial content should not be published, otherwise it will have a publicly accessible URL e.g. /pages/[page-slug].

Divisions and talent ​

Publishing ​

Divisions, talent portfolios and their galleries will only be available to website templates when they are set to 'Published'. Also ensure any divisions and talent which are not intended for public display are unpublished.

Submissions ​

When using a submission form for talent submissions, ensure a division is created for submissions to be created in. This division should not be published.