Como podemos ajudar?

Este artigo foi criado para as lojas que utilizam o modelo de design responsivo (RWD) do Fastcommerce.

Este recurso só funcionará corretamente nas seguintes condições:

• O campo Subprodutos da página Dados da loja do site administrativo deve estar marcado.
• O campo Exibe peso da página Dados da loja do site administrativo deve estar marcado.
• O subproduto deve conter pelo menos um descritor cadastrado.
  ex. Tamanho: P
• Ao cadastrar cores personalizadas, coloque + (sinal de mais) ao invés de espaços entre os nomes.
  ex. Amarelo+Azul
• Cada combinação de tamanho e cor deve ser cadastrada como um subproduto.
  ex. Cadastre um subproduto para o Tênis Ultra Mega - Tamanho 37 - Cor Preta, outro subproduto para o Tênis Ultra Mega - Tamanho 38 - Cor Preta, etc)
• Deve ser cadastrada a Imagem principal, Imagem de detalhe e Imagem ampliada em todos os produtos e subprodutos, mesmo que as imagens sejam iguais.
  Para o zoom funcionar corretamente, sugerimos que as imagens tenham as seguintes dimensões:
  
  • Imagem detalhada: entre 200px de largura x 200px de altura até 350px de largura x 350px de altura
  • Imagem ampliada: entre 600px de largura x 600px de altura até 800px de largura x 800px de altura
  Veja aqui algumas recomendações para as imagens de produtos.
• Para exibir várias imagens do produto é necessário que todas estas imagens sejam cadastradas entre vírgulas nos campos Imagem de detalhe e Imagem ampliada na ficha dos produtos.
  Exemplo:
  
  • Imagem de detalhe: ImagemDetalhe01.jpg,ImagemDetalhe02.jpg,ImagemDetalhe03.jpg,ImagemDetalhe04.jpg
  • Imagem ampliada: ImagemAmpliada01.jpg,ImagemAmpliada02.jpg,ImagemAmpliada03.jpg,ImagemAmpliada04.jpg
  
  Obs: Todas as imagens devem ser enviadas para a pasta PROD, antes do preenchimento dos campos na ficha de produto.
  ATENÇÃO: Se a quantidade de imagens cadastras nos campos de imagem for diferente, só será exibida a primeira imagem.
  
  • Exemplo: Se forem cadastradas 3 imagens de detalhe e apenas 2 imagens ampliadas, somente a primeira imagem será exibida.
    

Obs.: Se a loja não seguir as regras acima, este recurso não funcionará corretamente.

Passos para a implementação

1. Salve o arquivo FC_Grid_v1_css.zip em seu computador. Em seguida, envie o arquivo para a pasta CSS dentro da pasta HTM do Gerenciador de Arquivos da loja. Se a pasta não existe crie uma nova pasta com o nome CSS e envie o arquivo para a pasta.
2. Salve o arquivo FC_Grid_v1_js.zip em seu computador. Em seguida, envie para a pasta JS dentro da pasta HTM do Gerenciador de Arquivos da loja. Se a pasta não existe crie uma nova pasta com o nome JS e envie o arquivo para a pasta.
3. Salve o arquivo FC_Grid_v1_IMG.zip em seu computador. Em seguida, envie para a pasta IMAGES do Gerenciador de Arquivos da loja.
   O arquivo FC_Grid_v1_IMG.zip possui as seguintas imagens:
   • BotCarrinho.svg (botão comprar)
   • BotCarrinhoEsgotado.svg (botão esgotado)
   • BotConsulteGrid.svg (botão consulte-nos)
   • BotSelecioneGrid.svg (botão selecionar as opções)

No arquivo EstiloProduto.htm inclua entre as tags <ProdDet> e </ProdDet> o seguinte bloco de código:

<ProdDet>

