Olá pessoal neste tutorial vou mostrar como criar uma tabela de frete amigo, com editar ela e bônus cria um pop-up na página inicial, ao clicar ele vai aparecer pro seu cliente. Mas antes, é bom entender bem o conceito para que você não perca receita nas vendas, assista o vídeo abaixo, vai ser importante entender bem sobre para seguir com o tutorial

Módulo Extra: https://www.brasilnaweb.com.br/modulos/frete+personalizado+com
Treinamento do módulo: https://ajuda.coopstore.com.br/frete-personalizado-com-multiplos-filtros/

Agora que sabemos como funciona e já temos o módulo implementado, vamos criar nossa tabela de frete amigo, vá no menu de Customização > Páginas Institucionais e crie uma nova página, clique em Inserir, dê o nome dela de: Frete Amigo (você pode renomear como quiser).

Antes de seguir, vamos na aba de Dados deste tela e copiar e guardar o texto do campo URL Amigável este dado vai ser importante para usarmos ele lá na frente como POP-UP aqui no meu exemplo está: “frete-amigo”

Agora voltando na aba Geral vamos na parte de Texto da Página e clicar em “Código Fonte” ai vamos copiar e colar ó código abaixo:

<div class="tabela_frete">
	<h3 style="text-align: center;"><span style="font-size:20px;"><strong>Fretes Grátis e Frete amigo via PAC ou JadLog, entenda :)</strong></span></h3>
	<table border="0" cellpadding="0" cellspacing="0" class="table table-bordered" style="width:100%;">
		<tbody>
			<tr>
				<td colspan="11" rowspan="1" style="text-align: center;"><span style="font-size:14px;"><strong>Aproveite os descontos!</strong></span></td>
			</tr>
			<tr>
				<th><strong>Grande BH</strong></th>
				<td>Acima de R$ 140,00 = R$ 15</td>
			</tr>
			<tr>
				<th><strong>Capitais </strong>Sul-Sudeste-Oeste</th>
				<td>Acima de R$ 240,00 = R$ 22</td>
			</tr>
			<tr>
				<th><strong>Capitais </strong>Norte-Nordeste</th>
				<td>Acima de R$ 240,00 = R$ 28</td>
			</tr>
			<tr>
				<th><strong>Todas as capitais</strong></th>
				<td>Acima de R$ 350,00 = <span style="color:#000; font-weight: bold;"><strong>Frete Grátis</strong></span></td>
			</tr>
			<tr>
				<th><strong>MG</strong></th>
				<td>Acima de R$ 190,00 = R$ 18</td>
			</tr>
			<tr>
				<th><strong>Sul-Sudeste-Oeste</strong></th>
				<td>Acima de R$ 200,00 = R$ 22</td>
			</tr>
			<tr>
				<th><strong>NORTE</strong></th>
				<td>Acima de R$ 350,00 = R$ 30</td>
			</tr>
			<tr>
				<th><strong>NORTE</strong></th>
				<td>Acima de R$ 700,00 = <span style="color:#000; font-weight: bold;"><strong>Frete Grátis</strong></span></td>
			</tr>
		</tbody>
	</table>
</div>
<p>
	<span style="font-size:20px;">
		Como toda boa amizade, no Frete Amigo nós facilitamos o transporte pra você! Nós pagamos parte do custo e você paga somente o valor informado na tabela acima conforme as regiões e valores mínimos de pedidos!  : ]
	</span>
</p>

Deve fica assim:

Agora basta clicar novamente no item de Código Fonte para visualizarmos a tabela que disponibilizamos de exemplo

Agora edite a tabela de acordo com sua margem e estratégia de frete amigo, use editor para criar novas linhas, deletar outras mudar texto negritar e etc. Capriche no texto e informação, aconselhamos a deixar tudo bem claro explicado para seu cliente.

Para lhe ajudar veja este outro treinamento focado nessa ferramenta

Agora que editamos e está tudo certinho, vamos fazer um ajuste da tabela para mobile, deixar a tabela ainda mais sensacional, vamos no menu de Customização > Personalizar aqui vamos na aba de Avançado e no campo de CSS Personalizado cole no final de qualquer instrução que tenha lá o seguinte código:

/*PARA TABELA DE FRETE*/
@media only screen and (max-width: 979px){
	.abre-pagina-pop #content{padding: 0}
	.tabela_frete{}
		.tabela_frete h3{
			text-align: center;
			font-size: 25px;
		}
		.tabela_frete th, .tabela_frete td{text-align: center !important;}
		.tabela_frete td{padding-bottom: 25px;}
}

Agora vamos ao bônus e colocar o POP-UP, aqui vamos usar outro tutorial para colocar alguns códigos nesta tela, neste turorial https://ajuda.coopstore.com.br/link-pop-up-na-loja-lightbox/ siga e copie a parte do Javascript e volte aqui.

Agora com a tabela criada, o CSS e Javascipt adicionado vamos criar uma forma de chamar a atenção do nosso frete na página inicial da loja.

Para minha loja eu vou colocar uma faixa abaixo do banner em amarelo com texto: FRETE AMIGO, condições especiais de entrega, confira!

Para isso vamos no menu de Customização > Áreas Personalizadas e vou adiciona uma nova aba. Vou colocar o nome de Banner Frete Amigo, no texto vou criar uma tabela, com 1 coluna e 1 linha, sem borda, largura de 100% com margem interna de 20. Centralizar o texto, colorir a minha célula de amarelo e colocar o texto.

Agora só colocar o link no “Confira”, aqui vamos selecionar o texto e clica na ferramenta de link, ao abrir a caixa amos selecionar no protocolo https:// e colocar a URl da loja + URL da página que criamos lá em cima, no meu exemplo é frete-amigo

Logo vai fica assim: www.dominio.cm.br/frete-amigo

E para fazer o pop-up vamos adicionar depois da URl o seguinte código: ?information_popup=1&title=no

Logo a URL completa vai ficar assim:

www.dominio.cm.br/frete-amigo?information_popup=1&title=no

Ainda nesta janela, vamos na aba avançado e coloca no campo de Classe de CSS o seguinte código: abre-pagina

Agora só da o OK, depois de editado o texto vamos posicionar ele debaixo do banner , nas opções mais abaixo da caixa de texto vamos colocar assim:

Se quiser saber mais sobre Layouts e Posições veja este treinamento: https://ajuda.coopstore.com.br/mapa-de-posicoes-da-loja-da-brasil-na-web/

Agora só salvar e testar.

Agora que está tudo configurado você só precisa editar a tabela que fica na no menu de Customização > Páginas institucionais. Atenção se muda o título da página você precisa mudar o também o link do pop-up no menu de Customização > Áreas personalizadas

Espero ter ajudado, qualquer dúvida envie para suporte@brasilnaweb.com.br

Boas vendas e até mais!