Skip to content

Instantly share code, notes, and snippets.

@seedcms
Last active May 18, 2022 17:26
Show Gist options
  • Save seedcms/6fe1b8f89d044e2ef190 to your computer and use it in GitHub Desktop.
Save seedcms/6fe1b8f89d044e2ef190 to your computer and use it in GitHub Desktop.
Shopify Upsell Modal
1. add snippet to cart.liquid file at the bottom of the file
{% include 'upsell-modal' %}
2. add css to theme.liquid in the header
{{ 'upsell-modal.scss' | asset_url | stylesheet_tag }}
<div class="upsell-wrapper">
<div class="upsell-modal">
<div class="modal-close">
<a href="#" class="close-upsell">X</a>
</div>
<strong>DON'T FORGET THE STOCKING STUFFERS!</strong>
<p>We’ve gathered some of our favorite stocking stuffers for this holiday season. Get some before it is too late!</p>
<ul class="upsell-grid">
{% comment %}
this can be improved by adding theme settings and looping all handle, but to keep it simple I hard coded the values.
{% endcomment %}
<li data-handle="dj-snake-bracelet">
{{ 'loading.gif' | asset_url | img_tag }}
</li>
<li data-handle="blasterjaxx-bracelet">
{{ 'loading.gif' | asset_url | img_tag }}
</li>
<li data-handle="adventure-club">
{{ 'loading.gif' | asset_url | img_tag }}
</li>
<li data-handle="borgore">
{{ 'loading.gif' | asset_url | img_tag }}
</li>
</ul>
<div style="clear:both;"></div>
<div class="upsell-buttons">
<a href="#" class="no-thanks close-upsell">No thanks!</a>
<a href="/checkout" class="upsell-checkout">CHECKOUT</a>
</div>
</div>
</div>
<script>
jQuery(document).ready(function(){
jQuery('.close-upsell').click(function(){
jQuery('.upsell-wrapper').fadeOut(300);
});
function go_shopify_product(handle){
var product = '';
jQuery.ajax({
url: '/products/'+handle+'.js',
dataType: 'json',
async: false,
success: function(data) {
product = data;
}
});
return product;
}
jQuery('.upsell-grid li').each(function(i, items_list){
var productHTML = '';
var product_handle = jQuery(this).data('handle');
var product = go_shopify_product(product_handle);
var price = Shopify.formatMoney(product.price, "{{ shop.money_with_currency_format }}");
productHTML += '<a href="'+product.url +'">';
productHTML += '<image src="'+product.featured_image +'" />';
productHTML += product.title+'<br />';
productHTML += '<strong>'+price+'</strong>';
productHTML += '</a>';
jQuery(this).html(productHTML).fadeIn(1000);
});
});
</script>
.upsell-wrapper {
z-index: 99999;
background: rgba(0,0,0,.8);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.upsell-modal {
position: fixed;
left: 50%;
top: 50%;
height: 450px;
width: 1000px;
margin: -225px 0 0 -500px;
background: #fff;
box-sizing: border-box;
padding: 20px;
}
strong {
font-weight: bold;
font-size: 21px;
text-transform: uppercase;
color: #000;
}
p {
font-size: 13px;
color: #000;
}
.modal-close {
position: absolute;
right: 5px;
top: 5px;
text-align: right;
width: 100%;
}
.modal-close a {
color: #000;
font-size: 13px;
}
/* PRODUCT GRID */
.upsell-grid {
margin: 0;
padding:0;
list-style: none;
}
.upsell-grid li {
width: 25%;
float: left;
box-sizing: border-box;
padding:5px;
font-size: 13px;
text-align: center;
}
.upsell-grid li strong{
font-size: 13px;
}
/* BUTTONS */
.upsell-buttons {
text-align: right;
padding-top: 20px;
}
.no-thanks {
font-size: 13px;
color: #000;
text-decoration: underline;
margin-right: 28px;
}
.upsell-checkout, .upsell-checkout:hover {
font-size: 13px;
color: #fff;
text-decoration: none;
background: #000;
padding: 5px 10px;tt
}
@media (max-width: 767px) {
// mobile
.upsell-wrapper {
z-index: 99999;
background: rgba(0,0,0,.8);
position: absolute !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.upsell-modal {
position: absolute;
left: 50%;
top: 50%;
height: 450px;
width: 300px;
margin: -225px 0 0 -150px;
background: #fff;
box-sizing: border-box;
padding: 20px;
}
.upsell-grid li {
width: 100%;
float: left;
box-sizing: border-box;
padding:5px;
font-size: 13px;
text-align: center;
}
}
@dlopezros
Copy link

Hello, congratulations for fantastic script!

Hello,

I would like to know how I can display on JavaScript the variant id of the selected product.

I have made several tests without success.
My objective is to be able to add a buy button in the modal of the cart and it is necessary to identify the variant id of the product:

productHTML += '<form action="/cart/add" method="post"><div style="display:none;"><select name="id" id="id"><option value=' **VARIANT ID **** +'></option></select></div><button class="btn default esc_addOfferProduct" type="submit" name="add" >Add</button></form>';

thanks for help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment