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. In the table below, we've highlighted the key differences and how SparkLayer works with standard Shopify in comparison.
Area
Shopify Plus
Standard Shopify
Checkout
The checkout flow can be customised to make it more B2B-centric such as hiding and showing content
The checkout cannot be customised
Payment Methods
Payment methods during the checkout can be customised, automatically pre-selected, and even hidden
Customers can still pay by manual payment methods such as Payment by Invoice but they'll default to "Manual Payment" within Shopify . Learn more
Shopify Flow
Shopify Flow lets you automate routine tasks such as tagging orders or sending emails
Only available on Shopify Advanced. An alternative is to use a third-party app such as Mechanic

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: "You can edit your shipping details from your account.";
97
position: absolute;
98
left: 0;
99
top: 26px
100
}
101
.page--logo-main .breadcrumb:before {
102
content: "Shipping 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

Important. This is an optional configuration within SparkLayer and may not be required. If you want to bypass the Shopify checkout for manual payment methods, you can enable via a setting. Learn more
On Shopify Plus, you can add manual payment methods that enable two useful features during the checkout:
  1. 1.
    When entering the checkout, the customer will be taken straight to their chosen payment method with it pre-selected
  2. 2.
    Once the order is placed, it will automatically create completed orders (versus a Draft order)
This is useful if you want to enable manual payment methods and not have the orders come through as Draft orders within Shopify.

Setting up manual payment methods in SparkLayer

Payment methods added will correspond to the Customer Group rules you set up, meaning you can vary payment methods based on who the customer is. You can learn more about how payment methods work here. To enable the manual payment methods, simply tick "Payment by Invoice" and "Payment On Account" (note, you can enable just one of these).

Setting up manual payment methods in Shopify

Please note, only account owners can add or edit payment methods with Shopify. Once you enable payment methods, these also show for standard customers until the special JavaScript code is added (see below).
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 the order will come through to Shopify as a completed order (rather than a Draft)
Payment on Account
This will allow the customer to checkout without having to enter in payment details and the order will come through to Shopify as a completed order (rather than a Draft)
Once you've added the manual payment methods, these should then show within the Shopify admin as shown below.

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

Updating the Shopify checkout.liquid file

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.
To learn more about how payment methods work in SparkLayer, see our guide here.