Nuvemshop

https://docs.nuvemshop.com.br
Admin
Nuvemshop provides developer documentation and resources for creating and customizing e-commerce...
Tokens:485,844
Snippets:3,127
Trust Score:9.9
Update:1 week ago
Show doc for...
Tokens:
Raw
### Example JSON

Source: https://docs.nuvemshop.com.br/help/calculadora-de-frete

A JSON configuration example.

```json
{
  // ...
}
```

--------------------------------

### Settings.txt example with color field

Source: https://docs.nuvemshop.com.br/help/settings-txt

Example of a color field type, allowing the user to pick a color. The variable name is 'background'.

```plaintext
Cores
    color
        name = background
        description = Cor de fundo da loja
```

--------------------------------

### Settings.txt example with store_description and store_copyright

Source: https://docs.nuvemshop.com.br/help/settings-txt

Example of settings.txt defining two i18n_input variables: store_description and store_copyright. The variable names are used in templates to display the user-entered text.

```plaintext
Textos da loja
    i18n_input
        name = store_description
        description = Esta é a descrição da minha loja
    i18n_input
        name = store_copyright
        description = Esta é o copyright que vai no rodapé da loja
```

--------------------------------

### settings.txt: description element example

Source: https://docs.nuvemshop.com.br/help/config

Example of a 'description' element representing a paragraph. The text to display goes in the 'description' field.

```plaintext
    description
        description = Los banners se mostrarán de izquierda a derecha en computadoras y de arriba hacia abajo en celulares
```

--------------------------------

### Defining a custom image setting

Source: https://docs.nuvemshop.com.br/help/static

Example configuration for a custom image setting in settings.txt.

```text
Image
original = banner.jpg
    title = Cargar imagen (JPG, GIF, PNG)
    width = 600
    height = 600
```

--------------------------------

### settings.txt: subtitle element example

Source: https://docs.nuvemshop.com.br/help/config

Example of a 'subtitle' element used for subtitles, passing the content to the 'subtitle' property.

```plaintext
    subtitle
        subtitle = BANNER 1
```

--------------------------------

### settings.txt: checkbox element example

Source: https://docs.nuvemshop.com.br/help/config

Example of a 'checkbox' element. The 'description' property is for the label and 'name' connects the functionality to HTML.

```plaintext
    checkbox
        name = head_transparent
        description = Encabezado transparente sobre el carrusel de imágenes
```

--------------------------------

### Settings.txt example with image field

Source: https://docs.nuvemshop.com.br/help/settings-txt

Example of an image field type, allowing the store owner to replace a default image. The 'original' attribute specifies the default image in the static folder.

```plaintext
Banners
    image
        original = banner-sidebar.jpg
        description = Escolha um banner para a barra lateral
```

--------------------------------

### Settings.txt example with dropdown field

Source: https://docs.nuvemshop.com.br/help/settings-txt

Example of a dropdown field type, allowing the user to choose from a list of options. The values are defined under 'values' with the format 'value = description'.

```plaintext
Home
    dropdown
        name = home_display
        description = O que mostrar na Home?
        values
            slider = Slide Show de imagens
            products = Slide Show de produtos
            none = Somente produtos em Destaque
```

--------------------------------

### settings.txt: collapse element example

Source: https://docs.nuvemshop.com.br/help/config

Example of a 'collapse' component that behaves like an accordion, showing or hiding its contents. It includes a gallery with image, link, and width settings.

```plaintext
Página de inicio
    meta
        icon = home
        advanced = true
    collapse
        title = Carrusel de imágenes
    gallery
        name = slider
        gallery_image = Agregar imagen
        gallery_link = [Opcional] Página web a la que quieres que te lleve la imagen al hacer click
        gallery_width = 1580
```

--------------------------------

### Example entry in config/settings_schema.json

Source: https://docs.nuvemshop.com.br/help/schema-reference

Shows a global settings panel with name, icon, group, and a settings array containing color settings.

