Sites existentes - personalizando seus embeds

Veja aqui nosso guia para embedar em um site existente.

Shoprocket oferece total controle sobre a aparência dos seus códigos embed através do gerador de código no seu painel.

Selecione qual tipo de embed você gostaria (widget de Produto único, Produto em página inteira, vários Produtos ou carrinho de compras) e, em seguida, ative/desative os elementos que você gostaria de incluir, além de personalizar os tamanhos, estilos e comportamentos.

Depois de fazer alterações no seu código embed, você precisará copiá-lo e colá-lo em seu site onde gostaria que ele aparecesse. (se você fizer futuras alterações, precisará copiar e colar o código novamente)

Você também pode clicar em "Salvar como configurações padrão" no menu à esquerda para armazenar suas configurações de embed, de modo que todos os futuros códigos embed que você gerar comecem com as mesmas configurações.

Opções

As seguintes opções estão disponíveis na seção "Opções" no menu à esquerda:

1. Produtos a exibir - Escolha exibir todos os Produtos ou apenas Produtos de categorias específicas
2. Tamanho do produto - Defina o tamanho de exibição dos itens embedados (pequeno, médio ou grande)
3. Ajuste da imagem - Defina se as imagens dos Produtos devem ser cortadas para o tamanho disponível ou reduzidas (cortadas manterão todas as imagens do mesmo tamanho e mais uniformes)
4. Estilo do botão - escolha entre "Padrão" (botões retangulares com texto) "Mínimo" (botões circulares com ícones) ou "Ao Passar o Mouse" (botões circulares com ícones que aparecem apenas ao passar o mouse sobre o Produto)
5. Ordem de Classificação Padrão - Defina a ordem de classificação que os Produtos serão listados por padrão (Padrão, Mais Recentes, Nome: A-Z, Nome: Z-A, Preço: Baixo-Alto, Preço: Alto-Baixo)
6. Produtos por página - Especifique quantos Produtos carregar na visualização
7. Ocultar Produtos fora de estoque - Escolha se quer ocultar completamente Produtos fora de estoque ou mostrá-los com uma mensagem de "Fora de estoque"

Inclui

Você também pode especificar quais elementos incluir, como o botão "Ver Produto" e as "Fitas"

Os seguintes itens estão disponíveis na seção "Inclui" no menu à esquerda:

1. Caixa de pesquisa - Exibe o campo "pesquisar" acima do seu embed de Produtos (disponível apenas em embed de vários Produtos)
2. Caixa de ordenação - Exibe o menu suspenso de ordem de classificação (disponível apenas em embed de vários Produtos)
3. Caixa de limitador por página - Exibe o menu suspenso de itens por página (disponível apenas em embed de vários Produtos)
4. Caixa de moeda - Exibe o menu suspenso de moeda para que os clientes visualizem preços em sua moeda preferida (as moedas devem ser habilitadas primeiro nas configurações da sua loja)
5. Caixa de idioma - Exibe o menu suspenso de idioma para que os clientes troquem de idiomas (os textos da loja devem ser configurados primeiro nas suas configurações)
6. Caixa de categoria - Exibe o menu suspenso de categoria, permitindo que os clientes filtrem Produtos por categoria (disponível apenas em embed de vários Produtos)
7. Nome do produto - Exibe o nome do Produto
8. Preço do produto - Exibe o preço do Produto
9. Imagem do produto - Exibe a imagem principal do Produto
10. Resumo do produto - Exibe o texto de resumo do Produto
11. Botão Ver Produto - Exibe o botão para abrir os detalhes completos do Produto em um modal
12. Botão Adicionar ao carrinho - Exibe o botão para adicionar o item ao carrinho (as opções aparecerão acima ao passar o mouse, Produtos que requerem opções/variações mais avançadas abrirão o modal de ver produto ao clicar)
13. Quantidade mínima/máxima de pedido - Exibe as quantidades mínimas e máximas disponíveis para pedido, se configuradas em seu Produto
14. Fita de frete grátis - Exibe a fita de "Frete Grátis" em seu Produto, se o frete grátis for aplicável
15. Fita de Novo Produto - Exibe a fita de "Novo" em Produtos adicionados nos últimos 20 dias
16. Fita de download digital - Exibe a fita de "Download Digital" em Produtos que incluem um arquivo para download na compra

Popup de Ver Produto

Para Produtos que têm a opção "ver Produto" habilitada, você pode personalizar quais dos seguintes elementos exibir no modal:

1. Nome do produto - Exibe o nome do Produto
2. Preço do produto - Exibe o preço do Produto
3. Seleção de quantidade - Exibe o campo de seleção de quantidade (se desativado, apenas 1 pode ser adicionado ao carrinho por vez)
4. Imagem do produto - Exibe a galeria de imagens do Produto
5. Miniaturas de imagem - Exibe as miniaturas da galeria de imagens
6. Avaliações do produto - Exibe as avaliações do Produto
7. Resumo do produto - Exibe o texto de resumo do Produto
8. Descrição do produto - Exibe a descrição do Produto
9. SKU do produto - Exibe a unidade de manutenção de estoque (SKU) do Produto
10. Categorias do produto - Exibe as categorias vinculadas aos Produtos
11. Ícones de compartilhamento social - Exibe botões que permitem o compartilhamento do Produto em redes sociais com um clique
12. Produtos relacionados - Exibe os Produtos relacionados
13. Quantidade mínima/máxima de pedido - Exibe as quantidades mínimas e máximas disponíveis para pedido, se configuradas em seu Produto

Você também pode escolher entre as seguintes opções:

1. Ajuste de imagem - Defina se as imagens dos Produtos devem ser cortadas para o tamanho disponível ou reduzidas (cortadas manterão todas as imagens do mesmo tamanho e mais uniformes)
2. Largura da imagem - Defina a largura das imagens
3. Altura da imagem - Defina a altura das imagens
4. Layout de miniaturas - Posicione as miniaturas da galeria de imagens horizontalmente abaixo da galeria de imagens ou verticalmente à esquerda
5. Estilo de variação - Escolha entre menus padrão "suspenso" ou menus de texto "simples"
   (em reconstrução)

Estilos

Você pode personalizar as seguintes cores através do gerador:

• Título do produto
• Preço do produto
• Resumo do produto
• Cor de fundo do botão de compra
• Texto/ícone do botão de compra
• Cor de fundo do botão Ver Produto
• Texto/ícone do botão Ver
• Cor de fundo do botão Ver carrinho
• Texto do botão Ver carrinho
• Cor do widget de cesta
• Cor de fundo da cesta
• Cor do texto da cesta
• Cor de fundo do item do produto

Para aqueles com habilidades de codificação, você pode, é claro, usar suas próprias regras CSS para estilizar os embeds como quiser, não utilizamos iFrames, então todo o conteúdo renderizado na sua página é parte do DOM e pode ser estilizado com seu próprio CSS.

Certifique-se de que suas regras CSS sejam mais específicas do que as nossas.

Por exemplo, temos esta regra:

.sr-filters-wrap {
   background: #fff;
}

para substituir isso, crie sua própria regra CSS com um elemento pai precedido, como:

body .sr-filters-wrap { 
   background: #000; 
}

Porque você adicionou os elementos "body" antes da nossa regra, ela será mais direcionada do que a nossa e terá prioridade. 

Você também pode fazer alterações diretamente no gerador de código embed se estiver mais confortável com isso.