Página do produto
As páginas de produto do e-commerce exibem todos os detalhes do produto e itens de mídia relacionados aos produtos relevantes. É possível personalizar a seção de imagens e vídeos <ecommerce/product_page/image-customization> , escolher quais informações do produto exibir <ecommerce_design/product_page/customization> , mostrar botões <ecommerce_design/product_page/buttons> específicos, personalizar a seção de detalhes do atributo <ecommerce_design/product_page/attributes> , ativar recursos organizacionais adicionais <ecommerce_design/product_page/page-features> e adicionar conteúdo usando blocos de construção <ecommerce_design/product_page/building_blocks> .
Product images and videos
Após adicionar itens de mídia no formulário de produto <ecommerce/products/images> ou ao criar um produto no frontend <ecommerce/products/product-creation> , personalize-os nas páginas de produto do frontend. Para isso, navegue até a página de produto relevante na loja online, clique em Editar no canto superior direito e navegue até a aba Estilo .
Para gerenciar itens de mídia individuais, clique no item na página de produto e role para baixo até a seção Imagem do editor do website. Você pode então Substituir ou Remover a imagem ou vídeo e Reordenar os itens. Use o fa-angle-double-left (seta dupla para a esquerda) ou fa-angle-double-right (seta dupla para a direita) para mover a mídia para a primeira ou última posição, e o fa-angle-left (seta para a esquerda) ou fa-angle-right (seta para a direita) para mover uma posição.
Para ajustar o layout da seção de imagens e vídeos, vá para Área de Imagens e defina o tamanho das imagens e Posição . Em seguida, navegue até a seção Imagens e use as seguintes opções para personalizar esta seção:
Main image: Click Replace to change the main product image.
Extra Media: Add More images or videos (including via URL) or Remove all media items.
Display: Choose between the following layouts when you use more than one media item:
Carousel: This option allows visitors to navigate from one image to the next using the fa-angle-left (left arrow) or fa-angle-right (right arrow). Show Thumbnails on the fa-long-arrow-left (Left) or at the fa-long-arrow-down (Bottom) and adapt the corner Roundness of the images.
Grid: This layout displays media items in a square layout. Adjust the number of Columns and define the Spacing between the images in the grid, if necessary.
Auto-crop: Choose a size to cut/trim images to match the page layout. This is useful when designing the Mobile layout <website/visibility/mobile-and-computer>.
Zoom on click: Enable image zoom when visitors click an image.
Layout da página e exibição de informações do produto
Para personalizar o layout das páginas de produto, acesse qualquer página de produto, clique em Editar no canto superior direito e navegue até a aba Estilo . Em seguida, vá para a configuração Largura da Página e escolha a opção Regular ou Largura Completa .
Selecione quais informações do produto aparecem nas páginas de produto usando as opções disponíveis na seção Detalhes do Produto . Você pode configurar botões <ecommerce_design/product_page/buttons> , definir como os atributos são exibidos <ecommerce_design/product_page/attributes> , organizar a página usando recursos de personalização de página <ecommerce_design/product_page/page-features> e adicionar conteúdo usando blocos de construção <ecommerce_design/product_page/building_blocks> .
Botões
Personalize os botões exibidos nas páginas de produto usando as seguintes opções:
Purchase Style: Define the layout of the buttons.
Purchase Options: (De)activate the Buy Now <ecommerce/checkout/buy-now> button and/or the Quantity selector.
Actions: Enable the wishlist <ecommerce/products/additional_features/wishlists> and the product comparison <ecommerce/products/additional_features/product-comparison> features.
Atributos
Escolha como os atributos <ecommerce/categories_variants/attributes> do produto são exibidos na seção Especificação da página do produto:
None: Do not show the details.
Bottom of Page: Show the details at the bottom of the page.
In accordion: Show a foldable table directly under the ordering options.
Opções de organização de página e recursos adicionais
Alterne as seguintes opções para ativar ou desativar recursos em todas as páginas de produtos:
Separators: Organize the page and improve visual clarity.
Tax Indication: Indicate whether the price is VAT included or excluded <ecommerce/prices/taxes>.
Tags: Display the tags created in the backend <ecommerce/catalog/filters> on product pages and enable customers to filter products by those tags.
Terms and Conditions: Display a link to your terms and conditions.
Reviews: Allow logged-in portal users to submit product reviews. To add a review, users must navigate to the Customer Reviews section at the bottom of the page and click the fa-plus (plus) icon. They can then select a rating using the fa-star-o (star) icons and leave a comment. The fa-star (star) rating is displayed directly under the product name.
Search Bar: Display a search bar that can be shown or hidden independently from the shop page <ecommerce/catalog/toolbar>.
Ribbon <ecommerce/products/additional_features/product-highlight> (or badge): Highlight a specific product.
Blocos de construção
Use blocos de construção para adicionar conteúdo e elementos de design a todas as páginas de produtos ou a uma específica. Para isso, navegue até qualquer página de produto ou a relevante e clique em Editar no canto superior direito. Em seguida, na aba fa-plus (mais) Blocos, selecione um bloco de construção e arraste-o:
into the blue area at the top or bottom of the product page to make it available on all product pages, or
into the blue building block area below the product title or below the ordering options to display it only for the current product.
