Templates

Templates are a core part of Finqu themes, defining the structure and content for each page type in your online store. Each template is a .liquid file located in the templates directory, and there is typically a matching template for every major page type.

Purpose of Templates

Templates control the layout and content of store pages, such as the front page, product pages, cart, blog, and customer account pages. They use the Liquid templating language to render dynamic content and can include sections, blocks, and snippets for modularity.

Common Template Files

Below are some of the most commonly used template files in Finqu themes:

Template Variants

You can create variants of templates for more customized experiences. For example, to create a special product page variant, add a file like product.campaign.liquid. This allows you to assign different templates to specific products or pages.

Template Schema

Templates can include a schema in JSON format to define metadata and required sections. The schema can specify the template’s name and which sections are included by default. Example:

Example product.campaign.liquid schema:

{{ content_for_index }}
 
{% schema %}
{
  "name": {
    "en": "Product Campaign"
  },
  "template_sections": [
    { "name": "product" },
  ]
}
{% endschema %}

• The name field provides a localized name for the template.
• The template_sections array lists sections that are always included in the template.
• Sections defined in template_sections are sticky—they cannot be removed by the user and will always be present in the template.
• All sections, including sticky ones, are rendered in the content_for_index placeholder within the template. This is where the dynamic content from sections appears on the page.

Rendering Sections in Templates

Sections are the building blocks of Finqu themes, allowing you to compose dynamic and flexible page layouts. In templates, sections are rendered using the content_for_index placeholder. This is a special tag that outputs all the sections assigned to the current template, in the order they are defined.

How Section Rendering Works

• Sticky Sections: Any section listed in the template_sections array of the template’s schema is considered sticky. These sections are always present in the template and cannot be removed by the user.
• User-Added Sections: In addition to sticky sections, users can add other sections to the template through the theme editor.
• Sorting and Order: Users can reorder user-added sections and also sort them together with sticky sections. However, sticky sections cannot be removed—they will always be present, but their position relative to user-added sections can be changed by the user.
• Rendering Location: All sections—both sticky and user-added—are rendered at the location of the {{ content_for_index }} tag in the template file. This means you can control where the dynamic content appears by placing this tag in your template’s layout.

Example

{{ content_for_index }}

This line in your template will output all the sections for that page, including those defined in the schema and any added by the user.

Best Practices for Section Rendering

• Place {{ content_for_index }} where you want the main content and sections to appear.
• Use sticky sections for essential content that should always be present (e.g., product details on a product page).
• Allow flexibility by letting users add or reorder non-sticky sections.
• Keep your template layout clean and modular by leveraging sections and snippets.

By understanding how sections are rendered, you can create highly customizable and maintainable themes that adapt to different store needs.

Placing Static Sections with the section Tag

In addition to dynamic sections managed through the theme editor and rendered with {{ content_for_index }}, you can use the Liquid section tag to place a static section directly in your template. This is useful when you want a specific section to always appear in a fixed location, regardless of user configuration or section sorting.

Example:

{% section 'announcement-bar' %}

This will render the announcement-bar section at the exact place where the tag is used in your template. Static sections added this way are not affected by the theme editor and cannot be reordered or removed by the user—they are always rendered in the specified location.

When to use the section tag:

• For essential content that must always appear in a specific place (e.g., a header, announcement bar, or footer).
• When you want to ensure a section is not accidentally removed or moved by the user.

You can combine static sections (using the section tag) and dynamic sections (using {{ content_for_index }}) in the same template for maximum flexibility and control.

Using Layouts in Templates

Layouts provide a way to define a common structure for multiple templates in your theme. By using layouts, you can avoid repeating shared elements like headers, footers, and navigation across different templates. Layout files are stored in the layout directory of your theme and typically have the .liquid extension (e.g., theme.liquid).

To assign a layout to a template, use the Liquid layout tag at the top of your template file:

{% layout 'theme' %}

This tells the template to use the theme.liquid file from the layout directory as its base. The content of your template will be injected into the layout at the location of the {{ content_for_layout }} tag. This allows you to maintain a consistent look and feel across your store while keeping templates focused on page-specific content.

Layouts are especially useful for managing global elements and ensuring design consistency. You can create multiple layouts for different purposes (e.g., a minimal layout for landing pages and a full layout for regular pages) and assign them as needed in your templates.

Layouts: Structure and Example

Layouts define the overall HTML structure and shared elements for your theme’s pages. They are stored in the layout directory (e.g., layout/theme.liquid). Layouts typically include the document’s <html>, <head>, and <body> tags, and are responsible for loading global assets, setting up meta tags, and rendering persistent sections like headers and footers.

How Layouts Work

• The layout wraps the content of your templates. The template’s content is injected at the location of the {{ content_for_layout }} tag inside the layout file.
• You can use the {% layout 'theme' %} tag at the top of a template to specify which layout to use. If omitted, the default layout is usually theme.liquid.
• Layouts are ideal for including global sections (e.g., announcement bar, header, footer) and assets (CSS, JS, fonts) that should be present on every page.
• You can use Liquid logic to conditionally include scripts, styles, or sections based on the page type or settings.

Example Layout (Minimal)

Below is a minimal example of a layout file with only the required elements:

<!DOCTYPE html>
<html lang="{{ request.locale.iso_code }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ page_title }}</title>
    {{ content_for_header }}
  </head>
  <body>
    {{ content_for_layout }}
  </body>
</html>

• {{ content_for_header }}: Outputs any additional scripts, styles, or meta tags required by the page or theme.
• {{ content_for_layout }}: This is where the content of the current template will be rendered.

Note: Both {{ content_for_header }} and {{ content_for_layout }} are required and must always be defined in every layout file. {{ content_for_header }} ensures that scripts, styles, and meta tags injected by the theme or apps are included in the <head>. {{ content_for_layout }} is the placeholder where the content of the current template is rendered inside the layout’s <body>. Omitting either will break expected theme functionality.

You can expand your layout to include static sections (e.g., {% section 'header' %}), global scripts, or advanced SEO/meta logic as needed. For production themes, layouts often include more advanced logic for asset loading, SEO, and accessibility, as shown in the full example above.

Best Practices

• Use descriptive names for template files and variants.
• Organize templates logically to match your store’s structure.
• Leverage sections and blocks within templates for flexibility and reusability.
• Use the schema to enforce required sections and provide clear template names.
• Keep templates focused on layout and structure; use snippets for reusable logic.