<!-- Begin: HTML structure -->
<link rel="stylesheet" type="text/css" href="<BaseLoja>htm/css/FC_Grid_v1.css">
<link rel="stylesheet" href="/js/MagicToolbox/MagicZoomPlusV1/magiczoomplus.css">
<div class="FCGridMain">
<div id="idDivGridImg" class="col-small-12 col-medium-12 col-large-5 col-xlarge-5">
<img src="<ImagemProdDet>">
</div>
<div class="col-small-12 col-medium-12 col-large-7 col-xlarge-7 FCContentGrid">
<h1 id="idNameProductGridFC" class="FCNameProductGrid"><NomeProd></h1>
<br>
<span class="FCCodProdGrid">
Ref.: <small id="idCodProdGrid"><CodProd></small>
</span>
<br>
<p id="idPriceGridFC" class="FCPriceGrid">
<PrecoSimples>
</p>
<script>
(function(){ var e=document.getElementById("idPriceGridFC"); if(e)e.innerHTML+= fnMaxInstallmentsGrid(<PrecoNum>,<MaxParcelasProdNum>) + fnShowEconomyGrid(<PrecoNum>,<PrecoOri>); })();
</script>
<br>
<div id="idMainGridFC_<IDProduto>"></div>
<br>
<!-- ZipCode: Begin -->
<div class="ProductStyleBoxFC col-small-12 col-medium-12 col-large-8 col-xlarge-5">
<div id="ShowCEP<IDProduto>"></div>
</div>
<!-- ZipCode: End -->
</div>
<div class="col-small-12 col-medium-12 col-large-12 col-xlarge-12 text-left descr-prod">
<div class="ProductStyleBoxDescriptionFC">
<h2>Descrição:</h2>
</div>
<div class="ProductStyleBoxDescriptionFC">
<Descricao>
</div>
<div class="ProductStyleBoxDescriptionFC">
<DescrHTM>
</div>
<div class="ProductStyleBoxDescriptionFC">
<DescrURL>
</div>
</div>
</div>
<br>
<!-- End: HTML structure -->
<!-- Begin: JS scripts -->
<script src="/js/MagicToolbox/MagicZoomPlusV1/magiczoomplus.js"></script>
<script src="<BaseLoja>htm/js/FC_Grid_v1.js"></script>
<script>
fnShowCEPGrid(<IDProduto>); /*FC simulação de frete */
FCGrid$.fnMultipleZoom("<ImagemProdDet>","<ImagemProdAmp>", false);
</script>
<script>
var aProductOnlyOneGrid=[], aProductListGrid=[];
/* Begin: Produto principal */
var sCor = ("<CorVal>" !="") ? "<CorVal>|<CorRGB>":"";
aProductOnlyOneGrid.push(JSON.stringify({IDProduto: <IDProduto>,codProd: "<CodProd>", cor: sCor, estoque: <Estoque>, peso: "<PesoNum>", priceOri: "<PrecoOri>", priceNum: "<PrecoNum>", maxInstallmentsNum: <MaxParcelasProdNum>, adicional1: "<Adicional1Val>", adicional2: "<Adicional2Val>", adicional3: "<Adicional3Val>", adicionalD1: "<AdicionalD1Val>", adicionalD2:"<AdicionalD2Val>", adicionalD3:"<AdicionalD3Val>", imgDet:"<ImagemProdDet>", imgAmp:"<ImagemProdAmp>"}));
/* End: Produto principal */
/* Begin: Lista subprodutos */
<sub>
var sCor = ("<CorVal>" !="") ? "<CorVal>|<CorRGB>":"";
aProductListGrid.push(JSON.stringify({IDProduto: <IDProduto>, codProd: "<CodProd>", cor: sCor, estoque: <Estoque>, peso: "<PesoNum>", priceOri: "<PrecoOri>", priceNum: "<PrecoNum>", maxInstallmentsNum: <MaxParcelasProdNum>, adicional1: "<Adicional1Val>", adicional2: "<Adicional2Val>", adicional3: "<Adicional3Val>", adicionalD1: "<AdicionalD1Val>", adicionalD2:"<AdicionalD2Val>", adicionalD3:"<AdicionalD3Val>", imgDet:"<ImagemProdDet>", imgAmp:"<ImagemProdAmp>"}));
</sub>
/* End: Lista subprodutos */
/* Begin: Código opcional para alterar as configurações da grade */
FCGrid$.myOptions = {
autoSelect : false,
cartOnPage : true,
shippingUpdate : true,
incMultGrid : false,
separadorRGBCor : '|',
qtyDescriptors : 7,
htmlFlagChecked : '<i class="FCCheckedGrid"></i>',
imageProduct : 'cor',
colorName : false,
colorImg : false,
colorImgFormat : '.gif',
stock: false,
btnSelectImg : 'BotSelecioneGrid.svg',
btnBuyImg : 'BotCarrinho.svg',
btnContactUSImg : 'BotConsulteGrid.svg',
btnSoldOut : 'BotCarrinhoEsgotado.svg',
textGrid : 'Selecione as opções abaixo',
order : ['cor', 'adicional1', 'adicional2', 'adicional3', 'adicionalD1', 'adicionalD2', 'adicionalD3'],
nameDescriptor : {
cor : 'Cor',
adicional1 : 'Descritor 1',
adicional2 : 'Descritor 2',
adicional3 : 'Descritor 3',
adicionalD1 : 'Descritor 4',
adicionalD2 : 'Descritor 5',
adicionalD3 : 'Descritor 6'
},
textDescriptor : {
cor : 'Selecione',
adicional1 : 'Selecione',
adicional2 : 'Selecione',
adicional3 : 'Selecione',
adicionalD1 : 'Selecione',
adicionalD2 : 'Selecione',
adicionalD3 : 'Selecione'
}
};
/* End: Código opcional para alterar as configurações da grade */
FCGrid$.init("idMainGridFC_<IDProduto>", aProductListGrid, aProductOnlyOneGrid); /* Inicia a grade */
</script>
<!-- End: JS scripts -->

