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.