Shopify Pricing Calculator Code - used to calculate shopify pricing plans, fees and costs.

Shopify pricing calculator code

// make pretty selects
$(document).ready(function() {
	$('select').niceSelect();
});



// before any changes

$( document ).ready(function() {
    $('#step_1 .nice-select').addClass("notdone");
});





$( "#shopify_plan" ).one( "change", function() {
// code to run on first select.  controls content on right and arrows.
$( ".package_switcher" ).fadeIn();
$( ".firsticon" ).hide();
$( ".secondicon" ).show();
$("#second_trigger").css("opacity", "1");
$( ".check_1" ).fadeIn();
$( ".check1" ).fadeIn();
$( ".show_2" ).fadeIn();
$(".show_2_opacity").css("opacity", "1");
$(".firstsub").removeClass("red");
$(".secondsub").show();
$('#shopify_gateway').prop('disabled', false);
$('#shopify_gateway').prop('disabled', false);
$('.nice-select').removeClass("disabled");
$('#step_1 .nice-select').removeClass("notdone");
$('#step_1 .nice-select').addClass("done");
$('#step_2 .nice-select').addClass("notdone");
$( ".how_works" ).hide();

});


$( "#shopify_gateway" ).one( "change", function() {
// code to run on second select.  controls content on right and arrows.
$( ".secondicon" ).hide();
$( ".thirdicon" ).show();
$("#third_trigger").css("opacity", "1");
$( ".check_2" ).fadeIn();
$( ".check2" ).fadeIn();
$(".show_3_opacity").css("opacity", "1");
$( ".red" ).show();
$(".secondsub").removeClass("red");
$(".show_3b").show();
$(".enter_sales").show();
$('#sales').prop('disabled', false);
$('.nice-select').removeClass("disabled");
$('#step_2 .nice-select').removeClass("notdone");
$('#step_2 .nice-select').addClass("done");
$('#step_3 #sales').addClass("notdone");
});

$( "#sales" ).one( "change keyup paste", function() {
	$( ".show_3" ).show();
	$( "#calc_trigger" ).css("opacity", "1");
	$( ".thirdicon" ).hide();
	$( ".check_3" ).fadeIn();
	$( ".thirdiconcheck" ).show();
$( ".check3" ).fadeIn();
$(".show_4_opacity").css("opacity", "1");
$( ".red" ).hide();
$(".enter_sales").hide();
$(".total_trigger").show();
$(".out_trigger").show();
$('#step_3 #sales').removeClass("notdone");
$('#step_3 #sales').addClass("done");
$(".fa-pulse.green").show();



// show tip
setTimeout(function() {
        $(".tip").show()
    }, 2000);

setTimeout(function() {
        $(".tip-2").show()
    }, 5000);

});










