Checkout Options
Customize your Checkout Process on Jumpseller.
Tips for Designers
On this page
Use this guide Responsibly: Other apps and theme elements may contain code that might interfere with yours. If you are not sure about the effects of this code contact a professional or our Support Center.
This is an informal library of common request sent to our support team for Theme customizations. All examples are based in the Simple theme but with some tweaking can be applied to all themes.
Add one label in the product block.
Users might want to add custom labels to product blocks, this code is based in the native Promotions label on simple theme, but modded it based on a Product Custom Field called Etiqueta which means Label in Spanish. This field has two values separated by comma, a text for the label and a color in HEX.
{% if product.field['Etiqueta'] %}
{% assign etiqueta = product.field['Etiqueta'].value | split: "," %}
<span class="badge status-tag sale " style="background-color:#{{etiqueta.last}}!important;top:40px!important">{{etiqueta.first}}</span>
{%endif%}
Recommend products in the cart based on custom fields in the ordered products on Simple theme.
Users can create Product Custom Fields to recommend one product (Y) after adding other (X) to the cart. For this, create a custom field in product X (in this example its called “Recomendado con”, which means recommended together with in Spanish) and call it in a partial added to the cart page. This snippet is the code that we add to the cart page:
{% assign recomendados = "" | split: "," %}
{% for item in order.products %}
{% if item.field['Recomendado con'] %}
{% assign recomendado = item.field['Recomendado con'].value | split: "," %}
{% assign recomendados = recomendados | concat: recomendado %}
{% endif %}
{% endfor %}
{% unless recomendados == "" %}
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="block-header mt-2 text-center">{% t "Buy with with a discount" %}</h2>
</div>
</div>
</div>
<div class="container related_products">
<div class="product-slider related-slider owl-carousel">
{% for rec-item in recomendados %}
{% assign rec-item-product = products.product[rec-item] %}
<div class="item">
<div class="product-block text-center {% if options.product_block_2_columns %}mb-md-3 mb-2{% else %}mb-3{% endif %} p-md-3 col-4 p-2 rounded trsn">
<a href="{{rec-item-product.url}}" class="product-image d-block {% if rec-item-product.stock == 0 and rec-item-product.stock_unlimited == false %}not-available{% elsif rec-item-product.status == 'not-available'%}not-available{% endif %}">
{% if options.show_add_to_cart != true or options.disable_shopping_cart %}
{% if rec-item-product.stock == 0 and rec-item-product.stock_unlimited == false %}
<span class="badge badge-secondary status-tag">{% t "Sold out" %}</span>
{% elsif rec-item-product.status == 'not-available' %}
<span class="badge badge-secondary status-tag">{% t "Not Available" %}</span>
{% endif %}
{% endif %}
{% if rec-item-product.discount > 0 %}
<span class="badge status-tag sale">{{options.sale_tag_text}} -{{ rec-item-product.discount | divided_by:rec-item-product.price | times:100 | round:0 }}%</span>
{% endif %}
{% if rec-item-product.images != empty %}
<img class="img-fluid img-portfolio img-hover mb-2" src="{{rec-item-product.images.first | resize: '255x255'}}" srcset="{{rec-item-product.images.first | resize: '255x255'}} 1x,{{rec-item-product.images.first | resize: '510x510'}} 2x" alt="{{rec-item-product.name | escape}}" />
{% else %}
<img class="img-fluid img-portfolio img-hover mb-2" src="{{ 'no-image-home.png' | asset }}" alt="{{rec-item-product.name | escape}}">
{% endif %}
</a>
{% assign variant_prices = rec-item-product.variants | sort: 'price' | map: 'price' %}
{% assign min_price = variant_prices | first | price %}
{% assign max_price = variant_prices | last | price %}
<div class="caption">
<div class="brand-name small trsn">
{% if rec-item-product.brand != blank and options.show_brand %}<span class="brand">{{ rec-item-product.brand}}</span>{% endif %}
<h4><a href="{{rec-item-product.url}}">{{ rec-item-product.name | truncate:35, ".." }}</a></h4>
</div>
{% if options.hide_price != true %}
<div class="list-price">
{% if rec-item-product.discount > 0 %}
{% if rec-item-product.variants != empty and options.from-prices and min_price != max_price %}<span class="from_price">{% t "From" %} </span>{% endif %}<span class="product-block-normal">{{ rec-item-product.price | minus:rec-item-product.discount | price }}</span> <span class="product-block-discount text-muted">{{ rec-item-product.price | price }}</span>
{% else %}
{% if rec-item-product.variants != empty and options.from-prices and min_price != max_price %}<span class="from_price">{% t "From" %} </span>{% endif %}<span class="product-block-list">{{ rec-item-product.price | price }}</span>
{% endif %}
</div>
{% endif %}
{% if options.show_add_to_cart and options.disable_shopping_cart != true %}
<div class="mt-2 trsn btn_container">
{% if rec-item-product.stock == 0 and rec-item-product.stock_unlimited == false %}
<a class="btn btn-outline-dark btn-block disabled" href="{{rec-item-product.url}}">{% t "Sold out" %}</a>
{% elsif rec-item-product.status == 'not-available' %}
<a class="btn btn-outline-dark btn-block disabled" href="{{rec-item-product.url}}">{% t "Not Available" %}</a>
{% else %}
{% if rec-item-product.options != empty %}
<a class="btn btn-primary btn-block" href="{{rec-item-product.url}}">{% t "View Options" %}</a>
{% else %}
<form id="product-form-{{rec-item-product.id}}" action="{{rec-item-product.add_to_cart_url}}" method="post" enctype="multipart/form-data" name="buy">
<div class="row adc-form no-gutters product-stock product-available">
<div class="{% if options.product_block_2_columns %}col-sm-8{% else %}col-8{% endif %}">
{% capture maxStock %} max="{{ rec-item-product.stock }}" {% endcapture %}
<div class="quantity {% if options.product_block_2_columns %}mr-md-2 mb-md-0 mb-2{% else %}mr-2{% endif %}">
<div class="product-qty">
<input type="number" class="qty form-control text-center" id="input-qty-{{rec-item-product.id}}" name="qty" min="1" value="1" readonly="readonly" {% if rec-item-product.stock_unlimited != true %}{{maxStock}}{% endif %}>
</div>
</div>
</div>
<div class="{% if options.product_block_2_columns %}col-sm-4{% else %}col-4{% endif %}">
{% if options.display_cart_notification %}
<button type="button" onclick="addToCart3('{{rec-item-product.id}}', '{{rec-item-product.name | replace: "'", "" | escape }}', $('#input-qty-{{rec-item-product.id}}').val(), getProductOptions('#product-form-{{rec-item-product.id}}'));" class="adc btn btn-adc btn-block btn-primary" value="{% t 'Add to Cart' %}" ><i class="fas fa-cart-plus"></i></button>
{% else %}
<button type="submit" class="adc btn btn-primary" value="{% t 'Add to Cart' %}" ><i class="fas fa-cart-plus"></i></button>
{% endif %}
</div>
</div>
</form>
{% endif %}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<script>
$(document).ready(function() {
$('.related-slider').owlCarousel({
loop:false,
rewind: true,
margin:15,
navText: ["<i class='fas fa-chevron-left'></i>", "<i class='fas fa-chevron-right'></i>"],
nav:true,
dots: true,
thumbs: false,
responsive:{
0:{
items:1,
margin:8,
stagePadding: 40,
},
600:{
items:3,
margin:15,
stagePadding: 30,
},
1000:{
items:4,
stagePadding: 30,
}
}
})
});
</script>
{%endunless%}
<script>
function addToCart3(id, productName, qty, options) {
Jumpseller.addProductToCart(id, qty, options, {
callback: function(data, status) {
toastr.options = {
closeButton: true,
debug: false,
newestOnTop: false,
progressBar: true,
positionClass: 'toast-top-right',
preventDuplicates: false,
onclick: null,
showDuration: '500',
hideDuration: '1000',
timeOut: '5000',
extendedTimeOut: '1000',
showEasing: 'swing',
hideEasing: 'linear',
showMethod: 'fadeIn',
hideMethod: 'fadeOut',
};
if (data.status == 404) {
toastr.error(data.responseJSON.message);
} else {
if (parseInt(qty) == 1) {
toastr.success(
qty +
' ' +
productName +
' ' +
singleProductMessage +
' <a href="' +
$('#cart-link').attr('href') +
'"> ' +
shoppingCartMessage +
'</a>'
);
} else {
toastr.success(
qty +
' ' +
productName +
' ' +
multiProductMessage +
' <a href="' +
$('#cart-link').attr('href') +
'"> ' +
shoppingCartMessage +
'</a>'
);
}
// update cart in page
$('.cart-size').text(parseInt($('.cart-size').text()) + parseInt(qty));
}
location.reload();
},
});
}
</script>
Remove products that belongs to a specific Product Category from the Latest Products list.
This case is specially useful for digital products that are added as surcharges, insurance, additional services to purchases that you don’t want to show in your collections by themselves. For example if you sell Refrigerators you can offer a service to pickup an older Refrigerator for an extra fee, it would not make sense to include it your home page next to other recently added products.
Before going into the code we need to have this facts cleared:
1.- One Product can have multiple categories.
2.- Product lists such as the Latest Products list usually have a display limit.
This is the original code for the Latest Products component (latest-products.liquid in the components list). Its a very simple code that styles and populates a list of products. The limit of the list is determined by the variable limit:component.options.limit that is set by the user in the Visual Editor.
<div id="latest-products-{{component.id}}" class="container">
{% if component.options.title != blank %}
<div class="col-12">
<h2 class="block-header text-center">{{component.options.title}}</h2>
</div>
{% endif %}
<div class="row mb-md-5 mb-4 mx-md-n2 {% if options.product_block_2_columns %}mx-n1{% endif %} no-gutters">
{% if products.all == blank %}
{% include 'list_product_placeholder' %}
{% else %}
{% for product in products.latest limit:component.options.limit %}
<div class="col-lg-3 {% if options.product_block_2_columns %}col-6 px-md-2 px-1{% else %}col-sm-6 px-2{% endif %}">
{% include 'list_product' with product %}
</div>
{% endfor %}
{% endif %}
</div>
</div>
The version that skips products of one Product Category called No that preserves the limit decided by the user would be this one.
<div id="latest-products-{{component.id}}" class="container">
{% if component.options.title != blank %}
<div class="col-12">
<h2 class="block-header text-center">{{component.options.title}}</h2>
</div>
{% endif %}
<div class="row mb-md-5 mb-4 mx-md-n2 {% if options.product_block_2_columns %}mx-n1{% endif %} no-gutters">
{% if products.all == blank %}
{% include 'list_product_placeholder' %}
{% else %}
{% comment %} We create a counter that starts in 0 {% endcomment %}
{% assign counter = 0 %}
{% for product in products.latest %}
{% comment %} We create an aux variable called cat_no that will be true only if the current product in the loop has a category called No {% endcomment %}
{% assign cat_no = false %}
{% for c in product.categories %}
{% if c.name == "No" %}
{% assign cat_no = true %}
{% break %}
{% endif %}
{% endfor %}
{% comment %} If the aux variable is TRUE, then the loop skips to the next item in the list {% endcomment %}
{% if cat_no %}
{% continue %}
{% endif %}
<div class="col-lg-3 {% if options.product_block_2_columns %}col-6 px-md-2 px-1{% else %}col-sm-6 px-2{% endif %}">
{% include 'list_product' with product %}
{% comment %} We add one element to the counter only if the product block is displayed{% endcomment %}
{% assign count = count | plus: 1 %}
</div>
{% comment %} If the counter reaches the limit defined by the user, we stop the loop {% endcomment %}
{% if count == component.options.limit %}
{% break %}
{% endif %}
{% endfor %}
{% endif %}
</div>
</div>