Configuração do tema Spot commerce

Vídeo tutorial

Instalando modelo

Extraia o seu pacote de download, você encontrará uma pasta com o nome SpotCommerce-template-xml . Acesse esta pasta

E abra o arquivo spotcommerce-v - * - * - *. Xml  com o Notepad (ou qualquer editor de texto, recomende o Notepad ++, faça o download aqui:  http://notepad-plus-plus.org/download/ )

Clique com o botão direito e escolha Selecionar tudo

Clique com o botão direito do mouse novamente e escolha  Copiar

Faça login no painel do Blogger e escolha o menu suspenso do blog para o qual deseja instalar o modelo. No menu suspenso, escolha Modelo

Na página de modelo, clique no botão Editar HTML para abrir o editor de modelos.

No editor de modelos, clique no código e clique com o botão direito do mouse para escolher Selecionar tudo

Clique com o botão direito do mouse novamente e escolha Colar e clique no botão Salvar modelo para concluir a instalação do modelo

Configurações de modelo para celular

Para alterar o modelo móvel para o modelo SpotCommerce, acesse a página Modelo e clique no botão de engrenagem na janela de visualização móvel

Em seguida, selecione "Não. Mostrar modelo de desktop em dispositivos móveis" e clique no botão Salvar

Upload de logotipo

Acesse a página Layout e clique no link Editar no widget Cabeçalho

Clique em Escolher arquivo e selecione o logotipo do seu blog no seu computador. Incluímos um logotipo para demonstração no seu pacote de download no caminho:  SpotCommerce-testing-dataimagesspot-commerce-logo.png

Após o upload, clique no botão Salvar para aplicar.

Trabalhando com Menu

Acesse seu Layout , clique no link Editar no widget do menu principal .

Na janela Configurar lista de links , com cada item de menu que você deseja adicionar, insira o nome e o link do item de menu no campo Novo nome do site e URL do novo site e clique no botão Adicionar link . Depois de adicionado, clique em Salvar para aplicar. Você também pode clicar na seta (para cima ou para baixo) em cada item do menu para movê-lo para cima e para baixo e fazer seu próprio pedido.

Um submenu começará com um símbolo "_" (sublinhado), um submenu do submenu começará com 2 símbolos de sublinhado "__" e assim por diante. No exemplo acima, tivemos três itens de menu e o modelo os exibirá da seguinte forma:

Adicionando plano de fundo do controle deslizante

Acesse Layout , clique no link Editar no widget Plano de fundo da imagem do cabeçalho .

Na janela Configurar imagem , clique em Escolher arquivo para fazer upload de sua imagem de plano de fundo para a seção deslizante. Incluímos uma imagem de amostra no seu pacote de download no caminho: SpotCommerce-testing-dataimagesslider-background.jpg

Após o upload, clique em Salvar para aplicar.

Trabalhando com Slider

Acesse o layout do seu blog , na seção slider, você verá que já colocamos o widget 5 Image. Portanto, você só precisa clicar no link Editar em um widget de Imagem para editar ou também pode adicionar novos widgets de Imagem ou excluí-los desta seção para criar o controle deslizante conforme desejar.

Na  janela Configurar imagem , basta inserir o título , legenda , link e clique em Escolher arquivo para fazer upload de uma imagem para o seu widget de imagem. Também incluímos a imagem de teste no seu pacote de download no caminho: SpotCommerce-testing-dataimagesslider

Após o upload da imagem, basta clicar em Salvar para aplicar.

A imagem abaixo mostra a relação entre o formato do título e a exibição real.

Na seção Slider, você também pode arrastar e soltar widgets de Imagem para reorganizá-los. Depois de fazer um bom pedido, clique em Salvar arranjo para salvar.

Adicionando plano de fundo da seção do horizonte

Acesse seu Layout e clique no link Editar no widget Horizon Image Background . Execute as mesmas etapas com o upload de segundo plano para o controle deslizante. Incluímos uma imagem de amostra para isso em seu pacote de download no caminho: SpotCommerce-testing-dataimageshorizon-background.jpg

Widget de texto na seção Horizon

Acesse seu Layout , clique no link Editar no widget DIRETAMENTE .

Na janela Configurar texto , altere o título como desejar e insira o texto no campo Conteúdo . Você pode inserir um ícone no seu texto com o formato ## icon-code ## . Você pode encontrar os códigos dos ícones em:  http://fortawesome.github.io/Font-Awesome/icons/

Por exemplo, com o ícone home, você verá que seu código é fa-home ; portanto, o texto que você inserirá no conteúdo é ## home ##

Depois de inserir tudo, clique em Salvar para aplicar.

Ativar formulário de inscrição

Acesse seu Layout e clique no link Editar no widget GET UPDATES.

Altere o título e o URL do FeedBurner como desejar e clique em Salvar . Esta é uma etapa importante, você deve fazer isso para permitir que seus visitantes possam assinar o feed do seu blog e receber atualizações de seus e-mails.

Adicionar ícones sociais

Acesse o layout do blog , clique no link Editar no widget Links sociais .

Insira o código do ícone social no campo Novo Nome do Site e seu link social no campo URL do Novo Site e clique em Adicionar Link . Execute as mesmas etapas para cada link social que você deseja adicionar. Você pode encontrar códigos sociais em: http://fortawesome.github.io/Font-Awesome/icons/#brand

Por exemplo, o código do ícone do facebook é fa-facebook , portanto, você precisa inserir o facebook no campo Novo nome do site .

Após terminar, clique em Salvar para aplicar

Adicionando páginas estáticas

Acesse Páginas e clique no botão Nova Página .

Insira o título e o conteúdo da página e clique em Publicar .

Retorne o Layout do blog e clique no link Editar no widget Página .

Na janela Configurar lista de páginas , selecione a página que você deseja exibir. Você também pode arrastar e soltar o item da página em Ordem de lista para fazer seu próprio pedido. Após terminar, clique em Salvar para aplicar.

Ativar preferências de pesquisa

Acesse Configurações / Preferências de pesquisa e clique no link Editar na opção Meta Tags / Descrição .

Opte pelo rádio Sim e insira a descrição do site e clique em Salvar alterações.

Adicionando novos produtos

A figura abaixo mostra a relação entre o conteúdo das postagens e o que será exibido no modelo.

Nota: para manter sua imagem não no controle deslizante, você pode inserir [permanecer] na imagem alt ou no título.

A figura abaixo mostra a relação entre o marcador que você inseriu para suas postagens e o que será exibido no modelo.

• Os rótulos de entrada: _39, -40 significam que você deseja tornar este produto com preço atual é 39 (USD ou outro depende da configuração da sua moeda) e o preço antigo é 40. Este produto será exibido como Modelo à venda .
• Rótulo de entrada: somente _55 , significa que você deseja que este produto tenha preço atual é 55.
• Etiqueta de entrada:! 0 significa que você deseja que este produto esteja sem estoque .

Importando dados de teste

Esta etapa é apenas para testar o blog, não para o site principal.

Acesse Configurações / Outro e clique no link Importar Blog na opção de ferramentas Blog .

Na janela pop-up, clique em Escolher arquivo para fazer upload dos dados do seu blog. Incluímos um exemplo de dados no seu pacote de download no caminho: SpotCommerce-testing-datablog-08-12-2014.xml

Após o upload, basta inserir o número do captcha e optar pela opção " Publicar automaticamente todas as postagens e páginas importadas " e clicar em Importar blog para concluir.

Configurações de widget do blog

Acesse o Layout do blog e clique no link Editar widget Publicações do blog .

Na janela Configurar postagens do blog , insira Número de postagens no valor da página principal por 8 e clique no botão Salvar para aplicar.

Alterar fontes, cor, plano de fundo

Modelo de acesso / Personalizar

Se você deseja alterar a imagem de plano de fundo do corpo, selecione Plano de fundo e faça o upload da imagem.

Se você deseja alterar fontes, cores, cores de plano de fundo ou adicionar CSS personalizado, selecione Avançado .

Após todas as alterações, clique no botão Aplicar ao blog para finalizar. Se você não clicar neste botão, todas as alterações não serão aplicadas.

Traduzindo

Acesse o layout do blog e clique no link Editar no widget TRANSLATOR .

Na janela Configurar lista de links, insira o texto que você deseja traduzir ( texto original ) no campo Novo URL do site e o texto traduzido ( o texto será exibido ) no campo Novo nome do site .

Neste exemplo, quero traduzir "Adicionar ao carrinho" para "Eles vao gio hang", inserirei "Adicionar ao carrinho" no URL do novo site e "Eles vao gio hang" no Novo nome do site e clique em Adicionar link botão. Depois de adicionar todos os textos traduzidos, clique em Salvar para aplicar.

Você pode traduzir qualquer texto do site. Mas, em alguns casos, você deve observar que alguns textos não estão em uma sequência. Exemplo com o botão Adicionar ao carrinho na página do produto, você verá que esse botão possui o número de pedidos entre os textos. Portanto, os textos neste caso serão divididos em 2 partes. A frase 1 é "Adicionar" e a frase 2 é "itens ao carrinho". É por isso que você deve traduzi-los separadamente. Todos os textos diferenciam maiúsculas de minúsculas .

Definindo variáveis

Acesse o layout do seu blog , clique no link Editar no widget VARIABLES .

Na janela Configurar lista de links, insira o nome da variável em Novo nome do site e o valor na URL do novo site e clique em Adicionar link . Quando terminar, clique em Salvar para aplicar.

Abaixo está a lista de nomes de variáveis ​​e seu formato de valor associado:

• ADMIN_EMAIL: defina seu email para esta variável para receber pedidos e entrar em contato com emails, caso o servidor de email do Blogger tenha um erro. Você precisará fazer um checkout de teste pela primeira vez para receber o link de confirmação para ativar o e-mail desse serviço.
• CUPOM : insira sua lista de códigos de cupom. Por exemplo, se você desejar deduzir 25% para qualquer organismo que possua o cupom XMAS25, deverá inserir um valor para essa variável: XMAS25: 25% . Se você desejar 25% para o XMAS25 e US $ 5 para o NEWY, deverá inserir: XMAS25: 25% / NEWY: 5 . Lembre-se de não incluir o símbolo da moeda na lista de cupons.
• CURRENCY_CODE : o código da moeda do seu país geralmente vem com três letras. Você pode inserir qualquer código que desejar, mas se o código não estiver na lista abaixo, apenas defina CURRENCY_SIGN para seu símbolo de moeda. Abaixo está a lista de alguns códigos de moeda válidos:
  • AUD : dólar australiano
  • CAD : Dólar canadense
  • EUR : Euro
  • GBP : Libra esterlina
  • JPY : Iene Japonês
  • USD : dólar americano
  • NZD : Dólar neozelandês ($)
  • CHF : franco suíço
  • HKD : Dólar de Hong Kong ($)
  • SGD : Dólar de Cingapura ($)
  • SEK : Coroa sueca
  • DKK : Coroa dinamarquesa
  • PLN : zloti polonês
  • NOK : Coroa norueguesa
  • HUF : Forint húngaro
  • CZK : Coroa checa
  • ILS : Novo shekel israelense
  • MXN : Peso mexicano
  • BRL : Real Brasileiro
  • MYR : Ringgit da Malásia
  • PHP : Peso filipino
  • TWD : Novo dólar de Taiwan
  • THB : Baht tailandês
  • TENTAR : Lira turca
  • RUB : rublo russo
  • VND : Dong do Vietnã
  • RON : Ron romeno
  • INR : Rupia indiana
  • IDR : Rupia Indonésia
  • NPR : Rupia nepalesa
  • NGN : Naira nigeriana
• CURRENCY_SIGN: seu símbolo de moeda (opcional, permitido pela entidade html). O padrão é $
• PAYPAL_EMAIL: seu email do Paypal que será usado no método de pagamento do Paypal.
• SHIPPING_FEE: sua taxa de envio por pedido. O valor deve ser apenas número e não incluir símbolos simbólicos. O certo é: 20,00 e o errado é $ 20,00
• SHIPPING_FEE_FOR_EACH_ITEM: sua taxa de envio para cada item em ordem. Formato semelhante a SHIPPING_FEE
• STORE_NAME: o nome da sua loja que será exibido no método de checkout.
• STORE_STREET: o endereço da sua loja que será exibido no método de checkout.
• STORE_TOWN: o endereço da cidade da loja que será exibido no método de checkout.
• STORE_STATE: o endereço do estado da sua loja que será exibido no método de checkout.
• STORE_COUNTRY: o endereço do país da sua loja que será exibido no método de checkout.
• STORE_POSTCODE: o endereço postal da sua loja que será exibido no método de checkout.
• BANK_ACCOUNT_NAME: o nome da sua conta bancária que será exibido no método de pagamento por transferência bancária.
• BANK_ACCOUNT_NUMBER: o nome da sua conta bancária que será exibido no método de pagamento por transferência bancária.
• BANK_ACCOUNT_BANKNAME: nome do banco da sua conta bancária que será exibido no método de pagamento por transferência bancária.
• BANK_ACCOUNT_SORTCODE: número do código de classificação da sua conta bancária que será exibido no método de pagamento por transferência bancária.
• BANK_ACCOUNT_IBAN: código iban da sua conta bancária que será exibido no método de pagamento por transferência bancária.
• BANK_ACCOUNT_BIC_SWIFT: código rápido da sua conta bancária que será exibido no método de pagamento por transferência bancária.
• DAY_FORMAT: formato de data e hora, permita apenas dd / mm / aaaa ou mm / dd / aaaa ou aaaa / mm / dd / ou aaaa / dd / mm
• DEFAULT_THUMBNAIL: imagem em miniatura padrão src que será usada para mostrar quando uma postagem não tiver imagem.
• AJAX_LOADING_IMAGE: imagem ajax padrão src que será usada para mostrar ao carregar algo em seu site.
• NUMBER_ITEMS_FOR_COLLECTION: número de itens será exibido na seção de coleção. O padrão é 3 e recomenda um valor divisível para 3
• MAX_ARCHIVE_ITEMS: o número de itens será exibido nas páginas de arquivo (como marcador, pesquisa, páginas de data e hora).
• CART_CACHE_DURATION: número de dias em que o site manterá o carrinho e a data da lista de desejos dos usuários. O padrão é 7
• SLIDER_ANIMATION_SPEED: o tempo em microssegundos para a animação do controle deslizante. O padrão é 1000
• SLIDER_PAUSE_TIME: o tempo em microssegundos para o tempo de pausa do controle deslizante. O padrão é 4000
• SLIDER_CONTROL: insira false para ocultar o botão next / prev e true para mostrá-los. O padrão é verdadeiro .
• SLIDER_PAUSE_WHEN_HOVER: a entrada false e o controle deslizante continuarão funcionando mesmo com o mouse em movimento, e a entrada true fará com que o controle deslize pause quando o mouse passar. O padrão é falso.
• ENABLE_DIRECT_BANK_TRANSFER: insira false para desativar o método "Transferência bancária direta" e true  para ativá-lo. O padrão é verdadeiro .
• ENABLE_CHEQUE: insira false para desativar o método "Check" e true para ativá-lo. O padrão é verdadeiro .
• ENABLE_CASH_ON_DELIVERY: insira false  para desativar o método "Pagamento na entrega" e true  para ativá-lo. O padrão é verdadeiro .
• ENABLE_PAYPAL: insira false para desativar o método "Paypal" e true  para ativá-lo. O padrão é verdadeiro .
• CURRENCY_POS: insira depois  para mostrar o símbolo da moeda após o valor do preço e insira antes  para mostrar o símbolo da moeda antes do valor do preço.
• SEP_LONG_PRICE: o caractere que será usado para separar o valor do preço longo (exemplo: 1 000 000đ). O padrão é um caractere de espaço.
• ENABLE_FIELD_COUNTRY: insira false para ocultar o campo Country no formulário de checkout (cobrança e envio), true para mostrá-lo. O padrão é verdadeiro .
• ENABLE_FIELD_FIRST_NAME: semelhante acima, mas para mostrar / ocultar o campo Nome .
• ENABLE_FIELD_LAST_NAME: semelhante acima, mas para mostrar / ocultar o campo Sobrenome .
• ENABLE_FIELD_COMPANY_NAME: semelhante acima, mas para mostrar / ocultar o campo Nome da empresa .
• ENABLE_FIELD_ADDRESS: semelhante acima, mas para mostrar / ocultar o campo Endereço .
• ENABLE_FIELD_TOWN_CITY_STATE: semelhante acima, mas para mostrar / ocultar o campo Cidade / Cidade / Estado .
• ENABLE_FIELD_POST_ZIP_CODE: semelhante acima, mas para mostrar / ocultar o campo CEP / CEP .