Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Informação de meios de pagamento e parcelas

Esta funcionalidade permitirá dar mais visibilidade em sua loja não só sobre parcelas mas sim também sobre cada meio de pagamento disponível, como por exemplo pode ser um cartão de crédito ou em dinheiro.

Deixará de ter algo assim:

Para ter algo assim:

Todas as mudanças que faremos a seguir estão baseados no modelo Trend, o qual usa Bootstrap 3, porém uma implementação baseada em um modelo com Bootstrap 2 não mudará muito.

Importante: 

  • Para poder aplicar esta funcionalidade é necessário ter a versão anterior desta funcionalidade chamada Informação de parcelas nos produto
  • Uma vez terminada a implementação, na Nuvem Shop teremos que  habilitar parte da funcionalidade que você terá que entrar em contato conosco para finalizar a implementação

Para poder adicionar esta funcionalidade na sua loja, siga os seguintes passos:

1. Vamos criar um novo arquivo chamado installments-details.tpl e colocaremos ele dentro da pasta snipplets. O arquivo será o seguinte:

<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 do arquivo product.tpl procure pelo código que engloba o antigo popup. Geralmente se encontra no final do arquivo dentro da seguinte condição do twig:

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

Deverá substituir todo o conteúdo pelo seguinte:

{% 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. Ainda dentro de product.tpl precisamos modificar o componente que contém o botão que ativa o popup. Normalmente este botão tem o id "button-installments" e se encontra dentro da seguinte condição do twig:

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

Substitua todo o conteúdo deste segmento, incluindo a condicional pelo seguinte:

{% 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 fazendo mudanças no product.tpl. Dentro do formulário do produto logo depois do inicio será necessários adicionar o seguinte:

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

5.  Substitua o conteúdo da tpl installments_in_product.tpl pelo seguinte: 

{% 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. No arquivo single_product.tpl procure pela seguinte condicional:

{% if product.show_installments %}

E mude tanto a condicional quanto seu conteúdo pelo seguinte:

{% 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. Se o modelo tem a funcionalidade Sugestão de busca, no tpl search-results.tpl terá que fazer uma mudança similar substituindo a seguinte condicional e todo seu conteúdo:

{% if product.show_installments %}

Pelo seguinte:

{% 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 %}

Se seu modelo não tem a funcionalidade de Sugestão de busca, pode continuar com o seguinte passo.

8. Substitua todo o conteúdo dentro do arquivo  installments_in_product.tpl pelo seguinte:

{% 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. Terminado de fazer todas as mudanças relacionadas a twig e HTML, agora seguiremos com as mudanças de Javascript.

No arquivo layout.tpl dentro da funcão changeVariant, a qual deveria começar da seguinte forma:

function changeVariant(variant){

Adicione a seguinte variável (é provável que já tenha isso, neste caso altere o que você já tem com este novo):

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 }));
    }
};

Em seguida, ainda dentro da mesma função changeVariant adicione o seguinte (logo abaixo do código adicionado anteriormente):

Novamente, se já existe este código, só tem que substituir pelo novo

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]);
    }
}

Logo abaixo do que foi adicionado anteriormente, adicione o seguinte:

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

Terminando a parte de Javascript resta apenas adicionar o seguinte código de preferência dentro de $(document).ready(function){ e transformá-lo em uma condicional do twig {% if template == "product" %}.

O código final deveria parecer assim:

<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. Agora é hora de adicionar o CSS relacionado a esta nova funcionalidade.

Dentro da sua folha de estilo comum, por exemplo style.css adicione o seguinte:

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

Logo depois adicione o seguinte CSS para sua versão mobile no mesmo arquivo 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 que adicione as seguintes classes "helpers" ao fina da sua folha de estilos comum.

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

A última parte do CSS será adicionada na folha de estilos com SASS, por exemplo no modelo Trend se chama main-color.css.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. O passo final é adicionar ao arquivo translations.txt os textos com suas respectivas traduções:

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"

Isso é tudo! Tua loja está pronta para mostrar de forma mais clara seus meios de pagamento!