Shopify Plus Customisations

1. Shopify & Shopify Plus

Shopify Plus is Shopify's enterprise product and is typically geared for higher-volume merchants with more bespoke needs. If you're using Shopify Plus, there are a number of additional benefits when using SparkLayer.
Area
Details
Checkout
The checkout flow can be customised to make it more B2B-centric such as hiding and showing content
Payment Methods
Payment methods can be automatically hidden as well as pre-selected
Shipping Methods
As with payment methods above, it's possible to hide and show B2B-centric shipping methods
Shopify Flow
Shopify Flow lets you automate routine tasks such as tagging orders or sending emails

2. Shopify Checkout

One of the powerful features of Shopify Plus is being able to customise the checkout allowing you to tailor parts of the checkout to better suit the B2B experience. This is only possible on Shopify Plus plans and involves editing a file called checkout.liquid
Important! You will need to ask Shopify support to enable the checkout.liquid file. Editing the checkout on Shopify does come with a warning that future upgrades Shopify roll out may involve you making manual changes. You can learn more here.
Save time with our ready-made Shopify checkout.liquid file with SparkLayer customisations applied! View on Github
The Shopify Plus checkout with customisations
The customisations in the Shopify Plus checkout include:
  • Hiding the discount code entry box (B2B customers will automatically have a coupon applied)
  • Adding a custom message next to the Total
  • Adding a custom message before the Ship to details
  • Hiding the ability to Change the Contact and Ship to details
  • Hiding the breadcrumbs
  • Hiding the Return to shipping link
  • Auto-selecting the payment method (see below)
This can all be achieved by adding special CSS and JavaScript to the checkout.liquid file and we've included a sample below that you can include on your Shopify Plus store.
Adding the code snippet to checkout.liquid Please note, in order for the checkout code overwrite to run, it should be added just before the {{ tracking_code }}tag within the checkout.liquid file.
For easier maintenance, you may want to include the CSS in a standalone CSS file and then include this in your checkout.liquid file.
checkout.liquid CSS code
1
{% comment %}SparkLayer B2B - Checkout CSS Start{% endcomment %}
2
{% if customer.tags contains 'b2b' %}
3
<style>
4
/* SparkLayer B2B Logged In as B2B user */
5
6
/* Hide B2C-specific content */
7
.product-table__header th:nth-of-type(3),
8
.product-table__header th:nth-of-type(4),
9
.product-table .product__quantity,
10
.order-summary__section.order-summary__section--discount,
11
tr.total-line.total-line--discount,
12
tr.total-line.total-line--reduction,
13
a.step__footer__previous-link {
14
display: none;
15
}
16
17
/* Add ttle to right side order summary */
18
.order-summary__section__content {
19
padding-top: 45px;
20
position: relative;
21
}
22
.order-summary__section__content:before {
23
content: "Your Wholesale Order";
24
position: absolute;
25
left: 0;
26
top: 0;
27
color: #333;
28
font-size: 18px;
29
}
30
.order-summary__section__content:after {
31
content: "Please note, pricing is listed as net pricing.";
32
position: absolute;
33
left: 0;
34
top: 25px;
35
}
36
37
38
/* Adjust layout of right side order summary */
39
.product__description__name.order-summary__emphasis {
40
display: block;
41
padding: 0 0 0.5em
42
}
43
.product__description__variant.order-summary__small-text {
44
float: left;
45
}
46
.product__description__property.order-summary__small-text {
47
float: right;
48
color: #323232;
49
width: 100px;
50
text-align: right;
51
}
52
53
.product-table th.product__description ul {
54
display: none;
55
}
56
.order-summary__section ~ .order-summary__section {
57
border-top: 0;
58
}
59
60
.total-line-table__footer th.total-line__name,
61
.total-line-table__footer td.total-line__price {
62
padding-top: 1rem !important;
63
}
64
.total-line-table__footer th.total-line__name:before,
65
.total-line-table__footer td.total-line__price:before {
66
display: none;
67
}
68
69
/* Hide standard pricing */
70
71
.product:first-child td,
72
.product:first-child th {
73
padding-top: 0;
74
}
75
76
.product-table th,
77
.product-table td {
78
vertical-align: top;
79
padding-top: 18px;
80
}
81
82
.product-table .product__price br,
83
.product-table .product__price del {
84
display: none;
85
}
86
87
/* Hide breadcrumbs and show a title and message */
88
.page--logo-main .breadcrumb {
89
position: relative;
90
margin: 2.5em 0 2.5em;
91
}
92
.page--logo-main .breadcrumb li {
93
display: none
94
}
95
.page--logo-main .breadcrumb:after {
96
content: "Please contact us to change your addresses.";
97
position: absolute;
98
left: 0;
99
top: 26px
100
}
101
.page--logo-main .breadcrumb:before {
102
content: "Delivery details";
103
position: absolute;
104
left: 0;
105
top: 0;
106
color: #333;
107
font-size: 18px;
108
}
109
110
/* Hide ability to change addresses */
111
.review-block__link {
112
display: none;
113
}
114
.section--billing-address .section__text {
115
display: none;
116
}
117
.section--billing-address .radio-wrapper.content-box__row:nth-of-type(2) {
118
display: none !important;
119
}
120
121
/* Update total price for zero priced orders */
122
.sidebar .payment-due__price[data-checkout-payment-due-target="0"] {
123
width: 0;
124
overflow: hidden;
125
display: block;
126
letter-spacing: normal;
127
font-weight: 400;
128
}
129
.sidebar .payment-due__price[data-checkout-payment-due-target="0"]:before {
130
content: "Payment terms agreed";
131
position: absolute;
132
right: 0;
133
font-size: 16px;
134
}
135
136
137
138
/* Mobile adjustments */
139
@media only screen and (max-width: 1000px) {
140
.total-recap__original-price,
141
.total-recap__final-price[data-checkout-payment-due-target="0"],
142
.section--reductions.hidden-on-desktop {
143
display: none !important;
144
}
145
.page--logo-main .breadcrumb {
146
margin: 0 0 3em;
147
}
148
.order-summary__section__content {
149
padding-top: 50px;
150
}
151
.order-summary__section ~ .order-summary__section {
152
border-top: 0;
153
padding: 0 0 2rem;
154
}
155
}
156
</style>
157
{%endif%}
158
{% comment %}SparkLayer B2B - Checkout CSS End{% endcomment %}
Copied!