```json
{
  "name": "t:names.colors",
  "icon": "ColorPaletteIcon",
  "group": "t:names.brand",
  "settings": [
    { "type": "header", "content": "t:content.main_colors" },
    { "type": "setting", "setting_type": "color", "id": "background_color", "label": "t:settings.background", "default": "#FFFFFF" },
    { "type": "setting", "setting_type": "color", "id": "text_color",       "label": "t:settings.text",       "default": "#3F3D38" },
    { "type": "setting", "setting_type": "color", "id": "accent_color",     "label": "t:settings.accent_color" }
  ]
}
```

--------------------------------

### Limit and paginate with slice

Source: https://docs.nuvemshop.com.br/help/sections

Shows how to control item quantity and implement basic pagination using the slice filter. The first block gets the first 8 items, the second gets the next 8 items starting at offset 8.

```twig
{# primeiros 8 itens #}
{% set first_page = sections.primary.products | slice(0, 8) %}

{# próxima página (offset 8, tamanho 8) #}
{% set second_page = sections.primary.products | slice(8, 8) %}
```

--------------------------------

### installments.tpl: Display product and cart installments

Source: https://docs.nuvemshop.com.br/help/snipplets

This snippet shows the installments logic for products and cart. It uses {% if product %} to differentiate product installments from cart installments, and {% if product_detail %} to differentiate product detail from list item. It includes cash discount display, installment containers, and JavaScript classes for updating values on variant change.

```Twig
{% if product %}

  {# Product installments #}

  {% 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 product detail installments, include container with "see installments" link #}

    {% if product_detail and ( installments_info or custom_payment.discount > 0 ) %}
      <div data-toggle="#installments-modal" data-modal-url="modal-fullscreen-payments" class="js-modal-open js-fullscreen-modal-open js-product-payments-container mb-2" {% if (not product.get_max_installments) and (not product.get_max_installments(false)) %}style="display: none;"{% endif %}>
    {% endif %}

    {# Cash discount #}

    {% if product_detail and custom_payment.discount > 0 %}
      <div class="text-center text-md-left mb-2">
        <span><strong class="text-accent">{{ custom_payment.discount }}% {{'de descuento' | translate }}</strong> {{'pagando con' | translate }} {{ custom_payment.name }}</span>
      </div>
    {% endif %}

    {% 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) %}
      {% set max_installments_with_interests = product.get_max_installments %}

      {% set has_no_interest_payments = max_installments_without_interests and max_installments_without_interests.installment > 1 %}

      {% if has_no_interest_payments %}
        {% set card_icon_color = 'svg-icon-accent' %}
      {% else %}
        {% set card_icon_color = 'svg-icon-text' %}
      {% endif %}

      {# If NOT product detail, just include installments alone without link or container #}
      <div class="js-max-installments-container js-max-installments {% if product_detail %}text-center text-md-left mb-2{% else %}item-installments{% endif %}">

        {% if has_no_interest_payments %}

          <div class="js-max-installments">
            {% if product_detail %}

              {# Accent color used on product detail #}

              {{ "<span class='text-accent font-weight-bold'><span class='js-installment-amount installment-amount'>{1}</span> cuotas sin interés</span> de <span class='js-installment-price installment-price'>{2}</span>" | t(max_installments_without_interests.installment, max_installments_without_interests.installment_data.installment_value_cents | money) }}
            {% else %}
              {{ "<strong class='js-installment-amount installment-amount'>{1}</strong> cuotas sin interés de <strong class='js-installment-price installment-price'>{2}</strong>" | t(max_installments_without_interests.installment, max_installments_without_interests.installment_data.installment_value_cents | money) }}
            {% endif %}
          </div>
        {% else %}
          {% if store.country != 'AR' or product_detail %}
            {% set max_installments_with_interests = product.get_max_installments %}
            {% if max_installments_with_interests %}
              <div class="js-max-installments">{{ "<strong class='js-installment-amount installment-amount'>{1}</strong> cuotas de <strong class='js-installment-price installment-price'>{2}</strong>" | t(max_installments_with_interests.installment, max_installments_with_interests.installment_data.installment_value_cents | money) }}</div>
            {% else %}
              <div class="js-max-installments" style="display: none;">
                {% if product.max_installments_without_interests %}
                  {% if product_detail %}

                    {# Accent color used on product detail #}


```