</ProdDet>

O código HTML apresentado neste passo é um exemplo simplificado para o layout da página de detalhe do produto. Se preferir salve o arquivo completo EstiloProdGrid_v1.zip em seu computador. Em seguida, envie o arquivo para a pasta HTM dentro do Gerenciador de Arquivos da loja.

Obs.: esse arquivo está preparado para ser implementado no modelo de design responsivo (RWD) do Fastcommerce. Caso o loja utilize um modelo diferente/ personalizado será necessário realizar as devidas adaptações nos códigos HTML, CSS e javascript.

Parcelamento dos produtos.

Inclua no final do arquivo LojaLib.js as funções abaixo:

/*Função para mostrar parcelamento*/
function fnMaxInstallmentsGrid(PrecoProd,MaxParcelas){
var ComSem;
if(typeof Juros!="undefined"){
if(PrecoProd==0||MaxParcelas==1||Juros.length==0)return "";
if(MaxParcelas==0||MaxParcelas>Juros.length)MaxParcelas=Juros.length;
if(Juros[MaxParcelas-1]>0)ComSem=""; else ComSem="<font color=#990000> sem juros</font>";
return "<span class=EstParc> ou <b>"+MaxParcelas+"x</b>"+ComSem+" de <b>"+FormatPrecoReais(CalculaParcelaJurosCompostos(PrecoProd,MaxParcelas))+"</b></span>";
}else{
return "";
}
}
/*Função para mostrar valor formatado*/
function FormatNumber(num){
var num=num.toString().replace(/\$|\,/g,'');
if(isNaN(num))num="0";
sign=(num==(num=Math.abs(num))); num=Math.floor(num*100+0.50000000001); num=Math.floor(num/100).toString();
for(var i=0;i<Math.floor((num.length-(1+i))/3);i++)num=num.substring(0,num.length-(4*i+3))+'.'+num.substring(num.length-(4*i+3));
return ((sign)?'':'-')+num;
}
/*Função para mostrar valor economizado em produtos em promoção*/
function fnShowEconomyGrid(ProdPrice,ProdPriceOri){
if(ProdPrice!=ProdPriceOri && typeof FormatNumber == 'function' && typeof FormatPrice == 'function' ){
return "<font style='font-size:16px;display:block;margin:10px 0;' color=#6f9e45>Economize <b>"+ FormatPrice(ProdPriceOri-ProdPrice,'R$') +"</b> ("+ FormatNumber(((ProdPriceOri-ProdPrice)/ProdPriceOri)*100)+"%)</font>";
}else{return "";}
}

A função fnMaxInstallmentsGrid é responsável por exibir o valor do parcelamento do produto, ex.:
R$ 1.000,00 ou 6x de R$ 178,47

A função fnShowEconomyGrid é responsável por exibir o valor economizado em produtos em promoção, ex.:
de R$ 2.500,00 por R$ 2.100,00 Economize R$ 400,00 (16%)

Simulação de frete para os subprodutos.

Obs.: A simulação de frete no detalhe do produto funciona somente se a loja utiliza a opção Utilizar faixas de CEP (Brasil) na página Envio & frete da loja. Para mais detalhes sobre a configuração do frete da loja por faixas de CEP clique aqui e veja a 3° opção.

Para o funcinamento correto do recurso de simulação de frete para os subproduto marque na página Dados da Loja a opção Exibe Peso e cadastre o respectivo peso em cada subproduto.

Inclua no final do código do arquivo LojaLib.js as funções abaixo:

