layout.liquid

O layout.liquid é responsável por renderizar outros templates. Todos os elementos que se repetem na estrutura da loja (cabeçalho, rodapé, menus de navegação, o bloco <head>) devem ser colocados dentro do layout.liquid.

A estrutura do layout.liquid pode ser simplificada para em algo como:

<!DOCTYPE html>
<html>
  <head>
    {{ content_for_head }}
  </head>

  <body>
    {% render "partials/common/header" %}

    <main class="site-content">
      {{ yield }}
    </main>

    {% render "partials/common/footer %}

    {{ content_for_body }}
  </body>
</html>

Considerações do template

Cabeçalho e rodapé: como são seções comuns a toda loja são incluídos diretamente no template layout.liquid. Caso algum template use variações de cabeçalho e rodapé, ou se existe uma seção específica que deve ser exibida ou escondida dependendo do template sendo renderizado, você pode controlar a exibição criando uma condição com o objeto template.

{% if template == "home" %}
  {% render "partials/page/header_home %}
{% else %}
  {% render "partials/common/header" %}
{% endif %}

Dessa forma você também pode especificar outras partes, folhas de estilo específicas e scripts para cada template.

📘 Sobre estilos inline

Para melhorar a performance da loja, os arquivos CSS são carregados de maneiras distintas. Páginas como a home e a página de produto, que possuem muitos estilos, são carregadas primeiro os estilos inline antes da dobra da página (aquilo que está visível no navegador quando o usuário acessa a página) e depois o arquivo CSS com o restante dos estilos.