Skip to main content

Introdução

Boas-vindas a este tutorial sobre como personalizar a largura do carrinho no mobile de acordo com suas preferências! Ajustar a largura do carrinho no mobile pode melhorar muito a experiência de compra dos seus clientes, garantindo que o carrinho seja fácil de visualizar e interagir em telas menores. Essa personalização permite controlar o layout, garantindo que ele se encaixe perfeitamente no design geral da sua loja e mantenha tudo com aparência limpa e organizada. Estes passos foram pensados para lojistas ou desenvolvedores com conhecimentos básicos de CSS. Ao ajustar a largura do carrinho no mobile, você pode melhorar a usabilidade e tornar o processo de checkout mais fluido para seus clientes, potencialmente aumentando as conversões e a satisfação dos clientes. Vamos começar e fazer seu carrinho mobile ficar e funcionar exatamente como você quer!

Acessando as configurações de CSS personalizado

Para começar a personalizar o CSS do seu Upcart, siga estes passos:
  1. Abra o app Upcart no seu painel.
  2. Navegue até o Cart Editor.
  3. Abra Settings e selecione a aba Custom CSS (atrás de More settings se a linha de abas transbordar).

Aplicando CSS personalizado

Quando estiver na seção Custom CSS, você pode alterar a largura do carrinho no mobile seguindo os passos abaixo. Altere o número de 90% para qualquer valor desejado; quanto maior o número, mais espaço o carrinho ocupa na tela. (nota: isto se aplica tanto à V1.0 quanto à V2.0 do Upcart)
  1. Localize a área de entrada de CSS.
  2. Copie e cole o seguinte código na área de entrada de CSS:

Conclusão

Ao seguir este tutorial, você personalizou com sucesso a largura do carrinho no mobile, tornando-o mais fácil de usar e alinhado ao design da sua loja. Essas pequenas mudanças podem ter um grande impacto na experiência de compra dos seus clientes, facilitando a navegação e a compra em dispositivos móveis.

Ainda precisa de ajuda?

Se você precisar de ajuda com personalizações, recomendamos consultar um Shopify Expert sobre como adicionar HTML, CSS e até JavaScript ao seu cart drawer. Ver Shopify Experts