Como ampliar um tema com apps

Faça sua empresa crescer

Acesse agora mesmo a Online Store 2.0 e descubra apps que se integram perfeitamente à loja virtual. É possível usar blocos e integrações de apps para adicionar funcionalidades ao tema.

Instale apps para adicionar recursos e integrações ao tema. Basta acessar a Shopify App Store para encontrá-los.

Os apps podem se integrar ao tema das seguintes maneiras:

• Como um bloco de apps: os blocos permitem adicionar funcionalidades de apps exatamente onde você quer usá-las no tema. É possível adicionar, remover, pré-visualizar, reposicionar e personalizar esses blocos por meio do editor de temas.
• Como um app incorporado: incorporações são elementos fornecidos por apps que podem flutuar ou aparecer como sobreposição no tema ou, ainda, adicionar códigos à loja virtual sem que os clientes vejam. É possível ativar, desativar, pré-visualizar e personalizar essas incorporações com o editor de temas.
• Com a adição de um código personalizado: alguns apps injetam códigos diretamente no tema para adicionar funcionalidades a ele. Vale destacar que é possível personalizar o app nas configurações dele ou no editor de temas.

Observação

Se você optar por instalar apps no tema e, mais tarde, alterar o tema publicado, será necessário reativar esses apps no novo tema, pois eles não são ativados por padrão.

Blocos de apps

Os apps podem ser adicionados como blocos em uma seção e como seções em um modelo. Dessa maneira, é possível incluir as funcionalidades de apps exatamente onde elas serão usadas em uma página. Para adicionar, remover e personalizar esses blocos, use o editor de temas.

Os blocos de apps podem ser compatíveis só com determinados tipos de página. Por exemplo, um app de tabela de tamanhos pode ter compatibilidade apenas com páginas de produto.

Observação

Os blocos de apps podem ser usados apenas com temas da Online Store 2.0. Caso você use um tema vintage, é necessário ler a listagem e a documentação do app para verificar se ele é compatível com o tema.

Bloco de app em uma seção:

Bloco de app como seção em um modelo:

Observação

A barra Pesquisar procura nos apps instalados, e não em toda a biblioteca de apps.

Compatibilidade do bloco de apps em seções

Algumas seções do tema podem não ser compatíveis com blocos de apps. Para identificá-las, consulte a documentação do tema ou entre em contato com o desenvolvedor.

Em caso positivo e se houver um app compatível instalado, uma seção Apps será exibida no seletor de blocos.

Como adicionar um bloco de app a uma seção

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.
2. Encontre o tema que você quer editar e clique em Personalizar.
3. Acesse a página e a seção em que você quer adicionar o bloco de apps.
4. Na barra lateral, clique em Adicionar bloco.
5. No menu suspenso da seção Apps, selecione o bloco de app que você quer adicionar, ou clique na barra de pesquisa e insira o termo a ser buscado nos aplicativos instalados.
6. Opcional: clique e arraste o ícone ⋮⋮ para mover o bloco até outro local disponível na página. Também é possível usar todas as configurações disponíveis para personalizar o bloco.
7. Clique em Salvar.

iPhone

1. No app da Shopify, toque no botão ….
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em Gerenciar todos os temas.
4. Encontre o tema que você quer editar e toque em Personalizar.
5. Toque em Editar.
6. Acesse a página e a seção em que você quer adicionar o bloco de apps.
7. Na barra lateral, clique em Adicionar bloco.
8. No menu suspenso da seção Apps, selecione o bloco de app que você quer adicionar, ou clique na barra de pesquisa e insira o termo a ser buscado nos aplicativos instalados.
9. Opcional: clique e arraste o ícone ⋮⋮ para mover o bloco até outro local disponível na página. Também é possível usar todas as configurações disponíveis para personalizar o bloco.
10. Clique em Salvar.

Android

1. No app da Shopify, toque no botão ….
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em Gerenciar todos os temas.
4. Encontre o tema que você quer editar e toque em Personalizar.
5. Toque em Editar.
6. Acesse a página e a seção em que você quer adicionar o bloco de apps.
7. Na barra lateral, clique em Adicionar bloco.
8. No menu suspenso da seção Apps, selecione o bloco de app que você quer adicionar, ou clique na barra de pesquisa e insira o termo a ser buscado nos aplicativos instalados.
9. Opcional: clique e arraste o ícone ⋮⋮ para mover o bloco até outro local disponível na página. Também é possível usar todas as configurações disponíveis para personalizar o bloco.
10. Clique em Salvar.