--------------------------------

### Example defaults.txt configuration

Source: https://docs.nuvemshop.com.br/help/default-txt

Shows the format and typical variables defined in defaults.txt, such as colors, background image, and feature flags. These values are used as defaults for settings.txt variables.

```plaintext
innerBackground             = #FBF9F9
navBackground               = #5388d5
navText                     = #FFFFFF
textHeaderInfo              = #000000
background                  = background_azul.jpg
footerTitle                 = #798ca7
linkSidebar                 = #3D79D0
sublinkSidebar              = #4c4c4c
logoText                    = #000000
backgroundCart              = #b6d2fa
home_display                = products
slider_auto                 = 1
infinite_scrolling          = 1
show_product_fb_comment_box = 1
fb_sidebar_likebox          = 1
```

--------------------------------

### CSS assíncrono para modais, formulários e filtros (static/style-async.tpl)

Source: https://docs.nuvemshop.com.br/help/filtros-e-ordenamiento-de-produtos-jq-nuvem

Adicione este CSS ao arquivo static/style-async.tpl se seu layout usar um stylesheet CSS assíncrono. Inclui mixins de prefixo de navegador, estilos de modais, formulários, checkboxes e media queries para telas a partir de 768px. Se não usar CSS assíncrono, você pode unificar este CSS com o dos passos 2 e 3 em um único arquivo.

```scss
{# /* // Mixins */ #}
 
{# This mixin adds browser prefixes to a CSS property #}
 
@mixin prefix($property, $value, $prefixes: ()) {
  @each $prefix in $prefixes {
    #{'-' + $prefix + '-' + $property}: $value;
  }
  #{$property}: $value;
}
 
{# /* // Modals */ #}
 
.modal {
  position: fixed;
  top: 0;
  display: block;
  width: 80%;
  height: 100%;
  padding: 10px;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  transition: all .2s cubic-bezier(.16,.68,.43,.99);
  z-index: 20000;
  &-header{
    width: calc(100% + 20px);
    margin: -10px 0 10px -10px;
    padding: 10px 15px;
    font-size: 20px;
  }
  &-footer{
    padding: 10px;
    clear: both;
  }
  &-full {
    width: 100%;
  }
  &-docked-md{
    width: 100%;
  }
  &-docked-small{
    width: 80%;
  }
  &-top{
    top: -100%;
    left: 0;
  }
  &-bottom{
    top: 100%;
    left: 0;
  }
  &-left{
    left: -100%;
  }
  &-right{
    right: -100%;
  }
  &-centered{
    height: 100%;
    width: 100%;
  }
  &-top.modal-show,
  &-bottom.modal-show {
    top: 0;
  }
  &-bottom-sheet {
    top: initial;
    bottom: -100%;
    height: auto;
    &.modal-show {
      top: initial;
      bottom: 0;
      height: auto;
    }
  }
  &-left.modal-show {
    left: 0;
  }
  &-right.modal-show {
    right: 0;
  }
  &-close { 
    display: inline-block;
    padding: 1px 5px 5px 0;
    margin-right: 5px;
    vertical-align: middle;
    cursor: pointer;
  }
  .tab-group{
    margin:  0 -10px 20px -10px;
  }
}
 
.modal-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000047;
  z-index: 10000;
}
 
{# /* // Forms */ #}
 
.form-group{
  @extend %element-margin;
  .form-label{
    float: left;
    width: 100%;
    margin-bottom: 10px;
  }
  .alert{
    margin: 10px 0 0 0;
  }
}
 
.checkbox-container{
  .checkbox {
    position: relative;
    display: block;
    margin-bottom: 15px;
    padding-left: 30px;
    line-height: 20px;
    cursor: pointer;
    @include prefix(user-select, none, webkit ms moz o);
 
    &-color {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin: 0 0 2px 5px;
      vertical-align: middle;
      border-radius: 100%;
    }
 
    input {
      display: none;
      &:checked ~ .checkbox-icon:after {
        display: block;
      }
    }
 
    &-icon {
      position: absolute;
      top: -1px;
      left: 0;
      width: 20px;
      height: 20px;
 
      &:after {
        position: absolute;
        top: 1px;
        left: 6px;
        display: none;
        width: 7px;
        height: 12px;
        content: '';
        @include prefix(transform, rotate(45deg), webkit ms moz o);
      }
    }
  }
}
 
.form-select {
  display: block;
  width: 100%;
  &:focus{
    outline:0;
  }
  &::-ms-expand {
    display: none;
  }
}

.filter-input-price-container {
  display: inline-block;
  width: 85px;
  margin-right: 5px;
  .filter-input-price {
    padding: 10px;
  }
}
 
{#/*============================================================================
  #Media queries
==============================================================================*/ #}
 
{# /* // Min width 768px */ #}
 
@media (min-width: 768px) { 
 
  {# /* //// Components */ #}
 
  {# /* Modals */ #}
 
  .modal{
    &-centered{
      height: 80%;
      width: 80%;
      left: 10%;
      margin: 5% auto;
    }
    &-docked-md{
      width: 500px;
      &-centered{
        left: calc(50% - 250px);
        bottom: auto;
        height: auto;
      }
    }
    &-bottom-sheet {
      top: 100%;
      &.modal-show {
        top: 0;
        bottom: auto;
      }
    }
    &-docked-small{
      width: 350px;
    }
  }
}
```

