Antes de comenzar deberás tener al menos un plan habilitado.
👉Si aún no creaste un plan, aquí te compartimos el artículo en donde te mostramos cómo hacerlo en pocos minutos.
Vamos a personalizar los colores y estilos para que los planes se muestren de esta manera:
🤓Si tienes conocimiento en CSS podrás realizar modificaciones adicionales.
1. Copia el código que te compartimos a continuación:
<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. Ingresa a la tienda. Ve a Panel de control > Ajustes > Avanzados y pega el código en el campo Custom before </body> code
3. Haz clic en Guardar.
⚠️Te recomendamos siempre tratar de crear una copia de seguridad del código que insertes en la tienda. Puedes utilizar herramientas gratuitas online, te compartimos un sitio de ejemplo codepen.io
Esperamos que este tutorial te haya resultado sencillo. Si tienes consultas escríbenos a [email protected].