Pasta liquids

Descrição dos arquivos da 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.


Did this page help you?