// ZipCode Grid FC - CEP - Begin 
function fnShowCEPGrid(IDProd){
if(FC$.TypeFrt==3){
var sNumCEP=fnGetCookie('CEP'+FC$.IDLoja);
if(sNumCEP==null)sNumCEP="";
sCEP="<div id='idDivCEPFC'>";
sCEP+=" <div id='idDivTitCEP'><img src='"+ FC$.PathImg +"iconziptruck.svg' width='25' height='25' alt='Zip box' /><span>Simule o valor do frete</span></div>";
sCEP+=" <div id='idDivContentCEP'>";
sCEP+=" <div id='idDivContentFieldsCEP'>";
sCEP+=" <div id='idDivCEPCalc'>";
sCEP+=" <div class='FieldCEP FieldCEPQty'><label>Qtd.</label><input type='number' id='idQtdZip"+ IDProd +"' value='1' maxlength='4'></div>";
sCEP+=" <div class='FieldCEP FieldCEPNum'><input type='text' placeholder='CEP' id='idZip"+ IDProd +"' value='"+ sNumCEP +"' maxlength='9'></div>";
sCEP+=" <img src='"+ FC$.PathImg +"iconnewsletter.svg' height='29px' id='idCEPButton' class='FieldCEPBtn' onclick='fnGetShippingValuesProdGrid("+ IDProd +")'>";
sCEP+=" </div>";
sCEP+=" </div>";
sCEP+=" <div id='idDivImgLoadingCEPFC'><img src='"+ FC$.PathImg +"loadingcep.gif' vspace=3 style='display:none;' id=ImgLoadingCEP></div>";
sCEP+=" <div id='idShippingValues"+ IDProd +"'></div></div>";
sCEP+=" </div>";
sCEP+="</div>";
var oShowCEP=document.getElementById("ShowCEP"+IDProd);
if(oShowCEP)oShowCEP.innerHTML=sCEP;
}
}
function fnGetShippingValuesProdGrid(IDProd){
sCEP=document.getElementById("idZip"+ IDProd).value;
fnSetCookie('CEP'+FC$.IDLoja,sCEP);
if(sCEP==""){document.getElementById("idShippingValues"+IDProd).innerHTML="<span class='freightResult' style=color:#990000;>Informe o CEP</span>";return;}
document.getElementById("idShippingValues"+IDProd).innerHTML="";
document.getElementById("ImgLoadingCEP").style.display='';
var iQty=document.getElementById("idQtdZip"+IDProd).value;
if(IDProd)var sParamProd="&idproduto="+ IDProd;
else var sParamProd="";
AjaxExecFC("/XMLShippingCEP.asp","&qty="+ iQty +"&cep="+ sCEP + sParamProd,false,processXMLCEPGrid,IDProd);
}
function processXMLCEPGrid(obj,IDProd){
var sShipping="";
var oShippingValues=document.getElementById("idShippingValues"+IDProd);
var iErr=ReadXMLNode(obj,"err");if(iErr==null)return;
if(iErr!="0"){
document.getElementById("ImgLoadingCEP").style.display='none';
oShippingValues.innerHTML="<span class='freightResult' style=color:#990000;>"+ ReadXMLNode(obj,"msg") +"</span>";
return;
}
oShippingValues.innerHTML="";
var UseCart=ReadXMLNode(obj,"UseCart");
if(UseCart=="False"){
var ProdName=ReadXMLNode(obj,"ProdName");
var ProdRef=ReadXMLNode(obj,"ProdRef");
}
sShipping+="<div class='ZipOptions'>";
var iOpt=ReadXMLNode(obj,"OptQt");
for(var i=1;i<=iOpt;i++){
var OptName=ReadXMLNode(obj,"Opt"+ i +"Name");
var OptImage=ReadXMLNode(obj,"Opt"+ i +"Image");
var OptObs=ReadXMLNode(obj,"Opt"+ i +"Obs");
if(OptObs==null)OptObs="";
sValorFrete=ReadXMLNode(obj,"Opt"+ i +"Value");
if(sValorFrete=="R$ 0,00")sValorFrete="FRETE GRÁTIS";
sShipping+="<div class='ZipOption'>";
sShipping+=" <div class='ZipNameObs'>";
sShipping+=" <div class='ZipName'>"+ OptName +"</div>";
sShipping+=" <div class='ZipObsVal'>"+ OptObs +"</div>";
sShipping+=" </div>";
sShipping+=" <div class='ZipValue'>"+ sValorFrete +"</div>";
sShipping+="</div>";
}
oShippingValues.innerHTML=sShipping;
oShippingValues.style.display="block";
sShipping+="</div>";
document.getElementById("ImgLoadingCEP").style.display='none';
}
// ZipCode Grid FC - CEP - End 

