CSS

A pasta CSS abriga os arquivos .css que serão utilizados no site.

Como utilizar

Os arquivos armazenados na pasta CSS podem ser obtidos através de um link estático, que segue uma estrutura semelhante ao de arquivos JS:

"http://" + nome da loja + ".fbitsstatic.net/sf/bundle/?type=css&paths=" + lista de caminho dos arquivos + "&theme=" + tema atual + &v= + data e hora do último commit

Exemplo:

https://lojaexemplo.fbitsstatic.net/sf/bundle/?type=css&paths=css1,css2,css3&theme=main&v=202301011059

Existem duas formas de utilizar esse recurso de maneira mais simplificada:

Forma direta

Via variáveis injetadas automaticamente nas páginas:

{{~ capture source ~}}
{{- store.urls.static_bundle}}?type=css&theme={{store.theme -}}&v={{store.last_modified}}
{{~ end ~}}

O link da imagem é atribuído à variável source.
A query string v funciona como versionamento, garantindo que a versão mais recente do arquivo CSS seja chamada.

Componente asset

O componente asset retorna uma tag HTML link que referencia os arquivos .css minificados. Para isso, basta informar os parâmetros:

Atributo	Tipo	Obrigatório	Descrição
type	string	sim	Tipo de arquivo a ser retornado
paths	string	sim	Nomes dos arquivos a serem inseridos na tag link

Exemplo:

{{ asset type: "css" paths: ["navbar", "footer", "mini_cart", "product", "user_login"]}}

📘

Nota

Os nomes presentes dentro do array de paths são exatamente iguais aos nomes dos arquivos .css dentro da pasta.