Please follow video guide here
Create block
{
"type": "advance_recharge_widget",
"name": "Advance recharge widget"
},
Call block
{% when 'advance_recharge_widget' %}
<style>
.rc-widget {
padding-bottom: 0 !important;
}
.rc-template__radio-group .rc-radio .rc-radio__label {
display:flex;
flex-direction: row-reverse;
justify-content: space-between;
width: 100%;
}
.rc-widget {
background: #f9f9f9;
border: 1px solid #eee;
padding: 0.5rem;
}
.rc-selling-plans {
margin: 0 !important;
padding-left: 12px;
padding-right: 12px;
padding-bottom: 8px;
}
.rc-radio-group__options {
border: 0 !important;
}
.rc-radio {
border: 0 !important;
background: none !important;
}
.rc-radio__input {
margin: 0 !important;
}
.rc-template__radio {
border: 1px solid #eee;
background: #f9f9f9;
}
.rc-radio__label {
margin-left: 16px !important;
}
.rc-selling-plans,
.rc-template__radio label {
background: none !important;
}
.rc-selling-plans-dropdown__select {
border: 1px solid #eee;
}
.rc-selling-plans-dropdown__select:focus-visible {
outline: 0;
}
.rc-selling-plans-dropdown__label,
.rc-subscription-details__button, .arrow, .rc-tooltip__footer {
display: none !important;
}
.rc-template__radio,
.rc-selling-plans-dropdown,
.rc-selling-plans-dropdown__select,
.rc-widget {
border-radius: 8px;
}
.rc-tooltip {
position: relative !important;
max-width: fit-content !important;
top: 0 !important;
box-shadow: none !important;
}
.rc-subscription-details {
padding: 0 !important;
max-width: 100%;
}
.rc-selling-plans:after {
content: "✔ Save 30% on your first order \a"
"✔ Pause or cancel anytime \a"
"✅ 60-day money back guarantee";
white-space:pre-wrap;
display:block;
padding-top:12px;
}
</style>