Personalización CSS del Widget

Para personalizar los estilos del widget vía CSS hay que incluir la opción custom-styles

<div data-aplazame-simulator
     data-amount="2900"
     data-currency="EUR"
     data-country="ES"
     data-type="button"
     data-option-branding="true"
     data-option-title-smart="true"
     data-option-title-default="Págalo a plazos"
     data-option-title-zero-interest="Consíguelo sin intereses"
     data-option-custom-styles="true"
     data-option-disable-modal="false"></div>

Este es un ejemplo del HTML que genera el widget de Aplazame

<div class="aplazame-widget aplazame-styles aplazame-widget--type-button aplazame-widget--align-center<% if( preferences.custom_styles ){ %> aplazame-widget--custom-styles<% } %>">

  <div class="aplazame-widget-container">

  <!-- Este HTML se incluirá sólo cuando se active el título inteligente -->
  <div class="aplazame-widget-smart-title">Págalo a plazos<!-- '¡Consíguelo sin intereses!' cuando hay campaña sin intereses --></div>
  <!-- fin título inteligente -->

  <div class="aplazame-widget-instalments">

    <!-- Este HTML se incluirá sólo para el tipo 'select' -->
    <select>
      <option value="1">21,62 €/mes en 1 cuota</option>
      <option value="2">9,78 €/mes en 2 cuotas</option>
      <option value="3">7,40 €/mes en 3 cuotas</option>
      <!-- ... -->
      <option value="11">2,64 €/mes en 11 cuotas</option>
      <option value="12" selected="">2,46 €/mes en 12 cuotas</option>
    </select>
    <!-- fin tipo 'select' -->

    <span class="aplazame-widget-from">desde&nbsp;</span>
    <strong class="aplazame-widget-amount">
      <span class="aplazame-widget-price">2.46</span>
      <span class="aplazame-widget-currency"></span>
    </strong>
    <sub class="aplazame-widget-per-month">/mes</sub>
    <span class="aplazame-widget-instalments-wrapper">
      <span class="aplazame-widget-instalments-pre-in">&nbsp;en&nbsp;</span>
      <em class="aplazame-widget-instalments-num">12</em>
      <span class="aplazame-widget-instalments-post-instalments">&nbsp;cuotas</span>
    </span>

  </div>

  <!-- Este HTML se incluirá sólo para el tipo 'big-button' -->
  <div class="aplazame-widget-choice-buttons-wrapper">
    <span class="aplazame-widget-choice-text-in">en&nbsp;</span>
    <span class="aplazame-widget-choice-button">
      <button type="button" class="aplazame-widget-choice-button-decrease" data-action="decreaseNumInstalments">
        <svg><!-- simbolo de decrementar --></svg>
      </button>
      <div class="aplazame-widget-choice-button-value">12</div>
      <button type="button" class="aplazame-widget-choice-button-increase" data-action="increaseNumInstalments">
        <svg><!-- simbolo de incrementar --></svg>
      </button>
    </span>
    <span class="aplazame-widget-choice-text-instalments">&nbsp;cuotas</span>
  </div>
  <!-- fin tipo 'big-button' -->

  <!-- Este HTML se incluirá sólo cuando se active el branding -->
  <div class="aplazame-widget-branding">
    <span class="aplazame-widget-with">con&nbsp;</span>
    <svg><!-- logotipo de Aplazame --></svg>
  </div>
  <!-- fin branding -->

  </div>

</div>