--------------------------------

### CSS para modais e carrinho de compras (static/style-async.tpl)

Source: https://docs.nuvemshop.com.br/help/carrinho-de-compras-rpidas-jq-nuvem

Adicione estes estilos ao arquivo static/style-async.tpl para estilizar modais e o carrinho de compras. Se o layout usar um stylesheet CSS assíncrono, este código deve ser incluído nele; caso contrário, pode ser unificado com o CSS dos passos 2 e 3 em um único arquivo. Inclui regras para modais, overlay, itens do carrinho, totais e ajustes responsivos a partir de 768px.

```css
/* // Modals */


.modal {
  position: fixed;
  top: 0;
  display: block;
  width: 80%;
  height: 100%;
  padding: 10px;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  transition: all .2s cubic-bezier(.16,.68,.43,.99);
  z-index: 20000;
  &-header{
    width: calc(100% + 20px);
    margin: -10px 0 10px -10px;
    padding: 10px 15px;
    font-size: 20px;
  }
  &-footer{
    padding: 10px;
    clear: both;
  }
  &-full {
    width: 100%;
  }
  &-docked-sm{
    width: 100%;
  }
  &-docked-small{
    width: 80%;
  }
  &-top{
    top: -100%;
    left: 0;
  }
  &-bottom{
    top: 100%;
    left: 0;
  }
  &-left{
    left: -100%;
  }
  &-right{
    right: -100%;
  }
  &-centered{
    height: 100%;
    width: 100%;
  }
  &-top.modal-show,
  &-bottom.modal-show {
    top: 0;
  }
  &-left.modal-show {
    left: 0;
  }
  &-right.modal-show {
    right: 0;
  }
  &-close { 
    display: inline-block;
    padding: 1px 5px 5px 0;
    margin-right: 5px;
    vertical-align: middle;
    cursor: pointer;
  }
  .tab-group{
    margin:  0 -10px 20px -10px;
  }
}


.modal-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000047;
  z-index: 10000;
}




/* Cart */


/* Table */


.cart-table-row{
  padding: 10px 0;
}


.cart-item{
  position: relative;
  @extend %element-margin;
  &-name{
    float: left;
    width: 100%;
    padding: 0 40px 10px 0;
  }
  &-subtotal{
    float: right;
    margin: 10px 0;
    text-align: right;
    font-weight: normal;
  }
  &-btn{
    padding: 6px;
    display: inline-block;
    background: transparent;
    font-size: 16px;
    opacity: 0.8;
    &:hover{
      opacity: 0.6;
    }
  }
  &-input{
    display: inline-block;
    width: 40px;
    height: 30px;
    font-size: 16px;
    text-align: center;
    -moz-appearance:textfield;
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button{
      -webkit-appearance: none;
    }
  }
  .fa-cog{
    display: none;
  }
  &-spinner{
    display: inline-block;
    width: 40px;
    text-align: center;
  }
  &-delete{
    position: absolute;
    right: 0;
    .btn{
      padding-right:0; 
    }
  }
}


.cart-quantity-input-container svg{
  padding: 6px 14px;
}


.cart-unit-price{
  float: left;
  width: 100%;
  margin: 5px 0 2px 0;
}


.cart-promotion-detail{
  float: left;
  width: 65%;
  text-align: left;
} 
.cart-promotion-number{
  position: absolute;
  right: 0;
  bottom: 0;
  float: right;
  text-align: right;
  font-weight: bold;
} 




/* // Totals */ 


.cart-subtotal{
  float: right;
  clear: both;
  margin: 0 0 10px 0;
}
.total-promotions-row{
  float: right;
  width: 100%;
  margin-bottom: 5px;
  position: relative;
  .cart-promotion-number{
    margin-left: 5px;
  }
}
.cart-total{
  clear: both;
  margin: 10px 0;
  font-weight: bold;
}


/* Totals */ 


.cart-promotion-detail{
  width: 65%;
  float: left;
}
.cart-promotion-number{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 35%;
  float: right;
  margin: 0;
  text-align: right;
}


/* // Min width 768px */ 


@media (min-width: 768px) { 


 /* //// Components */


/* Modals */ 


  .modal{
    &-centered{
      height: 80%;
      width: 80%;
      left: 10%;
      margin: 5% auto;
    }
    &-docked-sm{
      width: 500px;
    }
    &-docked-small{
      width: 350px;
    }
  }
}
```

