Personalizações avançadas de exibição de produtos e coleções para o plug-in da Shopify

Essas configurações avançadas ajudam a personalizar a vitrine virtual no WordPress, a marca da empresa e aprimorar a experiência de compra dos clientes.

Plug-in da Shopify e componentes da vitrine virtual da Shopify

O plug-in da Shopify é criado com Componentes web da vitrine virtual da Shopify. Os componentes a seguir são usados como blocos de construção da sua vitrine virtual da Shopify:

• Componente de cartão do produto: este componente exibe informações de produtos individuais, normalmente em listagens de produtos ou páginas de coleção. Muitas vezes, inclui elementos como a imagem do produto, o título, o preço e um botão “Adicionar ao carrinho”.
• Componente da janela modal de visualização rápida do produto: este componente exibe uma janela modal sobre o conteúdo existente com informações do produto, um botão “Adicionar ao carrinho” e um link para ver todas as informações do produto.
• Componente da página de informações do produto: este componente exibe um único produto, com informações completas. Cada componente da página de informações do produto tem um URL exclusivo.
• Componente de coleção: este componente exibe coleções de produtos que você criou.

Personalização de exibição de produtos e coleções da Shopify

Os componentes-padrão da vitrine virtual da Shopify em seu plug-in têm ferramentas para ajudar a criar uma experiência de compra integrada. Você também tem a flexibilidade de personalizar a exibição desses componentes para alinhá-los à identidade visual e aos requisitos de design específicos de sua marca.

Para realizar essas personalizações, você precisa ter acesso para modificar os arquivos e diretórios do tema do WordPress. O processo envolve a criação de uma pasta dedicada no diretório do tema ativo do WordPress.

Etapas:

1. Crie a pasta Shopify: comece criando uma nova pasta chamada Shopify diretamente no diretório do tema ativo. Essa pasta servirá como o local central para as substituições de componentes personalizados.
2. Substituir componentes individuais: para modificar um componente específico, adicione um arquivo PHP com um nome designado dentro da pasta recém-criada Shopify . A convenção de nomenclatura para esses arquivos de substituição é crucial para que o plug-in reconheça e aplique suas versões personalizadas:
   • Para substituir o Componente de cartão do produto, crie um arquivo PHP chamado product-card.php na pasta Shopify.
   • Para substituir o Componente da janela modal de visualização rápida do produto, crie um arquivo PHP chamado modal.php na pasta Shopify.
   • Para substituir o componente da página de informações do produto, crie um arquivo PHP chamado pdp.php na pasta Shopify.
   • Para substituir o componente de coleção, crie um arquivo PHP chamado component.php na pasta Shopify.

Depois de criar o arquivo PHP personalizado, o plugin ignora o arquivo de componente padrão para esse elemento específico. É possível implementar qualquer código nesses arquivos de substituição, desde blocos HTML estáticos até lógicas PHP complexas.

Embora seja altamente recomendável aproveitar os Componentes web da vitrine virtual da Shopify (utilizados na estrutura padrão do plugin) para ter consistência e acesso a funcionalidades integradas da Shopify, você não se limita a eles. É possível integrar outros métodos para buscar e exibir dados de produtos e coleções, o que permite personalizações avançadas.

Para mais informações e práticas recomendadas, consulte a documentação para desenvolvedores de plugins do WordPress.

Reescritas de produtos e coleções da Shopify

Ao publicar um produto ou uma coleção na Shopify, cada item ganha um URL exclusivo. Por padrão, esses URLs são criados com o domínio da Shopify. Com a função de reescritas, é possível acessar esses URLs exclusivos com o domínio público do WordPress.

Etapas:

1. No plugin da Shopify, acesse Configurações.
2. Na aba Avançado, verifique se as duas caixas de seleção na seção Reescritas de links da Shopify estão ativadas.
3. Acesse Links permanentes.
4. Clique em Salvar para aplicar a nova regra.
5. Acesse o admin da Shopify e navegue até a página de informações do produto ou da coleção para a qual você quer criar um link do WordPress.
6. No cartão de listagem em mecanismos de pesquisa, há um URL exibido que direciona os clientes direto para o produto ou a coleção. Por exemplo: https://johns-apparel.myshopify.com › products › huskee-reusable-cup.
7. Adicione products/huskee-reusable-cup ao final do URL do seu site WordPress. Por exemplo: https://johns-apparel-wordpress.com/products/huskee-reusable-cup.

Personalizar o comportamento do cartão do produto

Com os componentes da vitrine virtual da Shopify, existem dois tipos de cartão de informações do produto:

1. Visualização rápida: ao passar o mouse sobre o cartão do produto, o cliente tem a opção Comprar rápido. Ao clicar nela, as informações do produto são exibidas em um estilo pop-up ou de janela modal sobre o conteúdo existente no plano de fundo.
2. Página de informações detalhadas do produto: quando um cliente clica no cartão do produto, como na imagem ou no nome do produto, as informações do produto são exibidas em uma visualização de página inteira com um URL exclusivo.

É possível alterar essa configuração para exibir apenas a visualização rápida, apenas a página de informações detalhadas do produto ou ambas.

Etapas:

1. No plugin da Shopify no WordPress, acesse Configurações.
2. Na aba Avançado, acesse a seção Visualização do produto.
3. Escolha a opção mais adequada para a sua loja.
4. Clique em Salvar.