Personalizar a seção de assinaturas

Neste artigo você aprenderá a personalizar a seção de assinaturas para destacar os planos e chamar a atenção dos seus usuários.

Antes de começar, você precisa ter pelo menos um plano habilitado.

👉 Se você ainda não criou um plano, aqui compartilhamos o artigo no qual mostramos como fazer isso em poucos minutos.

Vamos personalizar as cores e os estilos para que os planos sejam exibidos desta forma:

🤓 Se você tem conhecimento em CSS, poderá fazer modificações adicionais.

1. Copie o código que compartilhamos a seguir:

<style>
.PricingTable-header{
    background: dimgray !important;
    color: #fff;
    height: 150px;
}
.PricingTable-title{
    font-size: 1.7rem;
text-align: center;
}
.PricingTable-type{
    font-style: inherit;
justify-content: center;
margin-top: 10px !important;
}
.Pricing:first-child{
text-align: center;
}
.PricingTable-item--recommended{
    border-color: goldenrod;
}
.PricingTable-recommended {
    background-color: goldenrod;
    border-radius: 14px 14px 0 0;}

#Subscribe > div > div.row.align-items-stretch.justify-content-center.Subscribe-step.Subscribe-step-1.PricingTable > div.PricingTable-card.order-1.col-sm-4 > div > div.PricingTable-container > div.PricingTable-value > div:nth-child(1) > div.PlanInterval.month > div > div:nth-child(2) > i, #Subscribe > div > div.row.align-items-stretch.justify-content-center.Subscribe-step.Subscribe-step-1.PricingTable > div > div > div.PricingTable-container > div.PricingTable-value > div > div.PlanInterval > div > i {
color: darkgray
}
.PlanInterval{
text-align: center;
    font-size: small;
}
#Subscribe > div > div.row.align-items-stretch.justify-content-center.Subscribe-step.Subscribe-step-1.PricingTable > div > div > div.PricingTable-container > div.PricingTable-value > div > div.PlanInterval > div{
margin-top: 0 !important;
}
.PricingTable-buy, .PricingTable-coupon, .PricingTable-gateway{
    margin: 10px auto;
}
.Btn-choose-plan{
    border-radius: 14px;
}
#Subscribe > div > div.row.align-items-stretch.justify-content-center.Subscribe-step.Subscribe-step-1.PricingTable > div > div > div.PricingTable-container > div.PricingTable-header > div > span{
border: 1px solid white;
    background-color: transparent;
    border-radius: 14px;
}
.PricingTable-contentDescription{
text-align: center;
padding: 0;
}
.PricingTable-item--recommended .PricingTable-buy .btn{
background-color: #276eb0;
    border-color: #276eb0;
}
</style>

2. Acesse a loja. Vá em Painel de controle > Configurações > Avançado e cole o código no campo Custom before code

3. Clique em Salvar.

⚠️ Recomendamos sempre tentar criar uma cópia de segurança do código que você inserir na loja. Você pode usar ferramentas gratuitas online; compartilhamos um site de exemplo: codepen.io

Esperamos que este artigo tenha sido útil. Se tiver dúvidas, escreva para [email protected].