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 de tener algo como esto:

A 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 lamada información de cuotas en productos
  • Una vez terminada la implementación, desde Tienda Nube tenemos que habilitar parte de la funcionalidad por lo que tendrás que contactarte con nosotros para terminar su implementación.

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

1. Vamos a crear un nuevo archivo llamado installments-details.tpl y lo ubicaremos dentro de la carpeta snipplets. El archivo será el siguiente:

<div class="installments installments_main-container js-installments-details-container d-inline-block full-width">
    <div class="horizontal-container installments_gateways-horizontal-container">
        <ul class="nav nav-tabs installments_gateways-tabs-container p-half-bottom m-half-bottom p-none-xs m-half-top-xs m-quarter-bottom-xs">
            {% for method, installments in installments_info %}
                <li id="method_{{ method }}" class="js-installments-gw-tab installments_pill-tab d-inline-block-xs m-quarter-bottom-xs f-none-xs {% if loop.first %}active{% endif %}" data-code="{{ method }}"><a href="#installment_{{ method }}_{{ installment }}" class="installments_pill-tab-link" data-toggle="tab">{{ method == 'paypal_multiple' ? 'PAYPAL' : (method == 'itaushopline'? 'ITAU SHOPLINE' : method == 'boleto_paghiper'? 'BOLETO PAGHIPER' : method | upper) }}</a></li>
            {% endfor %}
        </ul>
    </div>
    <div class="tab-content m-half-top {% if not store.installments_on_steroids_enabled %}m-bottom{% endif %} m-bottom-xs pull-left full-width">
        {% 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">
                    <!-- Installments improved -->
                    {% if store.installments_on_steroids_enabled %}
                        <h4 class="installments_subtitle m-half-bottom m-quarter-top m-none-top-xs">{{ 'Conocé las opciones de pago' | translate}}</h4>
                        {% set first_installment_info = installments_interest_info[method]['cft'] %}
                        {% set found_credit_card = false %}
                        {% set found_direct_payment = false %}
                        {% for card,card_data in first_installment_info %}
                            {% if card_data.type == "cc" %}
                                {% set found_credit_card = true %}
                            {% elseif card_data.type == "direct" %}
                                {% set found_direct_payment = true %}
                            {% endif %}
                        {% endfor %}
                        {% if found_credit_card %}
                        <label class="installments_label m-quarter-bottom font-normal">{{'Tarjeta de crédito' | translate }}</label>
                        <div class="{% if method in ['mercadopago'] and store.country == 'AR' %}installments_credit-bank-container p-half-all{% endif %} js-installments-credit-bank-container pull-left full-width m-quarter-top">
                            <div class="installments_group-info">
                                <ul class="js-installments-credit-cards-list installments_flags-tabs-container nav nav-tabs m-quarter-top-xs m-none-bottom">
                                    <!-- Credit cards tabs -->
                                    {% for card,card_data in first_installment_info %}
                                        {% if card_data.type == 'cc' %}
                                            <li id="js-installments-card-{{method}}-{{ card }}" class="installments-card js-installments-flag-tab js-installments-credit-tab installments_flag-tab d-inline-block-xs f-none-xs {% if loop.first %}active{% endif %}" data-type="{{ card_data.type }}" data-code="{{ card }}">
                                                    <a href="#credit_card_{{method}}_{{ card }}" class="installments_flag-tab-link" data-toggle="tab">
                                                        {{ card_data.logo | payment_logo | img_tag('',{class: 'installments_credit-card-image'}) }}
                                                        <span class="installments_check-icon fa-stack">
                                                          <i class="fa fa-circle fa-stack-2x"></i>
                                                          <i class="fa fa-check fa-stack-1x fa-inverse"></i>
                                                        </span>
                                                    </a>
                                                </li>
                                        {% endif %}
                                    {% endfor %}
                                </ul>
                            </div>
                            <div class="tab-content">
                                <!-- Credit cards containers -->
                                {% for card,card_data in first_installment_info %}
                                    <div class="js-credit-cart-tab-pane tab-pane {% if loop.first %} active{% endif %} pull-left full-width" id="credit_card_{{method}}_{{ card }}" >
                                        {% if card_data.banks %}
                                            <div class="installments_group-info pull-left full-width installments_credit-cards-container m-half-top" {% if card_data.banks['generic'] is not null %}style="display: none"{% endif %}>
                                                <label class="font-normal">{{'Bancos con' | translate }} {{ card_data.name }}</label>
                                                <div class="installments_container">
                                                    <select data-card="{{ card }}" class="js-installments-bank-select m-none" {% if card_data.banks['generic'] is not null %}style="display:none;"{% endif %}>
                                                        {% if card_data.banks['generic'] is null %}
                                                            <option selected disabled>{{ 'Elegir' | translate }}</option>
                                                            {% for installment, installment_data in installments_info[method]|reverse(true) %}
                                                                {% if card_data.max_no_interest >= installment %}
                                                                    <optgroup label="{% if installment > 1 %}{{ installment }} {{ 'cuotas sin interés'|translate }}{% else %}{{ 'Otros bancos'|translate }}{% endif %}">
                                                                        {% for bank,bankdata in card_data['banks'] %}
                                                                            {% if (installments_interest_info[method]['cft'][card]['max_no_interest'] == installment and installments_interest_info[method]['cft'][card]['banks'][bank][installment] == 0) or (installments_interest_info[method]['cft'][card]['max_no_interest'] > installment and installments_interest_info[method]['cft'][card]['banks'][bank][installment] == 0 and installments_interest_info[method]['cft'][card]['banks'][bank][previous_installment] > 0) %}
                                                                                <option {% for installment_number, installment_data in installments_info[method] %} data-cft-{{ installment_number }}="{{ installments_interest_info[method]['cft'][card]['banks'][bank][installment_number] }}" data-tea-{{ installment_number }}="{{ installments_interest_info[method]['tea'][card]['banks'][bank][installment_number] }}" {% endfor %}>{{ bank }}</option>
                                                                            {% endif %}
                                                                        {% endfor %}
                                                                    </optgroup>
                                                                {% endif %}
                                                                {% set previous_installment = installment %}
                                                            {% endfor %}
                                                        {% else %}
                                                            <option selected {% for installment_number, installment_data in installments_info[method] %} data-cft-{{ installment_number }}="{{ installments_interest_info[method]['cft'][card]['banks']['generic'][installment_number] }}" data-tea-{{ installment_number }}="{{ installments_interest_info[method]['tea'][card]['banks']['generic'][installment_number] }}" {% endfor %}>generic</option>
                                                        {% endif %}
                                                    </select>
                                                    <div class="text-danger js-bank-not-selected-error m-quarter-top" style="display:none";>{{ 'Elegí un banco para poder elegir las cuotas' | translate }}</div>
                                                </div>
                                            </div>
                                            {% if card_data.banks['generic'] is not null and card_data.max_no_interest > 1 %}
                                                <div class="installments_group-info pull-left full-width installments_credit-cards-container m-half-top m-none-xs">
                                                    <label class="font-bold installments_label">¡{{ card_data.max_no_interest }} {{ "cuotas sin interés" | translate }}!</label>
                                                </div>
                                            {% endif %}
                                        {% endif %}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% endif %}
                        {% if found_direct_payment %}
                            <div class="installments_group-info installments-cash_container pull-left full-width {% if found_credit_card %}m-top m-half-top-xs{% endif %}">
                                <label class="installments_label m-quarter-bottom font-normal">
                                    {% set wording_method_only_cash = method in ['mercadopago', 'boleto_paghiper'] %}
                                    {% set wording_method_only_debit = method in ['cielo'] %}
                                    {% 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 / Efectivo / Depósito o transferencia' | translate }}
                                    {% endif %}
                                </label>
                                <ul class="installments_flags-tabs-container nav nav-tabs m-quarter-top-xs m-none-bottom">
                                    <!-- Cash tabs -->
                                    {% for card,card_data in first_installment_info %}
                                        {% if card_data.type != 'cc' %}
                                            <li class="installments-card js-installments-flag-tab js-installments-cash-tab installments_flag-tab d-inline-block-xs f-none-xs {% if not found_credit_card and loop.first %}active{% endif %}" data-type="dd" data-code="{{ card }}">
                                                <a href="#credit_debit_{{ card }}" class="installments_flag-tab-link js-installments-flag-tab" data-toggle="tab">
                                                    {{ card_data.logo | payment_logo | img_tag('',{class: 'installments_credit-card-image'}) }}
                                                    <span class="installments_check-icon fa-stack">
                                                      <i class="fa fa-circle fa-stack-2x"></i>
                                                      <i class="fa fa-check fa-stack-1x fa-inverse"></i>
                                                    </span>
                                                </a>
                                            </li>
                                        {% endif %}
                                    {% endfor %}
                                </ul>
                            </div>
                        {% endif %}
                        <div class="installments-divider m-half-top m-half-bottom pull-left full-width"></div>
                        <!-- Installments final info -->
                        {% if found_credit_card %}
                            <div class="pull-left full-width js-installments-final-info">
                                <div class="installments_group-info js-installments-container pull-left full-width installments_installment-select-container m-half-bottom">
                                    <h4 class="installments_subtitle m-half-bottom m-quarter-top m-none-top-xs">{{'Conocé la cantidad de cuotas' | translate }}</h4>
                                    <span class="installments_label m-quarter-bottom">{{ 'Pagás' | translate }}</span>
                                    <!-- Installments selects for each credit card -->
                                    <div class="p-relative d-inline-block">
                                    {% for card,card_data in first_installment_info %}
                                            <select class="js-installment-select js-installment-multiple-select installment_select m-none js-installments-card-{{ card }} js-installments-card-{{method}}-{{ card }} {% if loop.first %}active{% endif %}" {% if not loop.first %}style="display:none;"{% endif %} {% if card_data.banks['generic'] is null %}disabled{% endif %}>
                                                <!-- Installments select -->
                                                {% for installment, data_installment in installments %}
                                                    {% if card_data.banks|first[installment] is defined %}
                                                    <option value="js-installment-number-{{loop.index0}}" class="{% if loop.first %}js-amount-selected{% endif %} {% if data_installment.without_interests %}js-installment-without-int{% endif %}" data-number="{{ installment }}">
                                                        {{ installment }}
                                                        {% if store.country != 'BR' %}
                                                            {% if installment > 1 %}
                                                                {{'cuotas' | translate }}
                                                            {% else %}
                                                                {{'cuota' | translate }}
                                                            {% endif %}
                                                        {% endif %}
                                                    </option>
                                                    {% endif %}
                                                {% endfor %}
                                            </select>
                                            <div class="js-installment-select-container p-absolute full-width full-height installments_disabled-select js-installments-card-{{method}}-{{ card }} {% if card_data.banks['generic'] is not null %}hidden{% endif %}" {% if not loop.first %}style="display:none;"{% endif %}></div>
                                    {% endfor %}
                                    </div>
                                    <!-- Installments prices -->
                                    {% 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 %}
                                         <span id="installment_{{ method }}_{{ installment }}" class="js-installment-number-{{loop.index0}} js-installment-price installment_text" data-method="{{ method }}" {% if not loop.first %}style="display:none";{% endif %}>
                                            {% if store.country != 'BR' %}
                                                {{ 'de' | translate }} 
                                            {% else %}
                                                x
                                            {% endif %}
                                            <span class="installment-price installment_price-accent font-bold" data-value="{{ data_installment.installment_value }}">{{ (rounded_installment_value * 100) | money }}</span>
                                        </span>
                                    {% endfor %}
                                    <span class="js-installment-without-int-text installment_text"> {{ 'sin interés' | translate }}</span>
                                </div>
                                <div class="js-installment-legal-info opacity-80 clear-both">
                                    {% if store.country == 'AR' %}
                                        <h2 class="installment_cft_text js-installment-cft-container font-normal pull-left m-half-right full-width-xs" style="display:none;">{{'CFT:' | translate}} <span class="js-installments-cft-value">0,00%</span></h2>
                                        <div class="d-inline-block">
                                            <p class="installment_text-small clear-both">{{'Precio en 1 pago:' | translate}}<strong class="js-installments-one-payment" data-value="{{  product.price/100 }}"> {{ product.price | money }}
                                                </strong>
                                            </p>
                                            <p class="js-installment-ptf-container installment_text-small clear-both" style="display:none;">{{'PTF:' | translate}} <strong class="js-installments-ptf">{{ product.price | money }}</strong></p>
                                            <p class="js-installment-tea-container installment_text-small m-quarter-left" style="display:none;">{{'TEA:' | translate}} <strong class="js-installments-tea">0,00%</strong></p>
                                        </div>
                                    {% else %}
                                        <div class="d-inline-block">
                                             <p class="installment_text-small clear-both">{{'Total:' | translate}}
                                                <strong class="js-installments-ptf"> {{ product.price | money }}
                                                </strong>
                                            </p>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        {% endif %}
                        <!-- Cash final info -->
                         <div class="pull-left full-width js-cash-final-info" {% if found_credit_card %}style="display:none;"{% endif %}>
                             <h4><span>{{'Pagás' | translate }}:</span>
                                <span class="js-installments-one-payment installment_price-accent">{{ product.price | money }}
                                </span>
                            </h4>
                            {% if method in ['boleto_paghiper'] and discount > 0.0 %}
                                <div class="m-half-top m-bottom p-half-bottom"><small> {{'Boleto Paghiper tiene un' | translate }} <strong class="installment_price-accent">{{discount}}% {{'de descuento' | translate }}</strong> {{'que será aplicado sobre el costo total de la compra al finalizar la misma.' | translate }}</small></div>
                            {% endif %}
                        </div>
                        <!-- Close button -->
                        <div class="pull-left full-width">
                            <a href="#" class="general-button installments_close-button js-installments-accept-button pull-right hidden-xs m-none" data-dismiss="modal">{{ 'Cerrar' | translate }}</a>
                            <a href="#" class="general-button installments_close-button js-installments-accept-button js-mobile-toggle-installments pull-right visible-xs m-half-top-xs m-none-bottom" data-dismiss="modal">{{ 'Cerrar' | translate }}</a>
                        </div>
                    {% else %}
                        {% for installment, data_installment in installments %}
                            <div class="installments_installment-list-item m-quarter-bottom p-quarter-left" 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="installment-amount">{{ installment }}</strong> {% if store.country == 'AR' %}cuota{% if installment > 1 %}s{% endif %} de{% else %}x{% endif %} <strong class="installment-price">{{ (rounded_installment_value * 100) | money }}</strong>
                                {% if data_installment.without_interests %} {{ 'sin interés' | t }}{% endif %}
                                {% if store.country == 'AR' and installment > 1 %}
                                    - Precio Final: <strong class="installment-total-price">
                                        {{ total_value_in_cents | money }}
                                    </strong>
                                {% endif %}
                            </div>
                        {% endfor %}
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
</div>

2. Dentro del archivo product.tpl buscá el código que engloba al viejo popup. Generalmente se encuentra al final de este archivo dentro de la siguiente condición de twig:

{% if installments_info %}
    Contenido a reemplazar
{% endif %}

Deberás reemplazar todo su contenido con lo siguiente:

{% set gateways = installments_info | length %}
<div id="InstallmentsModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body installments_modal">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                {% include 'snipplets/installments-details.tpl' %}
            </div>
        </div>
    </div>
</div>
<div class="js-mobile-installments-panel mobile-right-panel animation-panel-right-close visible-xs p-none-bottom">
    <a class="js-mobile-toggle-installments mobile-right-panel_header mobile-right-panel_header-dark" href="#">
        <i class="fa fa-arrow-left mobile-right-panel_arrow-left mobile-right-panel_arrow-left-big"></i>
        <span class="mobile-right-panel_header-text mobile-right-panel_header-text-big">
            {% if store.installments_on_steroids_enabled %}
                {% if product.has_direct_payment_only %}
                    {{ "Medios de pago" | translate }}
                {% else %}
                    {{ 'Medios de pago y financiación' | translate }}
                {% endif %}
            {% else %}
                {{ 'Detalles de las cuotas' | translate }}
            {% endif %}
        </span>
    </a>
    <div class="js-mobile-installments-body p-left p-right p-half-left-xs p-half-right-xs">
        {# Content inserted vía JS #}
    </div>
</div>

3. Todavía dentro de product.tpl necesitamos modificar el componente que contiene al botón que activa el popup. Por lo general este botón tiene el id "button-installments" y se encuentra dentro de la siguiente condición de twig: 

{% if product.show_installments and product.display_price %}

Reemplazá todo el contenido de ese segmento, incluyendo el condicional por lo siguiente: 

{% 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 class="js-mobile-toggle-installments {% if store.installments_on_steroids_enabled %}js-open-installments-modal-mobile{% endif %} product-detail_installments-module {% if not product.variations %}product-detail_installments-module-no-variations{% endif %} p-top-xs p-bottom-xs p-relative pull-left full-width clear-both m-bottom m-none-xs">
            {% snipplet "installments_in_product.tpl" %}
                <div class="row-fluid">
                    <a id="button-installments" href="#InstallmentsModal" class="{% if store.installments_on_steroids_enabled %}js-open-installments-modal-desktop{% endif %} m-none-xs" role="button" data-toggle="modal" {% if (not product.get_max_installments) and (not product.get_max_installments(false)) %}style="display: none;"{% endif %}>
                        {% if store.installments_on_steroids_enabled %}
                            {% if product.has_direct_payment_only %}
                                {{ "Ver medios de pago" | translate }}
                            {% else %}
                                {{ "Ver medios de pago y financiación" | translate }}
                            {% endif %}
                        {% else %}
                            {{ "Ver el detalle de las cuotas" | translate }}
                        {% endif %}
                    </a>
                </div>
                <div class="p-relative d-inline-block clear-both m-quarter-top m-quarter-bottom js-installments-selected-gw-container p-double-right-xs" style="display:none;">
                    <span class="font-bold installments_label-selected-gw">{{'Medio de pago elegido:' | translate }}</span>
                    <span class="js-installments-selected-gw text-capitalize installments_selected-gw font-bold "></span>
                    <span class="installments_check-icon installments_check-icon-gw fa-stack d-inline-block p-relative">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-check fa-stack-1x fa-inverse"></i>
                    </span>
                </div>
            <i class="fa fa-angle-right visible-xs product-detail_installments-arrow"></i>
        </div>
    {% endif %}
{% endif %}

4. Seguimos haciendo cambios en product.tpl. Dentro del formulario de producto justo despues de que este comienza necesitarás agregar lo siguiente:

<input type="hidden" name="preselected_gw_code">

5.  Reemplazá el contenido del tpl installments_in_product.tpl por 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 %}
<div class="row-fluid">
    <div class="installments max_installments_container">
        {% set max_installments_without_interests = product.get_max_installments(false) %}
        {% if store.installments_on_steroids_enabled and store.country == 'AR' %}
            {% set max_installments_with_interests = product.get_max_installments %}
            {% if max_installments_with_interests %}
                <i class="fa fa-credit-card-alt installments_credit-icon opacity-80 d-inline"></i>
                <div class="max-installments m-none-top d-inline">{{ "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>
            {% else %}
                <i class="fa fa-credit-card-alt installments_credit-icon opacity-80 d-inline" style="display: none;"></i>
                <div class="max-installments m-none-top d-inline" style="display: none;">
                {% if product.max_installments_without_interests %}
                    {{ "Hasta <strong class='installment-amount'>{1}</strong> cuotas" | t(null, null) }}
                {% else %}
                    {{ "Hasta <strong class='installment-amount'>{1}</strong> cuotas" | t(null, null) }}
                {% endif %}
                </div>
            {% endif %}
        {% else %}
            {% if max_installments_without_interests and max_installments_without_interests.installment > 1 %}
                    <i class="fa fa-credit-card-alt installments_credit-icon opacity-80 d-inline"></i>
                    <div class="max_installments d-inline">{{ "<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 %}
                    <i class="fa fa-credit-card-alt installments_credit-icon opacity-80 d-inline"></i>
                    <div class="max_installments d-inline">{{ "<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>
                {% else %}
                    <i class="fa fa-credit-card-alt installments_credit-icon opacity-80 d-inline" style="display: none;"></i>
                    <div class="max_installments d-inline" style="display: none;">
                    {% if product.max_installments_without_interests %}
                        {{ "<strong class='installment-amount'>{1}</strong> cuotas sin interés de <strong class='installment-price'>{2}</strong>" | t(null, null) }}
                    {% else %}
                        {{ "<strong class='installment-amount'>{1}</strong> cuotas de <strong class='installment-price'>{2}</strong>" | t(null, null) }}
                    {% endif %}
                    </div>
                {% endif %}
            {% endif %}
        {% endif %}
    </div>
</div>
{% endif %}

6. En el archivo single_product.tpl busca el siguiente condicional:

{% if product.show_installments %}

Y cambiá tanto el condicional como su contenido por 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 %}
    {% set max_installments_without_interests = product.get_max_installments(false) %}
    {% if store.installments_on_steroids_enabled and store.country == 'AR' %}
        {% set max_installments_with_interests = product.get_max_installments %}
        {% if max_installments_with_interests %}
            <div class="max_installments product-item_installments">{{ "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 %}
    {% else %}
        {% if max_installments_without_interests and max_installments_without_interests.installment > 1 %}
            <span class="max_installments product-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="max_installments product-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 %}

7. Si la plantilla tiene la funcionalidad de Sugerencias de búsqueda,  en el tpl search-results.tpl tendrás que hacer un cambio similar reemplazando el siguiente condicional y todo su contenido:

{% if product.show_installments %}

Por lo siguiente:

{% if product.show_installments %}
    <span class="search-suggest_installments hidden-phone">
        {% set max_installments_without_interests = product.get_max_installments(false) %}
        {% if store.installments_on_steroids_enabled and store.country == 'AR' %}
            {% set max_installments_with_interests = product.get_max_installments %}
            {% if max_installments_with_interests %}
                <div class="max_installments m-quarter-top-xs">{{ "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 %}
        {% else %}
            {% if max_installments_without_interests %}
                <div class="max_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) }}</div>
            {% else %}
                {% set max_installments_with_interests = product.get_max_installments %}
                {% if max_installments_with_interests %}
                    <div class="max_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) }}</div>
                {% endif %}
            {% endif %}
        {% endif %}
    </span>
{% endif %}

Si tu plantilla no tiene la funcionalidad de Sugerencias de búsqueda podes continuar con el siguiente paso.

8. Reemplazá todo el contenido dentro del archivo installments_in_product.tpl por 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 %}
<div class="row-fluid">
    <div class="installments max_installments_container">
        {% set max_installments_without_interests = product.get_max_installments(false) %}
        {% if store.installments_on_steroids_enabled and store.country == 'AR' %}
            {% set max_installments_with_interests = product.get_max_installments %}
            {% if max_installments_with_interests %}
                <i class="fa fa-credit-card-alt installments_credit-icon opacity-80 d-inline"></i>
                <div class="max-installments m-none-top d-inline">{{ "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>
            {% else %}
                <i class="fa fa-credit-card-alt installments_credit-icon opacity-80 d-inline" style="display: none;"></i>
                <div class="max-installments m-none-top d-inline" style="display: none;">
                {% if product.max_installments_without_interests %}
                    {{ "Hasta <strong class='installment-amount'>{1}</strong> cuotas" | t(null, null) }}
                {% else %}
                    {{ "Hasta <strong class='installment-amount'>{1}</strong> cuotas" | t(null, null) }}
                {% endif %}
                </div>
            {% endif %}
        {% else %}
            {% if max_installments_without_interests and max_installments_without_interests.installment > 1 %}
                    <i class="fa fa-credit-card-alt installments_credit-icon opacity-80 d-inline"></i>
                    <div class="max_installments d-inline">{{ "<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 %}
                    <i class="fa fa-credit-card-alt installments_credit-icon opacity-80 d-inline"></i>
                    <div class="max_installments d-inline">{{ "<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>
                {% else %}
                    <i class="fa fa-credit-card-alt installments_credit-icon opacity-80 d-inline" style="display: none;"></i>
                    <div class="max_installments d-inline" style="display: none;">
                    {% if product.max_installments_without_interests %}
                        {{ "<strong class='installment-amount'>{1}</strong> cuotas sin interés de <strong class='installment-price'>{2}</strong>" | t(null, null) }}
                    {% else %}
                        {{ "<strong class='installment-amount'>{1}</strong> cuotas de <strong class='installment-price'>{2}</strong>" | t(null, null) }}
                    {% endif %}
                    </div>
                {% endif %}
            {% endif %}
        {% endif %}
    </div>
</div>
{% endif %}

9. Ya terminaste de hacer todos los cambios relacionados a twig y HTML, ahora seguiremos con los cambios de Javascript.

En el archivo layout.tpl dentro de la función changeVariant , la cual debería comenzar de la siguiente forma:

function changeVariant(variant){

Agregar la siguiente variable (es probable que ya la tengas, en ese caso pisa lo que tenías con esto nuevo):

var installment_helper = function($element, amount, price){
	$element.find('.installment-amount').text(amount);
    $element.find('.installment-price').attr("data-value", price);
    $element.find('.installment-price').text(LS.currency.display_short + parseFloat(price).toLocaleString('de-DE', { minimumFractionDigits: 2 }));
	if(variant.price_short && Math.abs(variant.price_number - price * amount) < 1) {
        $element.find('.installment-total-price').text((variant.price_short).toLocaleString('de-DE', { minimumFractionDigits: 2 }));
    } else {
        $element.find('.installment-total-price').text(LS.currency.display_short + (price * amount).toLocaleString('de-DE', { minimumFractionDigits: 2 }));
    }
};

Luego, todavía dentro de la misma función de changeVariant agregá lo siguiente (justo debajo del código agregado anteriormente):

Nuevamente, si ya tenías este código, solo tenés que reemplazarlo por lo nuevo

if (variant.installments_data) {
    var variant_installments = JSON.parse(variant.installments_data);
    var max_installments_without_interests = [0,0];
    var max_installments_with_interests = [0,0];
    $.each(variant_installments, function(payment_method, installments) {
        $.each(installments, function(number_of_installment, installment_data) {
            max_installments_without_interests = get_max_installments_without_interests(number_of_installment, installment_data, max_installments_without_interests);
            max_installments_with_interests = get_max_installments_with_interests(number_of_installment, installment_data, max_installments_with_interests);
            var installment_container_selector = '#installment_' + payment_method + '_' + number_of_installment;
            installment_helper($(installment_container_selector), number_of_installment, installment_data.installment_value.toFixed(2));
        });
    });
    var $installments_container = $(variant.element + ' .installments.max_installments_container .max_installments');
    var $installments_modal_link = $(variant.element + ' #button-installments');
    var $payments_module = $(variant.element + ' .js-mobile-toggle-installments');
    var $installmens_card_icon = $(variant.element + ' .js-installments-credit-card-icon');
    {% if store.installments_on_steroids_enabled and product.has_direct_payment_only %}
    var installments_to_use = max_installments_without_interests[0] >= 1 ? max_installments_without_interests : max_installments_with_interests;

    if(installments_to_use[0] <= 0 ) {
    {%  else %}
    var installments_to_use = max_installments_without_interests[0] > 1 ? max_installments_without_interests : max_installments_with_interests;

    if(installments_to_use[0] <= 1 ) {
    {% endif %}
        $installments_container.hide();
        $installments_modal_link.hide();
        $payments_module.hide();
        $installmens_card_icon.hide();
    } else {
        $installments_container.show();
        $installments_modal_link.show();
        $payments_module.show();
        $installmens_card_icon.show();
        installment_helper($installments_container, installments_to_use[0], installments_to_use[1]);
    }
}

Justo debajo de lo agregado anteriormente agregá lo siguiente:

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

Terminando la parte de Javascript solo queda agregar el siguiente código idealmente dentro de $(document).ready(function(){ y a su vez este dentro de un condicional de twig {% if template == "product" %}.

El código final debería verse así:

<script type="text/javascript">
    $(document).ready(function(){
    {# Installments details #}

        {% if store.installments_on_steroids_enabled %}

	        // Installments details flags and selects
	        $(".js-installments-bank-select optgroup:not(:has(option))").hide(); 
	        $('.js-installment-select').on('change', function() {
	            $(".js-installments-container").removeClass("js-installments-container-active");
	            var $installments_container = $(this).closest(".js-installments-container").addClass("js-installments-container-active");
	            var $active_installment_amount = $(this).find(':selected').addClass('js-amount-selected').siblings('option').removeClass('js-amount-selected');
	            var installment_select_value = $(this).val();
	            $(".js-installments-container-active .js-installment-price").hide();
	            var $installment_price_to_show = $installments_container.find('.'+installment_select_value);
	            $installment_price_to_show.show();
	        });

	        $(".js-installments-flag-tab").click(function(e){
	            e.preventDefault();
	            var $main_container = $(this).closest(".js-gw-tab-pane");
	            $main_container.find(".js-installments-flag-tab").not(this).removeClass("active");
	            ga_send_event('installments-flags-clicks', 'clicks');
	        });
	        $(".js-installments-cash-tab").click(function(e){
	            e.preventDefault();
	            var $main_container = $(this).closest(".js-gw-tab-pane");
	            $main_container.find(".js-credit-cart-tab-pane.active").removeClass("active");
	            $main_container.find(".js-installments-final-info").hide();
	            $main_container.find(".js-cash-final-info").show();
	        });

	        $(".js-installments-credit-tab").click(function(){
	            var $main_container = $(this).closest(".js-gw-tab-pane");

	            // Show the correct installment value related to each credit card
	            $main_container.find(".js-installments-final-info").show();
	            $main_container.find(".js-cash-final-info").hide();
	            var current_credit_card_id_val = $(this).attr("id"); 
	            $main_container.find(".js-installment-select").hide().removeClass("active");
	            $main_container.find(".js-installment-select-container").hide().removeClass("active");
	            $main_container.find('.'+current_credit_card_id_val).show().addClass("active");

	            // Update the installment depending the selected credit card
	            $(".js-gw-tab-pane.active .js-installments-container").removeClass("js-installments-container-active");
	            var $installments_container = $main_container.find(".js-installment-select.active").closest(".js-installments-container").addClass("js-installments-container-active");
	            var $active_installment_amount = $main_container.find('.js-installment-select.active option:selected').addClass('js-amount-selected').siblings('option').removeClass('js-amount-selected');
	            var installment_select_value = $main_container.find('.js-installment-select.active').val();
	            $(".js-gw-tab-pane.active .js-installment-price").hide();
	            var $installment_price_to_show = $installments_container.find('.'+installment_select_value);
	            $installment_price_to_show.show();
	            $(".js-installment-single-select").show().addClass("active");
	        });

	        // Installments details refresh data
	        $("li[data-type='cc'].installments-card").click(function(e){
	            var active_card = $(this).data("code");
	            refreshInstallmentData(active_card);
	        });

	        $(".js-installments-bank-select, .js-installment-select, .js-variation-option").change(function(e){
	            var active_card = $(".js-gw-tab-pane.active .js-installments-flag-tab.active").data("code");
	            refreshInstallmentData(active_card);
	        });

	        $("#button-installments, .js-mobile-toggle-installments, .js-installments-gw-tab").click(function(e){
	            var active_card = $(".js-gw-tab-pane.active .js-installments-flag-tab.active").data("code");
	            refreshInstallmentData(active_card);
	        });

	        $(".js-installments-gw-tab").click(function(e){
                setTimeout(function() {
                    var active_card = $(".js-gw-tab-pane.active .js-installments-flag-tab.active").data("code");
                    refreshInstallmentData(active_card);
                }, 10);
            });

	        $(".js-installments-bank-select").change(function(e){
	            var $main_container = $(this).closest(".js-gw-tab-pane");
	            $main_container.find(".js-credit-cart-tab-pane.active .js-bank-not-selected-error").hide();
	            var $disabled_installment_select = $(".js-installment-select:visible:disabled");
	            $disabled_installment_select.prop('disabled', false).addClass("enabled");
	            $(".js-installment-select:visible.enabled").next(".js-installment-select-container").remove();
	        });

	        $(".js-installment-select-container").click(function(e){
	            var $main_container = $(this).closest(".js-gw-tab-pane");
	            $main_container.find(".js-credit-cart-tab-pane.active .js-bank-not-selected-error").show();
	            e.preventDefault();
	        });
	        
	        $(".js-installments-accept-button").click(function(){
	            var selected_gw = $(".js-installments-gw-tab.active a").text();
	            var selected_gw_code = $(".js-installments-gw-tab.active").data('code');
	            sessionStorage.setItem('installments-selected-gw-code', selected_gw_code);
	            sessionStorage.setItem('installments-selected-gw-name', selected_gw.toLowerCase());
	            $("input[name=preselected_gw_code]").val(selected_gw_code);
	            $(".js-installments-selected-gw").text(selected_gw.toLowerCase());
	            $(".js-installments-selected-gw-container").show();
	        });

	        $(document).ready(function() {
	            if(sessionStorage.getItem('installments-selected-gw-code')){
	                $("input[name=preselected_gw_code]").val(sessionStorage.getItem('installments-selected-gw-code'));
	                $(".js-installments-selected-gw").text(sessionStorage.getItem('installments-selected-gw-name'));
	                $(".js-installments-selected-gw-container").show();
	                $(".js-installments-gw-tab.active").removeClass("active");
	                $(".js-gw-tab-pane.active").removeClass("active");
	                $("#method_" + sessionStorage.getItem('installments-selected-gw-code')).addClass("active");
	                $("#installment_" + sessionStorage.getItem('installments-selected-gw-code') + "_").addClass("active");
	            }
	        });

	        function refreshInstallmentData(active_card) {
	            var installment = Number($(".js-gw-tab-pane.active select.js-installments-card-" + active_card + " option:selected").data('number'));
	            var installment_value = $(".js-gw-tab-pane.active select.js-installments-card-" + active_card + " option:selected").val();
	            var total_value_one_payment = Number($(".js-installments-one-payment").attr("data-value"));

	            if ($('.js-installments-cft-value').length) {
	                //CFT
	                var cft = $(".js-gw-tab-pane.active select[data-card=" + active_card + "] option:selected").data("cft-" + installment);
	                $(".js-gw-tab-pane.active .js-installments-cft-value").text(cft ? cft.toLocaleString('de-DE', {
	                        maximumFractionDigits: 2,
	                        minimumFractionDigits: 2
	                    }) + "%" : "0,00%");

	                //TEA
	                var tea = $(".js-gw-tab-pane.active select[data-card=" + active_card + "] option:selected").data("tea-" + installment);
	                $(".js-gw-tab-pane.active .js-installments-tea").text(tea ? tea.toLocaleString('de-DE', {
	                        maximumFractionDigits: 2,
	                        minimumFractionDigits: 2
	                    }) + "%" : "0,00%");

	                // CFT Visibility
	                if (installment == 1) {
	                    $(".js-gw-tab-pane.active .js-installment-cft-container, .js-gw-tab-pane.active .js-installment-ptf-container, .js-gw-tab-pane.active .js-installment-tea-container").hide();
	                } else {
	                    $(".js-gw-tab-pane.active .js-installment-cft-container, .js-gw-tab-pane.active .js-installment-ptf-container, .js-gw-tab-pane.active .js-installment-tea-container").show();
	                }
	            }

	            //Total Price
	            if (cft == 0) {
	                $(".js-gw-tab-pane.active .js-installments-ptf").text($(".js-gw-tab-pane.active strong.js-installments-one-payment").text());
	                $(".js-gw-tab-pane.active ." + installment_value + " .installment-price").text(LS.currency.display_short + (total_value_one_payment/installment).toLocaleString('de-DE', {maximumFractionDigits: 2, minimumFractionDigits: 2}));
	                $(".js-installments-container-active .js-installment-without-int-text").show();
	            } else {
	                var base_price = Number($("#price_display").attr("content"));
	                var installment_price_container = $(".js-gw-tab-pane.active ." + installment_value + " .installment-price");
	                installment_price_container.text(LS.currency.display_short + Number(installment_price_container.attr("data-value")).toLocaleString('de-DE', {maximumFractionDigits: 2, minimumFractionDigits: 2}));
	                var total_value = installment * priceToFloat($(".js-gw-tab-pane.active ." + installment_value + " .installment-price").text());
	                total_value = ((Math.abs(base_price - total_value) < 0.07) ? base_price : total_value);
	                $(".js-gw-tab-pane.active .js-installments-ptf").text(LS.currency.display_short + total_value.toLocaleString('de-DE', {maximumFractionDigits: 2, minimumFractionDigits: 2}));
	                if (total_value != $(".js-gw-tab-pane.active .js-installment-number-0 .installment-price").attr("data-value")) {
                        $(".js-gw-tab-pane.active .js-installment-without-int-text").hide();
                    } else {
                        $(".js-gw-tab-pane.active .js-installment-without-int-text").show();
                    }
	            }
	            if ($(".js-gw-tab-pane.active .js-installments-ptf").text().trim() == $('.js-gw-tab-pane.active .js-installment-legal-info .js-installments-one-payment').text().trim()) {
	                $(".js-gw-tab-pane.active .js-installments-cft-value").text("0,00%");
	                $(".js-gw-tab-pane.active .js-installments-tea").text("0,00%");
	                $(".js-gw-tab-pane.active ." + installment_value + " .installment-price").text(LS.currency.display_short + (total_value_one_payment/installment).toLocaleString('de-DE', {maximumFractionDigits: 2, minimumFractionDigits: 2}));
	                $(".js-gw-tab-pane.active .js-installment-without-int-text").show();
	            }
	        }

	        function priceToFloat(price){
	            return parseFloat(price.replace(/[^\d,]/g,'').replace(/[,]/g,'.'));
	        }

	        var device = ($(window).width() > 769 ? 'desktop' : 'mobile');
	        $(".js-open-installments-modal-" + device).click(function(e){
                ga_send_event("installments-opened-"  + device, 'clicks');
            });

	    {% endif %}

        // Installments details - Mobile
        if ($(window).width() < 768) {
            $(".js-product-detail-payment-logo").removeAttr("href");
            $("#button-installments").removeAttr("href");
            $(".js-mobile-toggle-installments").click(function(e){
                e.preventDefault();
                if(!$(".js-installments-details-container").hasClass("js-installments-details-detached")){
                    $(".js-installments-details-container").detach().appendTo('.js-mobile-installments-body');
                }
                $(".js-mobile-installments-panel").toggleClass("animation-panel-right-open animation-panel-right-close");
                $("body").toggleClass("overflow-none");
                $(".js-installments-details-container").addClass("js-installments-details-detached");
            });
        }
    });
</script>

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

Dentro de tu hoja de estilos común, por ejemplo style.css agregá lo siguiente:

/* Installments details */
select[disabled], 
.installments_main-container select[disabled] {
    cursor: not-allowed;
    color: #ccc;
}

.installments_main-container select{
    color: black;/* To avoid select options custom color*/
}
.installments_gateways-tabs-container{
    border-bottom: 0;
}
.nav-tabs .installments_pill-tab-link{
    margin: 0 5px 5px 0;
    border-radius: 0;
    font-size: 14px;
}
.nav-tabs .installments_flag-tab-link{
    padding:2px;
    background-color: transparent;
    border: 0;
}
.nav-tabs .installments_flag-tab.active .installments_flag-tab-link,
.nav-tabs .installments_flag-tab.active .installments_flag-tab-link:focus{
    background-color: transparent;
    border: 0;
    line-height: 12px;
    outline-offset:0; 
}
.nav-tabs .installments_flag-tab .installments_flag-tab-link:hover{
    opacity: 0.8;
    background-color: transparent;
}
li.installments_flag-tab{
    position: relative;
    margin: 2px 5px 2px 2px;
}
.installments_flag-tab.active .installments_check-icon{
    display: block;
}
.installments_credit-card-image{
    height: 25px;
}
.installments_check-icon{
    display:none;
    position: absolute;
    top: -7px;
    right: -5px;
    font-size: 8px;
}
.installments_check-icon-gw{
    top: 0;
    right: 0;
    margin-top: -3px;
}
.installments_flags-tabs-container{
    border: 0;
}
.installments_subtitle{
    font-size: 16px;
}
.installments_label{
    font-size: 14px;
    font-weight: normal;
}
.installment_text{
    font-size: 16px;
}
.installment_text-small{
    float: left;
    margin-bottom: -2px;
    font-size: 14px;
}
.installments_disabled-select{
    top: 0;
    left: 0;
}
.installments_disabled-select.hidden{
    display: none!important;
}  
.installment_cft_text{
    margin-top: 2px;
}
.installment_cft_text,
.installment_cft_text span{
    font-size: 34px;
}

Luego agregá el siguiente CSS para su versión mobile en el mismo archivo style.css:

@media (max-width: 769px) {
    /* Mobile Panels */
    .mobile-right-panel{
        position: fixed;
        top: 0;
        z-index: 4000;
        box-sizing:border-box;
        width: 100%;
        height: 100%;
        padding: 0 0 300px 0;
        overflow: auto;
        -webkit-box-shadow: -4px 0px 17px 0px rgba(0,0,0,0.23);
        -moz-box-shadow: -4px 0px 17px 0px rgba(0,0,0,0.23);
        box-shadow: -4px 0px 17px 0px rgba(0,0,0,0.23);
        -webkit-overflow-scrolling: touch;
    }
    .mobile-right-panel_header{
        position: relative;
        display: block;
        padding: 20px 10px;
        clear: both;
        text-decoration: none;
        ms-word-break: break-all;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
    }
    .mobile-right-panel_header-text{
        display: inline-block;
        clear: both;
        margin-left: 34px;
        font-size: 18px; 
    }
    .mobile-right-panel_arrow-right{
        position: absolute;
        top: 50%;
        right: 10px;
        margin-top: -12px;
        font-size: 24px;
    }
    .mobile-right-panel_arrow-left{
        position: absolute;
        top: 20px;
        font-size: 22px;
    }
    .animation-panel-right-open{
        transition: all .5s cubic-bezier(.16,.68,.43,.99);
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    .animation-panel-right-close{
        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);
    }
    /* Installments details */
    .installments_selected-gw,
    .installments_label-selected-gw{
        font-size: 14px;
    }
    .product-detail_installments-arrow{
        position: absolute;
        top: 50%;
        right: 10px;
        font-size: 32px;
        margin-top: -16px;
    }
    .installments_credit-card-image{
        height: 28px;
    }
    .installments_credit-cards-tabs-container{
        margin-bottom: 1px;
    }
    li.installments_flag-tab{
        margin: 2px 5px 8px 2px;
    }
}

Recomendamos es que agregues las siguientes clases "helpers" al final de tu hoja de estilos común.

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

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

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

La última parte del CSS va a ser agregado en la hoja de estilos con SASS, por ejemplo en la plantilal Trend esta se llama main-color.scss.tpl :

/* Installments details */
#button-installments {
	display: inline-block;
	color: $primary-color;
	text-decoration: underline;
}
#button-installments:focus {
	text-decoration: none;
	color: $primary-color;
}
.installments_modal {
    background: $bg-color;
}
.installments_modal .tab-content {
    color: $text-primary-color;
}
.installments_gateways-horizontal-container{
    border-bottom:1px solid rgba($primary-color, .2);
}
.nav-tabs .installments_pill-tab.active .installments_pill-tab-link{
    background: $secondary-color;
    color: $bg-color;
    border:1px solid rgba($secondary-color, .2);
}
.nav-tabs .installments_pill-tab-link,
.nav-tabs .installments_pill-tab-link:hover{
    border:1px solid rgba($text-primary-color, .2);
}
.nav-tabs .installments_flag-tab.active .installments_flag-tab-link,
.nav-tabs .installments_flag-tab.active .installments_flag-tab-link:focus{
    outline:2px solid $primary-color;
}
.installments_check-icon,
.installments_selected-gw{
    color: $primary-color;
}
.installments_check-icon .fa-inverse{
    color:$bg-color;
}
.installments-divider{
    border-bottom:1px dotted rgba($text-primary-color, .2);
}
.installments_credit-bank-container{
    background-color: rgba($text-primary-color, .06);
}
.installment_price-accent{
    color: $primary-color;
}

11. El paso final es agregar en el archivo translations.txt los textos con sus respectivas traducciónes:

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"

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.