Como adicionar cantos arredondados ao botão de finalização de compra dinâmico usando código CSS

O Botão de checkout dinâmico É uma opção de finalização de compra rápida que permite aos clientes comprar produtos diretamente usando métodos de pagamento acelerados, como:

• Shop Pay
• PayPal
• Google Pay
• Apple Pay

Em vez de percorrer o fluxo normal do carrinho de compras, os clientes podem concluir rapidamente a compra com um único clique.

No Shopify, o botão de finalização de compra dinâmica geralmente aparece abaixo do botão "Adicionar ao carrinho" nas páginas de produtos. Se você quiser saber mais sobre o botão de finalização de compra dinâmica e como ele funciona no GemPages e no Shopify, confira este artigo:

O que é um botão de finalização de compra dinâmico no Shopify?
Elemento de botão de checkout dinâmico

Este artigo mostra como personalizar o botão de finalização de compra dinâmica adicionando cantos arredondados usando CSS personalizado.

Passo 1: Abra a área de código personalizado

• Abra o editor de páginas no GemPages.
• Clique na seção que contém o botão de finalização de compra dinâmica.
• Clique com o botão direito do mouse no elemento ou contêiner.
• Selecionar Código personalizado.

Isso abre o editor de código personalizado.

Passo 2: Cole o CSS personalizado

Cole o seguinte código na área de Código Personalizado:

.xxxxxxx .shopify-payment-button {

border-radius: 10px !important;

overflow: hidden;

}

Em seguida, substitua .xxxxxxx com a sua classe de elemento real.

Etapa 3: salvar e publicar