Shopify Plus Customisations
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 |
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.liquidImportant! 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
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
{% comment %}SparkLayer B2B - Checkout CSS Start{% endcomment %}
{% if customer.tags contains 'b2b' %}
<style>
/* SparkLayer B2B Logged In as B2B user */
/* Hide B2C-specific content */
.product-table__header th:nth-of-type(3),
.product-table__header th:nth-of-type(4),
.product-table .product__quantity,
.order-summary__section.order-summary__section--discount,
tr.total-line.total-line--discount,
tr.total-line.total-line--reduction,
a.step__footer__previous-link {
display: none;
}
/* Add ttle to right side order summary */
.order-summary__section__content {
padding-top: 45px;
position: relative;
}
.order-summary__section__content:before {
content: "Your Wholesale Order";
position: absolute;
left: 0;
top: 0;
color: #333;
font-size: 18px;
}
.order-summary__section__content:after {
content: "Please note, pricing is listed as net pricing.";
position: absolute;
left: 0;
top: 25px;
}
/* Adjust layout of right side order summary */
.product__description__name.order-summary__emphasis {
display: block;
padding: 0 0 0.5em
}
.product__description__variant.order-summary__small-text {
float: left;
}
.product__description__property.order-summary__small-text {
float: right;
color: #323232;
width: 100px;
text-align: right;
}
.product-table th.product__description ul {
display: none;
}
.order-summary__section ~ .order-summary__section {
border-top: 0;
}
.total-line-table__footer th.total-line__name,
.total-line-table__footer td.total-line__price {
padding-top: 1rem !important;
}
.total-line-table__footer th.total-line__name:before,
.total-line-table__footer td.total-line__price:before {
display: none;
}
/* Hide standard pricing */
.product:first-child td,
.product:first-child th {
padding-top: 0;
}
.product-table th,
.product-table td {
vertical-align: top;
padding-top: 18px;
}
.product-table .product__price br,
.product-table .product__price del {
display: none;
}
/* Hide breadcrumbs and show a title and message */
.page--logo-main .breadcrumb {
position: relative;
margin: 2.5em 0 2.5em;
}
.page--logo-main .breadcrumb li {
display: none
}
.page--logo-main .breadcrumb:after {
content: "You can edit your shipping details from your account.";
position: absolute;
left: 0;
top: 26px
}
.page--logo-main .breadcrumb:before {
content: "Shipping details";
position: absolute;
left: 0;
top: 0;
color: #333;
font-size: 18px;
}
/* Hide ability to change addresses */
.review-block__link {
display: none;
}
.section--billing-address .section__text {
display: none;
}
.section--billing-address .radio-wrapper.content-box__row:nth-of-type(2) {
display: none !important;
}
/* Update total price for zero priced orders */
.sidebar .payment-due__price[data-checkout-payment-due-target="0"] {
width: 0;
overflow: hidden;
display: block;
letter-spacing: normal;
font-weight: 400;
}
.sidebar .payment-due__price[data-checkout-payment-due-target="0"]:before {
content: "Payment terms agreed";
position: absolute;
right: 0;
font-size: 16px;
}
/* Mobile adjustments */
@media only screen and (max-width: 1000px) {
.total-recap__original-price,
.total-recap__final-price[data-checkout-payment-due-target="0"],
.section--reductions.hidden-on-desktop {
display: none !important;
}
.page--logo-main .breadcrumb {
margin: 0 0 3em;
}
.order-summary__section__content {
padding-top: 50px;
}
.order-summary__section ~ .order-summary__section {
border-top: 0;
padding: 0 0 2rem;
}
}
</style>
{%endif%}
{% comment %}SparkLayer B2B - Checkout CSS End{% endcomment %}
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.When entering the checkout, the customer will be taken straight to their chosen payment method with it pre-selected
- 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.
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).
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.
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 |
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
{% comment %}SparkLayer B2B - Checkout Payment Start{% endcomment %}
{% if customer.tags contains 'b2b' %}
<script>
const sparkPaymentMethod = {{ checkout.attributes.sparkPaymentType | json }};
const mapSparkPaymentMethodToShopify = {
paymentByInvoice: 'Payment By Invoice',
paymentOnAccount: 'Payment On Account',
// upfrontPayment is handled seperately and all manual methods are removed
};
if (sparkPaymentMethod === 'upfrontPayment') {
// For upfrontPayment remove all other payment methods!
document.querySelectorAll("[data-payment-subform=required] fieldset>div[data-gateway-group=manual]").forEach(method => method.remove());
} else {
document.querySelectorAll("[data-payment-subform=required] fieldset>div").forEach((method) => {
methodName = method.querySelector('.radio__label label')?.textContent?.trim() || '';
if (mapSparkPaymentMethodToShopify[sparkPaymentMethod] !== methodName) {
// Remove Payment Method
method.remove();
}
});
// Now preselect the an option
document.querySelector('div[data-gateway-group=manual] input').setAttribute('checked', 'checked')
}
</script>
{%endif%}
{% comment %}SparkLayer B2B - Checkout Payment End{% endcomment %}
Once done, the customer will only see their chosen payment method on the checkout.
For Shopify Plus merchants, Shopify has it's own native B2B solution that comes as standard for their Enterprise customers. By way of comparison to SparkLayer, our video below shows the differences in customer experience between Shopify B2B and using SparkLayer and Shopify (on any plan)
Last modified 1mo ago