Este artigo mostrará como personalizar o carrinho de compras de sua loja virtual na Dotstore através do CSS, deixando-o com a mesma identidade visual das demais páginas. Além do CSS, você também pode alterar as imagens e botões que são exibidos.

 

O sistema Dotstore foi desenvolvido pensando na personalização do design da loja. Sendo assim, as tabelas possuem “Ids” e “Class” para facilitar a personalização.

A tabela geral do carrinho de compras possui o id="DS_TbCarrinho" e através do CSS, você pode mudar o tamanho, a largura, o background e etc. de todos os elementos do carrinho.

Veja como personalizar essas tabelas

No carrinho de compras temos a barra com quatro passos para concluir a compra. Essa barra pode ser completamente personalizada, pois seus elementos estão em imagens. Sendo assim, parar alterar o background da barra é só criar uma imagem que replique na horizontal e substituir no painel de controle da loja com o nome “FundoTitId.gif” (5×70 pixels).

As imagens referentes a cada passo e os outros botões podem ser alteradas da mesma maneira, basta acessar o painel de controle de sua loja e seguir este caminho: Menu lateral>> Arquivos>> Imagens e substituir cada imagem com seus respectivos nomes e extensões dos arquivos. (Ex: BotContinuarComprando.gif).

A class="CarrinhoTit" é responsável pela barra de títulos das informações do carrinho (Descrição, Qtde, Remover, Unitário, Subtotal) que pode ser modificada, como apresentado no exemplo abaixo:

.CarrinhoTit {font-size:11px; color:#909090; font-weight: bold; 
background: url(../imagens/NomeImagem.gif) repeat-x; height:34px;}

As informações referentes a cada produto, estão dentro da tabela id="CarrinhoFundoProduto" e também podem ser personalizadas, pois cada informação do produto contém uma Class específica como, por exemplo, o nome do produto (class="CarrinhoProduto").

Após o bloco das informações do carrinho, temos a barra de cálculo do frete, id="TbCepFreteCalcT" que pode modificar os textos e até mesmo o campo para digitar o CEP, como no exemplo do CSS abaixo:

#TbCepFreteCalcT{background: url(../imagens/NomeImagem.gif) repeat-x; border:1px solid #d6d6d6;}
#ValorFrete{font-size:16px; color:#909090; }
#TableCEP .FCampos {background:#F5F5F5; border:1px solid #B6B5B5; color:#6C6C6C; font-size:12px;}

Para finalizar, no carrinho de compras temos a barra de Valor total com a class="StrCarrinhoValorTotal", a qual é possível alterar como todos os demais itens, através das Classes do CSS.

Até a próxima!