CSS customization of the Widget

To customize the styles of the widget via CSS you must include the custom-styles option

<div data-aplazame-simulator
     data-amount="5900"
     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>

This is an example of the HTML that the Aplazame widget generates

<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">

  <!-- The following HTML will be included when smart title is active -->
  <div class="aplazame-widget-smart-title">Págalo a plazos<!-- '¡Consíguelo sin intereses!' when a campaign without interests is active --></div>
  <!-- end smart title -->

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

    <!-- The following HTML will be included only for 'select' type -->
    <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>
    <!-- end 'select' type -->

    <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>

  <!-- The following HTML will be included only for 'big-button' type -->
  <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><!-- decrease symbol --></svg>
      </button>
      <div class="aplazame-widget-choice-button-value">12</div>
      <button type="button" class="aplazame-widget-choice-button-increase" data-action="increaseNumInstalments">
        <svg><!-- increase symbol --></svg>
      </button>
    </span>
    <span class="aplazame-widget-choice-text-instalments">&nbsp;cuotas</span>
  </div>
  <!-- end 'big-button' type -->

  <!-- The following HTML will be included only when branding is active -->
  <div class="aplazame-widget-branding">
    <span class="aplazame-widget-with">con&nbsp;</span>
    <svg><!-- Aplazame logotype --></svg>
  </div>
  <!-- end branding -->

  </div>

</div>