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 | Description |
---|---|
404.liquid | Error page when a page is not found |
article.liquid | Template for individual articles |
blog.liquid | Blog overview page |
cart.liquid | Shopping cart page |
catalog.liquid | Catalog overview page |
category.liquid | Category page for product listings |
frontpage.liquid | Store front page |
manufacturer.liquid | Manufacturer’s product listing |
page.liquid | Generic content page |
password.liquid | Password-protected store page |
product.liquid | Product detail page |
search.liquid | Search results page |
customers/account.liquid | Customer account summary |
customers/activate_account.liquid | Customer account activation page |
customers/change_password.liquid | Customer password change page |
customers/edit_account.liquid | Customer account edit page |
customers/login.liquid | Customer login page |
customers/order.liquid | Customer order page |
customers/orders.liquid | Customer orders overview page |
customers/recover_password.liquid | Customer password recovery page |
customers/reset_password.liquid | Customer password reset page |
customers/register.liquid | Customer registration page |
customers/wishlist.liquid | Customer wishlist page |
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 usuallytheme.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.