Catálogo de produtos
O catálogo de comércio eletrônico exibe produtos para os clientes navegarem. Ele é organizado usando categorias de produtos <ecommerce/categories_variants/categories>, variantes de produtos <ecommerce/categories_variants/product-variants> disponíveis, opções de classificação e caminhos de navegação. Essencialmente, o catálogo de comércio eletrônico é a página da loja do seu website.
O catálogo de produtos apresenta uma barra de ferramentas e alguns filtros <ecommerce/catalog/toolbar-and-filters> na barra lateral (ou menu deslizante), juntamente com uma área dedicada de listagem de produtos <ecommerce/catalog/product-listing>. Além disso, o layout das páginas de loja e categoria, assim como o rodapé do comércio eletrônico <ecommerce/catalog/footer>, podem ser personalizados, e você pode adicionar blocos de construção <ecommerce/catalog/catalog-blocks> conforme necessário.
Para personalizar o catálogo, vá para a página da loja, clique em Editar no canto superior direito, selecione a seção que deseja alterar e navegue até a aba Estilo.
Barra de ferramentas e filtros
A barra de ferramentas e a barra lateral (ou menu deslizante) fornecem ferramentas avançadas de filtragem para ajudar os clientes a pesquisar e navegar no catálogo de produtos usando categorias <ecommerce/catalog/categories> e atributos <ecommerce/catalog/attributes>.
Categorias
Para criar um acesso rápido de categoria <ecommerce/categories_variants/categories> na barra de ferramentas ou acesso geral na barra lateral, clique no botão Superior e/ou Barra Lateral ao lado de Categorias e escolha um Estilo para elas. Quando a Barra Lateral é selecionada, aparece a opção Recolher Categoria Recursivamente, permitindo que você recolha a categoria na barra lateral.
Barra de ferramentas
É possível exibir uma barra de pesquisa ou opções de classificação na barra de ferramentas da página da loja clicando nos botões Classificar Por e/ou Pesquisar ao lado do rótulo Barra de Ferramentas. Ative a chave Flutuante para sempre exibir a barra de pesquisa, o seletor de tabela de preços <ecommerce/prices/pricelists> (se houver) e opções de classificação na parte inferior da janela, mesmo ao rolar, e selecione uma opção de Classificação Padrão.
Filtros
Defina o campo Filtros para:
Sidebar: to display filters in the side panel;
Off-screen menu: to display filters in a slide-out menu that opens when clicking the fa-sliders Filters button in the toolbar;
Hide: to hide filters entirely.
Por padrão, dois Filtros estão ativados:
Price: Use the switch to display a Price Range bar, which allows customers to filter products according to a specific price range by dragging adjustable handles.
Tags: Toggle the switch to display product Tags on the shop page, and allow customers to filter products using those tags by going to the Tags section.
Para criar tags de produto no seu comércio eletrônico, vá para e clique em Novo. Adicione um nome de Tag, ative a chave Visível para clientes e selecione uma Cor. Opcionalmente, adicione uma imagem. Em seguida, vá para o formulário de produto e atribua as tags relevantes conforme necessário.
Para produtos de aluguel, você também pode adicionar uma opção de Data de Aluguel para exibir um calendário de intervalo de datas para verificar sua disponibilidade em um período específico.
Atributos
Quando você oferece variantes de produtos <ecommerce/categories_variants/product-variants> com diferentes atributos <ecommerce/categories_variants/attributes>, essas opções aparecem na barra lateral ou menu deslizante quando os filtros são exibidos. O menu se adapta automaticamente ao número de seções de atributos:
Up to 4 attributes: all the attribute values are displayed.
More than 4 attributes: the sections are automatically collapsed.
Área de listagem de produtos
Defina o número de produtos a exibir nas páginas da loja configurando o Tamanho exibido por página e linha, e especifique o número de colunas para dispositivos Mobile.
Além disso, você pode alterar manualmente a posição de um produto na página da loja ou página de categoria de produtos. Para fazer isso, clique em um produto específico, altere seu Tamanho e Reordene-o usando as setas na seção Produto da aba Estilo. Os botões fa-angle-double-left (seta dupla para a esquerda) e fa-angle-double-right (seta dupla para a direita) permitem mover o produto para o extremo esquerdo ou direito, e os botões fa-angle-left (seta simples para a esquerda) e fa-angle-right (seta simples para a direita) permitem mover uma linha para a esquerda ou direita. Você também pode escolher ou criar um ribbon ou badge <ecommerce/products/additional_features/product-highlight> para destacar um produto específico.
Design do cartão de produto
Para personalizar o design dos cartões de produto, escolha um Design de Produtos, clique no ícone fa-paint-brush (pincel) ao lado dele para:
Choose a Preset layout;
Adapt the General design;
Customize the Text & content (e.g., show a Description, and Ratings);
Customize the Images' layout (e.g., enable Secondary Image to show a second image when hovering over the product image on the shop or category page);
Enable some Actions (e.g., fa-shopping-cart Add to cart <ecommerce/checkout/add-to-cart>, fa-exchange Compare <ecommerce/products/additional_features/product-comparison>, or fa-heart Wishlist <ecommerce/products/additional_features/wishlists>) and customize their placement.
Design da página de loja e categoria
O design da loja e das páginas de categorias individuais pode ser personalizado da seguinte forma:
Choose whether the Content Width of the shop and category pages should be Regular or Full width.
Define the headers: navigate to the relevant page, then change the header directly on the page if needed. Toggle the Show Title and/or the Center Content switches. For product category pages, toggle the Show Description switch to show the category description <ecommerce/categories_variants/categories>.
Use building blocks to add content in the top/bottom section of the page, either for the entire shop page or for a specific category. In the latter case, the block appears only when filtering by that category. To do so, move the block to the far top or bottom section to display it on the general shop page or to the area below the category's name at the top or beneath the product list to display it only when filtering by that specific category.
Blocos de catálogo
Os blocos de construção do Catálogo podem ser usados, por exemplo, para criar acesso rápido à página da loja, destacar categorias de produtos específicas, destacar uma seleção de produtos específica ou adicionar um banner com informações gerais ou promoções.
Dependendo do modelo selecionado, você pode personalizar <website/building_blocks/edit> os blocos na aba Estilo.
Por exemplo, este modelo de bloco Catálogo específico exibe uma seleção de produtos e pode ser personalizado para:
Adapt the block's design.
Select a Cards Design, and configure <ecommerce/catalog/products-design> it using the fa-paint-brush (paint brush) icon.
Define which items are shown in the block by selecting the relevant Filter option, e.g., Newest Products to show the latest arrivals.
Select a specific product category in the Category dropdown list.
Filter products by toggling the Tags and/or Show variants options.
Rodapé do website específico para e-commerce
O rodapé do website <website/header_footer/footer-design> também pode ser configurado para usar o template específico de e-commerce. Em seguida, adicione os links <website/elements/links> relevantes e adapte o texto e layout do rodapé conforme necessário no editor do website. Os métodos de pagamento disponíveis também são exibidos neste rodapé. Para adaptar sua exibição, vá para a seção Métodos de Pagamento Suportados no editor do website.