// runs on any element change.
// select 1 - package
function getplan(sel){

	
	//get the package value
		var packagevalue = $('#shopify_plan').find(':selected').data('price');

     // update the package cost.   
					$('.monthly_plan_cost').html(packagevalue);

  		// get gateway chosen
  		var gateway = $('#shopify_gateway').val();
  		

	 		if (gateway == 1) {
	 			// using shopify payments 
	 			var gatewayname = "<b>Shopify Payments</b>";
	 			var gatewayfees = $('#shopify_plan').find(':selected').data('percentshopify');
	 			var gatewayfeesaspercent = (gatewayfees * 100) ;
	 			var sales = $('#sales').val();
	 			var gatewayfeesasvalue = (sales * gatewayfees).toFixed(2);
	 			// update percentage in dom
	 			//alert(gatewayfeesaspercent);
	 			$('.monthly_plan_percetage').html(gatewayfeesaspercent);
	 			$('.monthly_transaction_amount').html(gatewayfeesasvalue);
	 			$('.gateway_name').html(gatewayname);
	 			$(".combi_message").hide();
	 			$(".standard_message").show();
	 			

	 		} else  if (gateway == 2) {
	 				// using external gateway
	 				var gatewayname = "an <b>external gateway</b> like Paypal or Stripe.";
	 				var gatewayfees = $('#shopify_plan').find(':selected').data('percentstandard');
	 				var gatewayfeesaspercent = (gatewayfees * 100) ;
	 				var sales = $('#sales').val();
	 				var gatewayfeesasvalue = (sales * gatewayfees).toFixed(2);
	 				//alert(gatewayfeesaspercent);
	 				$('.monthly_plan_percetage').html(gatewayfeesaspercent);
	 				$('.monthly_transaction_amount').html(gatewayfeesasvalue);	
	 				$('.gateway_name').html(gatewayname);
	 				$(".combi_message").hide();
	 				$(".standard_message").show();

	 		} else if (gateway == 3) {

	 				//using a combination of gateways.  We assign 70% to Shopify Payments and 30% to Paypal.
	 				var gatewayname = "<b>Shopify payments</b> with an external gateway <b>(e.g. Paypal)</b>.";
	 				var gatewayfees = $('#shopify_plan').find(':selected').data('percentstandard');
	 				var gatewayfeesaspercent = (gatewayfees * 100) ;
	 				var sales = $('#sales').val();
	 				var gatewayfeesasvalue = (sales * gatewayfees * 0.3).toFixed(2);
						$('.monthly_plan_percetage').html(gatewayfeesaspercent);
	 				$('.monthly_transaction_amount').html(gatewayfeesasvalue);	
	 				$('.gateway_name').html(gatewayname);
	 				$(".combi_message").show();
	 				$(".standard_message").hide();
	 				
	 		}




	 		// do the final calculation
							
					function calc_total() {
					      // this is when not Plus.
											var totaltotal = (parseFloat(packagevalue) + parseFloat(gatewayfeesasvalue)).toFixed(2);;
											$('.totaltotal').html(totaltotal);
					  }


					  function plus_total() {
					      // this is when using Plus.
					      
					      var minfee = 2000;
					      var maxfee = 40000;

					      // if their gateway fees as percentage of sales is less than $2000 then they pay $2000 - floor price.
					      if (gatewayfeesasvalue <= minfee ) {
					      	$('.totaltotal').html(minfee);
					      } else if ((gatewayfeesasvalue <= maxfee) && (gatewayfeesasvalue >= minfee)) {
					      $('.totaltotal').html(gatewayfeesasvalue);
					     } else if (gatewayfeesasvalue >= maxfee ) {
											$('.totaltotal').html(maxfee);
					     }



											
					  }





  		// update side package switcher
							var packageselected = $('#shopify_plan').val();
							if (packageselected == 1) {
								// show lite package
								$('.fintal_table').show();
								$(".package.light_package").addClass('active').siblings().removeClass('active');
								$('.plan_title').html("Shopify Lite");
								$(".features_column.lite").addClass('active').siblings().removeClass('active');
								$(".plus_message").hide();
								$(".action_triggers_plus").hide();
								calc_total();

							} else if (packageselected == 2) {
								//show basic
								$('.fintal_table').show();
								$(".package.basic_package").addClass('active').siblings().removeClass('active');
								$('.plan_title').html("Shopify Basic");
								$(".features_column.basic").addClass('active').siblings().removeClass('active');
								$(".plus_message").hide();
								$(".action_triggers_plus").hide();
								calc_total();

							} else if (packageselected == 3) {
								//show shopify
								$('.fintal_table').show();
								$(".package.shopify_package").addClass('active').siblings().removeClass('active');
								$('.plan_title').html("Shopify");
								$(".features_column.shopify").addClass('active').siblings().removeClass('active');
								$(".plus_message").hide();
								$(".action_triggers_plus").hide();
								calc_total();

							} else if (packageselected == 4) {
								//show advanced
								$('.fintal_table').show();
								$(".package.advanced_package").addClass('active').siblings().removeClass('active');
								$('.plan_title').html("Shopify Advanced");
								$(".features_column.shopify_advanced").addClass('active').siblings().removeClass('active');
								$(".plus_message").hide();
								$(".action_triggers_plus").hide();
								calc_total();

							} else if (packageselected == 5) {
								//show plus
								$(".package.plus_package").addClass('active').siblings().removeClass('active');
								$('.plan_title').html("Shopify Plus");
								$(".features_column.shopify_plus").addClass('active').siblings().removeClass('active');
								$(".action_triggers_plus").show();
								$(".plus_message").show();
								

								 $('.fintal_table').hide();
								 $('.tip-2').hide();
								 
								//change all urls to Plus
								//string.replace("https://www.shopify.com/?ref=liquiddesign", "https://www.shopify.com/plus/contact/?ref=liquiddesign")



	

								 	
								// calc the total
								plus_total();
							} 
						


							

							

}





$("#scroll_action").click(function() {
    $('html, body').animate({
        scrollTop: $("#scroll_to_table").offset().top
    }, 1000);
});




$(".feature_click").click(function() {
    $(this).next(".inner_col").toggle();
});





	

Shopify Pricing code used on our Shopify cost and price calculator. Check Shopify fees and costs using our Shopify fee calculator or build your own using our code. Includes Shopify costs & pricing as well as Shopify Plus costs.