Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Información de medios de pago y cuotas

Esta funcionalidad permitirá dar mas visibilidad en la tienda no solo sobre cuotas sino también sobre cada medio de pago disponible como por ejemplo puede ser una tarjeta de crédito o pago en efectivo.

Cambiarás a tener algo como esto:


Todos los cambios que haremos a continuación están basados en la plantilla Trend la cual usa Bootstrap 3, sin embargo una implementación basada en una plantilla con Bootstrap 2 no cambiará mucho.

Importante: 

Para poder aplicar esta funcionalidad es necesario tener la versión anterior a esta funcionalidad llamada información de cuotas en productos

Para poder agregar esta funcionalidad en tu tienda, seguí los siguientes pasos:

1. Vamos a crear una nueva carpeta dentro de la carpeta snipplets llamada payments:

2. Luego dentro de esta carpeta deberás agregar los siguientes archivos:

payments.tpl: Este archivo es el popup que se muestra en el detalle del producto cuando se hace click en "ver medios de pago"

{% if installments_info %}
{% set gateways = installments_info | length %}
{% set store_fit_for_payments = store.country == 'AR' or store.country == 'BR'  %}
    <div id="installments-modal" class="modal fade js-mobile-installments-panel modal-xs modal-xs-right bottom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <a class="js-mobile-toggle-installments modal-xs-header visible-xs" href="#" data-dismiss="modal">
            <i class="fa fa-2x fa-angle-left modal-xs-header-icon"></i>
            <span class="modal-xs-header-text modal-xs-right-header-text">
                {% if store_fit_for_payments %}
                    {{ 'Medios de pago' | translate }}
                {% else %}
                    {{ 'Detalles de las cuotas' | translate }}
                {% endif %}
            </span>
        </a>
        <div class="modal-dialog modal-lg modal-xs-dialog">
            <div class="js-installments-details-container modal-content">
                <div class="modal-body modal-xs-body">
                
                    {# Modal header and gateways tab links #}

                    <div class="nav-tabs-container horizontal-container overide-container-width">
                        <ul class="nav nav-tabs m-right-double m-none-xs">
                            {% for method, installments in installments_info %}
                                <li id="method_{{ method }}" class="js-refresh-installment-data js-installments-gw-tab tab m-bottom-none {% if loop.first %} active {% endif %}" data-code="{{ method }}">
                                    <a href="#installment_{{ method }}_{{ installment }}" class="tab-link" data-toggle="tab">{{ method == 'paypal_multiple' ? 'PAYPAL' : (method == 'itaushopline'? 'ITAU SHOPLINE' : method == 'boleto_paghiper'? 'BOLETO PAGHIPER' : method | upper) }}</a>
                                </li>

                                {# Custom payment method #}

                                {% if loop.last and custom_payment is not null %}
                                    <li id="method_{{ custom_payment.code }}" class="js-refresh-installment-data js-installments-gw-tab tab m-bottom-none" data-code="{{ custom_payment.code }}">
                                        <a href="#installment_{{ custom_payment.code }}" class="tab-link" data-toggle="tab">{{ custom_payment.name | upper }}</a>
                                    </li>
                                {% endif %}
                            {% endfor %}
                        </ul>
                         <span class="btn btn-floating pull-right hidden-xs" data-dismiss="modal" aria-label="Close">
                          <i class="fa fa-times fa-lg pull-left m-none"></i>
                        </span>
                    </div>

                    {# Gateways tab content #}

                    <div class="tab-content m-top-half">
                        {% for method, installments in installments_info %}
                            {% set discount = product.get_gateway_discount(method) %}
                            <div class="tab-pane{% if loop.first %} active {% endif %} js-gw-tab-pane" id="installment_{{ method }}_">
                                <div class="full-width pull-left">

                                    {% if store_fit_for_payments %}

                                        {# Payments info with readonly #}

                                        {% if method == 'mercadopago' and store.country == 'AR' %}

                                            {# Payments Gateways with banks: at the moment only MP AR #}

                                            {% include 'snipplets/payments/payments-info-banks.tpl' %}
                                        {% else %}

                                            {# Payments Gateways with cards only #}

                                            {% include 'snipplets/payments/payments-info.tpl' %}
                                        {% endif %}    

                                    {% else %}

                                        {# Installments list for ROLA stores #}

                                        {% for installment, data_installment in installments %}
                                            <div class="m-bottom-quarter p-left-quarter" id="installment_{{ method }}_{{ installment }}">
                                                {% set rounded_installment_value = data_installment.installment_value | round(2) %}
                                                {% set total_value = (data_installment.without_interests ? data_installment.total_value : installment * data_installment.installment_value) %}
                                                {% set total_value_in_cents = total_value  | round(2) * 100 %}
                                                <strong class="js-installment-amount installment-amount">{{ installment }}</strong> {% if store.country != 'BR' %}cuota{% if installment > 1 %}s{% endif %} de{% else %}x{% endif %} <strong class="js-installment-price">{{ (rounded_installment_value * 100) | money }}</strong>
                                                {% if data_installment.without_interests %} {{ 'sin interés' | t }}{% endif %}
                                            </div>
                                        {% endfor %}
                                    {% endif %}  
                                </div>
                            </div>

                            {# Custom payment method #}

                            {% if loop.last and custom_payment is not null %}
                                <div class="tab-pane js-gw-tab-pane" id="installment_{{ custom_payment.code }}">
                                    <div class="box-container">

                                        {# Custom method instructions #}

                                        <p class="weight-strong m-bottom-half">{{ 'Cuando termines la compra vas a ver la información de pago en relación a esta opción.' | translate }}</p>

                                        {# Price total #}

                                        <h4 class="m-top-quarter">
                                            <span class="m-right-quarter">{{ 'Total:' | translate }}</span><span class="js-installments-one-payment weight-strong text-primary">{{ product.price | money }}</span>
                                        </h4>

                                        {% if custom_payment.discount > 0 %}
                                            <div class="m-top-half"> {{ custom_payment.name }}: {{ 'tiene un' | translate }} <strong>{{ custom_payment.discount }}% {{'de descuento' | translate }}</strong> {{'que será aplicado sobre el costo total de la compra al finalizar la misma.' | translate }}</div>
                                        {% endif %}
                                    
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>

                {# Modal footer and close button #}

                <div class="modal-footer p-top-none-xs">
                    <a href="#" class="btn-link pull-right pull-left-xs p-none" data-dismiss="modal"><i class="fa fa-chevron-left visible-xs d-inline-block-xs m-right-quarter" aria-hidden="true"></i>{{ 'Volver al producto' | translate }}</a>
                </div>
            </div>
        </div>
    </div>
{% endif %}

payments-info-banks.tpl: Acá se se encuentra la información para los medios de pago que involucran promociones con bancos, hasta el momento solo se utiliza para Mercado Pago. Este tpl es usado dentro del popup, por ende dentro de payments.tpl.

{% set gateways = installmentsv2['methods'][method] %}

{# Gateways with banks #}

{# Credit cards #}
{% if gateways.cc is not null %}
  <div class="box-title">{{'Tarjetas de crédito' | translate }}</div>
  <div class="box-container">
      <div class="pull-left full-width border-box">

        {# Installments without interest modules by groups, E.g: 3, 6, 9, 12 #}

        {% if gateways.cc is null or gateways.cc is empty is not null %}
          {% for installment, banks in gateways.cc.no_interest %}
            <div class="installments-container">

              {# Installment amount, cost, CFT, 1 payment info and total cost #}

              <h4 class="m-top-none m-bottom-quarter">
                {{ installment }}
                {{ 'cuotas' | translate }}
                {{ 'sin interés de' | t }}
                <span class="js-modal-installment-price text-primary weight-strong" data-installment="{{installment}}"> {{ (product.price / installment) | money }}</span>
              </h4>
              <div class="legal-info p-bottom-half">
                <span class="m-right-quarter">
                  <span>{{ 'CFT: ' | translate }}</span><span class="weight-strong">0,00%</span>
                </span>
                <span class="m-right-quarter">
                  <span>{{ 'Total: ' | translate }}</span><span class="js-installments-one-payment weight-strong">{{ product.price | money }}</span>
                </span>
                <span class="m-right-quarter">
                  <span>{{ 'En 1 pago: ' | translate }}</span><span class="js-installments-one-payment weight-strong">{{ product.price | money }}</span>
                </span>
              </div>

              {# Banks with installments without interest flags #}

              <div class="flags-container">
                {% for bank in banks %}
                  <span class="installments-card">
                    <img src="{{ bank | bank_code_by_name | payment_new_logo }}" class="card-img card-img-big" alt="{{ bank }}">
                  </span>
                {% endfor %}
              </div>
              <div class="divider-dotted"></div>
            </div>
          {% endfor %}
        {% endif %}

        {# Installments with interest in one module #}

        {% if gateways.cc.interest is not null %}
          <div class="installments-container">

            {# Installment amount #}

            <h4 class="m-top-none m-bottom-quarter">
              {{ gateways.max_with_interests ~ ' cuotas con otras tarjetas' | translate }}
            </h4>
            <div class="legal-info p-bottom-half">
              <span>{{ 'O en 1 pago de: ' | translate }}</span>
              <span class="js-installments-one-payment weight-strong text-primary">{{ product.price | money }}</span>
            </div>

            {# Banks with installments with interest flags #}

            {% for bank in gateways.cc.interest %}
              <span class="installments-card js-installments-flag-tab js-installments-cash-tab">
                <img src="{{ bank | bank_code_by_name | payment_new_logo }}" class="card-img card-img-big" alt="{{ bank }}">
              </span>
            {% endfor %}
          </div>
        {% endif %}
      </div>
  </div>
{% endif %}

{# Cash methods #}

{% if gateways.debit is not null or gateways.cash is not null or gateways.transfer is not null %}
  <div class="box-title">{{'Tarjeta de débito y efectivo' | translate }}</div>
  <div class="box-container">

    {# Debit card #}

    {% if gateways.debit is not null %}

      {# Debit price #}

      <h4 class="m-top-none m-bottom-quarter">{{ 'Débito' | translate }}</h4>
      <div class="h6-xs m-bottom-half">
        <span>{{ 'Precio:' | translate }} </span><span class="js-installments-one-payment weight-strong text-primary"> {{ product.price | money }}</span>
      </div>

      {# Debit flags #}

      {% for logo in gateways.debit %}
        <span class="installments-card" data-type="dd" data-code="{{ card }}">
          <img src="{{ logo | payment_new_logo }}" class="card-img card-img-big">
        </span>
      {% endfor %}

      <div class="divider-dotted"></div>

    {% endif %}

    {# Cash #}

    {% if gateways.cash is not null %}

      {# Cash price #}

      <h4 class="m-top-none m-bottom-quarter">{{'Efectivo' | translate }}</h4>
      <div class="h6-xs m-bottom-half">
        <span>{{ 'Precio:' | translate }} </span><span class="js-installments-one-payment weight-strong text-primary"> {{ product.price | money }}</span>
      </div>

      {# Cash flags #}

      {% for logo in gateways.cash %}
        <span class="installments-card" data-type="dd" data-code="{{ card }}">
          <img src="{{ logo | payment_new_logo }}" class="card-img card-img-big">
        </span>
      {% endfor %}

      <div class="divider-dotted"></div>

    {% endif %}

    {# Wire transfer #}

    {% if gateways.transfer is not null %}

      {# Transfer price #}

      <h4 class="m-top-none m-bottom-quarter">{{ 'Transferencia o déposito' | translate }}</h4>
      <div class="h6-xs m-bottom-half">
        <span>{{ 'Precio:' | translate }} </span><span class="js-installments-one-payment weight-strong text-primary"> {{ product.price | money }}</span>
      </div>

      {# Transfer logos #}

      {% for logo in gateways.transfer %}
        <span class="installments-card js-installments-flag-tab js-installments-cash-tab" data-type="dd" data-code="{{ card }}">
          <img src="{{ logo | payment_new_logo }}" class="card-img card-img-big">
        </span>
      {% endfor %}
    {% endif %}
  </div>
{% endif %}

payments-info.tpl: En este archivo se encuentra la información relacionada a medios de pago que no tienen promociones con bancos, por ejemplo PayPal.

{% set installments_data = installmentsv2['methods'][method] %}

{# Gateways without banks: cards only #}

{% if installments_data['cards'] %}

    {# Credit cards #}

    <div class="box-title">{{'Tarjetas de crédito' | translate }}</div>
    <div id="installment-credit-card-option-{{ method }}" class="box-container">

        {# Credit cards max installments only for AR stores #}

        {% if store.country == 'AR' %}

            {% if installments_data['max_without_interests'] != '0' %}
                <h4 class="m-top-none m-bottom-quarter">
                    {{ installments_data['max_without_interests'] }}
                    {{ 'cuotas' | translate }}
                    {{ 'sin interés de' | t }}
                    <span class="js-modal-installment-price text-primary weight-strong" data-installment="{{ installments_data['max_without_interests'] }}"> {{ (product.price / installments_data['max_without_interests']) | money }}</span>
                </h4>
                <div class="legal-info p-bottom-half">
                    <span class="m-right-quarter">
                        <span>{{ 'CFT: ' | translate }}</span><span class="weight-strong">0,00%</span>
                    </span>
                    <span class="m-right-quarter">
                        <span>{{ 'Total: ' | translate }}</span><span class="js-installments-one-payment weight-strong">{{ product.price | money }}</span>
                    </span>
                    <span class="m-right-quarter">
                        <span>{{ 'En 1 pago: ' | translate }}</span><span class="js-installments-one-payment weight-strong">{{ product.price | money }}</span>
                    </span>
                </div>
            {% elseif installments_data['max_with_interests'] > 0 %}
                <h4 class="m-top-none m-bottom-quarter">
                    {{ 'Hasta' | translate }}
                    {{ installments_data['max_with_interests'] }}
                    {{ 'cuotas' | translate }}
                </h4>
                <div class="legal-info p-bottom-half">
                    <span class="m-right-quarter">
                        <span>{{ 'O en 1 pago de: ' | translate }}</span><span class="js-installments-one-payment weight-strong text-primary">{{ product.price | money }}</span>
                    </span>
                </div>
            {% else %}
                <h4 class="m-top-none p-bottom-half">
                    <span>{{ 'En 1 pago: ' | translate }}</span><span class="js-installments-one-payment text-primary">{{ product.price | money }}</span>
                </h4>
            {% endif %}
        {% endif %}

        {# Credit cards flags #}

        {% for logo in installments_data['cards'] %}
            <span class="installments-card ">
                <img src="{{ logo | payment_new_logo }}" class="card-img card-img-medium">
            </span>
        {% endfor %}

        {% if store.country != 'AR' %}

            {# Installments list for non AR stores #}

            <div class="divider-dotted m-top-half m-bottom-half"></div>

            <table class="table table-striped m-none">
                <thead>
                    <tr>
                        <th colspan="2">{{ 'Cuotas ' | translate }}</th>
                        <th class="text-right">{{ 'Total' | translate }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for installment, data_installment in installments %}
                        {% set rounded_installment_value = data_installment.installment_value | round(2) %}
                        {% set total_value = (data_installment.without_interests ? data_installment.total_value : installment * data_installment.installment_value) %}
                        {% set total_value_in_cents = total_value  | round(2) * 100 %}
                        <tr id="installment_{{ method }}_{{ installment }}">

                            {# Installment amount #}

                            <td class="p-right-none-xs">
                                <strong><span class="js-installment-amount">{{ installment }}</span></strong>
                                </span>{% if installment > 1 %}{{ 'cuotas' | translate }}{% else %}{{ 'cuota' | translate }}{% endif %}</span>
                            </td>

                            {# Installment price #}

                            <td class="p-right-none-xs">
                                <span>{{ 'de ' | translate }}</span>
                                <strong><span class="js-installment-price text-primary">{{ (rounded_installment_value * 100) | money }}</span> </strong>

                                {% if data_installment.without_interests or installments_data['max_with_interests'] == 0 %}
                                    {{ 'sin interés' | t }}
                                {% endif %}
                            </td>

                            {# Total price #}

                            <td class="js-installment-total-price text-right">
                                {{ total_value_in_cents | money }}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endif %}
    </div>
{% endif %}

{# Cash methods #}

{% if installments_data['direct'] %}

    {# Cash module title #}

    <div class="box-title">
        {% if store.country == 'BR' %}
            {% if wording_method_only_cash %}
                {{'Efectivo' | translate }}
            {% elseif wording_method_only_debit %}
                {{'Débito online' | translate }}
            {% else %}
                {{'Efectivo / Débito online' | translate }}
            {% endif %}
        {% else %}
            {{'Tarjeta de débito y efectivo' | translate }}
        {% endif %}
    </div>

    {# If has debit card or cash #}

    <div id="installment-cash-option-{{ method }}" class="box-container">

        {# Cash flags #}

        <div>
            {% for logo in installments_data['direct'] %}
                <span class="installments-card ">
                    <img src="{{ logo | payment_new_logo }}" class="card-img card-img-medium">
                </span>
            {% endfor %}
        </div>

        <div class="divider-dotted"></div>

        {# Cash total #}

        <h4 class="m-top-quarter">
            <span class="m-right-quarter">{{ 'Total:' | translate }}</span><span class="js-installments-one-payment weight-strong text-primary">{{ product.price | money }}</span>
        </h4>

        {# Boleto message #}

        {% if method in ['boleto_paghiper'] and discount > 0.0 %}
            <div class="m-top-half"> {{'Boleto Paghiper tiene un' | translate }} <strong>{{discount}}% {{'de descuento' | translate }}</strong> {{'que será aplicado sobre el costo total de la compra al finalizar la misma.' | translate }}</div>
        {% endif %}
    </div>
{% endif %}

 3. Si en tu plantilla existen las sugerencias de búsqueda, entonces deberás modificar el tpl search-results.tpl justo debajo de donde se muestra el precio del producto. Vas a tener que borrar lo que tenías anteriormente relacionado a cuotas y poner algo como lo siguiente:

{% set product_can_show_installments = product.show_installments and product.display_price and product.get_max_installments.installment > 1 %}
    {% if product_can_show_installments %}
        <span class="hidden-xs font-small">
            {% set max_installments_without_interests = product.get_max_installments(false) %}
            {% if store.country == 'AR' %}
                {% set max_installments_with_interests = product.get_max_installments %}
                {% if max_installments_without_interests and max_installments_without_interests.installment > 1 %}
                    <div class="installments m-top-quarter">{{ "Hasta <strong class='installment-amount'>{1}</strong> cuotas sin interés" | t(max_installments_without_interests.installment, max_installments_without_interests.installment_data.installment_value_cents | money) }}</div>
                {% else %}
                    {% if max_installments_with_interests %}
                        <div class="installments m-top-quarter">{{ "Hasta <strong class='installment-amount'>{1}</strong> cuotas" | t(max_installments_with_interests.installment, max_installments_with_interests.installment_data.installment_value_cents | money) }}</div>
                    {% endif %}
                {% endif %}
            {% else %}
                {% if max_installments_without_interests and max_installments_without_interests.installment > 1 %}
                    <div class="installments m-none">{{ "<strong class='installment-amount'>{1}</strong> cuotas sin interés de <strong class='installment-price'>{2}</strong>" | t(max_installments_without_interests.installment, max_installments_without_interests.installment_data.installment_value_cents | money) }}</div>
                {% else %}
                    {% set max_installments_with_interests = product.get_max_installments %}
                    {% if max_installments_with_interests %}
                        <div class="installments m-none">{{ "<strong class='installment-amount'>{1}</strong> cuotas de <strong class='installment-price'>{2}</strong>" | t(max_installments_with_interests.installment, max_installments_with_interests.installment_data.installment_value_cents | money) }}</div>
                    {% endif %}
                {% endif %}
            {% endif %}
        </span>
    {% endif %}
{% endif %}

4. Dentro del tpl single_product.tpl, que representa a un producto dentro del listado, deberás hacer algo similar al paso 3. Justo debajo del precio esta la información de cuotas, borrá lo viejo y cambialo por lo nuevo:

{% set product_can_show_installments = product.show_installments and product.display_price and product.get_max_installments.installment > 1 %}
{% if product_can_show_installments %}
    {% set max_installments_without_interests = product.get_max_installments(false) %}
    {% if store.country == 'AR' %}
        {% set max_installments_with_interests = product.get_max_installments %}
        {% if max_installments_without_interests and max_installments_without_interests.installment > 1 %}
            <div class="installments font-small-xs m-top-quarter">{{ "Hasta <strong class='installment-amount'>{1}</strong> cuotas sin interés" | t(max_installments_without_interests.installment, max_installments_without_interests.installment_data.installment_value_cents | money) }}</div>
        {% else %}
            {% if max_installments_with_interests %}
                <div class="installments font-small-xs m-top-quarter">{{ "Hasta <strong class='installment-amount'>{1}</strong> cuotas" | t(max_installments_with_interests.installment, max_installments_with_interests.installment_data.installment_value_cents | money) }}</div>
            {% endif %}
        {% endif %}
    {% else %}
        {% if max_installments_without_interests and max_installments_without_interests.installment > 1 %}
            <span class="installments font-small-xs item-installments">{{ "<strong class='installment-amount'>{1}</strong> cuotas sin interés de <strong class='installment-price'>{2}</strong>" | t(max_installments_without_interests.installment, max_installments_without_interests.installment_data.installment_value_cents | money) }}</span>
        {% else %}
            {% set max_installments_with_interests = product.get_max_installments %}
            {% if max_installments_with_interests %}
                <span class="installments font-small-xs item-installments">{{ "<strong class='installment-amount'>{1}</strong> cuotas de <strong class='installment-price'>{2}</strong>" | t(max_installments_with_interests.installment, max_installments_with_interests.installment_data.installment_value_cents | money) }}</span>
            {% endif %}
        {% endif %}
    {% endif %}
{% endif %}

5. También necesitarás modificar el tpl installments_in_product.tpl, el cual muestra las cuotas justo debajo del precio de un producto en el detalle del mismo. Recomiendo directamente reemplazar lo viejo con lo nuevo:

{% set product_can_show_installments = product.show_installments and product.display_price and product.get_max_installments.installment > 1 %}
{% if product_can_show_installments %}
    <div class="js-max-installments-container installments">
        <i class="fa fa-credit-card m-right-quarter" aria-hidden="true"></i>
        {% set max_installments_without_interests = product.get_max_installments(false) %}
        {% set max_installments_with_interests = product.get_max_installments %}
        {% if store.country == 'AR' %}
            {% if max_installments_without_interests and max_installments_without_interests.installment > 1 %}
                <div class="product-installments d-inline-block">{{ "Hasta <strong class='installment-amount'>{1}</strong> cuotas sin interés" | t(max_installments_without_interests.installment, max_installments_without_interests.installment_data.installment_value_cents | money) }}</div>
            {% else %}
                {% if max_installments_with_interests %}
                    <div class="product-installments d-inline-block">{{ "Hasta <strong class='installment-amount'>{1}</strong> cuotas" | t(max_installments_with_interests.installment, max_installments_with_interests.installment_data.installment_value_cents | money) }}</div>
                {% endif %}
            {% endif %}
        {% else %}
            {% if max_installments_without_interests and max_installments_without_interests.installment > 1 %}
                    <div class="js-max-installments installments d-inline-block">{{ "<strong class='js-installment-amount installment-amount'>{1}</strong> cuotas sin interés de <strong class='js-installment-price installment-price'>{2}</strong>" | t(max_installments_without_interests.installment, max_installments_without_interests.installment_data.installment_value_cents | money) }}</div>
            {% else %}
                {% set max_installments_with_interests = product.get_max_installments %}
                {% if max_installments_with_interests %}
                    <div class="js-max-installments installments d-inline-block">{{ "<strong class='js-installment-amount installment-amount'>{1}</strong> cuotas de <strong class='js-installment-price installment-price'>{2}</strong>" | t(max_installments_with_interests.installment, max_installments_with_interests.installment_data.installment_value_cents | money) }}</div>
                {% else %}
                    <div class="js-max-installments installments d-inline-block" style="display: none;">
                    {% if product.max_installments_without_interests %}
                        {{ "<strong class='js-installment-amount installment-amount'>{1}</strong> cuotas sin interés de <strong class='js-installment-price installment-price'>{2}</strong>" | t(null, null) }}
                    {% else %}
                        {{ "<strong class='js-installment-amount installment-amount'>{1}</strong> cuotas de <strong class='js-installment-price installment-price'>{2}</strong>" | t(null, null) }}
                    {% endif %}
                    </div>
                {% endif %}
            {% endif %}
        {% endif %}
    </div>
{% endif %}

6. Dentro del archivo variants.tpl ubicá el select que sitve para cambiar la variante de un producto, si no tenés este archivo entonces buscá el select dentro de product.tpl.

Una vez que lo hayas ubicado agregale la class js-refresh-installment-data quedando similar a lo siguiente:

<select class="js-refresh-installment-data js-variation-option variant-select form-control select" id="variation_{{loop.index}}" name="variation[{{ variation.id }}]" onchange="LS.changeVariant(changeVariant, '#single-product')">
{% for option in variation.options %}
    <option value="{{ option.id }}" {% if product.default_options[variation.id] == option.id %}selected="selected"{% endif %}>{{ option.name }}</option>
{% endfor %}
</select>

7. En product.tpl vamos a tener que agregar el link que abre el nuevo popup pero primero hay limpiar un poco de código.

Ubicá el siguiente condicional:

% if installments_info %} 

Probablemente se encuentre entre las últimas líneas del archivo. La idea es borrar todo lo que esté dentro de eso o todo lo que sea el viejo popup que usábamos hasta ahora.

Luego agregá el nuevo popup debajo de todo en el archivo con la siguiente línea:

{# Payments details #}

{% include 'snipplets/payments/payments.tpl' %}

Por otro lado deberías borrar todo lo relacionado al link que abría el popup viejo, que por lo general se encuentra justo antes de abrir el tag <form> del producto.

Una vez ubicado, borrálo y reemplazalo por lo siguiente:

{# Product Installments button and info #}
{% if product.show_installments and product.display_price %}
    {% set installments_info_base_variant = product.installments_info %}
    {% set installments_info = product.installments_info_from_any_variant %}
    {% if installments_info %}
        <div href="#installments-modal" data-toggle="modal" class="js-refresh-installment-data js-product-payments-container visible-when-content-ready link-modal-xs-right" {% if (not product.get_max_installments) and (not product.get_max_installments(false)) %}style="display: none;"{% endif %}>
            {% snipplet "installments_in_product.tpl" %}
            {% if product.show_installments and product.display_price %}
                <a id="btn-installments" class="btn-link btn-link-small-extra" {% if (not product.get_max_installments) and (not product.get_max_installments(false)) %}style="display: none;"{% endif %}>
                    {% set store_fit_for_payments = store.country == 'AR' or store.country == 'BR'  %}
                    {% if store_fit_for_payments %}
                        {{ "Ver medios de pago" | translate }}
                    {% else %}
                        {{ "Ver el detalle de las cuotas" | translate }}
                    {% endif %}
                </a>
                <div class="visible-xs link-modal-xs-right-icon">
                    {% include "snipplets/svg/angle-right.tpl" %}
                </div> 
            {% endif %}
        </div>
    {% endif %}
{% endif %}

8. En layout.tpl vamos a tener que actualizar y agregar Javascript nuevo. 

Si tenés algo como lo siguiente en este archivo, recomiendo borrar todo lo que se encuentra dentro de ese if (incluyendo el propio if)

{% if store.installments_on_steroids_enabled %}
...
{% endif %}

Por otro lado si tenías lo anterior, probablemente tengas lo siguiente:

{% if store.installments_on_steroids_enabled and product.has_direct_payment_only %}

Modificalo para que quede así:

{% if product.has_direct_payment_only %}

Ubicá la función changeVariant dentro del archivo, debería comenzar así:

function changeVariant(variant){
    $(".js-product-detail .js-shipping-calculator-response").hide();
    $("#shipping-variant-id").val(variant.id);
    var parent = $("body");
    if (variant.element){
        parent = $(variant.element);
    }
...

Justo antes de abrir esta función, agregá esta otra:

function refreshInstallmentv2(price){
        $(".js-modal-installment-price" ).each(function( index ) {
            const installment = Number($(this).data('installment'));
            $(this).text(LS.currency.display_short + (price/installment).toLocaleString('de-DE', {maximumFractionDigits: 2, minimumFractionDigits: 2}));
        });
    }

y antes de cerrar changeVariant agregá lo siguiente:

{% if template == 'product' %}
    const base_price = Number($("#price_display").attr("content"));
    refreshInstallmentv2(base_price);
{% endif %}

Dentro de la función changeVariant agregá esta línea:

$('#installments-modal .js-installments-one-payment').text(variant.price_short).attr("data-value", variant.price_number);

Dependiendo de cuán actualizados estén tus archivos en relación a nuestras plantillas puede que tengas que reemplazar algunas clases por otras en layout.tpl. Cambia las clases:

  • installment-amount por js-installment-amount (determina la cantidad de las cuotas)
  • installment-price por js-installment-price (determina el precio de cada cuota)
  • installment-total-price por js-installment-total-price (determina el costo total de las cuotas)
  • max_installments_container por js-max-installments-container (es el contenedor de las cuotas que están debajo del precio del producto)
  • max_installments por js-max-installments
  • js-mobile-toggle-installments por js-product-payments-container (es el contenedor que tiene al link que abre el popup de cuotas)

9. Ahora es tiempo de agregar el CSS relacionado a esta nueva funcionalidad.

Si tenés una hoja de estilos para CSS crítico como critical-css.tpl , agregá lo siguiente (si no tenés este archivo podés agregarlo en tu hoja de estilos común antes de todo el CSS que agregaremos más abajo):

@media (max-width: 769px){

    {# /* Modals */ #}

      {# /* Critical mobile modal animation - rest of animations on style.scss.tpl */ #}

      .modal-xs-right.modal.fade,
      .modal-xs-right-out{
        transition: all 1.5s cubic-bezier(.16,.68,.43,.99);
        -webkit-transform: translate3d(200%,0,0);
        -moz-transform: translate3d(200%,0,0);
        -ms-transform: translate3d(200%,0,0);
        -o-transform: translate3d(200%,0,0);
        transform: translate3d(200%,0,0);
      }
}

Agregá lo siguiente dentro del archivo SASS que define los colores de la tienda, en este caso se llama main-color.scss.tpl . Recordá que los nombres de las variables pueden variar dependiendo de tu código o la plantilla que estés usando.

body,
.font-body {
    font-size: 14px;
}
.font-medium {
    font-size: 16px;
}
.font-small {
    font-size: 12px;
}
.font-small-extra {
    font-size: 10px;
}


.box-container{
    float: left;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding:8px;
    border:1px solid rgba($primary-color, 0.4);
}


{# /* // Dividers */ #}


.divider-solid{
    float: left;
    width: 100%;
    margin: 20px 0;
    border-bottom:1px solid rgba($primary-color, 0.2);
}


{# /* // Modals */ #}


.modal-body,
.modal-right{
  background: $white-color;
  color: $primary-color;
}


.modal-body{
  float: left;
  width: 100%;
}


.modal-footer {
  background: $white-color;
  color: $primary-color;
  border-top:1px solid rgba($primary-color, 0.1);
  box-shadow:none;
}


{# /* // Tabs */ #}


.nav-tabs-container{
  border-bottom:1px solid rgba($primary-color, 0.1);
}
.nav-tabs-links{
  border-bottom:0;
  color: $primary-color;
}
.nav-tabs {
    .tab-link,
    .tab-check-link-text{
        color: $primary-color;
    }
    .tab.active{
        .tab-link{
          color: $secondary-color;
          background-color:transparent;
          border:0;
          border-bottom:3px solid $secondary-color;
        }
    }
    .tab-link{
        background-color: transparent;
        &:hover,
        &:focus{
            background-color: transparent!important;
            border:0;
        }
    }
    .tab-check.active{
        .tab-check-link,
        .tab-check-link:focus{
          outline:2px solid $secondary-color;
        }
    }
    .tab-check-link-text{
        outline:1px solid rgba($primary-color, .3);
    }
    .tab-check-icon{
        color: $secondary-color;
        .fa-inverse{
            color:$white-color;
        }
    }
}


{# /* // Tables */ #}


.table-striped {
    >tbody>tr:nth-child(odd) {
        background-color: transparent;
        >th,
        >td {
            background-color: rgba($primary-color, .03);
            border-top: 0;
        }
        >tr>td {
            border-top: 0;
        }
    }
    thead>tr>th,
    >tbody>tr>td {
        border-bottom: 0;
    }
}
.table {
    >thead>tr>th,
    >tbody>tr>th,
    >tfoot>tr>th,
    >thead>tr>td,
    >tbody>tr>td,
    >tfoot>tr>td{
        border:0;
    }
}

@media (max-width: 769px) {

    {# /* Modals */ #}

    .modal-xs,
    .modal{
        background-color:$white-color; 
        &-header{
          color: $primary-color;
          &:active{
            background-color:$secondary-color;
            color:$white-color;
            &-icon{
                color:$white-color;
                fill:$white-color;
            }
          }
        }
        &.inverse{
            background-color: $primary-color;
            .modal-xs-header{
                color: $white-color;
            }
            .modal-xs-header-icon{
                color:$white-color;
                fill:$white-color;
            }
        }
        &-footer {
            border: 0;
        }
    }


    .modal-xs-list-item{
        color: $primary-color;
        border-bottom: 1px solid rgba($primary-color, .25);
        &.darker{
            background-color:rgba($primary-color, 0.02);
        }
        .modal-xs-list-icon{
            fill:$secondary-color;
        }
        &:active{
            background-color:$secondary-color;
            color:$white-color;
            .modal-xs-list-icon{
                color:$white-color;
                fill:$white-color;
            }
        }
        &.selected{
            color: $white-color;
            border-right: 0;
            border-left: 0;
            border-bottom: 0;
            background: $secondary-color;
            .modal-xs-radio-icon {
                background: $white-color;
                i{
                    visibility: visible; 
                    color: $secondary-color;
                }
            }
        }
        .modal-xs-radio-icon {
            background: rgba($secondary-color, .4);
            color: $secondary-color;
        }
        &.inverse{
            color:rgba($white-color, .8);
            border-bottom: 1px solid rgba($white-color, .05);
            .modal-xs-list-icon{
                fill:$white-color;
            }
        }
    }


    {# /* Links that call the modal from right */ #}


    .btn-modal-xs-right {
        color: $primary-color;
        border: 1px solid rgba($primary-color, .2);
        border-radius: 0;
        background: $white-color;
        &:hover
        &:focus{
          color: $primary-color;
        }
        &-icon{
          fill:$secondary-color;
        }
    }


    .link-modal-xs-right{
        border-top: 1px solid rgba($primary-color, .1);
        border-bottom: 1px solid rgba($primary-color, .1);
    }


    .link-modal-xs-right-icon{
        fill:$primary-color;
    }
}

Luego necesitarás agregar el CSS que no esté relacionado a colores. Puede que lo tengas en una hoja de CSS pleno o en una hoja con SASS también.

/* Icons */


.fa-min {
  font-size: 8px;
}
.fa-huge{
  font-size: 6em;
}


/* Titles */


.box-title {
  float: left;
  width: 100%;
  padding-bottom: 10px;
  font-weight: bold;
}


/* // Images */


.card-img{
  margin: 0 5px 5px 0;
  border: 1px solid #00000012;
}
.card-img-medium {
  height: 35px;
}
.card-img-big {
  height: 50px;
}


/* // Tables */


.table td,
.table th {
  border-top: 0;
}


/* // Modals */


.modal-right {
  position: fixed;
  top: 0;
  right: 0;
  width: 500px;
  height: 100%;
  z-index: 999999;
  border-left: 1px solid #eee;
  overflow-y: scroll;
  text-align: left;
}
.modal-right-header {
  padding: 15px;
}
.modal-right-body {
  padding: 0 15px 15px 15px;
}


/* Modal Quickshop */
.modal-content{
  border-radius: 0;
}
.modal-body .close{
  position: absolute;
  top: 0;
  right: 6px;
}




.link-modal-xs-right{
  float: left;
  width: 100%;
  padding: 10px 0;
  margin-bottom: 10px;
  cursor: pointer;
}


{# /* // Tabs */ #}


.nav-tabs{
  margin-bottom: 0px;
  border-bottom: 0;
}
.nav-tabs > li {
  display: inline-block;
  float: none; 
}
.tab-link {
  padding: 12px 15px;
  font-size: 14px;
}
.tab-link,
.tab-check-link{
    border-radius: 0;
    border:0;
}
.nav-tabs .tab-check{
  position: relative;
  margin: 2px 5px 2px 2px;
}
.nav-tabs .tab-check .tab-check-icon{
  display:none;
  position: absolute;
  top: -7px;
  right: -5px;
}


.nav-tabs .tab-check-link{
  padding:2px;
  background-color: transparent;
}
.tab-check-link:hover,
.tab-check-link:focus{
  opacity: 0.8;
  background-color: transparent;
  outline-offset:0;
}
.nav-tabs .tab-check-link-text{
  padding: 10px;
  font-size: 14px;
  line-height: 12px;
}
.nav-tabs .tab-check.active .tab-check-link, 
.nav-tabs .tab-check.active .tab-check-link:focus{
  background-color: transparent;
  border: 0;
  line-height: 12px;
  outline-offset: 0;
}
.nav-tabs .tab-check.active .tab-check-icon {
  display: block;
}

@media (max-width: 769px) {


    /* //// Components */ 


    /* Wrappers */ 


    .box-title {
        font-size: 16px;
    }


    /* // Modals */


    .modal-backdrop{
      display: none;
    }
    .modal-open{
      overflow: hidden;
    }
    .modal{
      z-index: 5000;
    }


    .modal-content {
      box-shadow: none;
      border:0;
    }


    .modal-dialog {
      margin: 0;
      -webkit-transform: translate3d(0, 0, 0) !important;
      -ms-transform: translate3d(0, 0, 0) !important;
      -moz-transform: translate3d(0, 0, 0) !important;
      transform: translate3d(0, 0, 0) !important;
    }


    .modal-body {
      padding: 10px;
    }


    .modal-xs {
      display: block;
      position: fixed;
      top: 0;
      z-index: 4000;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      opacity: 1;
      box-sizing: border-box;
      overflow: auto;
    }
    .modal-xs-header {
      position: relative;
      display: block;
      padding: 15px;
      clear: both;
      text-decoration: none;
      ms-word-break: break-all;
      word-wrap: break-word;
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
      hyphens: auto;
      -webkit-tap-highlight-color: transparent;
    }


    .modal-xs-header-text{
      display: inline-block;
      clear: both;
      font-size: 18px;
    }


    .modal-xs-header-text.modal-xs-right-header-text{
      margin-left: 30px;
    }


    .modal-xs-header-icon{
      position: absolute;
      top: 20px;
    }


    .modal-xs-right {
      left: inherit;
      padding: 0 0 200px 0;
      -webkit-box-shadow: -4px 0 17px 0 rgba(0, 0, 0, 0.23);
      -ms-box-shadow: -4px 0 17px 0 rgba(0, 0, 0, 0.23);
      -moz-box-shadow: -4px 0 17px 0 rgba(0, 0, 0, 0.23);
      box-shadow: -4px 0 17px 0 rgba(0, 0, 0, 0.23);
      -webkit-overflow-scrolling: touch;
    }


    .modal-xs-right.modal.fade.in, 
    .modal-xs-right-in {
      transition: all 0.5s cubic-bezier(0.16, 0.68, 0.43, 0.99);
      -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }


    .modal-xs-right.modal.fade.in,
    .modal-xs-right.modal.fade{
      top: 0;
    }


    .link-modal-xs-right,
    .btn-modal-xs-right{
      display: block;
      position: relative;
      float: left;
      width: 100%;
      clear: both;
      box-sizing:border-box;
      padding: 15px 0;
    }


    .link-modal-xs-right:hover,
    .btn-modal-xs-right:hover {
      opacity: 0.8;
    }


    .btn-modal-xs-right {
      margin: 0 0 20px 0;
      padding: 10px 40px 10px 10px;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      text-align: left;
      text-transform: uppercase;
      font-size: 16px;
    }


    .link-modal-xs-right-icon,
    .btn-modal-xs-right-icon {
      width: 36px;
      height: 36px;
      position: absolute;
      right: 0;
      float: right;
      display: block;
      top: 50%;
      margin-top: -20px;
    }


    /* // Tabs */ 


    .nav-tabs>li{
      display: inline-block;
    }
    .nav-tabs .tab-check{
      margin: 2px 5px 8px 2px;
    }


     /* // Images */ 


    .card-img-big{
      height: 60px;
    }
}

Por último si tenés el archivo critical-css.tpl vas a tener que agregar las siguientes clases.

Dependiendo que versión del código tengas podes probar con la alternativa 1 o con la 2. La versión que usamos en este tutorial es la 2.

Si no tenés un archivo critical-css.tpl podés agregarlo en tu CSS común al final de todo.

Alternativa 1:

/** PROPERTIES HELPERS ***/

/*CSS properties helpers minified, to unminify it you have to copy the code and paste it here http://unminify.com/, after that paste the unminified code here */

.font-normal,.font-weight-normal{font-weight:400!important}.text-danger{color:red!important}.input-error{border:1px solid #cc4845!important}.border-box{box-sizing:border-box!important}.c-pointer{cursor:pointer!important}.f-none{float:none!important}.d-none{display:none}.d-inline{display:inline}.d-block{display:block}.d-inline-block{display:inline-block}.p-relative{position:relative}.p-absolute{position:absolute!important}.p-fixed{position:fixed!important}.clear-both{clear:both!important}.opacity-80{opacity:.8!important}.opacity-50{opacity:.5!important}.opacity-10{opacity:.1!important}.full-height{height:100%!important}.full-width{width:100%!important}.z-index-above{z-index:999999!important}.m-top{margin-top:20px!important}.m-bottom{margin-bottom:20px!important}.m-right{margin-right:20px!important}.m-left{margin-left:20px!important}.m-all{margin:20px!important}.m-half-top{margin-top:10px!important}.m-half-bottom{margin-bottom:10px!important}.m-half-right{margin-right:10px!important}.m-half-left{margin-left:10px!important}.m-half-all{margin:10px!important}.m-quarter-top{margin-top:5px!important}.m-quarter-right{margin-right:5px!important}.m-quarter-bottom{margin-bottom:5px!important}.m-quarter-left{margin-left:5px!important}.m-none-left{margin-left:0!important}.m-quarter-all{margin:5px!important}.m-double-top{margin-top:40px!important}.m-double-right{margin-right:40px!important}.m-double-bottom{margin-bottom:40px!important}.m-auto{margin:auto!important}.m-none{margin:0!important}.m-none-bottom{margin-bottom:0!important}.m-none-top{margin-top:0!important}.m-center{margin:0 auto!important;position:relative!important;display:block!important}.p-double-top{padding-top:40px!important}.p-double-right{padding-right:40px!important}.p-double-bottom{padding-bottom:40px!important}.p-double-left{padding-left:40px!important}.p-top{padding-top:20px!important}.p-none-top{padding-top:0!important}.p-right{padding-right:20px!important}.p-right-none{padding-right:0!important}.p-left-none{padding-left:0!important}.p-bottom{padding-bottom:20px!important}.p-none-bottom{padding-bottom:0!important}.p-left{padding-left:20px!important}.p-all{padding:20px!important}.p-half-top{padding-top:10px!important}.p-half-right{padding-right:10px!important}.p-half-bottom{padding-bottom:10px!important}.p-half-left{padding-left:10px!important}.p-half-all{padding:10px!important}.p-quarter-top{padding-top:5px!important}.p-quarter-right{padding-right:5px!important}.p-quarter-bottom{padding-bottom:5px!important}.p-quarter-left{padding-left:5px!important}.p-quarter-all{padding:5px!important}.p-none{padding:0!important}.col-tight{padding-left:8px!important;padding-right:8px!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-nowrap{white-space:nowrap!important}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.text-wrap{-ms-word-break:break-all!important;word-wrap:break-word!important;-webkit-hyphens:auto!important;-moz-hyphens:auto!important;hyphens:auto!important}.text-decoration-none{text-decoration:none!important}.text-line-through{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.font-italic{font-style:italic!important}.font-bold{font-weight:700!important}.line-height-inherit{line-height:inherit!important}.line-height-initial{line-height:initial!important}ul.list-style-none li{list-style:none!important}.mail-to a,.mail-to a:hover,.no-link,.no-link:focus,.no-link:hover{text-decoration:none!important}.border-radius-none{border-radius:0!important}.overflow-initial{overflow:initial!important}.overflow-inherit{overflow:inherit!important}.overflow-none{overflow:hidden!important}.overflow-y{overflow-y:auto!important}


/* Mobile Helpers */
@media (max-width: 769px) {
    .clear-both-xs{clear:both!important}.f-none-xs{float:none!important}.pull-left-xs{float:left!important}.pull-right-xs{float:right!important}.d-inline-block-xs{display:inline-block!important}.p-half-all-xs{padding:10px!important}.p-none-xs{padding:0!important}.p-left-none-xs{padding-left:0!important}.p-right-none-xs{padding-right:0!important}.p-half-left-xs{padding-left:10px!important}.p-quarter-left-xs{padding-left:5px!important}.p-quarter-right-xs{padding-right:5px!important}.p-half-right-xs{padding-right:10px!important}.p-top-xs{padding-top:20px!important}.p-quarter-top-xs{padding-top:5px!important}.p-half-top-xs{padding-top:10px!important}.p-bottom-xs{padding-bottom:20px!important}.p-half-bottom-xs{padding-bottom:10px!important}.p-double-bottom-xs{padding-bottom:40px!important}.m-none-bottom-xs{margin-bottom:0!important}.m-none-xs{margin:0!important}.m-bottom-xs{margin-bottom:20px!important}.m-half-bottom-xs{margin-bottom:10px!important}.m-quarter-bottom-xs{margin-bottom:5px!important}.m-top-xs{margin-top:20px!important}.m-half-top-xs{margin-top:10px!important}.m-quarter-top-xs{margin-top:5px!important}.m-none-top-xs{margin-top:0!important}.m-quarter-left-xs{margin-left:5px!important}.text-center-xs{text-align:center!important}.text-left-xs{text-align:left!important}.col-tight-xs{padding-left:8px!important;padding-right:8px!important}.drop-shadow-xs{-moz-box-shadow:0 0 3px #ccc!important;-webkit-box-shadow:0 0 3px #ccc!important;box-shadow:0 0 3px #ccc!important}.border-top-none-xs{border-top:0!important}.border-bottom-none-xs{border-bottom:0!important}.full-width-xs{width:100%!important}.horizontal-container{overflow-x:scroll!important;width:100%!important;margin:0}.horizontal-container::-webkit-scrollbar{width:1px!important;height:0!important}.horizontal-container::-webkit-scrollbar-track{background:0 0!important;border-radius:10px!important}.horizontal-container::-webkit-scrollbar-thumb{border-radius:1px!important}.horizontal-container ul,.horizontal-products-scroller{white-space:nowrap!important}
}

Alternativa 2

/*CSS properties like margins, paddings and text align minified, to unminify it you have to copy the code and paste it here http://unminify.com/, after that paste the unminified code here */ 

.overide-container-width{margin-left:-15px!important;margin-right:-15px!important}.text-danger{color:red!important}.input-error{border:1px solid #cc4845!important}.d-flex{display:flex}.d-inline{display:inline}.d-block{display:block}.d-inline-block{display:inline-block}.d-inline-block-xs{display:none}.center-content{justify-content:center}.p-relative{position:relative!important}.p-absolute{position:absolute!important}.p-fixed{position:fixed}.clear-both{clear:both!important}.opacity-80{opacity:.8!important}.opacity-50{opacity:.5!important}.opacity-10{opacity:.1!important}.full-height{height:100%!important}.full-width{width:100%!important}.m-top{margin-top:20px!important}.m-top-double{margin-top:40px!important}.m-top-half{margin-top:10px!important}.m-top-quarter{margin-top:5px!important}.m-top-none{margin-top:0!important}.m-right{margin-right:20px!important}.m-right-double{margin-right:40px!important}.m-right-half{margin-right:10px!important}.m-right-quarter{margin-right:5px!important}.m-right-none{margin-right:0!important}.m-bottom{margin-bottom:20px!important}.m-bottom-double{margin-bottom:40px!important}.m-bottom-half{margin-bottom:10px!important}.m-bottom-quarter{margin-bottom:5px!important}.m-bottom-none{margin-bottom:0!important}.m-left{margin-left:20px!important}.m-left-half{margin-left:10px!important}.m-left-quarter{margin-left:5px!important}.m-left-none{margin-left:0!important}.m-all{margin:20px!important}.m-all-half{margin:10px!important}.m-all-quarter{margin:5px!important}.m-auto{margin:auto!important}.m-none{margin:0!important}.p-top{padding-top:20px!important}.p-top-double{padding-top:40px!important}.p-top-half{padding-top:10px!important}.p-top-quarter{padding-top:5px!important}.p-top-none{padding-top:0!important}.p-right{padding-right:20px!important}.p-right-double{padding-right:40px!important}.p-right-half{padding-right:10px!important}.p-right-quarter{padding-right:5px!important}.p-right-none{padding-right:0!important}.p-bottom{padding-bottom:20px!important}.p-bottom-double{padding-bottom:40px!important}.p-bottom-half{padding-bottom:10px!important}.p-bottom-quarter{padding-bottom:5px!important}.p-bottom-none{padding-bottom:0!important}.p-left{padding-left:20px!important}.p-left-double{padding-left:40px!important}.p-left-half{padding-left:10px!important}.p-left-quarter{padding-left:5px!important}.p-left-none{padding-left:0!important}.p-all{padding:20px!important}.p-all-half{padding:10px!important}.p-all-quarter{padding:5px!important}.p-none{padding:0!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-nowrap{white-space:nowrap!important}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.text-wrap{-ms-word-break:break-all!important;word-wrap:break-word!important;-webkit-hyphens:auto!important;-moz-hyphens:auto!important;hyphens:auto!important}.text-underline{text-decoration:underline}.list-unstyled-spaced li{margin-bottom:5px}.list-unstyled-spaced i{margin-right:5px}.overflow-none{overflow:hidden}

/* // Mobile helpers */ 

@media (max-width: 767px) {
  .overide-container-width,.overide-container-width-xs{width:100vw!important}.clear-both-xs{clear:both!important}.f-none-xs{float:none!important}.pull-left-xs{float:left!important}.d-inline-block-xs{display:inline-block!important}.full-width-xs{width:100%!important}.p-all-half-xs{padding:10px!important}.p-all-quarter-xs{padding: 5px!important}.p-none-xs{padding:0!important}.p-top-xs{padding-top:20px!important}.p-right-double-xs{padding-right:40px!important}.p-top-half-xs{padding-top:10px!important}.p-top-quarter-xs{padding-top:5px!important}.p-right-half-xs{padding-right:10px!important}.p-right-quarter-xs{padding-right:5px!important}.p-right-none-xs{padding-right:0!important}.p-bottom-xs{padding-bottom:20px!important}.p-bottom-double-xs{padding-bottom:40px!important}.p-bottom-half-xs{padding-bottom:10px!important}.p-left-half-xs{padding-left:10px!important}.p-left-quarter-xs{padding-left:5px!important}.p-left-none-xs{padding-left:0!important}.m-none-xs{margin:0!important}.m-top-xs{margin-top:20px!important}.m-top-half-xs{margin-top:10px!important}.m-top-quarter-xs{margin-top:5px!important}.m-top-none-xs{margin-top:0!important}.m-right-half-xs{margin-right: 10px!important}.m-bottom-xs{margin-bottom:20px!important}.m-bottom-half-xs{margin-bottom:10px!important}.m-bottom-quarter-xs{margin-bottom:5px!important}.m-bottom-none-xs{margin-bottom:0!important}.m-left-xs{margin-left:20px!important}.m-left-half-xs{margin-left:10px!important}.border-none-xs{border:0!important}.text-center-xs{text-align:center!important}.text-left-xs{text-align:left!important}.horizontal-container{overflow-x:scroll!important;margin:0}.horizontal-container::-webkit-scrollbar{width:1px!important;height:0!important}.horizontal-container::-webkit-scrollbar-track{background:0 0!important;border-radius:10px!important}.horizontal-container::-webkit-scrollbar-thumb{border-radius:1px!important}.horizontal-container ul,.horizontal-products-scroller{white-space:nowrap!important}.list-unstyled-spaced li{margin-bottom:10px}
}

10. El paso final es agregar en el archivo translations.txt los textos con sus respectivas traducciónes (puede que algunas ya las tengas):

es "Hasta <strong class='installment-amount'>{1}</strong> cuotas"
pt "Até <strong class='installment-amount'>{1}</strong>x"
en "Up to <strong class='installment-amount'>{1}</strong> installments"


es "Tarjeta de crédito"
pt "Cartão de crédito"
en "Credit card"


es "Tarjeta de débito / Efectivo / Depósito o transferencia"
pt "Cartão de débito / Dinheiro / Depósito ou transferência"
en "Debit card / Cash / Deposit or wire transfer"


es "Efectivo / Débito online"
pt "À vista / Débito online"
en "Cash / Online debit"


es "Efectivo"
pt "À vista"
en "Cash"


es "Débito online"
pt "Débito online"
en "Online debit"


es "Bancos con"
pt "Bancos com"
en "Banks with"


es "Otros bancos"
pt "Outros bancos"
en "Other banks"


es "Pagás"
pt "Você paga"
en "You pay"


es "CFT:"
pt "CFT:"
en "CFT:"


es "Precio en 1 pago:"
pt "Preço em 1 parcela:"
en "1 payment price:"


es "PTF:"
pt "PTF:"
en "PTF:"


es "TEA:"
pt "TEA:"
en "TEA:"


es "Total:"
pt "Total:"
en "Total:"


es "Sin interés"
pt "Sem juros"
en "Without interest"


es "sin interés"
pt "sem juros"
en "without interest"


es "cuotas sin interés"
pt "x sem juros"
en "installments without interest"


es "Conocé las opciones de pago"
pt "Conheça as opções de pagamento"
en "See the payment options"


es "Conocé la cantidad de cuotas"
pt "Conheça a quantidade de parcelas"
en "See our installments amount"


es "Boleto Paghiper tiene un"
pt "Boleto PagHiper ofrece"
en "Boleto Paghiper offers a"


es "de descuento"
pt "de desconto"
en "discount"


es "que será aplicado sobre el costo total de la compra al finalizar la misma."
pt "a ser aplicado sobre o custo total da compra ao finalizá-la."
en "that will be applied over the total cost of the order when the checkout process is finished."


es "Cantidad de cuotas"
pt "Quantidade de parcelas"
en "Installments amount"


es "Ver medios de pago y financiación"
pt "Ver meios de pagamento e parcelamento"
en "See payment options and installments"


es "Ver más medios de pago y financiación"
pt "Ver mais meios de pagamento e parcelamento"
en "See more payment options and installments"


es "Medios de pago y financiación"
pt "Meios de pagamento e parcelamento"
en "Payment options and installments"


es "Detalles de las cuotas"
pt "Detalhes das parcelas"
en "Installments details"


es "Opciones de pago y financiación que vas a poder elegir a la hora de pagar por tu compra"
pt "Estas são as opções de pagamento e parcelamento que poderá escolher na hora de pagar por sua compra"
en "Payment options and installments that you will choose when you finish your purchase"


es "Aceptar"
pt "Aceitar"
en "Accept"


es "Cerrar"
pt "Fechar"
en "Close"


es "Medio de pago elegido:"
pt "Meio de pagamento escolhido:"
en "Payment method chosen:"


es "de"
pt "x"
en "of"


es "x de"
pt "x de"
en "x of"


es "cuotas"
pt "parcelas"
en "installments"


es "cuota"
pt "parcela"
en "installment"


es "Elegí un banco para poder elegir las cuotas"
pt "Escolha um banco para definir suas parcelas"
en "Choose a bank so you can choose the installments"




es "<strong class='js-installment-amount installment-amount'>{1}</strong> cuotas de <strong class='js-installment-price installment-price'>{2}</strong>"
pt "<strong class='js-installment-amount installment-amount'>{1}</strong>x de <strong class='js-installment-price installment-price'>{2}</strong>"
en "In up to <strong class='js-installment-amount installment-amount'>{1}</strong> installments of <strong class='js-installment-price installment-price'>{2}</strong>"




es "<strong class='js-installment-amount installment-amount'>{1}</strong> cuotas sin interés de <strong class='js-installment-price installment-price'>{2}</strong>"
pt "<strong class='js-installment-amount installment-amount'>{1}</strong>x de <strong class='js-installment-price installment-price'>{2}</strong> sem juros"
en "In up to <strong class='js-installment-amount installment-amount'>{1}</strong> installments of <strong class='js-installment-price installment-price'>{2}</strong> without interest"




es "En hasta <strong class='js-installment-amount installment-amount'>{1}</strong> cuotas"
pt "Em até <strong class='js-installment-amount installment-amount'>{1}</strong>x"
en "In up to <strong class='js-installment-amount installment-amount'>{1}</strong> installments"




es "<strong class='js-installment-amount installment-amount'>{1}</strong> cuotas sin interés de <strong class='js-installment-price installment-price'>{2}</strong>"
pt "<strong class='js-installment-amount installment-amount'>{1}</strong>x de <strong class='js-installment-price installment-price'>{2}</strong> sem juros"
en "In up to <strong class='js-installment-amount installment-amount'>{1}</strong> installments of <strong class='js-installment-price installment-price'>{2}</strong> without interest"


es "<strong class='installment-amount'>{1}</strong> cuotas de <strong class='installment-price'>{2}</strong>"
pt "<strong class='installment-amount'>{1}</strong>x de <strong class='installment-price'>{2}</strong>"
en "In up to <strong class='installment-amount'>{1}</strong> installments of <strong class='installment-price'>{2}</strong>"


es "<strong class='installment-amount'>{1}</strong> cuotas sin interés de <strong class='installment-price'>{2}</strong>"
pt "<strong class='installment-amount'>{1}</strong>x de <strong class='installment-price'>{2}</strong> sem juros"
en "In up to <strong class='installment-amount'>{1}</strong> installments of <strong class='installment-price'>{2}</strong> without interest"
es "Conocé las opciones de pago con"
pt "Conheça as opções de pagamento com"
en "See the payment options with"


es "Conocé la cantidad de cuotas"
pt "Conheça a quantidade de parcelas"
en "See our installments amount"


es "12 cuotas con otras tarjetas"
pt "12x com outros cartões"
en "12 installments with other cards"


es "Cuotas"
pt "x"
en "Installments"


es "sin interés de"
pt "sem juros de"
en "without interest of"


es "Precio:"
pt "Preço:"
en "Price:"


es "Volver al producto"
pt "Voltar ao produto"
en "Return to product"


es "Hasta"
pt "Até"
en "Up to"


es "Tarjetas de crédito"
pt "Cartões de crédito"
en "Credit cards"


es "Tarjetas de débito y efectivo"
pt "Cartões de débito e à vista"
en "Debit cards and cash"


es "Transferencia o depósito"
pt "Transferência bancária ou depósito"
en "Wire transfer o deposit"


es "En 1 pago:"
pt "Em 1 parcela:"
en "1 payment price:"


es "tiene un"
pt "oferece"
en "offers a"


es "Cuando termines la compra vas a ver la información de pago en relación a esta opción."
pt "Efetuada a compra, você verá as informações de pagamento em relação a esta opção."
en "When you finish the purchase you will se the payment information related to this option."


es "de "
pt "de "
en "of "


es "O hasta"
pt "Ou até"
en "Or up to"


es "cuotas de"
pt "x de"
en "x of"


es "sin interés"
pt "sem juros"
en "without interest"




es "cuotas"
pt "x"
en "installments"


es "Cuotas"
pt "x"
en "Installments"


es "cuota"
pt "x"
en "installment"


es "Cuotas "
pt "Parcelas"
en "Installments"

Eso es todo! ya tu tienda esta lista para mostrar de forma más clara sus medios de pago!

Sin compromiso de compra ni estadía mínima. No hay costo de registro o cancelación.