--------------------------------

### settings.txt: title element example

Source: https://docs.nuvemshop.com.br/help/config

Example of a 'title' element used for titles within a section, with the 'title' property for the text.

```plaintext
    title
        title = Configuración avanzada
```

--------------------------------

### settings.txt: textarea element example

Source: https://docs.nuvemshop.com.br/help/config

Example of a 'textarea' element that translates to an HTML textarea. The 'name' property connects it to the HTML functionality.

```plaintext
    subtitle
        subtitle = Código Javascript o HTML del sello
    textarea
        name = custom_seal_code
```

--------------------------------

### Configuração em settings.txt para quantidade de produtos

Source: https://docs.nuvemshop.com.br/help/quantidade-de-produtos-por-pagina

Adicione este bloco em settings.txt dentro de 'Opções gerais' para criar um dropdown que permite ao lojista escolher entre 12, 16 ou 20 produtos por página.

```plaintext
title
    title = Productos en el listado
dropdown
    name = category_quantity_products
    description = Cantidad de productos por página
    values
        12 = 12
        16 = 16
        20 = 20
```

--------------------------------

### CSS para botões e modais (style-async.tpl)

Source: https://docs.nuvemshop.com.br/help/quickshop-jq-nuvem

Adicione este CSS ao arquivo static/style-async.tpl ou ao seu CSS principal. Inclui estilos para botões com transição e modais com várias posições e tamanhos, além de um overlay. Requer helper classes adicionadas ao layout.

