Precio por unidad de medida ‐ Liberación junio 2026 - Bsale-IO/template-docs GitHub Wiki
Liberación junio 2026
Documentación de implementación por plantilla. Incluye todos los componentes que deben actualizarse para habilitar el precio por unidad de medida en colecciones de productos.
El precio por unidad de medida (ppum) permite mostrar el precio de un producto expresado en una unidad estándar de referencia, como precio por litro, por kilo o por metro. Esto facilita la comparación entre productos de diferentes tamaños o formatos.
Las variables disponibles en los componentes son:
{{ product.ppumName }} → nombre de la unidad (ej: "kg", "L")
{{ product.ppumValue }} → valor numérico por unidad
{{ product.ppum }} → precio por unidad sin descuento (formateado)
{{ product.ppumWithDiscount }} → precio por unidad con descuento (formateado)
La lógica de visualización varía según el tipo de descuento:
- Sin descuento → solo se muestra el ppum base
- Descuento directo → se tacha el ppum original y se muestra el ppum con descuento
- Descuento por cantidad → ambos se muestran sin tachar
Las plantillas anteriores a 31 de Marzo 2026 no incluyen el bloque de precio por unidad de medida en sus componentes de colección. Para habilitar esta funcionalidad es necesario reemplazar el código de cada componente listado a continuación con la versión actualizada que incluye los bloques ppum.
Actualizar los siguientes 5 componentes reemplazando el bloque de precios con la versión que incluye ppum.
| Componente | Estado |
|---|---|
| Inicio > colección | Requiere actualización |
| Inicio > slider colección | Requiere actualización |
| Modal > productos relacionados slider | Requiere actualización |
| Producto > accesorios o relacionados slider | Requiere actualización |
| Carro > relacionados | Requiere actualización |
Inicio > colección
{% if collection.size > 0 %}
{% assign discount_format = "corner-badge" %}
{% assign show_hover_image = true %} <!-- Efecto hover cambio de imagen -->
{% assign cant_producto_mostrar = "8" %} <!-- Cantidad de productos mostrar en la colección del home -->
{% assign addToCart = true %}
{{ 'load collection' | get_component }}
<div class="bs-collection-home">
<!-- Título de la colección -->
<h2>
<a class="bs-home-title" href="{{ collection.link }}">
{{ collection.title }}
<hr class="bs-home-hr">
</a>
</h2>
<!-- Sección de productos -->
<section class="grid">
{% for product in collection limit: cant_producto_mostrar %}
<div class="bs-collection__product border" data-bs="product" data-info="{{ product.id }}">
<!-- Imagen y descuento -->
<a href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square hover">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
<div class="bs-collection__product-stock">Sin Stock</div>
{% endif %}
{% endif %}
{% endif %}
<picture
{% if show_hover_image and product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
</div>
</a>
<!-- Información del producto -->
<a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<h3 class="bs-collection__product-title">
{{ product.title | strip_html | truncate: 60, '...' }}
</h3>
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice | strip_html | truncate: 60, '...' }}
</div>
{% endif %}
{% if product.brand.name %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a>
<!-- Precios -->
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<div class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</div>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
{% if product.discount_cant > 1 %}
<small class="bs-collection__discount-condition">
Por compras desde {{ product.discount_cant | round }} unidades
</small>
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
{% if addToCart %}
<div class="bs-product-cart mt-auto">
{% if outStock %}
<button class="btn btn-primary mt-1 invisible t{{ product.unlimitedStock }}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-primary mt-1 t{{ product.unlimitedStock }}" data-bs="cart.add.collection">
Comprar
</button>
{% endif %}
</div>
{% endif %}
</div>
{% endfor %}
</section>
<div class="text-center mt-3">
<a class="btn btn-secondary btn-collection-show" href="{{ collection.link }}">
Ver todos los productos
</a>
</div>
</div>
{% endif %}Inicio > slider colección
{% assign discount_format = "bs-discount corner-badge" %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% if collection.size > 0 %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% capture option_slider %}
"infinite": true,
"autoplay": true,
"autoplayTimeout": 3000,
"dots": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 4,
"slidesToScroll": 1,
"responsive": [
{
"breakpoint": 992,
"settings": {
"slidesToShow": 3
}
},
{
"breakpoint": 768,
"settings": {
"slidesToShow": 2
}
},
{
"breakpoint": 576,
"settings": {
"slidesToShow": 2
}
}
]
{% endcapture %}
{{ 'load collection' | get_component }}
<section class="row">
<div class="col-12 my-5">
<a class="bs-home-title" href="{{collection.link}}">
{{ collection.title }} <hr class="bs-home-hr">
</a>
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines | replace: ' ', ''}} }'
class="slick-horizontal show-4 breakpoint-992-show-3 breakpoint-768-show-2 breakpoint-576-show-1">
{% for product in collection | limit: 8 %}
<section class="item">
<div class="bs-collection__product" data-bs="product" data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square hover">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
<div class="bs-collection__product-stock">Sin Stock</div>
{% endif %}
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes : 'L' }}>
<source {{ product.default_image | source_tag_attributes : 'M' }}>
<source {{ product.default_image | source_tag_attributes : 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{product.default_image | img_tag_attributes:'S'}}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{site.logo | img_tag_attributes:'S'}}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<h3 class="bs-collection__product-title">
{{ product.title | strip_html | truncate: 60, '...' }}
</h3>
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice | strip_html | truncate: 60, '...' }}
</div>
{% endif %}
{% if product.order > 0 %}
<span class="d-inline-block badge badge-primary">
<i class="fas fa-star"></i>
</span>
{% endif %}
{% if product.brand.name %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a>
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<div class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</div>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
{% if product.discount_cant > 1 %}
<small class="bs-collection__discount-condition">
Por compras desde {{ product.discount_cant | round }} unidades
</small>
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
{% if addToCart %}
<div class="bs-product-cart mt-auto">
{% if outStock %}
<button class="btn btn-primary mt-1 invisible t{{product.unlimitedStock}}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-primary mt-1 t{{product.unlimitedStock}}"
data-bs="cart.add.collection">
Agregar al carro
</button>
{% endif %}
</div>
{% endif %}
</div>
</section>
{% endfor %}
</div>
</div>
</section>
{% endif %}Modal > productos relacionados slider
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "bs-discount corner-badge"%}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% capture option_slider %}
"lazyLoad": "ondemand",
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 4,
"responsive": [
{
"breakpoint": 1400,
"settings": { "slidesToShow": 4 }
},
{
"breakpoint": 1200,
"settings": { "slidesToShow": 4 }
},
{
"breakpoint": 992,
"settings": { "slidesToShow": 2 }
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 2 }
},
{
"breakpoint": 576,
"settings": { "slidesToShow": 2 }
},
{
"breakpoint": 480,
"settings": { "slidesToShow": 1 }
},
{
"breakpoint": 384,
"settings": { "slidesToShow": 1 }
}
]
{% endcapture %}
{% if collection.size > 0 %}
<section class="row">
<div class="col-12 bs-product-related">
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines | replace: ' ', ''}} }'
class="slick-horizontal show-5 breakpoint-992-show-4 breakpoint-768-show-3 breakpoint-576-show-2 breakpoint-384-show-1">
{% for product in collection %}
<section class="item">
<div class="bs-collection__product border" data-bs="product" data-info="{{product.id}}">
<a href="{{product.link}}" title="z{{product.title}}">
<div class="bs-img-square hover">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
<div class="bs-collection__product-stock">Sin Stock</div>
{% endif %}
{% endif %}
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes : 'X' }}>
<source {{ product.default_image | source_tag_attributes : 'L' }}>
<source {{ product.default_image | source_tag_attributes : 'M' }}>
<source {{ product.default_image | source_tag_attributes : 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{product.default_image | img_tag_attributes:'S'}}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{site.logo | img_tag_attributes:'S'}}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<h3 class="bs-collection__product-title">
{{product.title | strip_html | truncate: 60, '...'}}
</h3>
{% if notice %}
<div class="bs-collection__product-notice">
{{ product.notice | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
{% if product.order > 0 %}
<span class="d-inline-block text-truncate badge badge-primary">
<i class="fas fa-star"></i>
</span>
{% endif %}
{% if product.brand.name %}
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
{% endif %}
</a>
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<div class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</div>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
{% if product.discount_cant > 1 %}
<small class="bs-collection__discount-condition">
Por compras desde {{ product.discount_cant | round }} unidades
</small>
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
{% if addToCart %}
<div class="bs-product-cart mt-auto">
{% if outStock %}
<button class="btn btn-primary mt-1 invisible t{{product.unlimitedStock}}" disabled>
Agotado
</button>
{%else%}
<button class="btn btn-primary mt-1 t{{product.unlimitedStock}}"
data-bs="cart.add.collection">
Agregar al carro
</button>
{%endif%}
</div>
{%endif%}
</div>
</section>
{% endfor %}
</div>
</div>
</section>
{%endif %}Producto > accesorios o relacionados slider
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "corner-badge" %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% capture option_slider %}
"lazyLoad": "ondemand",
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 2,
"mobileFirst": true,
"responsive": [
{
"breakpoint": 576,
"settings": { "slidesToShow": 2 }
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 3 }
},
{
"breakpoint": 992,
"settings": { "slidesToShow": 4 }
},
{
"breakpoint": 1200,
"settings": { "slidesToShow": 5 }
}
]
{% endcapture %}
{% if collection.size > 0 %}
<h3 class="bs-product-related__title">También Podría Interesarte</h3>
<section data-bs='slider' data-info='{ {{option_slider | strip_newlines | replace: ' ', ''}} }'
class="slick-horizontal show-5 breakpoint-992-show-4 breakpoint-768-show-3 breakpoint-576-show-2 breakpoint-384-show-1">
{% for product in collection %}
<section class="item">
<div class="bs-collection__product border" data-bs="product" data-info="{{ product.id }}">
<a href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square hover">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
<div class="bs-collection__product-stock">Sin Stock</div>
{% endif %}
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes : 'X' }}>
<source {{ product.default_image | source_tag_attributes : 'L' }}>
<source {{ product.default_image | source_tag_attributes : 'M' }}>
<source {{ product.default_image | source_tag_attributes : 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{product.default_image | img_tag_attributes:'S'}}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{site.logo | img_tag_attributes:'S'}}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<h3 class="bs-collection__product-title">
{{product.title | strip_html | truncate: 60, '...'}}
</h3>
{% if notice %}
<div class="bs-collection__product-notice">
{{ product.notice | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
{% if product.order > 0 %}
<span class="d-inline-block text-truncate badge badge-primary">
<i class="fas fa-star"></i>
</span>
{% endif %}
{% if product.brand.name %}
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
{% endif %}
</a>
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<div class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</div>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
{% if product.discount_cant > 1 %}
<small class="bs-collection__discount-condition">
Por compras desde {{ product.discount_cant | round }} unidades
</small>
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
{% if addToCart %}
<div class="bs-product-cart mt-auto">
{% if outStock %}
<button class="btn btn-primary mt-1 invisible t{{product.unlimitedStock}}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-primary mt-1 t{{product.unlimitedStock}}"
data-bs="cart.add.collection">
Agregar al carro
</button>
{% endif %}
</div>
{% endif %}
</div>
</section>
{% endfor %}
</section>
{% endif %}Carro > relacionados
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "corner-badge" %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% capture option_slider %}
"lazyLoad": "ondemand",
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{ right }}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{ left }}\"></i></div>",
"slidesToShow": 4,
"responsive": [
{
"breakpoint": 768,
"settings": { "slidesToShow": 3 }
}, {
"breakpoint": 576,
"settings": { "slidesToShow": 2 }
}, {
"breakpoint": 384,
"settings": { "slidesToShow": 1 }
}
]
{% endcapture %}
{% if collection.size > 0 %}
<h3 class="bs-title text-center mt-3">También Podría Interesarte</h3>
<section data-bs='slider'
data-info='{ {{ option_slider | strip_newlines | replace: ' ', '' }} }'
class="bs-collection slick-horizontal show-4 breakpoint-992-show-4 breakpoint-768-show-3 breakpoint-576-show-1">
{% for product in collection %}
<div class="item">
<div class="bs-collection__product border" data-bs="product" data-info="{{ product.id }}">
<a href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square hover">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
<div class="bs-collection__product-stock">Sin Stock</div>
{% endif %}
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<h3 class="bs-collection__product-title">
{{ product.title }}
</h3>
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice }}
</div>
{% endif %}
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a>
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<div class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</div>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
{% if product.discount_cant > 1 %}
<small class="bs-collection__discount-condition">
Por compras desde {{ product.discount_cant | round }} unidades
</small>
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</section>
{% endif %}/* Estilos precio por unidad de medida */
.bs-collection__ppum {
display: block;
font-size: 0.68rem;
color: #999;
font-weight: 400;
line-height: 1.2;
margin-top: 1px;
letter-spacing: 0.01em;
}Actualizar los siguientes 6 componentes reemplazando el bloque de precios con la versión que incluye ppum.
| Componente | Estado |
|---|---|
| Inicio > colección | Requiere actualización |
| Inicio > slider colección | Requiere actualización |
| Colección | Requiere actualización |
| Modal > productos relacionados slider | Requiere actualización |
| Producto > accesorios o relacionados slider | Requiere actualización |
| Carro > relacionados | Requiere actualización |
Inicio > colección
{% if collection.size > 0 %}
{% assign discount_format = "template" %}
{% assign addToCart = true %}
{% assign show_hover_image = true %}
{% assign cant_producto_mostrar = "10" %}
{{ 'load collection' | get_component }}
<div class="bs-collection-home">
<h2 class="bs-home__title">{{ title }}</h2>
<section class="grid">
{% for product in collection limit: cant_producto_mostrar %}
<div class="bs-collection__product border" data-bs="product" data-info="{{ product.id }}">
<a href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square hover">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes : 'X' }}>
<source {{ product.default_image | source_tag_attributes : 'L' }}>
<source {{ product.default_image | source_tag_attributes : 'M' }}>
<source {{ product.default_image | source_tag_attributes : 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{product.default_image | img_tag_attributes:'S'}}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{site.logo | img_tag_attributes:'S'}}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<h3 class="bs-collection__product-title">
{{ product.title | strip_html | truncate: 60, '...' }}
</h3>
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice | strip_html | truncate: 60, '...' }}
</div>
{% endif %}
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a>
<section class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<div class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</div>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
{% if addToCart %}
<div class="bs-collection__addToCart">
{% if outStock %}
<button class="btn btn-primary {{ product.unlimitedStock }}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}" data-bs="cart.add.collection">
Comprar Ahora
</button>
{% endif %}
</div>
{% endif %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
* Por compras desde {{ product.discount_cant | round }} unidades
{% endif %}
</small>
</section>
</div>
{% endfor %}
</section>
<div class="text-center mt-3">
<a class="btn btn-secondary btn-collection-show" href="{{ collection.link }}">
Ver todos los productos
</a>
</div>
</div>
{% endif %}Inicio > slider colección
{% if collection.size > 0 %}
{% assign addToCart = true %}
{% assign show_hover_image = true %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "template"%}
{% capture option_slider %}
"infinite": true,
"autoplay":true,
"autoplayTimeout":4000,
"autoplayHoverPause":true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 5,
"slidesToScroll": 1,
"responsive": [
{
"breakpoint": 1200,
"settings": { "slidesToShow": 4 }
},
{
"breakpoint": 996,
"settings": { "slidesToShow": 3 }
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 2 }
},{
"breakpoint": 576,
"settings": { "slidesToShow": 2 }
}
]
{% endcapture %}
{{'load collection' | get_component }}
<h2><a class="bs-home__title" href="{{collection.link}}">{{title}}</a></h2>
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines | replace: ' ', ''}} }'
class="bs-collection slick-horizontal show-4 breakpoint-992-show-4 breakpoint-768-show-3 breakpoint-576-show-1">
{% for product in collection | limit: 8 %}
<div class="item">
<div class="bs-collection__product border" data-bs="product" data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square hover">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes : 'X' }}>
<source {{ product.default_image | source_tag_attributes : 'L' }}>
<source {{ product.default_image | source_tag_attributes : 'M' }}>
<source {{ product.default_image | source_tag_attributes : 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{product.default_image | img_tag_attributes:'S'}}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{site.logo | img_tag_attributes:'S'}}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<h3 class="bs-collection__product-title">{{product.title}}</h3>
{% if product.notice %}
<div class="bs-collection__product-notice">{{ product.notice }}</div>
{% endif %}
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
{% endif %}
</a>
<section class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<div class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</div>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
{% if addToCart %}
<div class="bs-collection__addToCart">
{% if outStock %}
<button class="btn btn-primary {{ product.unlimitedStock }}" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}" data-bs="cart.add.collection">Comprar Ahora</button>
{% endif %}
</div>
{% endif %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
* Por compras desde {{ product.discount_cant | round }} unidades
{% endif %}
</small>
</section>
</div>
</div>
{% endfor %}
</div>
<div class="text-center pb-4 pt-4">
<a class="btn btn-secondary btn-collection-show" href="{{collection.link}}">
Ver todos los productos
</a>
</div>
{% endif %}Colección
{% assign discount_format = "template" %}
{% assign addToCart = true %}
{% assign show_hover_image = true %}
{% assign popup_ultima_compra = false %}
{{ 'load collection' | get_component }}
<div class="bs-collection grid">
{% for product in collection %}
<div class="bs-collection__product border" data-bs="product" data-info="{{ product.id }}">
<a href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square hover">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<h3 class="bs-collection__product-title">
{{ product.title | strip_html | truncate: 60, '...' }}
</h3>
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice | strip_html | truncate: 60, '...' }}
</div>
{% endif %}
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a>
<section class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<div class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</div>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
{% if addToCart %}
<div class="bs-collection__addToCart">
{% if outStock %}
<button class="btn btn-primary {{ product.unlimitedStock }}" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}" data-bs="cart.add.collection">Comprar Ahora</button>
{% endif %}
</div>
{% endif %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
* Por compras desde {{ product.discount_cant | round }} unidades
{% endif %}
</small>
</section>
</div>
{% endfor %}
</div>
{%if popup_ultima_compra%}
{{'Pop up ultima compra' | get_component }}
{%endif%}Modal > productos relacionados slider
{% assign loop = false %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "template" %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% capture option_slider %}
"lazyLoad": "ondemand",
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 3,
"responsive": [
{
"breakpoint": 768,
"settings": { "slidesToShow": 2 }
},{
"breakpoint": 576,
"settings": { "slidesToShow": 2 }
},{
"breakpoint": 384,
"settings": { "slidesToShow": 1 }
}
]
{% endcapture %}
{% if related.size > 0 %}
<section class="bs-product-related my-3">
<h4 class="bs-title text-center">También Podría Interesarte</h4>
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines | replace: ' ', ''}} }'
class="bs-collection slick-horizontal show-4 breakpoint-992-show-3 breakpoint-768-show-2 breakpoint-576-show-1">
{% for product in related | limit: 8 %}
<div class="item">
<div class="bs-collection__product border" data-bs="product" data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square hover">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<h3 class="bs-collection__product-title">{{product.title}}</h3>
{% if product.notice %}
<div class="bs-collection__product-notice">{{ product.notice }}</div>
{% endif %}
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
{% endif %}
</a>
<section class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<div class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</div>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
{% if addToCart %}
<div class="bs-collection__addToCart">
{% if outStock %}
<button class="btn btn-primary {{ product.unlimitedStock }}" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}" data-bs="cart.add.collection">Comprar Ahora</button>
{% endif %}
</div>
{% endif %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
* Por compras desde {{ product.discount_cant | round }} unidades
{% endif %}
</small>
</section>
</div>
</div>
{% endfor %}
</div>
</section>
{% endif %}Producto > accesorios o relacionados slider
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "template" %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% capture option_slider %}
"lazyLoad": "ondemand",
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 4,
"responsive": [
{
"breakpoint": 768,
"settings": { "slidesToShow": 3 }
},{
"breakpoint": 576,
"settings": { "slidesToShow": 2 }
},{
"breakpoint": 384,
"settings": { "slidesToShow": 1 }
}
]
{% endcapture %}
{% if collection.size > 0 %}
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines | replace: ' ', ''}} }'
class="bs-collection slick-horizontal show-4 breakpoint-992-show-4 breakpoint-768-show-3 breakpoint-576-show-1">
{% for product in collection| limit: 8 %}
<div class="item">
<div class="bs-collection__product border" data-bs="product" data-info="{{product.id}}">
<a href="{{product.link}}" title="z{{product.title}}">
<div class="bs-img-square hover">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<h3 class="bs-collection__product-title">
{{product.title | strip_html | truncate: 60, '...'}}
</h3>
{% if product.notice %}
<div class="bs-collection__product-notice">
{{product.notice | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
{% endif %}
</a>
<section class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<div class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</div>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
{% if addToCart %}
<div class="bs-collection__addToCart">
{% if outStock %}
<button class="btn btn-primary {{ product.unlimitedStock }}" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}" data-bs="cart.add.collection">Comprar Ahora</button>
{% endif %}
</div>
{% endif %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
* Por compras desde {{ product.discount_cant | round }} unidades
{% endif %}
</small>
</section>
</div>
</div>
{% endfor %}
</div>
{%endif %}Carro > relacionados
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "template" %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% capture option_slider %}
"lazyLoad": "ondemand",
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{ right }}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{ left }}\"></i></div>",
"slidesToShow": 4,
"responsive": [
{
"breakpoint": 768,
"settings": { "slidesToShow": 3 }
}, {
"breakpoint": 576,
"settings": { "slidesToShow": 2 }
}, {
"breakpoint": 384,
"settings": { "slidesToShow": 1 }
}
]
{% endcapture %}
{% if collection.size > 0 %}
<h3 class="bs-title text-center mt-3">También Podría Interesarte</h3>
<section data-bs='slider'
data-info='{ {{ option_slider | strip_newlines | replace: ' ', '' }} }'
class="bs-collection slick-horizontal show-4 breakpoint-992-show-4 breakpoint-768-show-3 breakpoint-576-show-1">
{% for product in collection %}
<div class="item">
<div class="bs-collection__product border" data-bs="product" data-info="{{ product.id }}">
<a href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square hover">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<h3 class="bs-collection__product-title">{{ product.title }}</h3>
{% if product.notice %}
<div class="bs-collection__product-notice">{{ product.notice }}</div>
{% endif %}
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a>
<section class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<div class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</div>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
{% if addToCart %}
<div class="bs-collection__addToCart">
{% if outStock %}
<button class="btn btn-primary {{ product.unlimitedStock }}" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}" data-bs="cart.add.collection">Comprar Ahora</button>
{% endif %}
</div>
{% endif %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
* Por compras desde {{ product.discount_cant | round }} unidades
{% endif %}
</small>
</section>
</div>
</div>
{% endfor %}
</section>
{% endif %}/* Estilos precio por unidad de medida */
.bs-collection__ppum {
display: block;
font-size: 0.68rem;
color: #999;
font-weight: 400;
line-height: 1.2;
margin-top: 1px;
letter-spacing: 0.01em;
}Actualizar los siguientes 6 componentes reemplazando el bloque de precios con la versión que incluye ppum.
| Componente | Estado |
|---|---|
| Inicio > colección | Requiere actualización |
| Inicio > slider colección | Requiere actualización |
| Colección | Requiere actualización |
| Modal > productos relacionados slider | Requiere actualización |
| Carro > relacionados | Requiere actualización |
| Producto > accesorios o relacionados slider | Requiere actualización |
Inicio > colección
{% if collection.size > 0 %}
{% assign discount_format = "circle" %}
{% assign addToCart = true %}
{% assign show_hover_image = true %}
{% assign cant_producto_mostrar = "8" %}
{{ 'load collection' | get_component }}
<div class="bs-collection-home">
<h2 class="col-12">
<a class="bs-title" href="{{ collection.link }}">{{ title }}</a>
</h2>
<section class="grid">
{% for product in collection.products limit: cant_producto_mostrar %}
<div class="bs-collection__product border" data-bs="product" data-info="{{ product.id }}">
<a href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square hover">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
<div class="bs-collection__product-stock">Sin Stock</div>
{% endif %}
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<h3 class="bs-collection__product-title">
{{ product.title | capitalize | strip_html | truncate: 60, '...' }}
</h3>
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...' }}
</div>
{% endif %}
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a>
<section class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<div class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</div>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
{% if product.discount_cant > 1 %}
<small class="bs-collection__discount-condition">
Por compras desde {{ product.discount_cant | round }} unidades
</small>
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
{% if addToCart %}
<div class="bs-collection__addToCart">
{% if outStock %}
<button class="btn btn-primary invisible {{ product.unlimitedStock }}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}" data-bs="cart.add.collection">
<i class="fas fa-shopping-bag pt-1 pr-1"></i> Agregar
</button>
{% endif %}
</div>
{% endif %}
</section>
</div>
{% endfor %}
</section>
<div class="text-center pb-4 pt-4">
<a class="btn btn-primary btn-collection-show" href="{{ collection.link }}"
title="Ver todos los productos de {{ title }}"
aria-label="Ver todos los productos de {{ title }}">
Ver todos los productos
</a>
</div>
</div>
{% endif %}Inicio > slider colección
{% if collection.size > 0 %}
{% assign addToCart = true %}
{% assign show_hover_image = true %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "circle" %}
{% capture option_slider %}
"infinite": true,
"autoplay": true,
"autoplayTimeout": 4000,
"autoplayHoverPause": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{ right }}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{ left }}\"></i></div>",
"slidesToShow": 4,
"slidesToScroll": 1,
"responsive": [
{
"breakpoint": 996,
"settings": { "slidesToShow": 4 }
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 3 }
},
{
"breakpoint": 576,
"settings": { "slidesToShow": 2 }
}
]
{% endcapture %}
{{ 'load collection' | get_component }}
<section class="row">
<div class="col-12">
<h2><a class="bs-title" href="{{ collection.link }}">{{ title }}</a></h2>
<div data-bs='slider' data-info='{ {{ option_slider | strip_newlines | replace: ' ', '' }} }'
class="bs-collection slick-horizontal show-4 breakpoint-992-show-4 breakpoint-768-show-3 breakpoint-576-show-1">
{% for product in collection | limit: 8 %}
<div class="item">
<div class="bs-collection__product border" data-bs="product" data-info="{{ product.id }}">
<a href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square hover">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
<div class="bs-collection__product-stock">Sin Stock</div>
{% endif %}
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<h3 class="bs-collection__product-title">
{{ product.title | capitalize | strip_html | truncate: 60, '...' }}
</h3>
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...' }}
</div>
{% endif %}
{% if product.brand.name %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a>
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
{% if product.discount_cant > 1 %}
<small class="bs-collection__discount-condition">
Por compras desde {{ product.discount_cant | round }} unidades
</small>
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
{% if addToCart %}
<div class="bs-collection__addToCart">
{% if outStock %}
<button class="btn btn-primary invisible {{ product.unlimitedStock }}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}" data-bs="cart.add.collection">
<i class="fas fa-shopping-bag pt-1 pr-1"></i> Agregar
</button>
{% endif %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
</section>
{% endif %}Colección
{% assign discount_format = "circle" %}
{% assign show_hover_image = true %}
{% assign popup_ultima_compra = false %}
{% assign addToCart = true %}
{{'load collection' | get_component }}
<div class="bs-collection grid">
{% for product in collection %}
<div class="bs-collection__product border" data-bs="product" data-info="{{product.id}}">
<a href="{{product.link}}" title="z{{product.title}}">
<div class="bs-img-square hover">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
<div class="bs-collection__product-stock">Sin Stock</div>
{% endif %}
{% endif %}
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes : 'X' }}>
<source {{ product.default_image | source_tag_attributes : 'L' }}>
<source {{ product.default_image | source_tag_attributes : 'M' }}>
<source {{ product.default_image | source_tag_attributes : 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{product.default_image | img_tag_attributes:'S'}}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{site.logo | img_tag_attributes:'S'}}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<h3 class="bs-collection__product-title">
{{product.title | strip_html | truncate: 60, '...'}}
</h3>
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
{% if product.order > 0 %}
<span class="d-inline-block badge badge-primary">
<i class="fas fa-star"></i>
</span>
{% endif %}
{% if product.brand.name %}
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
{% endif %}
</a>
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
{% if product.discount_cant > 1 %}
<small class="bs-collection__discount-condition">
Por compras desde {{ product.discount_cant | round }} unidades
</small>
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
{% if addToCart %}
<div class="bs-product-cart mx-3 mt-3">
{% if outStock %}
<button class="btn btn-primary invisible {{ product.unlimitedStock }}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}" data-bs="cart.add.collection">
<i class="fas fa-shopping-bag pt-1 pr-1"></i> Agregar
</button>
{% endif %}
</div>
{% endif %}
</div>
{% endfor %}
</div>
{%if popup_ultima_compra%}
{{'Pop up ultima compra' | get_component }}
{%endif%}Modal > productos relacionados slider
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "circle" %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% capture option_slider %}
"lazyLoad": "ondemand",
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 2,
"mobileFirst": true,
"responsive": [
{
"breakpoint": 576,
"settings": { "slidesToShow": 2 }
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 3 }
},
{
"breakpoint": 992,
"settings": { "slidesToShow": 4 }
},
{
"breakpoint": 1200,
"settings": { "slidesToShow": 4 }
}
]
{% endcapture %}
{% if collection.size > 0 %}
<section data-bs='slider' data-info='{ {{option_slider | strip_newlines | replace: ' ', ''}} }'
class="bs-collection slick-horizontal show-4 breakpoint-992-show-4 breakpoint-768-show-3 breakpoint-576-show-1">
{% for product in collection %}
<div class="item">
<div class="bs-collection__product border" data-bs="product" data-info="{{ product.id }}">
<a href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square hover">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
<div class="bs-collection__product-stock">Sin Stock</div>
{% endif %}
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<h3 class="bs-collection__product-title">
{{ product.title | capitalize | strip_html | truncate: 60, '...' }}
</h3>
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...' }}
</div>
{% endif %}
{% if product.brand.name %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a>
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
{% if product.discount_cant > 1 %}
<small class="bs-collection__discount-condition">
Por compras desde {{ product.discount_cant | round }} unidades
</small>
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
{% if addToCart %}
<div class="bs-collection__addToCart">
{% if outStock %}
<button class="btn btn-primary invisible {{ product.unlimitedStock }}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}" data-bs="cart.add.collection">
<i class="fas fa-shopping-bag pt-1 pr-1"></i> Agregar
</button>
{% endif %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</section>
{% endif %}Carro > relacionados
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "circle" %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% capture option_slider %}
"lazyLoad": "ondemand",
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 2,
"mobileFirst": true,
"responsive": [
{
"breakpoint": 576,
"settings": { "slidesToShow": 2 }
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 3 }
},
{
"breakpoint": 992,
"settings": { "slidesToShow": 4 }
},
{
"breakpoint": 1200,
"settings": { "slidesToShow": 4 }
}
]
{% endcapture %}
{% if collection.size > 0 %}
<section data-bs='slider' data-info='{ {{option_slider | strip_newlines | replace: ' ', ''}} }'
class="bs-collection slick-horizontal show-4 breakpoint-992-show-4 breakpoint-768-show-3 breakpoint-576-show-1">
{% for product in collection %}
<div class="item">
<div class="bs-collection__product border" data-bs="product" data-info="{{ product.id }}">
<a href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square hover">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
<div class="bs-collection__product-stock">Sin Stock</div>
{% endif %}
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<h3 class="bs-collection__product-title">
{{ product.title | capitalize | strip_html | truncate: 60, '...' }}
</h3>
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...' }}
</div>
{% endif %}
{% if product.brand.name %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a>
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
{% if product.discount_cant > 1 %}
<small class="bs-collection__discount-condition">
Por compras desde {{ product.discount_cant | round }} unidades
</small>
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
{% if addToCart %}
<div class="bs-collection__addToCart">
{% if outStock %}
<button class="btn btn-primary invisible {{ product.unlimitedStock }}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}" data-bs="cart.add.collection">
<i class="fas fa-shopping-bag pt-1 pr-1"></i> Agregar
</button>
{% endif %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</section>
{% endif %}Producto > accesorios o relacionados slider
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "circle" %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% capture option_slider %}
"lazyLoad": "ondemand",
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 2,
"mobileFirst": true,
"responsive": [
{
"breakpoint": 576,
"settings": { "slidesToShow": 2 }
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 3 }
},
{
"breakpoint": 992,
"settings": { "slidesToShow": 4 }
},
{
"breakpoint": 1200,
"settings": { "slidesToShow": 4 }
}
]
{% endcapture %}
{% if collection.size > 0 %}
<section data-bs='slider' data-info='{ {{option_slider | strip_newlines | replace: ' ', ''}} }'
class="bs-collection slick-horizontal show-4 breakpoint-992-show-4 breakpoint-768-show-3 breakpoint-576-show-1">
{% for product in collection %}
<div class="item">
<div class="bs-collection__product border" data-bs="product" data-info="{{ product.id }}">
<a href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square hover">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
<div class="bs-collection__product-stock">Sin Stock</div>
{% endif %}
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<h3 class="bs-collection__product-title">
{{ product.title | capitalize | strip_html | truncate: 60, '...' }}
</h3>
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...' }}
</div>
{% endif %}
{% if product.brand.name %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a>
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
{% if product.discount_cant > 1 %}
<small class="bs-collection__discount-condition">
Por compras desde {{ product.discount_cant | round }} unidades
</small>
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
{% if addToCart %}
<div class="bs-collection__addToCart">
{% if outStock %}
<button class="btn btn-primary invisible {{ product.unlimitedStock }}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}" data-bs="cart.add.collection">
<i class="fas fa-shopping-bag pt-1 pr-1"></i> Agregar
</button>
{% endif %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</section>
{% endif %}/* Estilos precio por unidad de medida */
.bs-collection__ppum {
display: block;
font-size: 0.68rem;
color: #999;
font-weight: 400;
line-height: 1.2;
margin-top: 1px;
letter-spacing: 0.01em;
}Actualizar los siguientes 6 componentes reemplazando el bloque de precios con la versión que incluye ppum.
| Componente | Estado |
|---|---|
| Inicio > colección | Requiere actualización |
| Inicio > slider colección | Requiere actualización |
| Colección | Requiere actualización |
| Modal > productos relacionados slider | Requiere actualización |
| Producto > accesorios o relacionados slider | Requiere actualización |
| Carro > relacionados | Requiere actualización |
Inicio > colección
{% if collection.size > 0 %}
{% assign addToCart = true %}
{% assign show_hover_image = true %}
{% assign discount_format = "circle" %}
{% assign cant_producto_mostrar = "10" %}
{{ 'load collection' | get_component }}
<h2 class="bs-title-home"><a href="{{ collection.link }}">{{ title }}</a></h2>
<div class="bs-collection-home grid">
{% for product in collection limit: cant_producto_mostrar %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {% endif %}" data-bs="product" data-info="{{ product.id }}">
<a href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice">
{{ product.notice }}
</div>
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__product__stock-msg">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<h3 class="bs-collection__product-title">
{{ product.title | capitalize }}
</h3>
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<div class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</div>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
* Por compras desde {{ product.discount_cant | round }} unidades
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-secondary{{ product.unlimitedStock }}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-secondary {{ product.unlimitedStock }}" data-bs="cart.add.collection">
Agregar al carro
</button>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="text-center pb-5">
<a class="btn btn-primary btn-collection-show" href="{{ collection.link }}"
title="Ver todos los productos de {{ title }}"
aria-label="Ver todos los productos de {{ title }}">
Ver todos los productos
</a>
</div>
{% endif %}Inicio > slider colección
{% if collection.size > 0 %}
{% assign addToCart = true %}
{% assign show_hover_image = true %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "circle" %}
{% capture option_slider %}
"dots": false,
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{ right }}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{ left }}\"></i></div>",
"slidesToShow": 2,
"slidesToScroll": 1,
"mobileFirst": true,
"responsive": [
{
"breakpoint": 576,
"settings": {
"slidesToShow": 2,
"slidesToScroll": 2,
"arrows": true
}
},
{
"breakpoint": 768,
"settings": {
"slidesToShow": 3,
"slidesToScroll": 3
}
},
{
"breakpoint": 992,
"settings": "unslick"
}
]
{% endcapture %}
{{ 'load collection' | get_component }}
<h2 class="bs-title-home"><a href="{{ collection.link }}">{{ title }}</a></h2>
<div data-bs='slider' data-info='{ {{ option_slider | strip_newlines }} }' class="bs-collection grid grid-slider unslick-992">
{% for product in collection %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {% endif %}" data-bs="product" data-info="{{ product.id }}">
<a href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice">
{{ product.notice }}
</div>
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__product__stock-msg">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<h3 class="bs-collection__product-title">
{{ product.title | capitalize }}
</h3>
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<div class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</div>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
* Por compras desde {{ product.discount_cant | round }} unidades
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-secondary{{ product.unlimitedStock }}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-secondary {{ product.unlimitedStock }}" data-bs="cart.add.collection">
Agregar al carro
</button>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}Colección
{% assign discount_format = "circle"%}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% assign popup_ultima_compra = false %}
{{'load collection' | get_component }}
<div class="bs-collection grid">
{% for product in collection %}
<section class="grid__item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{%endif%}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} " data-bs="product"
data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice">
{{ product.notice }}
</div>
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__product__stock-msg">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<h3 class="bs-collection__product-title">
{{product.title | capitalize }}
</h3>
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
{% endif %}
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<div class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</div>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
* Por compras desde {{ product.discount_cant | round }} unidades
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-secondary{{ product.unlimitedStock }}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-secondary {{ product.unlimitedStock }}" data-bs="cart.add.collection">
Agregar al carro
</button>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</section>
{% endfor %}
</div>
{%if popup_ultima_compra%}
{{'Pop up ultima compra' | get_component }}
{%endif%}Modal > productos relacionados slider
{% assign loop = false %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "circle" %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% capture option_slider %}
"lazyLoad": "ondemand",
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{ right }}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{ left }}\"></i></div>",
"slidesToShow": 4,
"mobileFirst": true,
"responsive": [
{
"breakpoint": 384,
"settings": { "slidesToShow": 1 }
},
{
"breakpoint": 576,
"settings": { "slidesToShow": 2 }
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 2 }
},
{
"breakpoint": 992,
"settings": { "slidesToShow": 3 }
},
{
"breakpoint": 1200,
"settings": { "slidesToShow": 4 }
}
]
{% endcapture %}
{% capture style %}
--slider-margin: 1rem;
--cols: 2;
--cols-sm: 2;
--cols-md: 2;
--cols-lg: 3;
--cols-xl: 4;
{% endcapture %}
{% if related.size > 0 %}
<section class="bs-product-related">
<h4 class="bs-title">También Podría Interesarte</h4>
<div data-bs='slider' data-info='{ {{ option_slider | strip_newlines | replace: ' ', '' }} }'
class="bs-collection bs-horizontal-slider grid-slider grid slider-left" style="{{ style }}">
{% for product in related | limit: 8 %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {% endif %}" data-bs="product" data-info="{{ product.id }}">
<a href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice">
{{ product.notice }}
</div>
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__product__stock-msg">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<h3 class="bs-collection__product-title">
{{ product.title | capitalize }}
</h3>
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<div class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</div>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
* Por compras desde {{ product.discount_cant | round }} unidades
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-secondary{{ product.unlimitedStock }}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-secondary {{ product.unlimitedStock }}" data-bs="cart.add.collection">
Agregar al carro
</button>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
{% endif %}Producto > accesorios o relacionados slider
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "circle" %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% capture option_slider %}
"lazyLoad": "ondemand",
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 2,
"mobileFirst": true,
"responsive": [
{
"breakpoint": 576,
"settings": { "slidesToShow": 2 }
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 3 }
},
{
"breakpoint": 992,
"settings": { "slidesToShow": 4 }
},
{
"breakpoint": 1200,
"settings": { "slidesToShow": 5 }
}
]
{% endcapture %}
{% capture style %}
--slider-margin: 1rem;
--cols: 1;
--cols-sm: 2;
--cols-md: 3;
--cols-lg: 4;
--cols-xl: 5;
{% endcapture %}
{% if collection.size > 0 %}
<section data-bs='slider' data-info='{ {{option_slider | strip_newlines | replace: ' ', ''}} }'
class="bs-product-related grid grid-slider" style="{{style}}">
{% for product in collection %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {% endif %}" data-bs="product" data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice">
{{ product.notice }}
</div>
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__product__stock-msg">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<h3 class="bs-collection__product-title">
{{product.title | capitalize }}
</h3>
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
{% endif %}
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<div class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</div>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
* Por compras desde {{ product.discount_cant | round }} unidades
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-secondary{{ product.unlimitedStock }}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-secondary {{ product.unlimitedStock }}" data-bs="cart.add.collection">
Agregar al carro
</button>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</section>
{% endif %}Carro > relacionados
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "circle" %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% capture option_slider %}
"lazyLoad": "ondemand",
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 2,
"mobileFirst":true,
"responsive": [
{
"breakpoint": 576,
"settings": { "slidesToShow": 2 }
},{
"breakpoint": 768,
"settings": { "slidesToShow": 3 }
},{
"breakpoint": 992,
"settings": { "slidesToShow": 4 }
},{
"breakpoint": 1200,
"settings": { "slidesToShow": 5 }
}
]
{% endcapture %}
{% capture style %}
--slider-margin:1rem;
--cols:1;
--cols-sm:2;
--cols-md:3;
--cols-lg:4;
--cols-xl:5;
{% endcapture %}
{% if collection.size > 0 %}
<h3 class="bs-title">También Podría Interesarte</h3>
<section data-bs='slider' data-info='{ {{option_slider | strip_newlines | replace: ' ', ''}} }'
class="bs-product-related grid grid-slider" style="{{style}}">
{% for product in collection %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{%endif%}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} " data-bs="product" data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice">
{{ product.notice }}
</div>
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__product__stock-msg">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<h3 class="bs-collection__product-title">
{{product.title | capitalize }}
</h3>
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
{% endif %}
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<div class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</div>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
* Por compras desde {{ product.discount_cant | round }} unidades
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-secondary{{ product.unlimitedStock }}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-secondary {{ product.unlimitedStock }}" data-bs="cart.add.collection">
Agregar al carro
</button>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</section>
{%endif %}/* Estilos precio por unidad de medida */
.bs-collection__ppum {
display: block;
font-size: 0.68rem;
color: #999;
font-weight: 400;
line-height: 1.2;
margin-top: 1px;
letter-spacing: 0.01em;
}Actualizar los siguientes 6 componentes reemplazando el bloque de precios con la versión que incluye ppum.
| Componente | Estado |
|---|---|
| Inicio > colección | Requiere actualización |
| Inicio > slider colección | Requiere actualización |
| Colección | Requiere actualización |
| Modal > productos relacionados slider | Requiere actualización |
| Producto > accesorios o relacionados slider | Requiere actualización |
| Carro > relacionados | Requiere actualización |
Inicio > colección
{% if collection.size > 0 %}
{% assign addToCart = true %}
{% assign show_hover_image = true %}
{% assign discount_format = "template" %}
{% assign cant_producto_mostrar = "8" %}
{{ 'load collection' | get_component }}
<h3 class="bs-title-home text-center mt-5">
<a href="{{ collection.link }}">{{ title }}</a>
</h3>
<div class="bs-collection-home grid">
{% for product in collection limit: cant_producto_mostrar %}
<div class="item">
<div class="bs-collection__product" data-bs="product" data-info="{{ product.id }}">
<a href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square bs-collection__product__img hover vertical">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
{% if addToCart %}
<div class="bs-collection__addToCart">
{% if outStock %}
<button class="btn btn-primary {{ product.unlimitedStock }}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}"
data-bs="cart.add.collection">
<i class="fas fa-shopping-bag pt-1 pr-1"></i> Agregar
</button>
{% endif %}
</div>
{% endif %}
</div>
</a>
<a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<h3 class="bs-collection__product-title">
{{ product.title | capitalize | strip_html | truncate: 60, '...' }}
</h3>
{% if product.notice.size > 1 %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...' }}
</div>
{% endif %}
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a>
<div class="bs-collection__price-grid">
{% if product.discount_cant > 1 %}
<small class="bs-collection__discount-condition col-12">
Por compras desde {{ product.discount_cant | round }} unidades
</small>
{% endif %}
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="text-center pb-5 pt-5">
<a class="btn-collection-show" href="{{ collection.link }}"
title="Ver todos los productos de {{ title }}"
aria-label="Ver todos los productos de {{ title }}">
Ver todos los productos
</a>
</div>
{% endif %}Inicio > slider colección
{% if collection.size > 0 %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% assign discount_format = "template" %}
{% capture option_slider %}
"infinite": true,
"autoplayHoverPause": true,
"arrows": false,
"slidesToShow": 4,
"slidesToScroll": 4,
"dots": true,
"responsive": [
{
"breakpoint": 996,
"settings": {
"slidesToShow": 3,
"slidesToScroll": 3,
"dots": true
}
},
{
"breakpoint": 768,
"settings": {
"slidesToShow": 3,
"slidesToScroll": 3,
"dots": true,
"arrows": false
}
},
{
"breakpoint": 576,
"settings": {
"slidesToShow": 2,
"slidesToScroll": 2,
"dots": true,
"arrows": false
}
}
]
{% endcapture %}
{{ 'load collection' | get_component }}
<h3 class="bs-title-home text-center mt-5">
<a href="{{ collection.link }}">{{ title }}</a>
</h3>
<section class="">
<div data-bs='slider' data-info='{ {{ option_slider | strip_newlines | replace: ' ', '' }} }'
class="grid__item slick-horizontal show-4 breakpoint-992-show-4 breakpoint-768-show-3 breakpoint-576-show-1">
{% for product in collection | limit: 8 %}
<div class="item">
<div class="bs-collection__product" data-bs="product" data-info="{{ product.id }}">
<a href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square bs-collection__product__img hover vertical">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
{% if addToCart %}
<div class="bs-collection__addToCart">
{% if outStock %}
<button class="btn btn-primary {{ product.unlimitedStock }}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}"
data-bs="cart.add.collection">
<i class="fas fa-shopping-bag pt-1 pr-1"></i> Agregar
</button>
{% endif %}
</div>
{% endif %}
</div>
</a>
<a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<h3 class="bs-collection__product-title">
{{ product.title | capitalize | strip_html | truncate: 60, '...' }}
</h3>
{% if product.notice.size > 1 %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...' }}
</div>
{% endif %}
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a>
<div class="bs-collection__price-grid">
{% if product.discount_cant > 1 %}
<small class="bs-collection__discount-condition col-12">
Por compras desde {{ product.discount_cant | round }} unidades
</small>
{% endif %}
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
{% endif %}Colección
{% assign discount_format = "template" %}
{% assign show_hover_image = true %}
{% assign popup_ultima_compra = false %}
{% assign addToCart = true %}
{{ 'load collection' | get_component }}
<div class="bs-collection grid">
{% for product in collection %}
<div class="bs-collection__product" data-bs="product" data-info="{{ product.id }}">
<a href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square bs-collection__product__img hover vertical">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% assign outStock = false %}
{% if product.classification != 1 and product.totalStock < 1 and product.stockControl == 1 and product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
<picture
{% if show_hover_image and product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
{% if addToCart %}
<div class="bs-collection__addToCart">
{% if outStock %}
<button class="btn btn-primary {{ product.unlimitedStock }}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}" data-bs="cart.add.collection">
<i class="fas fa-shopping-bag pt-1 pr-1"></i> Agregar
</button>
{% endif %}
</div>
{% endif %}
</div>
</a>
<a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<h3 class="bs-collection__product-title">
{{ product.title | capitalize | strip_html | truncate: 60, '...' }}
</h3>
{% if product.notice.size > 1 %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...' }}
</div>
{% endif %}
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a>
<div class="bs-collection__price-grid">
{% if product.discount_cant > 1 %}
<small class="bs-collection__discount-condition col-12">
Por compras desde {{ product.discount_cant | round }} unidades
</small>
{% endif %}
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
{%if popup_ultima_compra%}
{{'Pop up ultima compra' | get_component }}
{%endif%}Modal > productos relacionados slider
{% assign loop = false %}
{% assign addToCart = true %}
{% assign left = "fa-arrow-left" %}
{% assign right = "fa-arrow-right" %}
{% assign show_hover_image = true %}
{% assign discount_format = "template" %}
{% capture option_slider %}
"lazyLoad": "ondemand",
"infinite": true,
"dots": true,
"arrows": false,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 4,
"responsive": [
{
"breakpoint": 768,
"settings": { "slidesToShow": 3 }
},
{
"breakpoint": 576,
"settings": { "slidesToShow": 2 }
},
{
"breakpoint": 384,
"settings": { "slidesToShow": 1 }
}
]
{% endcapture %}
{% if collection.size > 0 %}
<h3 class="bs-title text-center">También Podría Interesarte</h3>
<div data-bs='slider' data-info='{ {{ option_slider | replace: ' ', '' }} }'
class="bs-collection slick-horizontal show-4 breakpoint-992-show-4 breakpoint-768-show-3 breakpoint-576-show-1">
{% for product in collection %}
<div class="item">
<div class="bs-collection__product" data-bs="product" data-info="{{ product.id }}">
<a href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square bs-collection__product__img hover vertical">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
{% if addToCart %}
<div class="bs-collection__addToCart">
{% if outStock %}
<button class="btn btn-primary {{ product.unlimitedStock }}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}"
data-bs="cart.add.collection"
{% if loop == false %} data-from-modal="true" {% endif %}>
Comprar Ahora
</button>
{% endif %}
</div>
{% endif %}
</div>
</a>
<a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<h3 class="bs-collection__product-title">
{{ product.title | capitalize | strip_html | truncate: 60, '...' }}
</h3>
{% if product.notice.size > 1 %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...' }}
</div>
{% endif %}
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a>
<div class="bs-collection__price-grid">
{% if product.discount_cant > 1 %}
<small class="bs-collection__discount-condition col-12">
Por compras desde {{ product.discount_cant | round }} unidades
</small>
{% endif %}
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
{% endif %}Producto > accesorios o relacionados slider
{% assign addToCart = true %}
{% assign left = "fa-arrow-left" %}
{% assign right = "fa-arrow-right" %}
{% assign show_hover_image = true %}
{% assign discount_format = "template" %}
{% capture option_slider %}
"lazyLoad": "ondemand",
"infinite": true,
"dots": true,
"arrows": false,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 4,
"responsive": [
{
"breakpoint": 768,
"settings": { "slidesToShow": 3 }
},
{
"breakpoint": 576,
"settings": { "slidesToShow": 2 }
},
{
"breakpoint": 384,
"settings": { "slidesToShow": 1 }
}
]
{% endcapture %}
{% if collection.size > 0 %}
<div data-bs='slider' data-info='{ {{ option_slider | replace: ' ', '' }} }' class="bs-collection slick-horizontal show-4 breakpoint-992-show-4 breakpoint-768-show-3 breakpoint-576-show-1">
{% for product in collection %}
<div class="item">
<div class="bs-collection__product" data-bs="product" data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square bs-collection__product__img hover vertical">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
{% if addToCart %}
<div class="bs-collection__addToCart">
{% if outStock %}
<button class="btn btn-primary {{product.unlimitedStock}}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}" data-bs="cart.add.collection">
Comprar Ahora
</button>
{% endif %}
</div>
{% endif %}
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<h3 class="bs-collection__product-title">
{{product.title | capitalize | strip_html | truncate: 60, '...'}}
</h3>
{% if product.notice.size > 1 %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
{% endif %}
</a>
<div class="bs-collection__price-grid">
{% if product.discount_cant > 1 %}
<small class="bs-collection__discount-condition col-12">
Por compras desde {{ product.discount_cant | round }} unidades
</small>
{% endif %}
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</strong>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<section>
{% endif %}Carro > relacionados
{% comment %}
<!--
Documentación del slider:
http://kenwheeler.github.io/slick/
-->
{% endcomment %}
{% assign addToCart = true %}
{% assign left = "fa-arrow-left" %}
{% assign right = "fa-arrow-right" %}
{% assign show_hover_image = true %} <!-- Efecto hover en la imagen -->
{% assign discount_format = "template" %}
<!-- Configuración del slider -------------------------------------------------------------------->
{% capture option_slider %}
"lazyLoad": "ondemand",
"infinite": true,
"dots": true,
"arrows": false,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 4,
"responsive": [
{
"breakpoint": 768,
"settings": {
"slidesToShow": 3
}
},{
"breakpoint": 576,
"settings": {
"slidesToShow": 2
}
},{
"breakpoint": 384,
"settings": {
"slidesToShow": 1
}
}
]
{% endcapture %}
<!-- Verificar si hay productos en la colección ------------------------------------------------>
{% if collection.size > 0 %}
<h3 class="bs-title text-center">También Podría Interesarte</h3>
<div data-bs="slider" data-info='{ {{ option_slider | replace: ' ', '' }} }'
class="bs-collection slick-horizontal show-4 breakpoint-992-show-4 breakpoint-768-show-3 breakpoint-576-show-1">
{% for product in collection %}
<div class="item">
<!-- Producto: start ---------------------------------------------------------------->
<div class="bs-collection__product" data-bs="product" data-info="{{ product.id }}">
<a href="{{ product.link }}" title="{{ product.title }}">
<!-- Imagen del producto -->
<div class="bs-img-square bs-collection__product__img hover vertical">
<!-- Descuento -->
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
<!-- Etiqueta sin stock -->
{% assign outStock = false %}
{% if product.classification != 1 and product.totalStock < 1 and product.stockControl == 1 and product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
<!-- Efecto hover en la imagen -->
<picture
{% if show_hover_image and product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
>
<!-- Imágenes responsivas -->
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<!-- Imagen por defecto -->
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
</picture>
<!-- Botón agregar al carrito -->
{% if addToCart %}
<div class="bs-collection__addToCart">
{% if outStock %}
<button class="btn btn-primary {{ product.unlimitedStock }}" disabled>
Agotado
</button>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}" data-bs="cart.add.collection">
Comprar Ahora
</button>
{% endif %}
</div>
{% endif %}
</div>
</a><!-- Imagen del producto: end -->
<!-- Información del producto -->
<a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<h3 class="bs-collection__product-title">
{{ product.title | capitalize | strip_html | truncate: 60, '...' }}
</h3>
{% if product.notice.size > 1 %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...' }}
</div>
{% endif %}
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a><!-- Información del producto: end -->
<!-- Precios del producto -->
<div class="bs-collection__price-grid">
{% if product.discount_cant > 1 %}
<small class="bs-collection__discount-condition col-12">
Por compras desde {{ product.discount_cant | round }} unidades
</small>
{% endif %}
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
<!-- Precio por unidad (ppum) sin descuento -->
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</strong>
<!-- Precio por unidad (ppum) con descuento aplicado -->
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
</div>
</div>
<!-- Producto: end ------------------------------------------------------------------>
</div>
{% endfor %}
</div><!-- Slider: end -->
</section>
{% endif %}
/* Estilos precio por unidad de medida */
.bs-collection__ppum {
display: block;
font-size: 0.68rem;
color: #999;
font-weight: 400;
line-height: 1.2;
margin-top: 1px;
letter-spacing: 0.01em;
}Actualizar los siguientes 8 componentes. Esta plantilla utiliza una estructura avanzada con .bs-collection__ppum-line que muestra el ppum con y sin descuento en la misma línea.
| Componente | Estado |
|---|---|
| Inicio > colección | Requiere actualización |
| Inicio > colección 1 | Requiere actualización |
| Inicio > colección 2 | Requiere actualización |
| Inicio > slider colección especial | Requiere actualización |
| Colección | Requiere actualización |
| Modal > productos relacionados slider | Requiere actualización |
| Producto > accesorios o relacionados slider | Requiere actualización |
| Carro > relacionados | Requiere actualización |
Inicio > colección
{% if collection.size > 0 %}
{% assign cant_producto_mostrar = "10" %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% assign text_dest_img = true %}
{% assign text_dest = false %}
{% assign discount_format = "form-A" %}
{% assign cart_icon = '<svg class="icon__svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18,6h-2c0-2.21-1.79-4-4-4S8,3.79,8,6H6C4.9,6,4,6.9,4,8v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8C20,6.9,19.1,6,18,6z M12,4c1.1,0,2,0.9,2,2h-4C10,4.9,10.9,4,12,4z M18,20H6V8h2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V8h4v2c0,0.55,0.45,1,1,1s1-0.45,1-1V8 h2V20z"></path></svg>' %}
{{'load collection' | get_component }}
<h2 class="bs-title-home"><a href="{{ collection.link }}">{{ title }}</a></h2>
<div class="bs-collection-home grid">
{% for product in collection limit: cant_producto_mostrar %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {% endif %}" data-bs="product" data-info="{{ product.id }}">
<a href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% if text_dest_img %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice-tag">
{{ product.notice }}
</div>
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<h3 class="bs-collection__product-title">{{ product.title }}</h3>
{% if text_dest %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...' }}
</div>
{% endif %}
{% endif %}
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
<div class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</div>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
<small class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-primary" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}" data-bs="cart.add.collection">
Agregar {{cart_icon}}
</button>
{% endif %}
{% endif %}
</div>
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
* Por compras desde {{ product.discount_cant | round }} unidades
{% endif %}
</small>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="text-center pb-5">
<a class="btn btn-primary btn-collection-show" href="{{ collection.link }}"
title="Ver todos los productos de {{ title }}"
aria-label="Ver todos los productos de {{ title }}">
Ver todos los productos
</a>
</div>
{% endif %}Inicio > colección 1
{% if collection.size > 0 %}
{% assign addToCart = true %}
{% assign text_dest_img = true %}
{% assign text_dest = false %}
{% assign show_hover_image = true %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "form-A" %}
{% assign cart_icon = '<svg class="icon__svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18,6h-2c0-2.21-1.79-4-4-4S8,3.79,8,6H6C4.9,6,4,6.9,4,8v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8C20,6.9,19.1,6,18,6z M12,4c1.1,0,2,0.9,2,2h-4C10,4.9,10.9,4,12,4z M18,20H6V8h2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V8h4v2c0,0.55,0.45,1,1,1s1-0.45,1-1V8 h2V20z"></path></svg>' %}
{% capture option_slider %}
"dots": false,
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 1,
"slidesToScroll": 1,
"mobileFirst": true,
"responsive": [
{
"breakpoint": 280,
"settings": { "slidesToShow": 2, "slidesToScroll": 2 }
},
{
"breakpoint": 576,
"settings": { "slidesToShow": 2, "slidesToScroll": 2 }
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 3, "slidesToScroll": 3, "dots": true }
},
{
"breakpoint": 992,
"settings": { "slidesToShow": 4, "slidesToScroll": 4, "dots": true }
},
{
"breakpoint": 1200,
"settings": { "slidesToShow": 5, "slidesToScroll": 5, "dots": true }
}
]
{% endcapture %}
{% capture style %}
--slider-margin: 1rem;
--cols-xl: 5;
--cols-lg: 4;
--cols-md: 3;
--cols-sm: 2;
--slick-initialized-area: "left slick-list right" "dots dots dots";
--slider-prev-arrow-align: end;
--slider-next-arrow-align: start;
{% endcapture %}
{{'load collection' | get_component }}
<h2 class="bs-title-home"><a href="{{ collection.link }}">{{ title }}</a></h2>
<div data-bs='slider' data-info='{ {{ option_slider | strip_newlines }} }' class="bs-collection grid grid-slider" style='{{ style }}'>
{% for product in collection %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {% endif %}" data-bs="product" data-info="{{ product.id }}">
<a href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
{% if text_dest_img %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice-tag">
{{ product.notice }}
</div>
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<h3 class="bs-collection__product-title">{{ product.title }}</h3>
{% if text_dest %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...' }}
</div>
{% endif %}
{% endif %}
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{ product.brand.name }}</span>
{% endif %}
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
<div class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</div>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
<small class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-primary" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}" data-bs="cart.add.collection">
Agregar {{cart_icon}}
</button>
{% endif %}
{% endif %}
</div>
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
* Por compras desde {{ product.discount_cant | round }} unidades
{% endif %}
</small>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}Inicio > colección 2
{% if collection.size > 0 %}
{% assign addToCart = true %}
{% assign text_dest_img = true %}
{% assign text_dest = false %}
{% assign show_hover_image = true %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "form-A"%}
{% assign cart_icon = '<svg class="icon__svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18,6h-2c0-2.21-1.79-4-4-4S8,3.79,8,6H6C4.9,6,4,6.9,4,8v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8C20,6.9,19.1,6,18,6z M12,4c1.1,0,2,0.9,2,2h-4C10,4.9,10.9,4,12,4z M18,20H6V8h2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V8h4v2c0,0.55,0.45,1,1,1s1-0.45,1-1V8 h2V20z"></path></svg>' %}
{% capture option_slider %}
"dots":true,
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"mobileFirst":true,
"responsive": [
{
"breakpoint": 0,
"settings": "unslick"
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 3, "slidesToScroll":3 }
},
{
"breakpoint": 992,
"settings": { "slidesToShow": 4, "slidesToScroll":4 }
},
{
"breakpoint": 1200,
"settings": { "slidesToShow": 5, "slidesToScroll":5 }
}
]
{% endcapture %}
<style>
.bs-collection.grid-slider{
--slider-margin:1rem;
--cols-xl: 5;
--cols-lg: 4;
--cols-md: 3;
--cols-sm: 2;
--cols: 2;
--slick-initialized-area: "left slick-list right"
"ldots dots dots ";
}
</style>
{{'load collection' | get_component }}
<h2 class="bs-title-home"><a href="{{collection.link}}">{{title}}</a></h2>
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines }} }'
class="bs-collection grid grid-slider unslick-0 slick-768">
{% for product in collection %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %}" data-bs="product" data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
{% if text_dest_img %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice-tag">{{ product.notice }}</div>
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<h3 class="bs-collection__product-title">{{product.title}}</h3>
{% if text_dest %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
{% endif %}
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
{% endif %}
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
<div class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</div>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
<small class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-primary" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}" data-bs="cart.add.collection">
Agregar {{cart_icon}}
</button>
{% endif %}
{%endif%}
</div>
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
* Por compras desde {{product.discount_cant | round}} unidades
{% endif %}
</small>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}Inicio > slider colección especial
{% if collection.size > 0 %}
{% assign addToCart = true %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "form-A"%}
{% capture option_slider %}
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 1,
"slidesToScroll":1,
"mobileFirst":true
{% endcapture %}
{{'load collection' | get_component }}
<h2 class="bs-title-home"><a href="{{collection.link}}">{{title}}</a></h2>
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines }} }'
class="bs-collection-special grid grid-slider">
{% for product in collection %}
<div class="item">
<div class="row justify-content-center">
<div class="col-md-6 col-lg-5">
<picture>
{% for img in product.images %}
{% if img.href != product.defaultImage %}
<img
{{ img.href | img_tag_attributes: 'L' }}
onerror="this.onerror=null;this.src='{{img.href}}';"
alt="{{ product.title }}"
loading="lazy"
>
{% break %}
{% endif %}
{% endfor %}
</picture>
</div>
<div class="col-md-4 col-lg-3">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %}" data-bs="product" data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square bs-collection__product__img pt-2">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<picture>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<h3 class="bs-collection__product-title">
{{product.title}}
{% if product.notice %}
<div class="bs-collection__product-notice">{{ product.notice }}</div>
{% endif %}
</h3>
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
{% endif %}
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
<div class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</div>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
<small class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-primary" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}" data-bs="cart.add.collection">
Agregar al carro
</button>
{% endif %}
{%endif%}
</div>
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
* Por compras desde {{product.discount_cant | round}} unidades
{% endif %}
</small>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}Colección
{% assign discount_format = "form-A"%}
{% assign text_dest_img = true %}
{% assign text_dest = false %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% assign popup_ultima_compra = false %}
{% assign cart_icon = '<svg class="icon__svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18,6h-2c0-2.21-1.79-4-4-4S8,3.79,8,6H6C4.9,6,4,6.9,4,8v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8C20,6.9,19.1,6,18,6z M12,4c1.1,0,2,0.9,2,2h-4C10,4.9,10.9,4,12,4z M18,20H6V8h2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V8h4v2c0,0.55,0.45,1,1,1s1-0.45,1-1V8 h2V20z"></path></svg>' %}
{{'load collection' | get_component }}
<div class="bs-collection grid" style='{{style}}'>
{% for product in collection %}
<section class="grid__item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %}" data-bs="product" data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<h3 class="bs-collection__product-title">{{product.title}}</h3>
{% if text_dest %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
{% endif %}
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
{% endif %}
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
<div class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</div>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
<small class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-primary" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}" data-bs="cart.add.collection">
Agregar {{cart_icon}}
</button>
{% endif %}
{%endif%}
</div>
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
* Por compras desde {{product.discount_cant | round}} unidades
{% endif %}
</small>
</div>
</div>
</div>
</section>
{% endfor %}
</div>
{%if popup_ultima_compra%}
{{'Pop up ultima compra' | get_component }}
{%endif%}Modal > productos relacionados slider
{% assign loop = false %}
{% assign addToCart = true %}
{% assign text_dest_img = true %}
{% assign text_dest = false %}
{% assign show_hover_image = true %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "form-A"%}
{% assign cart_icon = '<svg class="icon__svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18,6h-2c0-2.21-1.79-4-4-4S8,3.79,8,6H6C4.9,6,4,6.9,4,8v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8C20,6.9,19.1,6,18,6z M12,4c1.1,0,2,0.9,2,2h-4C10,4.9,10.9,4,12,4z M18,20H6V8h2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V8h4v2c0,0.55,0.45,1,1,1s1-0.45,1-1V8 h2V20z"></path></svg>' %}
{% capture option_slider %}
"dots":false,
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 1,
"slidesToScroll":1,
"mobileFirst":true,
"responsive": [
{
"breakpoint": 280,
"settings": { "slidesToShow": 2, "slidesToScroll":2 }
},
{
"breakpoint": 576,
"settings": { "slidesToShow": 2, "slidesToScroll":2 }
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 3, "slidesToScroll":3, "dots":true }
},
{
"breakpoint": 992,
"settings": { "slidesToShow": 4, "slidesToScroll":4, "dots":true }
},
{
"breakpoint": 1200,
"settings": { "slidesToShow": 5, "slidesToScroll":5, "dots":true }
}
]
{% endcapture %}
{% capture style %}
--slider-margin:1rem;
--cols-xl:5;
--cols-lg:4;
--cols-md:3;
--cols-sm:2;
--slick-initialized-area: "left slick-list right" "dots dots dots";
--slider-prev-arrow-align: end;
--slider-next-arrow-align: start;
{% endcapture %}
{% if collection.size > 0 %}
<h2 class="bs-collection__title bs-title">También Podría Interesarte</h2>
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines }} }' class="bs-collection grid grid-slider" style='{{style}}'>
{% for product in collection %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %}" data-bs="product" data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
{% if text_dest_img %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice-tag">{{ product.notice }}</div>
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<h3 class="bs-collection__product-title">{{product.title}}</h3>
{% if text_dest %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
{% endif %}
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
{% endif %}
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
<div class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{product.final_price | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</div>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
<small class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-primary" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}"
{% if loop == false %} data-from-modal="true" {% endif %}
data-bs="cart.add.collection">
Agregar {{cart_icon}}
</button>
{% endif %}
{%endif%}
</div>
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
* Por compras desde {{product.discount_cant | round}} unidades
{% endif %}
</small>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{%endif %}Producto > accesorios o relacionados slider
{% assign addToCart = true %}
{% assign text_dest_img = true %}
{% assign text_dest = false %}
{% assign show_hover_image = true %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "form-A"%}
{% assign cart_icon = '<svg class="icon__svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18,6h-2c0-2.21-1.79-4-4-4S8,3.79,8,6H6C4.9,6,4,6.9,4,8v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8C20,6.9,19.1,6,18,6z M12,4c1.1,0,2,0.9,2,2h-4C10,4.9,10.9,4,12,4z M18,20H6V8h2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V8h4v2c0,0.55,0.45,1,1,1s1-0.45,1-1V8 h2V20z"></path></svg>' %}
{% capture option_slider %}
"dots":false,
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 1,
"slidesToScroll":1,
"mobileFirst":true,
"responsive": [
{
"breakpoint": 280,
"settings": { "slidesToShow": 2, "slidesToScroll":2 }
},
{
"breakpoint": 576,
"settings": { "slidesToShow": 2, "slidesToScroll":2 }
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 3, "slidesToScroll":3, "dots":true }
},
{
"breakpoint": 992,
"settings": { "slidesToShow": 4, "slidesToScroll":4, "dots":true }
},
{
"breakpoint": 1200,
"settings": { "slidesToShow": 5, "slidesToScroll":5, "dots":true }
}
]
{% endcapture %}
{% capture style %}
--slider-margin:1rem;
--cols-xl:5;
--cols-lg:4;
--cols-md:3;
--cols-sm:2;
--slick-initialized-area: "left slick-list right" "dots dots dots";
--slider-prev-arrow-align: end;
--slider-next-arrow-align: start;
{% endcapture %}
{% if collection.size > 0 %}
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines }} }' class="bs-collection grid grid-slider" style='{{style}}'>
{% for product in collection %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %}" data-bs="product" data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
{% if text_dest_img %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice-tag">{{ product.notice }}</div>
{% endif %}
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<h3 class="bs-collection__product-title">{{product.title}}</h3>
{% if text_dest %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
{% endif %}
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
{% endif %}
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
<div class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</div>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
<small class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-primary" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}" data-bs="cart.add.collection">
Agregar {{cart_icon}}
</button>
{% endif %}
{%endif%}
</div>
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
* Por compras desde {{product.discount_cant | round}} unidades
{% endif %}
</small>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{%endif %}Carro > relacionados
{% assign addToCart = true %}
{% assign show_hover_image = true %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "form-A"%}
{% assign cart_icon = '<svg class="icon__svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18,6h-2c0-2.21-1.79-4-4-4S8,3.79,8,6H6C4.9,6,4,6.9,4,8v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8C20,6.9,19.1,6,18,6z M12,4c1.1,0,2,0.9,2,2h-4C10,4.9,10.9,4,12,4z M18,20H6V8h2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V8h4v2c0,0.55,0.45,1,1,1s1-0.45,1-1V8 h2V20z"></path></svg>' %}
{% capture option_slider %}
"dots":false,
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 1,
"slidesToScroll":1,
"mobileFirst":true,
"responsive": [
{
"breakpoint": 280,
"settings": { "slidesToShow": 2, "slidesToScroll":2 }
},
{
"breakpoint": 576,
"settings": { "slidesToShow": 2, "slidesToScroll":2 }
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 3, "slidesToScroll":3, "dots":true }
},
{
"breakpoint": 992,
"settings": { "slidesToShow": 4, "slidesToScroll":4, "dots":true }
},
{
"breakpoint": 1200,
"settings": { "slidesToShow": 5, "slidesToScroll":5, "dots":true }
}
]
{% endcapture %}
{% capture style %}
--slider-margin:1rem;
--cols-xl:5;
--cols-lg:4;
--cols-md:3;
--cols-sm:2;
--slick-initialized-area: "left slick-list right" "dots dots dots";
--slider-prev-arrow-align: end;
--slider-next-arrow-align: start;
{% endcapture %}
{% if collection.size > 0 %}
<h2 class="bs-collection__title bs-title">También Podría Interesarte</h2>
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines }} }' class="bs-collection grid grid-slider" style='{{style}}'>
{% for product in collection %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %}" data-bs="product" data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice-tag">{{ product.notice }}</div>
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<h3 class="bs-collection__product-title">{{product.title}}</h3>
{% if product.brand.name.size > 0 %}
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
{% endif %}
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
<div class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
{{ product.final_price | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</div>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
<small class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-primary" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}" data-bs="cart.add.collection">
Agregar {{cart_icon}}
</button>
{% endif %}
{%endif%}
</div>
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
* Por compras desde {{product.discount_cant | round}} unidades
{% endif %}
</small>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{%endif %}/* ppum línea 2 */
.bs-collection__ppum-line {
display: block;
width: 100%;
min-height: 1rem;
font-size: 0.68rem;
color: #999;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.01em;
text-align: center;
order: 3;
}
.bs-collection__ppum {
font-size: 0.68rem;
color: #999;
font-weight: 400;
}
.bs-collection__ppum + .bs-collection__ppum,
del.bs-collection__ppum + .bs-collection__ppum,
.bs-collection__ppum + del.bs-collection__ppum {
margin-left: 4px;
}Actualizar los siguientes 8 componentes reemplazando el bloque de precios con la versión que incluye ppum.
| Componente | Estado |
|---|---|
| Inicio > colección con banner 1 | Requiere actualización |
| Inicio > colección con banner 2 | Requiere actualización |
| Inicio > slider colección con banner 1 | Requiere actualización |
| Inicio > slider colección con banner 2 | Requiere actualización |
| Colección | Requiere actualización |
| Carro > relacionados | Requiere actualización |
| Modal > productos relacionados slider | Requiere actualización |
| Producto > accesorios o relacionados slider | Requiere actualización |
Inicio > colección con banner 1
{% if collection.size > 0 %}
{% assign showBanner = true %}
{% assign cant_producto_movil = "6" %}
{% assign cant_producto_escritorio = "6" %}
{% assign addToCart = true %}
{% assign show_hover_image = true %}
{% assign discount_format = "template"%}
<style>
.bs-collection__with-banner{
--slider-margin:1rem;
--cols-xl:5;
--cols-lg:4;
--cols-md:3;
--cols-sm:2;
--cols:2;
}
@media (max-width: 576px) {
.bs-collection.banner_1.grid .item:nth-child(n + {{ cant_producto_movil | plus: 1 }}) {
display: none;
}
}
@media (min-width: 577px) {
.bs-collection.banner_1.grid .item:nth-child(n + {{ cant_producto_escritorio | plus: 1 }}) {
display: none;
}
}
</style>
{{'load collection' | get_component }}
<section class="bs-collection__with-banner">
{% if showBanner %}
<div class="row bs-collection__banner-section">
{% for product in collection %}
{% if forloop.first %}
<div class="col-lg-4 col-xl-3 d-none d-lg-flex bs-collection__product__special">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if product.discountRate > 0 %} has-discount {% endif %} {% if outStock %} outStock {%endif %} " data-bs="product" data-info="{{product.id}}">
<a class="col-6 pl-0 d-flex align-items-center" href="{{product.link}}" title="{{product.title}}" >
<div class="bs-img-square bs-collection__product__img">
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
fetchpriority="low"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<div class="col-6 align-items-center pl-0 bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
{% if product.discountRate > 0 %}
<span class="bs-discount {{discount_format}} mr-0">
<span>-{{ product.discountRate }}%</span>
</span>
{%endif%}
{% if product.brand.name.size > 0 %}
<div class="bs-collection__product-brand">{{product.brand.name}}</div>
{% endif %}
<h3 class="bs-collection__product-title">
{{product.title | strip_html | truncate: 60, '...'}}
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
</h3>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<div class="bs-collection__product-final-price">
{{product.final_price | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</div>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
<div class="bs-collection__addToCart col-12 py-0 mt-3 text-center">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-primary" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}" data-bs="cart.add.collection">
Agregar <span class="d-none d-sm-inline">al carro</span>
</button>
{% endif %}
{%endif%}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Compras desde {{product.discount_cant | round}} un.
{% endif %}
</small>
</div>
</div>
</div>
{% break %}
{% endif %}
{% endfor %}
<a class="col-lg" href="{{collection.link}}">
<picture>
<source srcset="{{ collection.image | image_url: 'L' }}" media="(min-width: 801px)">
<source srcset="{{ collection.image | image_url: 'M' }}" media="(min-width: 400px)">
<source srcset="{{ collection.image | image_url: 'S' }}" media="(min-width: 240px)">
<source srcset="{{ collection.image | image_url: 'T' }}" media="(min-width: 0px)">
<img class="bs-collection__banner"
loading="lazy"
alt="{{ collection.title }}"
src="{{ collection.image | image_url: 'S' }}"
onerror="this.onerror=null;this.src='{{ collection.image }}';">
</picture>
</a>
</div>
{% endif %}
<h2 class="bs-title-home"><a href="{{collection.link}}">{{title | downcase }}</a></h2>
<div class="bs-collection__with-banner bs-collection banner_1 grid">
{% for product in collection | limit: 10 %}
<div class="item {% if forloop.first and showBanner %} d-lg-none {% endif %}">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} {% if product.discountRate > 0 %} has-discount {%endif %}" data-bs="product" data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
fetchpriority="low"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<div class="bs-collection__product-brand">{{product.brand.name}}</div>
<h3 class="bs-collection__product-title">
{{product.title | strip_html | truncate: 60, '...'}}
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
</h3>
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<div class="bs-collection__product-final-price">
{{product.final_price | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</div>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Compras desde {{product.discount_cant | round}} un.
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-primary" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}" data-bs="cart.add.collection">
Agregar <span class="d-none d-lg-inline">al carro</span>
</button>
{% endif %}
{%endif%}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="bs-collection__btn-group">
<a class="btn btn-secondary" href="{{collection.link}}" title="Ir a {{collection.title}}">
Ir a la colección
</a>
</div>
</section>
{% endif %}Inicio > colección con banner 2
{% if collection.size > 0 %}
{% assign showBanner = true %}
{% assign cant_producto_movil = "6" %}
{% assign cant_producto_escritorio = "10" %}
{% assign addToCart = true %}
{% assign show_hover_image = true %}
{% assign discount_format = "template"%}
<style>
#collection-{{collection.title | replace: " ","_"}}{
--slider-margin:1rem;
--cols-xl:5;
--cols-lg:4;
--cols-md:3;
--cols-sm:2;
--cols:2;
}
@media (max-width: 576px) {
.bs-collection.banner_2.grid .item:nth-child(n + {{ cant_producto_movil | plus: 1 }}) {
display: none;
}
}
@media (min-width: 577px) {
.bs-collection.banner_2.grid .item:nth-child(n + {{ cant_producto_escritorio | plus: 1 }}) {
display: none;
}
}
</style>
{{'load collection' | get_component }}
<section class="bs-collection__with-banner">
{% if showBanner %}
<div class="row bs-collection__banner-section">
<a class="col-lg" href="{{collection.link}}">
<picture>
<source srcset="{{ collection.image | image_url: 'X' }}" media="(min-width: 1201px)">
<source srcset="{{ collection.image | image_url: 'L' }}" media="(min-width: 801px)">
<source srcset="{{ collection.image | image_url: 'M' }}" media="(min-width: 400px)">
<source srcset="{{ collection.image | image_url: 'S' }}" media="(min-width: 240px)">
<source srcset="{{ collection.image | image_url: 'T' }}" media="(min-width: 0px)">
<img class="bs-collection__banner"
loading="lazy"
alt="{{ collection.title }}"
src="{{ collection.image | image_url: 'S' }}"
onerror="this.onerror=null;this.src='{{ collection.image }}';">
</picture>
</a>
</div>
{% endif %}
<h2 class="bs-title-home"><a href="{{collection.link}}">{{title | downcase }}</a></h2>
<div id="collection-{{collection.title | replace: " ","_"}}" class="bs-collection banner_2 grid">
{% for product in collection | limit:10%}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} {% if product.discountRate > 0 %} has-discount {%endif %}" data-bs="product" data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
fetchpriority="low"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
<h3 class="bs-collection__product-title">
{{product.title | strip_html | truncate: 60, '...'}}
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
</h3>
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<div class="bs-collection__product-final-price">
{{product.final_price | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</div>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Compras desde {{product.discount_cant | round}} un.
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-primary" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}" data-bs="cart.add.collection">
Agregar <span class="d-none d-lg-inline">al carro</span>
</button>
{% endif %}
{%endif%}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="bs-collection__btn-group">
<a class="btn btn-secondary" href="{{collection.link}}" title="Ir a {{collection.title}}">
Ir a la colección
</a>
</div>
</section>
{% endif %}Inicio > slider colección con banner 1
{% if collection.size > 0 %}
{% assign showBanner = true %}
{% assign addToCart = true %}
{% assign show_hover_image = true %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "template"%}
{% capture option_slider %}
"dots":true,
"infinite": true,
"arrows": false,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 2,
"slidesToScroll":2,
"mobileFirst":true,
"responsive": [
{
"breakpoint": 576,
"settings": { "slidesToShow": 2, "slidesToScroll":2 }
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 3, "slidesToScroll":3 }
},
{
"breakpoint": 992,
"settings": { "slidesToShow": 4, "slidesToScroll":4 }
},
{
"breakpoint": 1200,
"settings": { "slidesToShow": 5, "slidesToScroll":5 }
}
]
{% endcapture %}
<style>
.bs-collection__with-banner{
--slider-margin:1rem;
--cols-xl:5;
--cols-lg:4;
--cols-md:3;
--cols-sm:2;
--cols:2;
--slick-initialized-area: "left slick-list right"
"dots dots dots";
}
</style>
{{'load collection' | get_component }}
<section class="bs-collection__with-banner">
{% if showBanner %}
<div class="row bs-collection__banner-section">
{% for product in collection %}
{% if forloop.first %}
<div class="col-lg-4 col-xl-3 d-none d-lg-flex bs-collection__product__special">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if product.discountRate > 0 %} has-discount {% endif %} {% if outStock %} outStock {%endif %}" data-bs="product" data-info="{{product.id}}">
<a class="col-6 pl-0 d-flex align-items-center" href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square bs-collection__product__img">
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<div class="col-6 align-items-center pl-0 bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
{% if product.discountRate > 0 %}
<span class="bs-discount {{discount_format}} mr-0">
<span>-{{ product.discountRate }}%</span>
</span>
{%endif%}
{% if product.brand.name.size > 0 %}
<div class="bs-collection__product-brand">{{product.brand.name}}</div>
{% endif %}
<h3 class="bs-collection__product-title">
{{product.title | strip_html | truncate: 60, '...'}}
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
</h3>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<div class="bs-collection__product-final-price">
{{product.final_price | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</div>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
</div>
<div class="bs-collection__addToCart col-12 py-0 mt-3 text-center">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-primary" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}" data-bs="cart.add.collection">
Agregar <span class="d-none d-sm-inline">al carro</span>
</button>
{% endif %}
{%endif%}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Compras desde {{product.discount_cant | round}} un.
{% endif %}
</small>
</div>
</div>
</div>
{% break %}
{% endif %}
{% endfor %}
<a class="col-lg" href="{{collection.link}}">
<picture>
<source srcset="{{ collection.image | image_url: 'L' }}" media="(min-width: 801px)">
<source srcset="{{ collection.image | image_url: 'M' }}" media="(min-width: 400px)">
<source srcset="{{ collection.image | image_url: 'S' }}" media="(min-width: 240px)">
<source srcset="{{ collection.image | image_url: 'T' }}" media="(min-width: 0px)">
<img class="bs-collection__banner"
loading="lazy"
alt="{{ collection.title }}"
src="{{ collection.image | image_url: 'S' }}"
onerror="this.onerror=null;this.src='{{ collection.image }}';">
</picture>
</a>
</div>
{% endif %}
<h2 class="bs-title-home"><a href="{{collection.link}}">{{title | downcase }}</a></h2>
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines }} }' class="bs-collection grid grid-slider">
{% for product in collection %}
<div class="item {% if forloop.first and showBanner %} d-lg-none {% endif %}">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} {% if product.discountRate > 0 %} has-discount {%endif %}" data-bs="product" data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<div class="bs-collection__product-brand">{{product.brand.name}}</div>
<h3 class="bs-collection__product-title">
{{product.title | strip_html | truncate: 60, '...'}}
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
</h3>
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<div class="bs-collection__product-final-price">
{{product.final_price | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</div>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Compras desde {{product.discount_cant | round}} un.
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-primary" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}" data-bs="cart.add.collection">
Agregar <span class="d-none d-lg-inline">al carro</span>
</button>
{% endif %}
{%endif%}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="bs-collection__btn-group">
<a class="btn btn-secondary" href="{{collection.link}}" title="Ir a {{collection.title}}">
Ir a la colección
</a>
</div>
</section>
{% endif %}Inicio > slider colección con banner 2
{% if collection.size > 0 %}
{% assign showBanner = true %}
{% assign addToCart = true %}
{% assign show_hover_image = true %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "template"%}
{% capture option_slider %}
"dots":true,
"infinite": true,
"arrows": false,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 2,
"slidesToScroll":2,
"mobileFirst":true,
"responsive": [
{
"breakpoint": 576,
"settings": { "slidesToShow": 2, "slidesToScroll":2 }
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 3, "slidesToScroll":3 }
},
{
"breakpoint": 992,
"settings": "unslick"
},
{
"breakpoint": 1200,
"settings": "unslick"
}
]
{% endcapture %}
<style>
#collection-{{collection.title | replace: " ","_"}}{
--slider-margin:1rem;
--cols-xl:5;
--cols-lg:4;
--cols-md:3;
--cols-sm:2;
--cols:2;
--slick-initialized-area: "left slick-list right"
"dots dots dots";
}
</style>
{{'load collection' | get_component }}
<section class="bs-collection__with-banner">
{% if showBanner %}
<div class="row bs-collection__banner-section">
<a class="col-lg" href="{{collection.link}}">
<picture>
<source srcset="{{ collection.image | image_url: 'L' }}" media="(min-width: 801px)">
<source srcset="{{ collection.image | image_url: 'M' }}" media="(min-width: 400px)">
<source srcset="{{ collection.image | image_url: 'S' }}" media="(min-width: 240px)">
<source srcset="{{ collection.image | image_url: 'T' }}" media="(min-width: 0px)">
<img class="bs-collection__banner"
loading="lazy"
alt="{{ collection.title }}"
src="{{ collection.image | image_url: 'S' }}"
onerror="this.onerror=null;this.src='{{ collection.image }}';">
</picture>
</a>
</div>
{% endif %}
<h2 class="bs-title-home"><a href="{{collection.link}}">{{title | downcase }}</a></h2>
<div id="collection-{{collection.title | replace: " ","_"}}" data-bs='slider' data-info='{ {{option_slider | strip_newlines }} }' class="bs-collection unslick-992 grid grid-slider">
{% for product in collection | limit: 10 %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} {% if product.discountRate > 0 %} has-discount {%endif %}" data-bs="product" data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
<h3 class="bs-collection__product-title">
{{product.title | strip_html | truncate: 60, '...'}}
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
</h3>
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<div class="bs-collection__product-final-price">
{{product.final_price | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</div>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Compras desde {{product.discount_cant | round}} un.
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-primary" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}" data-bs="cart.add.collection">
Agregar <span class="d-none d-lg-inline">al carro</span>
</button>
{% endif %}
{%endif%}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="bs-collection__btn-group">
<a class="btn btn-secondary" href="{{collection.link}}" title="Ir a {{collection.title}}">
Ir a la colección
</a>
</div>
</section>
{% endif %}Colección
{% assign discount_format = "template"%}
{% assign show_hover_image = true %}
{% assign popup_ultima_compra = false %}
{% assign addToCart = true %}
{{'load collection' | get_component }}
<div class="bs-collection grid">
{% for product in collection %}
<section class="grid__item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} {% if product.discountRate > 0 %} has-discount {%endif %}" data-bs="product"
data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
<h3 class="bs-collection__product-title">
{{product.title | strip_html | truncate: 60, '...'}}
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
</h3>
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<div class="bs-collection__product-final-price">
{{product.final_price | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</div>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Compras desde {{product.discount_cant | round}} un.
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-primary" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}" data-bs="cart.add.collection">
Agregar <span class="d-none d-lg-inline">al carro</span>
</button>
{% endif %}
{%endif%}
</div>
</div>
</div>
</div>
</section>
{% endfor %}
</div>
{%if popup_ultima_compra%}
{{'Pop up ultima compra' | get_component }}
{%endif%}Carro > relacionados
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "template" %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% capture option_slider %}
"lazyLoad": "ondemand",
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 1,
"mobileFirst":true,
"responsive": [
{
"breakpoint": 1200,
"settings": { "slidesToShow": 5 }
},{
"breakpoint": 992,
"settings": { "slidesToShow": 4 }
},{
"breakpoint": 768,
"settings": { "slidesToShow": 3 }
},{
"breakpoint": 576,
"settings": { "slidesToShow": 2 }
}
]
{% endcapture %}
{% capture style %}
--slider-margin:1rem;
--cols:1;
--cols-sm:2;
--cols-md:3;
--cols-lg:4;
--cols-xl:5;
{% endcapture %}
{% if collection.size > 0 %}
<h3 class="bs-product__section-title mt-5">También Podría Interesarte</h3>
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines | replace: ' ', ''}} }'
class="bs-product-related grid grid-slider" style="{{style}}">
{% for product in collection %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} " data-bs="product"
data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
<h3 class="bs-collection__product-title">
{{product.title | strip_html | truncate: 60, '...'}}
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
</h3>
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<div class="bs-collection__product-final-price">
{{product.final_price | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</div>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Compras desde {{product.discount_cant | round}} un.
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-primary" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}" data-bs="cart.add.collection">
Agregar <span class="d-none d-lg-inline">al carro</span>
</button>
{% endif %}
{%endif%}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{%endif %}Modal > productos relacionados slider
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "template" %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% capture option_slider %}
"lazyLoad": "ondemand",
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 1,
"mobileFirst":true,
"responsive": [
{
"breakpoint": 1200,
"settings": { "slidesToShow": 4 }
},{
"breakpoint": 992,
"settings": { "slidesToShow": 4 }
},{
"breakpoint": 768,
"settings": { "slidesToShow": 3 }
},{
"breakpoint": 576,
"settings": { "slidesToShow": 2 }
}
]
{% endcapture %}
{% capture style %}
--slider-margin:1rem;
--cols:1;
--cols-sm:2;
--cols-md:3;
--cols-lg:4;
--cols-xl:4;
{% endcapture %}
{% if collection.size > 0 %}
<h3 class="bs-product__section-title mt-5">También Podría Interesarte</h3>
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines | replace: ' ', ''}} }'
class="bs-product-related grid grid-slider" style="{{style}}">
{% for product in collection %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} " data-bs="product"
data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
<h3 class="bs-collection__product-title">
{{product.title | strip_html | truncate: 60, '...'}}
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
</h3>
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<div class="bs-collection__product-final-price">
{{product.final_price | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</div>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Compras desde {{product.discount_cant | round}} un.
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-primary" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}" data-bs="cart.add.collection">
Agregar <span class="d-none d-lg-inline">al carro</span>
</button>
{% endif %}
{%endif%}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{%endif %}Producto > accesorios o relacionados slider
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "template" %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% capture option_slider %}
"lazyLoad": "ondemand",
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 1,
"mobileFirst":true,
"responsive": [
{
"breakpoint": 1200,
"settings": { "slidesToShow": 5 }
},{
"breakpoint": 992,
"settings": { "slidesToShow": 4 }
},{
"breakpoint": 768,
"settings": { "slidesToShow": 3 }
},{
"breakpoint": 576,
"settings": { "slidesToShow": 2 }
}
]
{% endcapture %}
{% capture style %}
--slider-margin:1rem;
--cols:1;
--cols-sm:2;
--cols-md:3;
--cols-lg:4;
--cols-xl:5;
{% endcapture %}
{% if collection.size > 0 %}
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines | replace: ' ', ''}} }'
class="bs-product-related grid grid-slider" style="{{style}}">
{% for product in collection %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} " data-bs="product"
data-info="{{product.id}}">
<a href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square bs-collection__product__img">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
</div>
</a>
<a class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<span class="bs-collection__product-brand">{{product.brand.name}}</span>
<h3 class="bs-collection__product-title">
{{product.title | strip_html | truncate: 60, '...'}}
{% if product.notice %}
<div class="bs-collection__product-notice">
{{ product.notice | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
</h3>
</a>
<div class="bs-collection__price-grid">
<div class="bs-collection__product-price">
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
{% if product.ppumName and product.ppumValue > 0 and product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% endif %}
{% endif %}
<div class="bs-collection__product-final-price">
{{product.final_price | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</div>
{% if product.ppumName and product.ppumValue > 0 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
{% endif %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Compras desde {{product.discount_cant | round}} un.
{% endif %}
</small>
<div class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<button class="btn btn-primary" disabled>Agotado</button>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}" data-bs="cart.add.collection">
Agregar <span class="d-none d-lg-inline">al carro</span>
</button>
{% endif %}
{%endif%}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{%endif %}/* Estilos precio por unidad de medida */
.bs-collection__ppum {
display: block;
font-size: 0.68rem;
color: #999;
font-weight: 400;
line-height: 1.2;
margin-top: 4px;
margin-bottom: 1px;
letter-spacing: 0.01em;
}Actualizar los siguientes 8 componentes. Esta plantilla utiliza una estructura avanzada con .bs-collection__ppum-line organizada en 3 líneas: condición de descuento, precio final y ppum.
| Componente | Estado |
|---|---|
| Inicio > colección | Requiere actualización |
| Inicio > colección especial 3 | Requiere actualización |
| Inicio > colección slider 1 | Requiere actualización |
| Inicio > colección slider 2 | Requiere actualización |
| Colección | Requiere actualización |
| Carro > relacionados | Requiere actualización |
| Modal > productos relacionados slider | Requiere actualización |
| Producto > accesorios o relacionados slider | Requiere actualización |
Inicio > colección
{% if collection.size > 0 %}
{% assign cant_producto_mostrar = "10" %}
{% assign addToCart = true %}
{% assign show_hover_image = true %}
{% assign text_dest_img = true %}
{% assign text_dest = false %}
{% assign discount_format = "template" %}
{% assign icon_bag = "fa-shopping-basket" %}
{% capture style %}
--cols-xl: 5;
--cols-lg: 4;
--cols-md: 3;
--cols-sm: 2;
--cols: 2;
{% endcapture %}
{{ 'load collection' | get_component }}
<h2 class="bs-collection__title bs-title-decoration">
<a href="{{ collection.link }}">{{ title | capitalize }}</a>
</h2>
<div class="bs-collection grid" style="{{ style }}">
{% for product in collection limit: cant_producto_mostrar %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {% endif %} {% if product.discountRate > 0 %} has-discount {% endif %}" data-bs="product" data-info="{{ product.id }}">
<a class="bs-collection__product__img" href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
{% if text_dest_img %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice_tag">{{ product.notice }}</div>
{% endif %}
{% endif %}
</div>
</a>
<section class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-collection__product-brand">{{ product.brand.name }}</div>
<h3 class="bs-collection__product-title">
<a href="{{ product.link }}" title="{{ product.title }}">{{ product.title }}</a>
</h3>
{% if text_dest %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...' }}
</div>
{% endif %}
{% endif %}
</section>
<section class="bs-collection__product-price">
{% if product.finalPrice > 0 %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Dscto. desde {{ product.discount_cant | round }} un.
{% endif %}
</small>
<span class="bs-collection__product-final-price">
{{ product.finalPrice | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</span>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
<small class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</small>
{% endif %}
</section>
<section class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<a class="btn btn-secondary" href="{{ product.link }}" title="ver producto">
<i class="far fa-eye"></i>
<span class="ml-1 just-hover">Ver producto</span>
</a>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}" data-bs="cart.add.collection">
<i class="fas {{ icon_bag }}"></i>
<span class="ml-1 just-hover">Agregar</span>
</button>
{% endif %}
{% endif %}
</section>
</div>
</div>
{% endfor %}
</div>
<div class="text-center pb-5 pt-5">
<a class="btn btn-primary btn-collection-show" href="{{ collection.link }}"
title="Ver todos los productos de {{ title }}"
aria-label="Ver todos los productos de {{ title }}">
Ver todos los productos
</a>
</div>
{% endif %}Inicio > colección especial 3
{% if collection.size > 0 %}
{% assign addToCart = true %}
{% assign discount_format = "template"%}
{% assign icon_bag = "fa-shopping-basket" %}
{% assign background-blur = 15 %}
{{'load collection' | get_component }}
<section class="row bs-special-collection">
<div class="col-lg-4 order-lg-2 bs-collection__info">
<div class="bs-collection__decoration">
<h2 class="bs-collection__title"><a href="{{collection.link}}">{{ title | capitalize }}</a></h2>
{% if collection.description.size > 0 %}
<div class="bs-collection__description" {% if collection.description.size > 260 %} title="{{collection.description}}"{% endif %} style="text-decoration:none">
{{collection.description | truncate: 260}}
</div>
{% endif %}
</div>
</div>
<div class="col-lg order-lg-1 bs-special-collection__product-group">
{% for product in collection | limit:3 %}
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product__img bs-img-square product-{{forloop.index}}"
href="{{product.link}}"
title="{{product.title}}"
data-bs="product"
data-info="{{product.id}}">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<a href="{{product.link}}">
<picture
{% if background-blur > 0 %}
class='image-blur'
style="
--background-blur-image: url('{{ product.default_image | image_url: 'T' }}');
--background-blur: {{ background-blur | append: 'px'}}"
{% endif %}
>
{% if forloop.first %}
<source {{ product.default_image | source_tag_attributes: 'L', media: false }} media="(min-width:400px)">
<source {{ product.default_image | source_tag_attributes: 'M', media: false }} media="(min-width:240px)">
{% else %}
<source {{ product.default_image | source_tag_attributes: 'M', media: false }} media="(min-width:800px)">
<source {{ product.default_image | source_tag_attributes: 'S', media: false }} media="(min-width:400px)">
<source {{ product.default_image | source_tag_attributes: 'M', media: false }} media="(min-width:0px)">
{% endif %}
<img alt="{{ product.title }}"
style="--collection-decoration-bg: url({{ product.default_image | img_tag_attributes 'S' }})"
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes 'S' }}
onerror="this.onerror=null;this.src='{{product.default_image}}';"
{%else%}
{{ site.logo | img_tag_attributes 'L' }}
{%endif%}
loading="lazy">
</picture>
</a>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
{% if addToCart %}
<section class="bs-collection__addToCart">
{% if outStock %}
<a class="btn btn-secondary" href="{{product.link}}" title="ver producto">
<i class="far fa-eye ml-2"></i>
<span class="just-hover">Ver producto</span>
</a>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}" data-bs="cart.add.collection">
<i class="fas {{icon_bag}}"></i> <span class="just-hover">Agregar</span>
</button>
{% endif %}
</section>
{%endif%}
</div>
<a class="bs-collection__product-info product-{{forloop.index}}" href="{{product.link}}">
<h3 class="bs-collection__product-title">{{product.title}}</h3>
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
</a>
<div class="bs-collection__product-price product-{{forloop.index}} {% if product.discountRate > 0 %} has-discount {%endif %}">
<small class="bs-collection__discount-condition mb-1">
{% if product.discount_cant > 1 %}
*Dscto. desde {{product.discount_cant | round}} un.
{% endif %}
</small>
<span class="bs-collection__product-final-price">
{{product.final_price | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</span>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
<small class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</small>
</div>
{% endfor %}
</div>
</section>
<style>
.image-blur::before,
.image-blur::after{
display:block;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:-1;
content:"";
}
.image-blur::before{
z-index:-1;
background-image: var(--background-blur-image);
background-size:cover;
}
.image-blur::after{
backdrop-filter: blur(var(--background-blur, 10px));
background:rgba(0,0,0,0);
}
</style>
{% endif %}Inicio > colección slider 1
{% if collection.size > 0 %}
{% assign showBanner = true %}
{% assign addToCart = true %}
{% assign show_hover_image = true %}
{% assign text_dest_img = true %}
{% assign text_dest = false %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "template"%}
{% assign icon_bag = "fa-shopping-basket" %}
{% capture option_slider %}
"dots":false,
"mobileFirst":true,
"arrows": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 1,
"slidesToScroll":1,
"centerMode": true,
"infinite": true,
"responsive": [
{
"breakpoint": 576,
"settings": { "slidesToShow": 2, "slidesToScroll":2 }
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 3, "slidesToScroll":3 }
},
{
"breakpoint": 992,
"settings": { "slidesToShow": 3, "slidesToScroll":3 }
},
{
"breakpoint": 1200,
"settings": { "slidesToShow": 3, "slidesToScroll":3 }
}
]
{% endcapture %}
{% capture style %}
--cols-xl:3;
--cols-lg:3;
--cols-md:3;
--cols-sm:2;
--cols:1;
{% endcapture %}
{{'load collection' | get_component }}
<section class="row py-3">
<div class="col-lg-3 bs-collection__info text-center text-lg-left">
<h2 class="bs-collection__title"><a href="{{collection.link}}">{{ title | capitalize }}</a></h2>
{% if collection.description.size > 0 %}
<div class="bs-collection__description" {% if collection.description.size > 260 %} title="{{collection.description}}"{% endif %} style="text-decoration:none">
{{collection.description | truncate: 260}}
</div>
{% endif %}
</div>
<div class="col-lg">
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines }} }' class="bs-collection grid grid-slider grid-slider__arrow-over" style="{{style}}">
{% for product in collection %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} {% if product.discountRate > 0 %} has-discount {%endif %}" data-bs="product" data-info="{{product.id}}">
<a class="bs-collection__product__img" href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
{% if text_dest_img %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice_tag">{{ product.notice }}</div>
{% endif %}
{% endif %}
</div>
</a>
<section class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<div class="bs-collection__product-brand">{{product.brand.name}}</div>
<h3 class="bs-collection__product-title">
<a href="{{product.link}}" title="{{product.title}}">{{product.title}}</a>
</h3>
{% if text_dest %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
{% endif %}
</section>
<section class="bs-collection__product-price">
{% if product.finalPrice > 0 %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Dscto. desde {{ product.discount_cant | round }} un.
{% endif %}
</small>
<span class="bs-collection__product-final-price">
{{product.finalPrice | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</span>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
<small class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</small>
{% endif %}
</section>
<section class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<a class="btn btn-secondary" href="{{product.link}}" title="ver producto">
<i class="far fa-eye"></i>
<span class="ml-1 just-hover">Ver producto</span>
</a>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}" data-bs="cart.add.collection">
<i class="fas {{icon_bag}}"></i>
<span class="ml-1 just-hover">Agregar</span>
</button>
{% endif %}
{%endif%}
</section>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
{% endif %}Inicio > colección slider 2
{% if collection.size > 0 %}
{% assign showBanner = true %}
{% assign addToCart = true %}
{% assign text_dest_img = true %}
{% assign text_dest = false %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "template" %}
{% assign icon_bag = "fa-shopping-basket" %}
{% capture option_slider %}
"dots": false,
"mobileFirst": true,
"arrows": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 2,
"slidesToScroll": 2,
"infinite": true,
"responsive": [
{
"breakpoint": 576,
"settings": { "slidesToShow": 3, "slidesToScroll": 3 }
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 3, "slidesToScroll": 3 }
},
{
"breakpoint": 992,
"settings": { "slidesToShow": 4, "slidesToScroll": 4 }
},
{
"breakpoint": 1200,
"settings": { "slidesToShow": 5, "slidesToScroll": 5 }
}
]
{% endcapture %}
{% capture style %}
--slider-arrow-border-radius: .25rem;
--cols-xl: 5;
--cols-lg: 4;
--cols-md: 3;
--cols-sm: 2;
--cols: 1;
{% endcapture %}
{{ 'load collection' | get_component }}
<h2 class="bs-collection__title bs-title-decoration">
<a href="{{ collection.link }}">{{ title | capitalize }}</a>
</h2>
<div data-bs='slider' data-info='{ {{ option_slider | strip_newlines }} }' class="bs-collection grid grid-slider" style="{{ style }}">
{% for product in collection %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {% endif %} {% if product.discountRate > 0 %} has-discount {% endif %}" data-bs="product" data-info="{{ product.id }}">
<a class="bs-collection__product__img" href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-img-square">
{% if product.discountRate > 0 %}
<div class="bs-discount {{ discount_format }}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
{% if text_dest_img %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice_tag">{{ product.notice }}</div>
{% endif %}
{% endif %}
</div>
</a>
<section class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
<div class="bs-collection__product-brand">{{ product.brand.name }}</div>
<h3 class="bs-collection__product-title">
<a href="{{ product.link }}" title="{{ product.title }}">{{ product.title }}</a>
</h3>
{% if text_dest %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...' }}
</div>
{% endif %}
{% endif %}
</section>
<section class="bs-collection__product-price">
{% if product.finalPrice > 0 %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Dscto. desde {{ product.discount_cant | round }} un.
{% endif %}
</small>
<span class="bs-collection__product-final-price">
{{ product.finalPrice | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</span>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
<small class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</small>
{% endif %}
</section>
<section class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<a class="btn btn-secondary" href="{{ product.link }}" title="ver producto">
<i class="far fa-eye"></i>
<span class="ml-1 just-hover">Ver producto</span>
</a>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}" data-bs="cart.add.collection">
<i class="fas {{ icon_bag }}"></i>
<span class="ml-1 just-hover">Agregar</span>
</button>
{% endif %}
{% endif %}
</section>
</div>
</div>
{% endfor %}
</div>
{% endif %}Colección
{% assign addToCart = true %}
{% assign text_dest_img = true %}
{% assign text_dest = false %}
{% assign show_hover_image = true %}
{% assign popup_ultima_compra = false %}
{% assign discount_format = "template" %}
{% assign icon_bag = "fa-shopping-basket" %}
{{ 'load collection' | get_component }}
<div class="bs-collection grid">
{% for product in collection %}
<section class="grid__item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
{% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} {% if product.discountRate > 0 %} has-discount {%endif %}" data-bs="product" data-info="{{product.id}}">
<a class="bs-collection__product__img" href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{% endif %}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
{% if text_dest_img %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice_tag">{{ product.notice }}</div>
{% endif %}
{% endif %}
</div>
</a>
<section class="bs-collection__product-info">
<div class="bs-collection__product-brand">{{ product.brand.name }}</div>
<h3 class="bs-collection__product-title">
<a href="{{ product.link }}" title="{{ product.title }}">{{ product.title }}</a>
</h3>
{% if text_dest %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...' }}
</div>
{% endif %}
{% endif %}
</section>
<section class="bs-collection__product-price">
{% if product.finalPrice > 0 %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Dscto. desde {{ product.discount_cant | round }} un.
{% endif %}
</small>
<span class="bs-collection__product-final-price">
{{ product.finalPrice | money_filter }}{% if product.discount_cant > 1 %}*{% endif %}
</span>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
<small class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</small>
{% endif %}
</section>
<section class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<a class="btn btn-secondary" href="{{ product.link }}" title="ver producto">
<i class="far fa-eye"></i>
<span class="ml-1 just-hover">Ver producto</span>
</a>
{% else %}
<button class="btn btn-primary {{ product.unlimitedStock }}" data-bs="cart.add.collection">
<i class="fas {{ icon_bag }}"></i>
<span class="ml-1 just-hover">Agregar</span>
</button>
{% endif %}
{% endif %}
</section>
</div>
</section>
{% endfor %}
</div>
{%if popup_ultima_compra%}
{{'Pop up ultima compra' | get_component }}
{%endif%}Carro > relacionados
{% assign addToCart = true %}
{% assign text_dest_img = true %}
{% assign text_dest = false %}
{% assign show_hover_image = true %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "template" %}
{% assign icon_bag = "fa-shopping-basket" %}
{% capture option_slider %}
"dots":false,
"mobileFirst":true,
"arrows": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 2,
"slidesToScroll":2,
"infinite": true,
"responsive": [
{
"breakpoint": 576,
"settings": { "slidesToShow": 2, "slidesToScroll":2 }
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 3, "slidesToScroll":3 }
},
{
"breakpoint": 992,
"settings": { "slidesToShow": 4, "slidesToScroll":4 }
},
{
"breakpoint": 1200,
"settings": { "slidesToShow": 4, "slidesToScroll":4 }
}
]
{% endcapture %}
{% capture style %}
--slider-arrow-border-radius: .25rem;
--cols-xl:4;
--cols-lg:4;
--cols-md:3;
--cols-sm:2;
--cols:1;
{% endcapture %}
{% if collection.size > 0 %}
<h3 class="bs-collection__title bs-title-decoration">También podría interesarte</h3>
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines }} }'
class="bs-collection grid grid-slider " style="{{style}}">
{% for product in collection %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} {% if product.discountRate > 0 %} has-discount {%endif %}" data-bs="product" data-info="{{product.id}}">
<a class="bs-collection__product__img" href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
{% if text_dest_img %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice_tag">{{ product.notice }}</div>
{% endif %}
{% endif %}
</div>
</a>
<section class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<div class="bs-collection__product-brand">{{product.brand.name}}</div>
<h3 class="bs-collection__product-title">
<a href="{{product.link}}" title="{{product.title}}">{{product.title}}</a>
</h3>
{% if text_dest %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
{% endif %}
</section>
<section class="bs-collection__product-price">
{% if product.finalPrice > 0 %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Dscto. desde {{product.discount_cant | round}} un.
{% endif %}
</small>
<span class="bs-collection__product-final-price">
{{product.finalPrice | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</span>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
<small class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</small>
{% endif %}
</section>
<section class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<a class="btn btn-secondary" href="{{product.link}}" title="ver producto">
<i class="far fa-eye"></i>
<span class="ml-1 just-hover">Ver producto</span>
</a>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}" data-bs="cart.add.collection">
<i class="fas {{icon_bag}}"></i>
<span class="ml-1 just-hover">Agregar</span>
</button>
{% endif %}
{%endif%}
</section>
</div>
</div>
{% endfor %}
</div>
{%endif %}Modal > productos relacionados slider
{% assign loop = true %}
{% assign addToCart = true %}
{% assign text_dest_img = true %}
{% assign text_dest = false %}
{% assign show_hover_image = true %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "template" %}
{% assign icon_bag = "fa-shopping-basket" %}
{% capture option_slider %}
"dots":false,
"mobileFirst":true,
"arrows": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 2,
"slidesToScroll":2,
"infinite": true,
"responsive": [
{
"breakpoint": 576,
"settings": { "slidesToShow": 2, "slidesToScroll":2 }
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 3, "slidesToScroll":3 }
},
{
"breakpoint": 992,
"settings": { "slidesToShow": 4, "slidesToScroll":4 }
},
{
"breakpoint": 1200,
"settings": { "slidesToShow": 4, "slidesToScroll":4 }
}
]
{% endcapture %}
{% capture style %}
--slider-arrow-border-radius: .25rem;
--cols-xl:4;
--cols-lg:4;
--cols-md:3;
--cols-sm:2;
--cols:1;
{% endcapture %}
{% if collection.size > 0 %}
<h3 class="bs-collection__title bs-title-decoration">También podría interesarte</h3>
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines }} }'
class="bs-collection grid grid-slider" style="{{style}}">
{% for product in collection %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} {% if product.discountRate > 0 %} has-discount {%endif %}" data-bs="product" data-info="{{product.id}}">
<a class="bs-collection__product__img" href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
{% if text_dest_img %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice_tag">{{ product.notice }}</div>
{% endif %}
{% endif %}
</div>
</a>
<section class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<div class="bs-collection__product-brand">{{product.brand.name}}</div>
<h3 class="bs-collection__product-title">
<a href="{{product.link}}" title="{{product.title}}">{{product.title}}</a>
</h3>
{% if text_dest %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
{% endif %}
</section>
<section class="bs-collection__product-price">
{% if product.finalPrice > 0 %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Dscto. desde {{product.discount_cant | round}} un.
{% endif %}
</small>
<span class="bs-collection__product-final-price">
{{product.finalPrice | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</span>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
<small class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</small>
{% endif %}
</section>
<section class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<a class="btn btn-secondary" href="{{product.link}}" title="ver producto">
<i class="far fa-eye"></i>
<span class="ml-1 just-hover">Ver producto</span>
</a>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}"
data-bs="cart.add.collection"
{% if loop == false %} data-from-modal="true" {% endif %}>
<i class="fas {{icon_bag}}"></i>
<span class="ml-1 just-hover">Agregar</span>
</button>
{% endif %}
{%endif%}
</section>
</div>
</div>
{% endfor %}
</div>
{%endif %}Producto > accesorios o relacionados slider
{% assign addToCart = true %}
{% assign text_dest_img = true %}
{% assign text_dest = false %}
{% assign show_hover_image = true %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "template" %}
{% assign icon_bag = "fa-shopping-basket" %}
{% capture option_slider %}
"dots":false,
"mobileFirst":true,
"arrows": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 2,
"slidesToScroll":2,
"infinite": true,
"responsive": [
{
"breakpoint": 576,
"settings": { "slidesToShow": 2, "slidesToScroll":2 }
},
{
"breakpoint": 768,
"settings": { "slidesToShow": 3, "slidesToScroll":3 }
},
{
"breakpoint": 992,
"settings": { "slidesToShow": 4, "slidesToScroll":4 }
},
{
"breakpoint": 1200,
"settings": { "slidesToShow": 5, "slidesToScroll":5 }
}
]
{% endcapture %}
{% capture style %}
--slider-arrow-border-radius: .25rem;
--cols-xl:5;
--cols-lg:4;
--cols-md:3;
--cols-sm:2;
--cols:1;
{% endcapture %}
{% if collection.size > 0 %}
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines }} }'
class="bs-collection grid grid-slider" style="{{style}}">
{% for product in collection %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} {% if product.discountRate > 0 %} has-discount {%endif %}" data-bs="product" data-info="{{product.id}}">
<a class="bs-collection__product__img" href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
{% if text_dest_img %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice_tag">{{ product.notice }}</div>
{% endif %}
{% endif %}
</div>
</a>
<section class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<div class="bs-collection__product-brand">{{product.brand.name}}</div>
<h3 class="bs-collection__product-title">
<a href="{{product.link}}" title="{{product.title}}">{{product.title}}</a>
</h3>
{% if text_dest %}
{% if product.notice.size > 0 %}
<div class="bs-collection__product-notice">
{{ product.notice | capitalize | strip_html | truncate: 60, '...'}}
</div>
{% endif %}
{% endif %}
</section>
<section class="bs-collection__product-price">
{% if product.finalPrice > 0 %}
<small class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Dscto. desde {{product.discount_cant | round}} un.
{% endif %}
</small>
<span class="bs-collection__product-final-price">
{{product.finalPrice | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</span>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
<small class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</small>
{% endif %}
</section>
<section class="bs-collection__addToCart">
{% if addToCart %}
{% if outStock %}
<a class="btn btn-secondary" href="{{product.link}}" title="ver producto">
<i class="far fa-eye"></i>
<span class="ml-1 just-hover">Ver producto</span>
</a>
{% else %}
<button class="btn btn-primary {{product.unlimitedStock}}" data-bs="cart.add.collection">
<i class="fas {{icon_bag}}"></i>
<span class="ml-1 just-hover">Agregar</span>
</button>
{% endif %}
{%endif%}
</section>
</div>
</div>
{% endfor %}
</div>
{%endif %}/* Línea 2: ppum - siempre reserva espacio para mantener alineación */
.bs-collection__ppum-line {
display: block;
min-height: 1rem;
font-size: 0.68rem;
color: #999;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.01em;
}
/* Precio por unidad individual */
.bs-collection__ppum {
display: inline;
font-size: 0.68rem;
color: #999;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.01em;
}
/* Precio por unidad tachado */
del.bs-collection__ppum {
color: #bbb;
}Actualizar los siguientes 6 componentes. Esta plantilla usa una estructura de precios con .bs-collection__price-btn y .bs-collection__price-row que agrupa precio final y ppum en filas separadas.
| Componente | Estado |
|---|---|
| Inicio > colección con fondo | Requiere actualización |
| Inicio > slider colección con fondo | Requiere actualización |
| Colección | Requiere actualización |
| Carro > relacionados | Requiere actualización |
| Modal > productos relacionados slider | Requiere actualización |
| Producto > accesorios o relacionados slider | Requiere actualización |
Inicio > colección con fondo
{% if collection.size > 0 %}
{% unless is_lazy_collection %}
{{'load collection' | get_component }}
{% endunless %}
{% assign cant_producto_mostrar = "8" %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% assign discount_format = "template"%}
{% assign icon_bag = "fa-shopping-basket" %}
<style>
@media (max-width: 1201px) {
.bs-collection.fondo {
padding-left: 16px;
padding-right: 16px;
box-sizing: border-box;
}
}
</style>
{% capture style %}
--cols-xl:4;
--cols-lg:3;
--cols-md:3;
--cols-sm:2;
--cols:2;
--bs-collection-bg-m: url('{{ collection.image | image_url: "M" }}');
--bs-collection-bg-l: url('{{ collection.image | image_url: "L" }}');
--bs-collection-bg-x: url('{{ collection.image | image_url: "X" }}');
--bs-collection-bg-o: url('{{ collection.image | image_url: "O" }}');
{% endcapture %}
<section class="bs-collection-bg" style="{{style}}">
<picture class="bs-collection-bg__picture">
{% if collection.image.size > 0 %}
<source srcset="{{ collection.image | image_url: "O" }}" media="(min-width:1200px)">
<source srcset="{{ collection.image | image_url: "X" }}" media="(min-width:800px)">
<source srcset="{{ collection.image | image_url: "X" }}" media="(min-width:400px)">
<source srcset="{{ collection.image | image_url: "X" }}" media="(min-width:240px)">
<source srcset="{{ collection.image | image_url: "L" }}" media="(min-width:100px)">
<img class="bs-collection-bg__img imagen-gradient-top-down" loading="lazy" src="{{ collection.image | image_url: "T" }}" onerror="this.onerror=null;this.src='{{collection.image}}';">
{% else %}
<img class="bs-collection-bg__img" loading="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkMAYAADkANVKH3ScAAAAASUVORK5CYII=">
{% endif %}
</picture>
<div class="container bs-collection-bg__content">
<h2 class="bs-title bs-collection-bg__title bs-title-background">
<a href="{{link}}">{{ title | capitalize }}</a>
</h2>
<div class="bs-collection fondo grid" style="{{style}}">
{% for product in collection limit: cant_producto_mostrar %}
<section class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} {% if product.discountRate > 0 %} has-discount {%endif %}" data-bs="product" data-info="{{product.id}}">
<a class="bs-collection__product__img" href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
<div class="bs-collection__product-notice">{{product.notice | capitalize}}</div>
</div>
</a>
<section class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<div class="bs-collection__product-brand">{{product.brand.name | capitalize}}</div>
<h3 class="bs-collection__product-title">
<a href="{{product.link}}" title="{{product.title}}">{{product.title | capitalize}}</a>
</h3>
</section>
<div class="bs-collection__price-btn">
<section class="bs-collection__product-price">
{% if product.finalPrice > 0 %}
<div class="bs-collection__price-row">
<span class="bs-collection__product-final-price">
{{product.finalPrice | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</span>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
</div>
<div class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</div>
<div class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Dscto. desde {{product.discount_cant | round}} un.
{% endif %}
</div>
{% endif %}
</section>
{% if addToCart %}
{% unless outStock or product.finalPrice == 0 %}
<button title="agregar al carro"
class="btn btn-secondary btn-sm"
data-bs="cart.add.collection">
<i class="fas {{icon_bag}}"></i>
</button>
{% endunless %}
{%endif%}
</div>
</div>
</section>
{% endfor %}
</div>
</div>
</section>
<div class="text-center pb-5 pt-5">
<a class="btn btn-primary btn-collection-show" href="{{ collection.link }}"
title="Ver todos los productos de {{ title }}"
aria-label="Ver todos los productos de {{ title }}">
Ver todos los productos
</a>
</div>
{% endif %}Inicio > slider colección con fondo
{% if collection.size > 0 %}
{% unless is_lazy_collection %}
{{'load collection' | get_component }}
{% endunless %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign cant_producto_mostrar = "8" %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% assign discount_format = "template"%}
{% assign icon_bag = "fa-shopping-basket" %}
{% capture option_slider %}
"infinite": false,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 1.5,
"slidesToScroll": 1,
"mobileFirst": true,
"responsive": [
{
"breakpoint": 1200,
"settings": { "slidesToShow": 4 }
},{
"breakpoint": 992,
"settings": { "slidesToShow": 3.5 }
},{
"breakpoint": 768,
"settings": { "slidesToShow": 2.5 }
},{
"breakpoint": 576,
"settings": { "slidesToShow": 2.5 }
}
]
{% endcapture %}
{% capture style %}
--cols-xl:4;
--cols-lg:3;
--cols-md:3;
--cols-sm:2;
--cols:1;
--bs-collection-bg-m: url('{{ collection.image | image_url: "M" }}');
--bs-collection-bg-l: url('{{ collection.image | image_url: "L" }}');
--bs-collection-bg-x: url('{{ collection.image | image_url: "X" }}');
--bs-collection-bg-o: url('{{ collection.image | image_url: "O" }}');
{% endcapture %}
<section class="bs-collection-bg" style="{{style}}">
<picture class="bs-collection-bg__picture">
{% if collection.image.size > 0 %}
<source srcset="{{ collection.image | image_url: "O" }}" media="(min-width:1200px)">
<source srcset="{{ collection.image | image_url: "X" }}" media="(min-width:800px)">
<source srcset="{{ collection.image | image_url: "X" }}" media="(min-width:400px)">
<source srcset="{{ collection.image | image_url: "X" }}" media="(min-width:240px)">
<source srcset="{{ collection.image | image_url: "L" }}" media="(min-width:100px)">
<img class="bs-collection-bg__img imagen-gradient-top-down" loading="lazy" src="{{ collection.image | image_url: "T" }}" onerror="this.onerror=null;this.src='{{collection.image}}';">
{% else %}
<img class="bs-collection-bg__img" loading="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkMAYAADkANVKH3ScAAAAASUVORK5CYII=">
{% endif %}
</picture>
<div class="container bs-collection-bg__content">
<h2 class="bs-title bs-collection-bg__title bs-title-background">
<a href="{{link}}">{{ title | capitalize }}</a>
</h2>
<div data-bs='slider'
data-info='{ {{option_slider | strip_newlines | replace: ' ', ''}} }'
class="bs-collection grid grid-slider grid-slider__arrow-over"
style="{{style}}"
>
{% for product in collection limit: cant_producto_mostrar %}
<section class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} {% if product.discountRate > 0 %} has-discount {%endif %}" data-bs="product" data-info="{{product.id}}">
<a class="bs-collection__product__img" href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
<div class="bs-collection__product-notice">{{product.notice | capitalize}}</div>
</div>
</a>
<section class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<div class="bs-collection__product-brand">{{product.brand.name | capitalize}}</div>
<h3 class="bs-collection__product-title">
<a href="{{product.link}}" title="{{product.title}}">{{product.title | capitalize}}</a>
</h3>
</section>
<div class="bs-collection__price-btn">
<section class="bs-collection__product-price">
{% if product.finalPrice > 0 %}
<div class="bs-collection__price-row">
<span class="bs-collection__product-final-price">
{{product.finalPrice | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</span>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
</div>
<div class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</div>
<div class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Dscto. desde {{product.discount_cant | round}} un.
{% endif %}
</div>
{% endif %}
</section>
{% if addToCart %}
{% unless outStock or product.finalPrice == 0 %}
<button title="agregar al carro"
class="btn btn-secondary btn-sm"
data-bs="cart.add.collection">
<i class="fas {{icon_bag}}"></i>
</button>
{% endunless %}
{%endif%}
</div>
</div>
</section>
{% endfor %}
</div>
</div>
</section>
{% endif %}Colección
{% assign addToCart = true %}
{% assign show_hover_image = true %}
{% assign popup_ultima_compra = false %}
{% assign discount_format = "template"%}
{% assign icon_bag = "fa-shopping-basket" %}
{{'load collection' | get_component }}
<div class="bs-collection grid">
{% for product in collection %}
<section class="grid__item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} {% if product.discountRate > 0 %} has-discount {%endif %}" data-bs="product" data-info="{{product.id}}">
<a class="bs-collection__product__img" href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
<div class="bs-collection__product-notice">{{product.notice | capitalize}}</div>
</div>
</a>
<section class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<div class="bs-collection__product-brand">{{product.brand.name | capitalize}}</div>
<h3 class="bs-collection__product-title">
<a href="{{product.link}}" title="{{product.title}}">{{product.title | capitalize}}</a>
</h3>
</section>
<div class="bs-collection__price-btn">
<section class="bs-collection__product-price">
{% if product.finalPrice > 0 %}
<div class="bs-collection__price-row">
<span class="bs-collection__product-final-price">
{{product.finalPrice | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</span>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
</div>
<div class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</div>
<div class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Dscto. desde {{product.discount_cant | round}} un.
{% endif %}
</div>
{% endif %}
</section>
{% if addToCart %}
{% unless outStock or product.finalPrice == 0 %}
<button title="agregar al carro"
class="btn btn-secondary btn-sm"
data-bs="cart.add.collection">
<i class="fas {{icon_bag}}"></i>
</button>
{% endunless %}
{%endif%}
</div>
</div>
</section>
{% endfor %}
</div>
{%if popup_ultima_compra%}
{{'Pop up ultima compra' | get_component }}
{%endif%}Carro > relacionados
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "template" %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% assign icon_bag = "fa-shopping-basket" %}
{% capture option_slider %}
"infinite": false,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 1.5,
"slidesToScroll": 1,
"mobileFirst": true,
"responsive": [
{
"breakpoint": 1200,
"settings": { "slidesToShow": 4 }
},{
"breakpoint": 992,
"settings": { "slidesToShow": 3.5 }
},{
"breakpoint": 768,
"settings": { "slidesToShow": 2.5 }
},{
"breakpoint": 576,
"settings": { "slidesToShow": 2.5 }
}
]
{% endcapture %}
{% capture style %}
--cols-xl:4;
--cols-lg:3;
--cols-md:3;
--cols-sm:2;
--cols:1;
{% endcapture %}
{% if collection.size > 0 %}
<h2 class="bs-collection__title bs-title mt-3">También Podría Interesarte</h2>
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines }} }'
class="bs-collection grid grid-slider grid-slider__arrow-over mx-0 px-0" style="{{style}}">
{% for product in collection %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} {% if product.discountRate > 0 %} has-discount {%endif %}" data-bs="product" data-info="{{product.id}}">
<a class="bs-collection__product__img" href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
<div class="bs-collection__product-notice">{{product.notice | capitalize}}</div>
</div>
</a>
<section class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<div class="bs-collection__product-brand">{{product.brand.name | capitalize}}</div>
<h3 class="bs-collection__product-title">
<a href="{{product.link}}" title="{{product.title}}">{{product.title | capitalize}}</a>
</h3>
</section>
<div class="bs-collection__price-btn">
<section class="bs-collection__product-price">
{% if product.finalPrice > 0 %}
<div class="bs-collection__price-row">
<span class="bs-collection__product-final-price">
{{product.finalPrice | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</span>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
</div>
<div class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</div>
<div class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Dscto. desde {{product.discount_cant | round}} un.
{% endif %}
</div>
{% endif %}
</section>
{% if addToCart %}
{% unless outStock or product.finalPrice == 0 %}
<button title="agregar al carro"
class="btn btn-secondary btn-sm"
data-bs="cart.add.collection">
<i class="fas {{icon_bag}}"></i>
</button>
{% endunless %}
{%endif%}
</div>
</div>
</div>
{% endfor %}
</div>
{%endif %}Modal > productos relacionados slider
{% assign loop = false %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "template" %}
{% assign addToCart = true %}
{% assign show_hover_image = true %}
{% assign icon_bag = "fa-shopping-basket" %}
{% capture option_slider %}
"infinite": false,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 1.5,
"slidesToScroll": 1,
"mobileFirst": true,
"responsive": [
{
"breakpoint": 1200,
"settings": { "slidesToShow": 4 }
},{
"breakpoint": 992,
"settings": { "slidesToShow": 3.5 }
},{
"breakpoint": 768,
"settings": { "slidesToShow": 2.5 }
},{
"breakpoint": 576,
"settings": { "slidesToShow": 2.5 }
}
]
{% endcapture %}
{% capture style %}
--cols-xl:4;
--cols-lg:3;
--cols-md:3;
--cols-sm:2;
--cols:1;
{% endcapture %}
{% if collection.size > 0 %}
<h2 class="bs-collection__title bs-title mt-3">También Podría Interesarte</h2>
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines }} }'
class="bs-collection grid grid-slider grid-slider__arrow-over mx-0 px-0" style="{{style}}">
{% for product in collection %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} {% if product.discountRate > 0 %} has-discount {%endif %}" data-bs="product" data-info="{{product.id}}">
<a class="bs-collection__product__img" href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
<div class="bs-collection__product-notice">{{product.notice | capitalize}}</div>
</div>
</a>
<section class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<div class="bs-collection__product-brand">{{product.brand.name | capitalize}}</div>
<h3 class="bs-collection__product-title">
<a href="{{product.link}}" title="{{product.title}}">{{product.title | capitalize}}</a>
</h3>
</section>
<div class="bs-collection__price-btn">
<section class="bs-collection__product-price">
{% if product.finalPrice > 0 %}
<div class="bs-collection__price-row">
<span class="bs-collection__product-final-price">
{{product.finalPrice | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</span>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
</div>
<div class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</div>
<div class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Dscto. desde {{product.discount_cant | round}} un.
{% endif %}
</div>
{% endif %}
</section>
{% if addToCart %}
{% unless outStock or product.finalPrice == 0 %}
<button title="agregar al carro"
class="btn btn-secondary btn-sm"
data-bs="cart.add.collection"
{% if loop == false %} data-from-modal="true" {% endif %}>
<i class="fas {{icon_bag}}"></i>
</button>
{% endunless %}
{%endif%}
</div>
</div>
</div>
{% endfor %}
</div>
{%endif %}Producto > accesorios o relacionados slider
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = "template" %}
{% assign show_hover_image = true %}
{% assign addToCart = true %}
{% assign icon_bag = "fa-shopping-basket" %}
{% capture option_slider %}
"infinite": false,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 1.5,
"slidesToScroll": 1,
"mobileFirst": true,
"responsive": [
{
"breakpoint": 1200,
"settings": { "slidesToShow": 4 }
},{
"breakpoint": 992,
"settings": { "slidesToShow": 3.5 }
},{
"breakpoint": 768,
"settings": { "slidesToShow": 2.5 }
},{
"breakpoint": 576,
"settings": { "slidesToShow": 2.5 }
}
]
{% endcapture %}
{% capture style %}
--cols-xl:4;
--cols-lg:3;
--cols-md:3;
--cols-sm:2;
--cols:1;
{% endcapture %}
{% if collection.size > 0 %}
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines }} }'
class="bs-collection grid grid-slider grid-slider__arrow-over" style="{{style}}">
{% for product in collection %}
<div class="item">
{% assign outStock = false %}
{% if product.classification != 1 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %} {% assign outStock = true %} {% endif %}
{% endif %}
{% endif %}
<div class="bs-collection__product {% if outStock %} outStock {%endif %} {% if product.discountRate > 0 %} has-discount {%endif %}" data-bs="product" data-info="{{product.id}}">
<a class="bs-collection__product__img" href="{{product.link}}" title="{{product.title}}">
<div class="bs-img-square">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate }}%</span>
</div>
{%endif%}
<picture
{% if show_hover_image %}
{% if product.images %}
{% for img in product.images %}
{% if img.href != product.default_image %}
style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
>
<source {{ product.default_image | source_tag_attributes: 'X' }}>
<source {{ product.default_image | source_tag_attributes: 'L' }}>
<source {{ product.default_image | source_tag_attributes: 'M' }}>
<source {{ product.default_image | source_tag_attributes: 'S' }}>
<img
{% if product.default_image.size > 0 %}
{{ product.default_image | img_tag_attributes: 'S' }}
onerror="this.onerror=null;this.src='{{ product.default_image }}';"
{% else %}
{{ site.logo | img_tag_attributes: 'S' }}
{% endif %}
alt="{{ product.title }}"
loading="lazy"
>
{% if outStock %}
<div class="bs-collection__stock">Agotado</div>
{% endif %}
</picture>
<div class="bs-collection__product-notice">{{product.notice | capitalize}}</div>
</div>
</a>
<section class="bs-collection__product-info" href="{{product.link}}" title="{{product.title}}">
<div class="bs-collection__product-brand">{{product.brand.name | capitalize}}</div>
<h3 class="bs-collection__product-title">
<a href="{{product.link}}" title="{{product.title}}">{{product.title | capitalize}}</a>
</h3>
</section>
<div class="bs-collection__price-btn">
<section class="bs-collection__product-price">
{% if product.finalPrice > 0 %}
<div class="bs-collection__price-row">
<span class="bs-collection__product-final-price">
{{product.finalPrice | money_filter}}{% if product.discount_cant > 1 %}*{%endif%}
</span>
{% if product.discount_rate > 0 %}
{% if product.discount_cant > 1 %}
<span class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</span>
{% else %}
<del class="bs-collection__product-old-price">
{{ product.fpWithoutDiscount | money_filter }}
</del>
{% endif %}
{% endif %}
</div>
<div class="bs-collection__ppum-line">
{% if product.ppumName and product.ppumValue > 0 %}
{% if product.discount_rate > 0 and product.discount_cant <= 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<del class="bs-collection__ppum">{{ product.ppum }}</del>
{% elsif product.discount_rate > 0 and product.discount_cant > 1 %}
<span class="bs-collection__ppum">{{ product.ppumWithDiscount }}</span>
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% else %}
<span class="bs-collection__ppum">{{ product.ppum }}</span>
{% endif %}
{% endif %}
</div>
<div class="bs-collection__discount-condition">
{% if product.discount_cant > 1 %}
*Dscto. desde {{product.discount_cant | round}} un.
{% endif %}
</div>
{% endif %}
</section>
{% if addToCart %}
{% unless outStock or product.finalPrice == 0 %}
<button title="agregar al carro"
class="btn btn-secondary btn-sm"
data-bs="cart.add.collection">