Verifique se o arquivo LojaLib.js já possui as funções abaixo. Caso o arquivo não possua essas funções faça a inclução delas no final do código do arquivo.

function fnGetCookie(name){
var arg=name+"=";
var alen=arg.length;
var clen=document.cookie.length;
var i=0;
while (i<clen){
var j=i+alen;
if(document.cookie.substring(i,j)==arg)return fnGetCookieVal(j);
i=document.cookie.indexOf(" ",i)+1;
if(i==0)break;
}
return null;
}
function fnGetCookieVal(offset){
var endstr=document.cookie.indexOf(";",offset);
if (endstr==-1)endstr=document.cookie.length;
return unescape(document.cookie.substring(offset,endstr));
}
function fnSetCookie(name,value){
var argv=fnSetCookie.arguments;
var argc=fnSetCookie.arguments.length;
var expires=(argc>2)?argv[2]:null;
var path=(argc>3)?argv[3]:null;
var domain=(argc>4)?argv[4]:null;
var secure=(argc>5)?argv[5]:false;
document.cookie=name+"="+escape(value)+((expires==null)?"":(";expires=" + expires.toGMTString()))+((path==null)?"":(";path="+path))+((domain==null)?"":(";domain="+domain))+((secure==true)?"; secure":"");
}

Veja as opções de personalização.

Parâmetro	Padrão	Opções	Descrição
myOptions
autoSelect	true	true/ false	Seleciona automaticamente o primeiro subproduto caso seja utilizado a opção true
cartOnPage	true	true/ false	Ativa o recurso Adiciona produto à cesta sem sair da página na Grade caso seja utilizado a opção true
shippingUpdate	true	true/ false	Ativa o recurso a simulação de frete com o peso do subproduto caso utilizado a opção true
incMultGrid	true	true/ false	Ativa o recurso para informar a quantidade de cada produto antes de colocá-lo na cesta na Grade caso seja utilizado a opção true
separadorRGBCor	'|'	Caracteres	Define o caractere para seperar o nome e o valor Hexadecimal da cor cadastrado no produto
qtyDescriptors	2	números de 1 à 7	Define a quantidade máxima de descritores especiais e simples utilizandos nos produtos, incluí também a cor
htmlFlagChecked	'<i class="FCCheckedGrid"></i>'	elemento html	Define o HTML para exibir o check
imageProduct	'cor'	nome de um descritor ex.: cor e descritor1	Define qual descritor será usado para alterar a imagem dos produto de acordo com o descritor clicado
colorName	false	true/ false	Define se será exibido o nome das cores, ex. vermelho
colorImg	false	true/ false	Define se será exibido imagens para as cores, ex.
colorImgFormat	'.gif'	extensões de arquivos de imagem ex. .svg e .png	Define a extensão dos arquivos de imagem que serão para as cores ex.
stock	false	true/ false	Exibe o quantidade em estoque dos produtos caso seja utilizado a opção true
btnSelectImg	'BotSelecioneGrid.svg'	nome da imagem do botão	Nome do arquivo de imagem para o botão "selecionar"
btnBuyImg	'BotCarrinho.svg'	nome da imagem do botão	Nome do arquivo de imagem para o botão "comprar"
btnContactUSImg	'BotConsulteGrid.svg'	nome da imagem do botão	Nome do arquivo de imagem para o botão "consulte-nos"
btnSoldOut	'BotCarrinhoEsgotado.svg'	nome da imagem do botão	Nome do arquivo de imagem para o botão "esgotado"
textGrid	'Selecione as opções abaixo'	texto livre	Exibe um texto acima das opções da grade
order	['cor', 'descritor1', 'descritor2', 'descritor3', 'descritorD1', 'descritorD2', 'descritorD3']		Define a ordenação que os descritores serão exibidos na Grade
myOptions : nameDescriptor [ ]
cor	'Cor'	nome para o descrito cor	Define o nome que será exibido para o descritor Cor
descritor1	'Adicional 1'	nome do descritor 1, ex. tamanho	Define o nome que será exibido para o Descritor Adicional 1
descritor2	'Adicional 2'	nome do descritor 2, ex. marca	Define o nome que será exibido para o Descritor Adicional 2
descritor1	'Adicional 3'	nome do descritor 3	Define o nome que será exibido para o Descritor Adicional 3
descritorD1	'Adicional 4'	nome do descritor 4	Define o nome que será exibido para o Descritor Simples 1
descritorD2	'Adicional 5'	nome do descritor 5	Define o nome que será exibido para o Descritor Simples 2
descritorD3	'Adicional 6'	nome do descritor 6	Define o nome que será exibido para o Descritor Simples 3
myOptions : textDescriptor [ ]
cor	'Selecione'	texto livre, ex. selecione a cor	Define o texto que será exibido para o descritor Cor
descritor1	'Selecione'	texto livre, ex. selecione o tamanho	Define o texto que será exibido para o Descritor Adicional 1
descritor2	'Selecione'	texto livre, ex. selecione o modelo	Define o texto que será exibido para o Descritor Adicional 2
descritor3	'Selecione'	texto livre, ex. selecione a voltagem	Define o texto que será exibido para o Descritor Adicional 3
descritorD1	'Selecione'	texto livre	Define o texto que será exibido para o Descritor Simples 1
descritorD2	'Selecione'	texto livre	Define o texto que será exibido para o Descritor Simples 2
descritorD3	'Selecione'	texto livre	Define o texto que será exibido para o Descritor Simples 3