```css
{# /* // Buttons */ #}
.btn-transition {
  position: relative;
  overflow: hidden;
  .transition-container {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin-top: -7px;
    opacity: 0;
    text-align: center;
    @include prefix(transition, all 0.5s ease, webkit ms moz o);
    cursor: not-allowed;
    pointer-events: none;
    &.active {
      opacity: 1;
    }
  }
}
{# /* // Modals */ #}
.modal {
  position: fixed;
  top: 0;
  display: block;
  width: 80%;
  height: 100%;
  padding: 10px;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  transition: all .2s cubic-bezier(.16,.68,.43,.99);
  z-index: 20000;
  &-header{
    width: calc(100% + 20px);
    margin: -10px 0 10px -10px;
    padding: 10px 15px;
    font-size: 20px;
  }
  &-footer{
    padding: 10px;
    clear: both;
  }
  &-full {
    width: 100%;
  }
  &-docked-md{
    width: 100%;
  }
  &-docked-small{
    width: 80%;
  }
  &-top{
    top: -100%;
    left: 0;
  }
  &-bottom{
    top: 100%;
    left: 0;
  }
  &-left{
    left: -100%;
  }
  &-right{
    right: -100%;
  }
  &-centered{
    height: 100%;
    width: 100%;
  }
  &-top.modal-show,
  &-bottom.modal-show {
    top: 0;
  }
  &-bottom-sheet {
    top: initial;
    bottom: -100%;
    height: auto;
    &.modal-show {
      top: initial;
      bottom: 0;
      height: auto;
    }
  }
  &-left.modal-show {
    left: 0;
  }
  &-right.modal-show {
    right: 0;
  }
  &-close { 
    display: inline-block;
    padding: 1px 5px 5px 0;
    margin-right: 5px;
    vertical-align: middle;
    cursor: pointer;
  }
  .tab-group{
    margin:  0 -10px 20px -10px;
  }
}
 
.modal-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000047;
  z-index: 10000;
}
@media (min-width: 768px) { 
 
  {# /* Modals */ #}
 
  .modal{
    &-centered{
      height: 80%;
      width: 80%;
      left: 10%;
      margin: 5% auto;
    }
    &-docked-md{
      width: 500px;
      &-centered{
        left: calc(50% - 250px);
        bottom: auto;
        height: auto;
      }
    }
    &-bottom-sheet {
      top: 100%;
      &.modal-show {
        top: 0;
        bottom: auto;
      }
    }
    &-docked-small{
      width: 350px;
    }
  }
}
```

--------------------------------

### Settings.txt example with i18n_input for descricao_loja

Source: https://docs.nuvemshop.com.br/help/settings-txt

Example of an i18n_input field type, used to receive a text input from the user. The variable name is descricao_loja.

```plaintext
Textos da loja
    i18n_input
        name = descricao_loja
        description = Texto de descrição da loja
```

--------------------------------

### settings.txt: css_code element example

Source: https://docs.nuvemshop.com.br/help/config

Example of a 'css_code' element, a textarea specifically for adding CSS, including a button to validate the code before saving.

```plaintext
    css_code
        name = css_code
        description = Acá podés escribir código CSS para que se muestre en tu sitio web
```

--------------------------------

### Configurar checkbox e mensagem em config/settings.txt

Source: https://docs.nuvemshop.com.br/help/ltimo-produto-em-estoque-jq-nuvem

Adicione estas configurações no arquivo config/settings.txt, na seção "Detalhe do produto". Elas criam um checkbox (last_product) que ativa a funcionalidade e um campo de texto (last_product_text) para a mensagem.

```text
    title
        title = Último producto en stock
    checkbox
        name = last_product
        description = Mostrar un mensaje para incentivar la compra cuando quede la última unidad de un producto
    i18n_input
        description = Mensaje
        name = last_product_text
```

--------------------------------

### Definir valores padrão em config/defaults.txt

Source: https://docs.nuvemshop.com.br/help/ltimo-produto-em-estoque-jq-nuvem

