“Adicionar ao carrinho” ou “Adicionar à sacola”, qual devo utilizar na minha loja virtual? Bom, assim como a universal discussão sobre “bolacha ou biscoito”, a resposta vai depender do seu contexto. Então, nada melhor que ter a liberdade de escolher o que mais faz sentido para você, não é mesmo?
Olá a todos! Como estão? Hoje trago um tutorial básico para que você possa personalizar os rótulos do carrinho da sua loja.
Em primeiro lugar, você deve acessar a página de admin da sua loja. Use suas credenciais para fazer login. Na tela inicial, navegue pelo menu de Coleções e selecione a opção Layout.
O submenu do Layout deverá ser exibido em seguida. Escolha a opção “Inserir Código”.
Agora você será redirecionado(a) para a página de edição. Navegue até o campo de CSS customizado, onde iremos inserir nosso código:
Adicione o código CSS abaixo no campo de texto. Sinta-se à vontade para alterar os textos a propriedade content, sempre lembrando, é claro, de escrevê-lo entre aspas simples, ok?
.minicart__empty .lead {
font-size: 0;
}
.minicart__empty .lead:after {
content: 'Sacola vazia ...';
display: block;
font-size: calc(1.25788rem + .0945vw);
margin-bottom: 16px;
}
.minicart__aside .card-header {
font-size: 0;
}
.minicart__aside .card-header:after {
content: "Minha sacola de compras";
font-size: 16px;
}
#spa .container h1 {
font-size: 0;
}
#spa .container h1::before {
display: block;
content: 'Minha sacola';
font-size: 2rem;
color: var(--secondary);
font-weight: 500;
}
.minicart__btn-cart {
font-size: 0;
}
.minicart__btn-cart::after {
content: 'Ver sacola';
font-size: 1rem;
}
.cart__empty .lead.text-muted {
font-size: 0;
}
.cart__empty .lead.text-muted::after {
content: 'Sacola vazia ...';
font-size: 16px;
}
.checkout__back .btn.btn-sm.btn-light {
font-size: 0;
}
.checkout__back .btn.btn-sm.btn-light::after {
content: 'Voltar à sacola';
font-size: .875rem;
}
.product-card__buy.fade .btn.btn-primary.btn-block {
font-size: 0;
}
.product-card__buy.fade .btn.btn-primary.btn-block::after {
content: 'Adicionar à sacola';
font-size: 1rem;
}
Por último, e não menos importante, vamos publicar nossas alterações.
Voilà! Sua personalização está salva e sua loja está mais próxima do que você quer oferecer ao seu cliente!
Espero que as dicas tenham sido úteis. Até mais! 