Create a snippet named shipping-modal-content.liquid and add the following code:
<div class="shipping-message-background hidden">
<div class="shipping-message-modal hidden">
<div class="close_shipping-modal">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
<img class="col-md-8" src="{{ 'cart-shipping-popup-image.jpg' | asset_url }}">
<div class="col-md-4" style="margin-top: 50px;">
{% if settings.show-agree-with-terms-and-conditions-checkbox %}
<p style="float:none; text-align:left; clear: both; margin: 10px 12px;">
<input type="checkbox" id="agree" />
<label for="agree" style="display: inline;">{% include '__localize' with 'I agree with the terms and conditions.' %}</label>
</p>
{% endif %}
<a href="/cart" class="btn btn-primary" />Continue Shopping</a>
<a href="/checkout" class="btn btn-primary btn-main btn-continue-checkout" />{% include '__localize' with 'Checkout' %}</a>
</div>
</div>
</div>
Create a snippet named shipping-modal-button.liquid and add the following code: This basically replaces the add to cart button and does some popup logic.
<br /><a class="open_shipping-message-modal btn btn-primary btn-main" href="#">Checkout</a>
<script type="text/javascript">
$('.open_shipping-message-modal, .close_shipping-modal').click(function(){
$('.shipping-message-modal, .shipping-message-background').toggleClass('hidden');
});
</script>
{% if settings.show-agree-with-terms-and-conditions-checkbox %}
<script>
$('.btn-continue-checkout').click(function() {
if($('#agree').is(':checked')){
$(this).submit();
}
else{
alert("{% include '__localize' with 'You must agree with the terms and conditions of sales to check out.' %}");
return false;
}
});
</script>
{% endif %}
<style type="text/css">
.hidden {
display: none !important;
}
.shipping-message-background {
background: #000000cf !important;
width: 100% !important;
height: 100% !important;
display: block;
position: fixed;
z-index: 222;
top: 50px;
}
.shipping-message-modal {
width: 100%;
background: #fff;
border: 5px double #333;
padding: 15px;
margin-bottom: 20px;
overflow: hidden;
clear: both;
color: #333;
text-transform: uppercase;
display: block;
text-align: center;
text-decoration: none;
position: absolute;
top: 70px;
position: fixed;
width: 80%;
left: 10%;
z-index: 999;
}
.view-cart-btn span {
color: #acacac;
font-style: oblique;
}
a.view-cart-btn:hover {
opacity: .8;
}
.close_shipping-modal i.fa.fa-times {
color: black !important;
float: right !important;
font-size: 26px !important;
}
/*Hides default checkout button*/
input.btn.btn-primary.btn-block.btn-main {
display: none;
}
.form-actions p {
display: none;
}
a.btn.btn-main.ajax-cart-btn.ajax-cart-checkout-btn {
display: none !important;
}
</style>
At the very top of the cart.liquid file add the following code:
{% include 'shipping-modal-content' %}
Open cart.liquid and Find the following code:
{% if settings.ajax-cart %}
<input type="submit" name="checkout" value="{% include '__localize' with 'Checkout' %}" class="btn btn-primary btn-block btn-main" />
{% else %}
<div class="btn-group">
<input type="submit" id="update-cart" name="update" value="{% include '__localize' with 'Update' %}" class="btn btn-default" />
<input type="submit" name="checkout" value="{% include '__localize' with 'Checkout' %}" class="btn btn-primary btn-main" />
</div>
{% endif %}
Replace that code with the following:
{% if settings.ajax-cart %}
<input type="submit" name="checkout" value="{% include '__localize' with 'Checkout' %}" class="btn btn-primary btn-block btn-main" />
{% if settings.enable-cart-shipping-popup %}
{% include 'shipping-modal-button' %}
{% endif %}
{% else %}
<div class="btn-group">
<input type="submit" id="update-cart" name="update" value="{% include '__localize' with 'Update' %}" class="btn btn-default" />
<input type="submit" name="checkout" value="{% include '__localize' with 'Checkout' %}" class="btn btn-primary btn-main" />
{% if settings.enable-cart-shipping-popup %}
{% include 'shipping-modal-button' %}
{% endif %}
</div>
{% endif %}
Open settings_schema.json and find the value with Cart (like the code below).
{
"name": "Cart",
"settings": [
Below that code add the following:
{
"type": "checkbox",
"id": "enable-cart-shipping-popup",
"label": "Enable cart shipping popup message",
"default": true
},
{
"type": "image",
"id": "cart-shipping-popup-image.jpg",
"label": "cart shipping popup message image"
},