Adicione estes valores padrão no arquivo config/defaults.txt. Eles definem a funcionalidade como ativada por padrão (last_product = 1) e fornecem as mensagens padrão em espanhol, inglês e português.

```text
last_product = 1
last_product_text_es = ¡No te lo pierdas, es el último!
last_product_text_en = Don´t miss it, it´s the last one!
last_product_text_pt = Atenção, última peça!
```

--------------------------------

### Helper Class Example - text-center

Source: https://docs.nuvemshop.com.br/help/popular-articles?start=20

Use the helper class 'text-center' to align text to the center. The example shows a translated text with the class applied.

```Twig
{{ "Texto" | translate }}
```

--------------------------------

### Example output of compiled SCSS stylesheet

Source: https://docs.nuvemshop.com.br/help/layout-avancado-layouts

Example output URL for a compiled SCSS stylesheet. The platform compiles SCSS automatically and serves it as CSS.

```text
//dcdn-us.mitiendanube.com/stores/002/166/951/themes/recife/dart-style-critical-61d41e81661b0f6eec2e689d7616b137.css
```

--------------------------------

### Set up npm scripts and webpack production config

Source: https://docs.nuvemshop.com.br/help/calculadora-de-frete

Package.json defines the build and start scripts, while webpack.prod.js sets the production mode, entry point, and output configuration.

```json
{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --config webpack.prod.js",
    "start": "webpack serve --config webpack.dev.js"
  }
}
```

```javascript
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};
```

--------------------------------

### settings.txt: i18n_input element example

Source: https://docs.nuvemshop.com.br/help/config

Example of an 'i18n_input' entry that supports all store languages. The 'description' property is used as a label and 'name' connects the functionality with HTML.

```plaintext
    i18n_input
        name = welcome_message
        description = Título
    i18n_input
        name = welcome_text
        description = Descripción
```

--------------------------------

### Imagem com lazy load e placeholder LQIP

Source: https://docs.nuvemshop.com.br/help/melhorando-o-carregamento-das-imagens-e-svgs

Aplica lazy load com a classe 'lazyload' e um placeholder de baixa qualidade (tiny) no atributo src, enquanto data-src contém a imagem final. Utiliza as classes 'lazysizes' e 'blur-up' para a transição de blur.

```html
<img alt="{{ product.featured_image.alt }}" data-sizes="auto" src="{{ product.featured_image | product_image_url('tiny')}}" data-src="{{ product.featured_image | product_image_url }}" class="lazyload item-image img-absolute blur-up" />
```

--------------------------------

### Loop index manual and automatic (loop.index / loop.index0)

Source: https://docs.nuvemshop.com.br/help/home-slider

Shows manual index control and the automatic loop.index0 (starts at 0) and loop.index (starts at 1) variables.

```twig
{# Manual #}
{% set index = 0 %}
{% for item in lista %}
  {{ index }} - {{ item }}
  {% set index = index + 1 %}
{% endfor %}

{# Automático #}
{% for item in lista %}
  {{ loop.index0 }} - {{ item }} {# começa em 0 #}
  {{ loop.index }} - {{ item }}  {# começa em 1 #}
{% endfor %}
```

--------------------------------

### Translation entries for config/translations.txt (search and installments)

Source: https://docs.nuvemshop.com.br/help/sugesto-de-busca

Translation entries for the config/translations.txt file, covering search-related texts and installment messages in Spanish, Portuguese, English, and Spanish (Mexico). Replace the placeholders {1} and {2} with dynamic amounts and prices. These entries are needed to make the search suggestions and installment display texts translatable.

```text
es "Buscar"
pt "Buscar"
en "Search"
es_mx "Buscar"
```

```text
es "Ver todos los resultados"
pt "Ver todos os resultados"
en "See all results"
es_mx "Ver todos los resultados"
```

```text
es "Hasta 12 cuotas"
pt "Até 12x sem juros"
en "Upto 12x without interests"
es_mx "Hasta 12 cuotas"
```

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

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

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

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