Como adicionar um bloco de app a um modelo

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.
2. Encontre o tema que você quer editar e clique em Personalizar.
3. Acesse a página em que você quer adicionar a seção do app.
4. Na barra lateral, clique em Adicionar seção.
5. No menu suspenso da seção Apps, escolha a opção que você quer adicionar à página ou clique na barra Pesquisar e digite o termo a ser procurado nos apps instalados.
6. Opcional: clique e arraste o ícone ⋮⋮ para mover o bloco até outro local disponível na página. Também é possível usar todas as configurações disponíveis para personalizar o bloco.
7. Clique em Salvar.

iPhone

1. No app da Shopify, toque no botão ….
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em Gerenciar todos os temas.
4. Encontre o tema que você quer editar e toque em Personalizar.
5. Toque em Editar.
6. Acesse a página em que você quer adicionar a seção do app.
7. Na barra lateral, clique em Adicionar seção.
8. No menu suspenso da seção Apps, escolha a opção que você quer adicionar à página ou clique na barra Pesquisar e digite o termo a ser procurado nos apps instalados.
9. Opcional: clique e arraste o ícone ⋮⋮ para mover o bloco até outro local disponível na página. Também é possível usar todas as configurações disponíveis para personalizar o bloco.
10. Clique em Salvar.

Android

1. No app da Shopify, toque no botão ….
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em Gerenciar todos os temas.
4. Encontre o tema que você quer editar e toque em Personalizar.
5. Toque em Editar.
6. Acesse a página em que você quer adicionar a seção do app.
7. Na barra lateral, clique em Adicionar seção.
8. No menu suspenso da seção Apps, escolha a opção que você quer adicionar à página ou clique na barra Pesquisar e digite o termo a ser procurado nos apps instalados.
9. Opcional: clique e arraste o ícone ⋮⋮ para mover o bloco até outro local disponível na página. Também é possível usar todas as configurações disponíveis para personalizar o bloco.
10. Clique em Salvar.

O app é adicionado como um bloco na seção Apps, e é possível inserir blocos extras. Além disso, pode haver várias seções Apps em uma página.

Incorporações de apps

As incorporações de app são elementos que flutuam ou aparecem como uma sobreposição no tema ou que adicionam código à loja virtual sem que os clientes vejam. Por exemplo, um app de chat que aparece no canto da loja, um app de análise ou ainda um app de rastreamento podem ser incorporados à loja. As incorporações podem ser ativadas, desativadas e personalizadas por meio do editor de temas, bem como usadas em todas as versões.

Como ativar uma incorporação de app

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.
2. Encontre o tema que você quer editar e clique em Personalizar.
3. Na barra lateral, clique no ícone Apps incorporados.
4. Selecione a incorporação de app que você quer ativar ou clique na barra Pesquisar e digite o termo a ser procurado nos apps instalados.
5. Ao lado da incorporação de app, clique no botão de alternância para ativá-la.
6. Opcional: clique no ícone de expansão ▸ ao lado do nome do app incorporado para ver as configurações.
7. Clique em Salvar.
8. Pré-visualize a loja para ver o app incorporado ativo.

iPhone

1. No app da Shopify, toque no botão ….
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em Gerenciar todos os temas.
4. Encontre o tema que você quer editar e toque em Personalizar.
5. Toque em … > Incorporações de apps.
6. Selecione a incorporação de app que você quer ativar ou digite um termo na barra de pesquisa para procurar nos apps instalados.
7. Ao lado da incorporação de app, toque no botão de alternância para ativá-la.
8. Opcional: clique no ícone de expansão ▸ ao lado do nome do app incorporado para ver as configurações.
9. Toque em Salvar.
10. Pré-visualize a loja para ver o app incorporado ativo.

Android

1. No app da Shopify, toque no botão ….
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em Gerenciar todos os temas.
4. Encontre o tema que você quer editar e toque em Personalizar.
5. Toque em … > Incorporações de apps.
6. Selecione a incorporação de app que você quer ativar ou digite um termo na barra de pesquisa para procurar nos apps instalados.
7. Ao lado da incorporação de app, toque no botão de alternância para ativá-la.
8. Opcional: clique no ícone de expansão ▸ ao lado do nome do app incorporado para ver as configurações.
9. Toque em Salvar.
10. Pré-visualize a loja para ver o app incorporado ativo.

Apps adicionados ao código do tema

Alguns apps injetam código diretamente no código do tema para adicionar suas funcionalidades. Depois de instalar um app, é possível que você receba instruções que incluem editar o código do tema para adicionar a funcionalidade na posição que preferir. Para personalizar um app, acesse suas configurações ou use o editor de temas.

Se o tema tiver uma seção Liquid personalizado, talvez seja possível adicionar o código do app à seção no editor de temas, em vez de editar o código do tema diretamente.