Cashier Scripts Code Library in Bold Cashier

 

Overview

Cashier Scripts is a plugin for Bold Cashier that allows you to further customize your checkout. With Cashier Scripts, you're able to:

  • Discount your customer's order
  • Add order fees
  • Include additional products
  • Place different types of widgets in the checkout
  • Offer automatic discounts
  • Add site trust badges
  • Create a pop-up for your return policy, and so much more.

Please visit Scripts Overview in Bold Cashier for more information on Cashier Scripts and how to set up this plugin.

 Caution

This article requires significant knowledge of JavaScript. If you are not comfortable with JavaScript, we strongly suggest contacting your developer before proceeding.

For more information on example scripts that can be used in Cashier Scripts, please see the follow examples below:  

Add Order Fees

For this example, select Create Script > Initialize > Blank within Cashier Scripts, then add one of the script codes included below into the Javascript Source Code box and select Save and Publish.

addFee(id, text, type, amount, taxable);
  • id - A unique identifier that you will create for the fee.
  • text - What will appear beside the price of the fee in the checkout, as well as on the order in Shopify.
  • type - Choose fixed or percentage.
  • amount - Dollar amount or percentage to add.
  • taxable - True or false, whether the fee is taxable.

Below are some coding examples of fees and how they display in Cashier's checkout:


Fixed Fee - Not Taxable

addFee(123, "Service Fee", "fixed", "2.50", false);

Fixed Fee - Not Taxable Screenshot


Percentage Fee - Taxable

addFee(123, "Handling Fee", "percentage", "7.5", true);

Percentage Fee - Taxable Example


Multiple Fees

addFee(123, "Eco Fee", "percentage", "2.8", false);
addFee(456, "Online Processing Fee", "fixed", "4.5", false);

Multiple Fees Example


Additional Information:

  • The fees will be added as a separate line item in the Shopify order.
  • You can use conditional logic to add fees under specific circumstances.

Add a Line Item

For this example, select Create Script > Initialize > Blank within Cashier Scripts, then add one of the script codes included below into the Javascript Source Code box and select Save and Publish.

addLineItem({
  platform_variant_id: 1234567890,
  line_item_key: "",
  quantity: 1,
  properties: {
  name: 'value'
  },
  price: 1234
});
  • platform_variant_id - Shopify’s variant ID.
  • line_item_key - A unique identifier for your line item (optional).
  • quantity - Quantity of the line item to add - defaults to 1 (optional).
  • properties - Add properties to your product (optional).
  • price - Price for the product in cents - defaults to original product price (optional).

Here's an example:

addLineItem({
  platform_variant_id: 15419996012579,
  line_item_key: "",
  quantity: 1,
  properties: {
    note: 'Free Gift'
  },
  price: 0
});

Free Gift in Checkout

Free Gift in Order


Additional Information:

  • You will not be able to see the properties added at checkout. They will be on the order in Shopify.
  • You can add multiple line items to the order.
  • You can use conditional logic to add a line item under specific circumstances.

Discount an Entire Order

For this example, select Create Script > Initialize > Blank within Cashier Scripts, then add one of the script codes included below into the Javascript Source Code box and select Save and Publish.

discountCartByPercent(amount, text);
  • amount - Percentage amount.
  • text - Text that displays beside the discount.

Here is an example:

discountCartByPercent(20, "20% discount");

Discount Cart by Percent

You can also add multiple discounts to a customer's cart:

discountCartByPercent(25, "Black Friday Site Wide Discount!");
discountCartByPercent(10, "Clearence Sale");

Multiple Discounts


Additional Information:

  • You can use conditional logic to add discounts under specific circumstances.
  • A discount is based off of the subtotal; before any other discounts are applied.

Change the Line Item Price

For this example, select Create Script > Initialize. There are 4 different script templates that can be selected that can change the price of all items in the cart or specific items: 


Percentage off all items

If this script template is selected, you can set a fixed percentage discount that is applied to each product that is added into the checkout, rather than using a discount code. 

Here is an example:

// Discounts all items in cart by 10%
cart.line_items.forEach(function(item){
item.changeLinePrice(item.price * 0.9);
}););

Percentage off all items

Changing the value after "item.price" changes the discount that is applied in the checkout.

If you want to offer a higher discount, changing the value in the example above from 0.9 to a lower value, such as 0.7, will offer a 30% off discount. 


Amount off all items

If this script template is selected, you can set a fixed dollar amount off of products that are added into the checkout, rather than using a discount code. 

Here is an example:

// Discounts all items in cart by $5
cart.line_items.forEach(function(item){
item.changeLinePrice(item.price - 500);
});

Amount off all items

Changing the value after "item.price" changes the discount that is applied in the checkout.

If you want to offer a higher discount, changing the value in the example above from 500 to a higher value, such as 1000, will offer a $10 off discount. 

Note: Decimals should not be added into the value set within the script template. This means that if you wanted to offer $100 off, you would enter 10000, instead of 100.00. 


Amount off a product

If this script template is selected, you can set a fixed dollar amount off for only a certain product that is added into the checkout, rather than using a discount code. 

Here is an example:

// Discounts a product by $5
cart.line_items.forEach(function(item){
if(item.id == 123456789){
item.changeLinePrice(item.price - 500);
}
});

Amount off specific item

Changing the value after "item.id" changes which product receives the discount, while changing the value after "item.price" changes the discount that is applied in the checkout.