Exemplos

Configuração simples para grade que utiliza Cor e Tamanho (Descritor Especial 1):

<script type="text/javascript">
FCGrid$.myOptions = {
qtyDescriptors : 2,
order : ['cor', 'adicional1'],
nameDescriptor : {
cor : 'Cor',
adicional1 : 'Tamanho'
},
textDescriptor : {
cor : 'Selecione a cor',
adicional1 : 'Selecione o tamanho'
}
};
</script>

Configuração completa

<script type="text/javascript">
FCGrid$.myOptions = {
autoSelect : false,
cartOnPage : false,
shippingUpdate : false,
incMultGrid : false,
separadorRGBCor : '|',
qtyDescriptors : 7,
htmlFlagChecked : '<i class="FCCheckedGrid"></i>',
imageProduct : 'cor',
colorName : false,
colorImg : false,
colorImgFormat : '.gif',
stock : false,
btnSelectImg : 'BotSelecioneGrid.svg',
btnBuyImg : 'BotCarrinho.svg',
btnContactUSImg : 'BotConsulteGrid.svg',
btnSoldOut : 'BotCarrinhoEsgotado.svg',
textGrid : 'Selecione as opções abaixo',
order : ['cor', 'adicional1', 'adicional2', 'adicional3', 'adicionalD1', 'adicionalD2', 'adicionalD3'],
nameDescriptor : {
cor : 'Cor',
adicional1 : 'Descritor 1',
adicional2 : 'Descritor 2',
adicional3 : 'Descritor 3',
adicionalD1 : 'Descritor 4',
adicionalD2 : 'Descritor 5',
adicionalD3 : 'Descritor 6'
},
textDescriptor : {
cor : 'Selecione',
adicional1 : 'Selecione',
adicional2 : 'Selecione',
adicional3 : 'Selecione',
adicionalD1 : 'Selecione',
adicionalD2 : 'Selecione',
adicionalD3 : 'Selecione'
}
};
</script>

Como utilizar imagens para as cores?

1. Configuração da grade

Utilize o parâmetro:

colorImg : true

Exemplos

Configuração simples para grade que utiliza Cor e Tamanho (Descritor Especial 1):

<script type="text/javascript">
FCGrid$.myOptions = {
qtyDescriptors : 2,
colorImg : true
order : ['cor', 'adicional1'],
nameDescriptor : {
cor : 'Cor',
adicional1 : 'Tamanho'
},
textDescriptor : {
cor : 'Selecione a cor',
adicional1 : 'Selecione o tamanho'
}
};
</script>

2. Cadastro das cores na loja

Cadastre as cores na página Dados da Loja » Produtos » clicando na seta a direita do campo "Exibe cores", informe o nome da cor, selecione uma cor hexadecimal (#000000) na tabela de cores e clique no botão incluir. Para mais detalhes sobre como cadastrar novas cores e demais descritores para os produtos veja o nosso artigo de ajuda.

Crie uma pasta com o nome CORES dentro da pasta PROD no Gerenciador de Arquivos da loja e envie os arquivos de imagens das cores.

O nome do arquivo da imagem deve ser igual ao nome da cor cadastrada na loja. Caso a cor seja composta por mais de um nome, utilize o sinal de + (mais).

Exemplo: se o nome da cor é Azul+Escuro, o nome da imagem enviada para a pasta CORES deve ser Azul_Escuro.gif, substitua o sinal de + (mais) por _ (underscore / underline).

Exemplos