Pasta liquids

A pasta liquids contém todos a estrutura e o layout das páginas que estão em linguagem Liquid. Os conteúdos desse diretório estão divididos em templates de página e templates de componentes. Nesse artigo você confere os templates de componentes.

📘
Para saber sobre mais sobre os arquivos que compõem os templates de página confira a seção Templates de página .

Acesse os arquivos de templates de componentes em basictemplate > liquids > partials.. Nessa pasta estão os arquivos dos componentes que são chamados através da tag {% render %}.

Os subdiretórios e arquivos de partials são:

common: aqui devem ficar os componentes que são comuns na lojas. Nesse caso são normalmente os componentes renderizados no layout.liquid e que são usados na maioria das páginas de vitrine de loja.
- _cart_drawer.liquid: componente em react popup de carrinho.
- _flag.liquid: flag por tag que aparece no bloco de produto, promocional ou ressaltando alguma característica do produto. ex: vegano
- _footer.liquid: rodapé da loja.
- _header.liquid: cabeçalho da loja.
- _icons.liquid: arquivo com todos os ícones em svg utilizados na loja.
- _popup_newsletter.liquid: componente em react de popup de newsletter.
- _product_block.liquid: bloco de produto em listagens e carroséis.
- _top_bar.liquid: barra de texto promocional no header da loja.
components:
- _check_color.liquid: componente de ícone de formato circular, para variantes de produto. Usamos esse na página do produto no formado "Nome da cor | RGB".
- products:
  - _carousel.liquid: componente de carrossel de produtos. Esse componente pode ser usado na página home e na página de produtos, para mostrar produtos que estão relacionados ao produto visto.
  - _grid.liquid: componente de grid de produtos. Esse componente é usado normalmente para listagens ou para grids de produtos na home.
  - tabs_products.liquid: componente de produtos em tabelas, separados por categorias.
footer: referente ao rodapé.
- _banner.liquid: banner localizado ao lado da seção de newsletter.
- _categories.liquid: menus institucionais do rodapé.
- _newsletter.liquid: seção de newsletter com formulário.
- _paragraph.liquid: parágrafo sobre a marca da loja no rodapé.
- _payment.liquid: ícones das bandeiras aceitas como formas de pagamento na loja.
- _signature.liquid: assinatura Vnda no rodapé.
- _social.liquid: menu de redes sociais com ícones no rodapé.
header: referente ao cabeçalho.
- _account.liquid: ícone de Minha conta no cabeçalho.
- _actions.liquid: agrupa os ícones de ação do cabeçalho: como Minha conta e Carrinho.
- _banner_menu.liquid: banner do submenu.
- _cart.liquid: ícone de carrinho de compras no cabeçalho.
- _logo.liquid: logo da loja do cabeçalho.
- _menu_desktop.liquid menu do cabeçalho para acessos via desktop.
- _menu.liquid: menu do cabeçalho.
- _menu_mobile.liquid: menu do cabeçalho para acessos via mobile.
- _search.liquid: formulário de busca no cabeçalho.
home: referente a página inicial.
- _category_banners.liquid: banners de categorias da página home (banners com a imagem e o nome da categoria em grid).
- _fullbanner.liquid: banner principal.
- _highlight.liquid: banners de destaques usado na página default das páginas institucionais.
- _icons.liquid: seção de atributos com ícones (normalmente usado para frete grátis e troca garantida.).
- _instagram.liquid: seção de Instagram acima do rodapé
- _support_banners.liquid: banners de apoio (dois banners lado a lado).
- _texto_seo.liquid: texto para SEO no final da página.
pages: referente as páginas institucionais.
- _about.liquid: página institucional Sobre, URL https://basictemplate.vnda.dev/p/sobre.
- _contact.liquid: página institucional de atendimento, URL https://basictemplate.vnda.dev/p/atendimento.
- _custom.liquid: página default. Essa é uma página de texto padrão que pode ser replicada.
- partials: aqui devem ficar os componentes "comuns" da páginas institucionais
  - _fullbanner.liquid: banner principal usado nas páginas institucionais
- _stores.liquid: página para informações institucional Onde encontrar, de caminho https://basictemplate.vnda.dev/p/onde-encontrar.
product: referentes a página do produto.
- _banner.liquid: banner da página de produto. Note que não são as imagens do produto, mas o banner.
- _buy_together.liquid: seção de Compre junto com outros produtos.
- _card_product.liquid: card de produto para a seção Compre junto.
- _description.liquid: seção com a descrição do produto abaixo do nome e preço.
- _details.liquid: tabelas com informações do produtos.
- _form_notify.liquid: formulário de avise-me quando chegar.
- images: pasta com os arquivos que montam a galeria de produtos
  - _images.liquid: seção de imagens da página de produto
  - _item_image_thumb.liquid: thumb das imagens do produto
  - _item_main_image.liquid: carrossel principal com as imagens de produto
  - _item_main_video.liquid: video do produto
  - _item_video_thumb.liquid: thumb do vídeo do produto
- _infos.liquid: informações de compra do produto
- _popup_guia_medidas.liquid: popup de guia de medidas
- _product_name_price.liquid: nome e preço do produto
- _section_related.liquid: produtos relacionados
- _shipping.liquid: calculo de frete da página de produto
- _social_media.liquid: seção de compartilhamento nas redes sociais
- variants: pasta com os arquivos para montar a seção de variantes de produto
- _attributes.liquid: atributos de produtos
- _variants.liquid: seção de atributos do produto.
tag: componentes da página de listagem.
- _breadcrumb.liquid: caminho da página abaixo do banner
- _category_item.liquid: banner e informações da listagem
- _empty.liquid: mensagem quando não há produtos na tag
- _filters.liquid: componente em react de filtros de produtos
- _pagination.liquid: paginação da listagem de produtos

📘
Note que as URLs citadas nesse artigo são do template básico, e foram usadas para exemplificar o caminho das páginas do template. Os arquivos podem variar de template para template, mas normalmente seguem esse mesmo padrão. Substitua os caminhos citados pela URL da sua loja.