Layouts
The theme.twig file is required for every template. It defines the main HTML structure of your pages, including the <head>, header, footer, and main content area.
Example theme.twig
<!DOCTYPE html>
<html lang="{{ request.iso_code }}">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="canonical" href="{{ canonical_url }}">
<title>
{{ page_title }}
{% if webshop.name not in page_title %} – {{ webshop.name }}{% endif %}
</title>
{% if page_title %}
<meta property="og:title" content="{{page_title}}" />
<meta name="twitter:title" content="{{page_title}}">
{% endif %}
{% if page_description %}
<meta name="description" content="{{ page_description | escape }}">
<meta name="twitter:description" content="{{ page_description | escape }}">
{% endif %}
{{ content_for_head|raw }}
<link href="{{'critical.css' | asset_url}}" rel="stylesheet" fetchpriority="high">
<link href="{{'app.css' | asset_url}}" rel="stylesheet">
<script src="{{'app.js' | asset_url}}" async></script>
</head>
<body>
{{ content_for_header|raw }}
{% include 'header.twig' %}
<main id="main" class="main" role="main" tabindex="-1">
{{ content_for_layout|raw }}
</main>
{% include 'footer.twig' %}
</body>
</html>
Required Placeholders
When creating theme.twig, there are two required placeholders generated by the Prodyflow Webshop Manager. Omitting them may break your website functionality.
{{ content_for_head|raw }}
- Required: Yes
- Purpose: Injects all head-related content generated by Prodyflow, including:
- CSS & SCSS compiled files
- Meta tags
- Scripts required for the webshop manager
- Warning: Removing this will likely break styles, scripts, and third-party integrations.
{{ content_for_header|raw }}
- Required: Yes
- Purpose: Injects the header content generated by Prodyflow, including:
- Site / region / language selector
- Info slider
- Dynamic header blocks
- Warning: Removing this will likely break header functionality and dynamic menu rendering.
{{ content_for_layout|raw }}
- Required: Yes
- Purpose: Injects the main content of the page
- Warning: Removing this will likely break header functionality and dynamic menu rendering.
The layout folder
The layout folder holds the parts of the pages. The ones you include from theme.twig yourself have any name
(header.twig, footer.twig, menu-drawer.twig, search.twig...). Two folders have names the engine knows, it renders
the files in them itself:
| Folder | Files | See |
|---|---|---|
layout/checkout/ | confirmation.twig, pickup-modal.twig, login-modal.twig | Checkout |
layout/order-manage/ | shell.twig and the parts (head, menu, address...) | Order management dialog |