3. Adding Manual Payment Methods

On Shopify Plus, you can add manual payment methods that allow your B2B customers to select their preferred payment type during the checkout.
Payment methods added will correspond to the Customer Group rules you set up meaning you can vary payment methods between customers. You can learn more about how payment methods work here.

Setting up manual payment methods

Please note, only account owners can add or edit payment methods with Shopify
Within your Shopify admin, go to Settings and then Payments and navigate to Manual payment methods. When adding a new payment method, the name must be entered exactly as referenced below:
Payment method
Description
Payment by Invoice
This will allow the customer to checkout without having to enter in payment details and apply a Zero-value order
Payment on Account
Similar to above, the customer can checkout without needing to enter any payment details
Once you've added the manual payment methods, these should then show within the Shopify admin.

Upfront Payment and Request for Quote

If you've configured your Customer Group to allow Upfront Payment (i.e. pay by card) or Request for Quote, no action needs to be applied within Shopify.
Payment method
Description
Upfront payment
This will use the existing payment by card options already configured in Shopify
Request for Quote
This will create orders as Draft orders with no payment required. Learn more here
When the B2B customer checks out, it's important they only see the payment method they've selected via the SparkLayer Quick Order Screen. To ensure the checkout displays this correctly, within the checkout.liquid file, you'll need to add the following code. This should be positioned right above the custom CSS code shown in Step 2 above.
checkout.liquid code
1
{% comment %}SparkLayer B2B - Checkout Payment Start{% endcomment %}
2
{% if customer.tags contains 'b2b' %}
3
<script>
4
const sparkPaymentMethod = {{ checkout.attributes.sparkPaymentType | json }};
5
const mapSparkPaymentMethodToShopify = {
6
paymentByInvoice: 'Payment By Invoice',
7
paymentOnAccount: 'Payment On Account',
8
// upfrontPayment is handled seperately and all manual methods are removed
9
};
10
if (sparkPaymentMethod === 'upfrontPayment') {
11
// For upfrontPayment remove all other payment methods!
12
document.querySelectorAll("[data-payment-subform=required] fieldset>div[data-gateway-group=manual]").forEach(method => method.remove());
13
} else {
14
document.querySelectorAll("[data-payment-subform=required] fieldset>div").forEach((method) => {
15
methodName = method.querySelector('.radio__label label')?.textContent?.trim() || '';
16
if (mapSparkPaymentMethodToShopify[sparkPaymentMethod] !== methodName) {
17
// Remove Payment Method
18
method.remove();
19
}
20
});
21
// Now preselect the an option
22
document.querySelector('div[data-gateway-group=manual] input').setAttribute('checked', 'checked')
23
}
24
25
</script>
26
{%endif%}
27
{% comment %}SparkLayer B2B - Checkout Payment End{% endcomment %}
Copied!
Once done, the customer will only see their chosen payment method on the checkout.

4. Customising Shipping Methods

In the code sample above, special JavaScript is included to adjust the shipping methods that are shown during the Shopify Checkout. When a B2B customer places an order, they'll automatically be assigned a special B2B shipping method and then any additional shipping charges will show within their order summary.
To enable a B2B shipping method on your Shopify Plus store, simply include the word 'B2B' in the 'Rate name' (as shown below). When the customer checkouts, this rate will then be automatically selected.
To ensure logged out customers don't see any B2B shipping methods, there's special handling to hide this When a non-logged in B2B customer then goes through the Shopify checkout, this special B2B shipping method will be hidden from view and just show the relevant shipping methods.

5. Configuring Shopify Flow

Example Shopify Flow workflow
Shopify Flow is powerful feature for Shopify Plus merchants that allow automations to be configured based on certain actions.
When B2B customers place orders via a manual payment method on your website (e.g. Pay on Account), this will come through to the Shopify orders admin as 'Payment Pending'. In order to ensure Shopify marks the order as paid to subsequently be sent to your backend system, you'll need to set up a special Shopify Flow rule to automatically apply this workflow. You can download our sample below.
We've also included some additional ready made Shopify Flow workflows that you can import into your Shopify admin.
Trigger
Details
Download
Mark order as paid
When a B2B customer places an order via manual payment methods, the order will automatically be marked as paid
Download
Tag orders as B2B
When a B2B customer places an order, this workflow will automatically tag an order with b2b_order allowing you to easily filter and report on B2B orders
Download
Send an email
Send an email to a specified email address when a B2B customer places an order; great if you need to notify other members of your team who handle B2B accounts
Download
Archive B2B orders
Automatically archive B2B orders from your Shopify Orders view; useful if you want to hide them from your standard B2C orders
Download
Last modified 1mo ago