If you want to offer a higher discount, changing the value after "item.price" in the example above from 500 to a higher value, such as 1000, will offer a $10 off discount for a set product. 


Customer Discount

If this script template is selected, you can set a fixed percentage amount off of products that only certain tagged customers can receive, rather than using a discount code. 

Here is an example:

// Discounts items by 10% if customer has gold tag
if(customer.core_info.tags.indexOf('gold')>-1){
cart.line_items.forEach(function(item){
item.changeLinePrice(item.price * 0.9);
});
}

In the example above, if the customer is logged in with a tag that contains "gold", they will receive a 10% off discount for all products added into the Bold Cashier checkout. 

Customer Example

Discount from customer

Changing the text after "if(customer.core_info.tags.indexOf(" targets which tag receives the discount for all of your customers, while changing the value after "item.price" changes the discount that is applied in the checkout for the tagged customer.

If you want to offer a higher discount, changing the value after "item.price" in the example above from 0.9 to a lower value, such as 0.7, will offer a 30% off discount for all of the products in the Bold Cashier checkout.

Override Shipping Rates Based on Customer Tag

For this example, start by selecting Create Script > Initialize within Cashier Scripts, then add one of the script codes included below into the Javascript Source Code box and select Save and Publish.

if (customer.core_info.tags.indexOf("tag")>-1) {
  addShippingOverride('Script Name');
}
  • tag - The tag that qualifies for these shipping rates.
  • Script Name - The name of the script that will set the shipping rates.
addShippingLine("name", amount);
  • name - The name that shows up on the shipping line.
  • amount - The amount of the shipping rate.

Here is an example that can be used as a template:

Add this script into a Blank Initialize script:

if (customer.core_info.tags.indexOf("vip")>-1) {
  addShippingOverride('VIP Shipping');
}

Create a new script under Shipping, change the title of the script to VIP Shipping, and add the following script:

addShippingLine("VIP Shipping - 1-2 days", 15);
addShippingLine("VIP Shipping - 3-7 days", 5);
addShippingLine("VIP Shipping - 1-2 weeks", 2);
addShippingLine("VIP Shipping - 3+ weeks", 0);

Shipping Rates

Add an IFrame Widget

An iframe widget allows you to use HTML and CSS to create a widget on the checkout page. This can be used to add an image, trust badges, text, and more.

addIframeWidget('name', {
  position: 'position'
  source: 'https://domain.com/iframe-widget'
  frame-origin: 'https://domain.com'
});
  • name - The name of the widget. This needs to be the same as the name of the widget script.
  • position - Sets the position of the widget.
  • source - The source of the iframe. If the source is not set, it will use the name argument (optional).
  • frame-origin - If defining the source, you will need to set this with the domain. (optional)


Add Trust Badges to the Checkout:

Select Create Script > Initialize > Blank within Cashier Scripts, then add the script code below into the Javascript Source Code box and select Save and Publish.

addIframeWidget('Trust Badges', {
  position: 'payments'
});

Add the following code to a widget script titled Trust Badges:

Note: Your image files will need to be hosted somewhere. We suggest using the "Files" section of your Shopify admin.

Please visit our IFrame Widget Code Template for a basic coding example.

IFrame Exmaple

Add an External Link Widget

Using an external link widget allows you to add a link to page outside of your checkout. You can include a link to a page on your store, such as your store's return policy, refund policy or a warranty policy. 

Note: For external link widgets, you do not need to create a corresponding widget script.

addExternalLinkWidget('name', {
  position: 'position',
  text: "test",
  icon: "https://url.com/icon.png",
  url: "https://yourstore.myshopify.com/pages/refund-policy"
});
  • name - The name of the widget. 
  • position - Sets the position of the widget.
  • text - Text that shows up in the widget.
  • icon - Icon that shows up in the widget (optional).
  • url - Link that customer gets redirected to.


Link to a Refund Policy Page

Add this code into a Blank Initialize script:

addExternalLinkWidget('refund', {
  position: 'summary_above_header',
  text: "Check our refund policy",
  icon: "https://url.com/icon.png",
  url: "https://yourstore.myshopify.com/pages/refund-policy"
});

External Link Example

Add a Modal Widget

Using a modal widget allows you to use HTML and CSS to create a pop-up that appears when your customer clicks the widget.

This can be used to add some information, images or anything else, in a popup.

addModalWidget('name', {
	position: 'position',
	text: 'Text',
	icon: 'https://url.com/icon.png', 
        click_url: 'https://url.com/modal.html',
        frame_origin: 'https://url.com',
  });
  • name - The name of the widget. This needs to be the same as the name of the widget script.
  • position - Sets the position of the widget.
  • text - Text that shows up in the widget.
  • icon - Icon that shows up in the widget (optional).
  • click_url - The source of the modal. If the source is not set, it will use the name argument (optional).
  • frame-origin - If defining the source, you will need to set this with the domain (optional).


Add Shipping Information to a Modal

Add this script to a Blank Initialize script:

addModalWidget('International Shipping', {
	position: 'customer_info',
	text: 'Click here to see our International Shipping policy',
	icon: 'https://url.com/icon.png',
});

Add the following code to a widget script titled International Shipping:

Note: Your image files will need to be hosted somewhere. We suggest using the "Files" section of your Shopify admin.

Please visit our Modal Widget Code Template for a basic coding example.

Shipping Link Example

Shipping Modal

 

Was this article helpful?
0 out of 0 found this helpful