Layouts

O arquivo principal do tema é o layouts/layout.tpl. Ele carrega assets, componentes e sub-templates, e imprime variáveis globais para cada página.

Variáveis globais como page_title e page_description já vêm preenchidas conforme o template atual e podem ser renderizadas diretamente:

<title>{{ page_title }}</title>
<meta name="description" content="{{ page_description }}">

Use o filtro static_url para apontar para arquivos na pasta static (SCSS, CSS e JS). A plataforma resolve a URL final:

<link rel="stylesheet" href="{{ 'css/style-critical.scss' | static_url }}">
<script src="{{ 'js/main.js' | static_url }}" defer></script>

//dcdn-us.mitiendanube.com/stores/002/166/951/themes/recife/dart-style-critical-61d41e81661b0f6eec2e689d7616b137.css

Alguns recursos são fornecidos como componentes que não ficam no FTP, mas podem ser incluídos via component() passando parâmetros:

{{ component('social-meta') }}

{{ component('fonts', {
    font_weights: '400,600',
    font_settings: 'settings.font_headings, settings.font_rest'
}) }}

{% if params.preview %}
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800|Muli:400,700');
{% else %}
@import url("{{ [settings.font_headings, settings.font_rest] | google_fonts_url('400,500,600,700,800') | raw }}");
{% endif %}

Use {% include %} para inserir o conteúdo de outro .tpl dentro do atual. Exemplo comum: injetar tokens CSS dentro de <style>:

<style>
  {% include "static/css/style-tokens.tpl" %}
</style>

Comentários TWIG não são renderizados no HTML final:

{# seu comentário #}

Atribua valores com {% set %} e reutilize depois:

{% set variavel_string = 'MINHA STRING' %}
{% set variavel_numerica = 100 %}
{% set variavel_booleana = true %}

A variável global template indica a página atual (ex.: home, product, category, search, page, account.login, etc.). É comum condicionar blocos com ela e com valores do settings:

{% if template == 'product' %}
  {% if settings.show_product_fb_comment_box %}
    {{ fb_js }}
    <div id="fb-root"></div>
    {# caixa de comentários do Facebook aqui #}
  {% endif %}
{% endif %}