Advanced Shopify Configurations
Our advanced Shopify configurations work with all Shopify plans, no matter which version of Shopify you use!
SparkLayer has support for a range of additional configurations for Shopify that can extend the standard features on the SparkLayer Frontend.
SparkLayer has full support for pack sizing (sometimes called quantity increments), meaning you can ensure customers to always add items to an order in your predefined packs (e.g. packs of 3, packs of 6):
To enable pack sizing, SparkLayer uses product metafields in Shopify to map the data across systems. To get started, you'll need to ensure your Shopify store is set up to capture metafields and our recommendation is to use a highly popular free Shopify app called Metafields Guru. You can also set up metafields natively via Shopify by following their help guide here.
Our video below runs through how to set up pack sizing using the Metafields Guru app.
When setting up pack sizing, it's important to note the following:
- Pack sizing is managed via product metafields; the easiest way to set this up is to install a third-party Shopify app (see above)
- Pack sizing is always added at a variant level even if the product only has a single variant
- When setting up the metafield, the data should be set up as below
Item | Details |
|---|---|
Metafield type | This must be set as an integer |
Namespace | This must be set as sparklayer |
Key | This must be set as pack_size |
Value | This must be set as an integer, e.g. 6, 12, 20 etc
To set pack sizing based on different customer group, see below |
By default, if you have pack sizing enabled, the product page widget will display a "pack price" that takes the unit price multiplied by the items within a pack. If you'd like this disabled, simply add this to your CSS overwrites:
CSS code
--spark-pdp-pack-size: none;
By default, pack sizing will apply to all customers however it's possible to set up customer-specific pack sizing rules. For example, for your default B2B customers, they're able to buy a product in single units, however for other B2B customers, they have to purchase in increments of 6.
When setting up pack sizing, it's important to note the following:
- Pack sizing is managed via product metafields; the easiest way to set this up is to install a third-party Shopify app (see above)
- Pack sizing is always added at a variant level even if the product only has a single variant
- When setting up the metafield, the data should be set up as below
Item | Details |
|---|---|
Metafield type | This must be set as an JSON |
Namespace | This must be set as sparklayer |
Key | This must be set as settings |
Value | This is then set per customer group you want to apply the pack size rules to. E.g. for the default B2B customer group:
[{"customer_group":"base","pack_size":6}]
For an additional customer group that had an internal ID of 'tier-2', you would use:
[{"customer_group":"base","pack_size":6}, {"customer_group":"tier-2","pack_size":12}] |
SparkLayer supports a number of languages and you can learn how to activate these in our guide here.
Within the SparkLayer Frontend Product Purchasing Interface, it's possible to show RRP (recommended retail prices) alongside your specific B2B pricing. For example, you may want logged in users to see what non-B2B customers pay for a specific item, allowing them to easily see their pricing savings.
To show retail prices alongside your B2B pricing, SparkLayer uses product metafields (in much the same way as pack sizing detailed above). To get started, you'll need to ensure your Shopify store is set up to capture metafields and our recommendation is to use a highly popular free Shopify app called Metafields Guru. You can also set up metafields natively via Shopify by following their help guide here.
Our video below runs through how to set up retail pricing using the Metafields Guru app.
When setting up retail pricing, it's important to note the following:
- Retail pricing is managed via product metafields; the easiest way to set this up is to install a third-party Shopify app (see above)
- Retail pricing is always added at a variant level even if the product only has a single variant
- When setting up the metafield, the data should be set up as below
Item | Details |
|---|---|
Metafield type | This must be set as an JSON string |
Namespace | This must be set as sparklayer |
Key | This must be set as rrp |
Value | This must be set up in this format [{"value":15.99,"currency_code":"usd"}] Where value is the retail price and currency_code is the currency code (e.g. usd, gbp, eur) |
When setting up retail prices for products, this must always be done at a variant level, even if the product has just a single variant. Within Shopify, single variant products still have a 'variant' behind the scenes of which SparkLayer relies on to attach data.
Whilst Shopify has the ability to attach metafields against a parent product, there is no interface available to action the above and our recommendation is to install one of the available metafields apps, such as Metafields Guru. Once installed, within the single variant product you're editing, simply click the Variants tab, select the variant that shows, and follow the instructions above to assign the retail price metafield data.
Tip: if you'd prefer to not use metafields to show retail prices, you could simply output the standard Shopify price within your liquid templates (this would require Shopify coding experience)
By default, SparkLayer will show the retail price as 'RRP' on your Shopify store. If you want to adjust this (e.g. to show as MSRP), you can do so by adding the below code to your
layout/theme.liquid file within the SparkLayer Core Script.layout/theme.liquid
<script>
window.sparkOptions = {
siteId: 'your-site-id',
/* Add the below to your SparkLayer Core Script */
translations: {
en: {
"pdp.price.rrp": "MSRP: ",
"product-card.price.rrp": "MSRP: ",
}
},
/* End */
};
</script>
It's possible to adjust how the product detail page widget looks such as hiding and showing content based on your preferences.
You can display the stock level of your products to signed in B2B customers, giving them instant visibility of available stock to purchase. Learn more here
SparkLayer has full support for different stock status messages and it's possible to set up products as pre-order/back-order easily via the Shopify admin. This will allow products to be added to an order and then show the pre-order / back-order message to the customer.
To enable this, simply set the product as 'Continue selling when out of stock' with a stock level of zero within the Shopify admin.
Next, within your CSS overwrite, add the following code:
--spark-product-stockstatus-back-order-display: flex;
If you want to adjust the default messaging that shows, you can add the following code snippet to the SparkLayer core script.
SparkLayer core script
translations: {
en: {
"pdp.messaging.back-order": "Pre-order",
"pdp.messaging.back-order-due": "Due {restockDate}",
"product-card.messaging.back-order": "Pre-order",
"product-card.messaging.back-order-due": "Due {restockDate}",
}
},
It's also possible to configure pre-ordering at a variant level, allowing you to set an exact amount of stock you want to allow customers to be able to pre-order.
- This is managed via product metafields; the easiest way to set this up is to install a third-party Shopify app (see above)
- This is always added at a variant level even if the product only has a single variant
- When setting up the metafield, the data should be set up as below
Item | Details |
|---|---|
Metafield type | This must be set as an integer |
Namespace | This must be set as sparklayer |
Key | This must be set as min_stock_level |
Value | This must be set as an negative integer, e.g. - 6, -12, -20 etc |
"Custom dates" allow you to set an exact date when the product is expected to be available. It’s a great way to give the end customer better visibility of when to expect receipt of the products on order, and helps deliver an overall better customer experience.
Use-cases could include:
- Setting a "due in" date of when you're expecting the product to be in stock
- Setting an "estimated shipping" date of when you're expecting the product to ship
To get started, you'll need to add a special metafield against products at a variant-level. The easiest way to set this up is to install a third-party Shopify app (such as Metafields Guru)
Setup notes:
- This is always added at a variant level even if the product only has a single variant
- When setting up the metafield, the data should be set up as below
Item | Details |
|---|---|
Metafield type | This must be set as date |
Namespace | This must be set as sparklayer |
Key | This must be set as restock_date |
Value | This must be set in the appropriate date format, e.g. 17/11/2022 (for the UK) |
If you want to adjust the default messaging that shows, you can add the following code snippet to the SparkLayer core script.
SparkLayer core script
translations: {
en: {
pdp: {
messaging: {
"back-order": "Pre-order",
"back-order-due": "Due: {restockDate}",
}
},
"product-card": {
messaging: {
"back-order": "Pre-order",
"back-order-due": "Due: {restockDate}",
}
}
}
},
SparkLayer has support for a variety of different quantity product settings including:
- Minimum product quantities at a variant level (e.g. products that have colours)
- Minimum product quantities at a parent level (allowing you to apply rules to the product as a whole. If it has variants, it can apply across multiple variants)
- Maximum product quantities at a variant level
- Maximum product quantities at a parent level
It's possible to set 'minimum product quantities' for any SKU within your Shopify catalogue, meaning that customers must meet this minimum quantity before being able to purchase a product.
Minimum product quantities: variant-level
Just as with Pack Sizing (see above guide), this works by adding a metafield against a SKU. Please note:
- The metafield must always added at a variant level even if the product only has a single variant
- When setting up the metafield, the data should be set up as below. You can set up metafields natively via Shopify by following their help guide here.
Item | Details |
|---|---|
Metafield type | This must be set as an integer |
Namespace | This must be set as sparklayer |
Key | This must be set as min_order_quantity |
Value | This must be set as an integer, e.g. 6, 12, 20 etc |
Minimum product quantities: parent-level
You can also set minimum product quantities to apply at the parent product level. So if a product has multiple variants, this rule will apply to the product as a whole.
- The metafield must always added at a variant level even if the product only has a single variant
- When setting up the metafield, the data should be set up as below. You can set up metafields natively via Shopify by following their help guide here.
Item | Details |
|---|---|
Metafield type | This must be set as an integer |
Namespace | This must be set as sparklayer |
Key | This must be set as min_order_parent_quantity |
Value | This must be set as an integer, e.g. 6, 12, 20 etc |
As with minimum product quantities above, you can also set maximum product quantities to apply.
Maximum product quantities: variant-level
Just as with Pack Sizing (see above guide), this works by adding a metafield against a SKU. Please note:
- The metafield must always added at a variant level even if the product only has a single variant
- When setting up the metafield, the data should be set up as below. You can set up metafields natively via Shopify by following their help guide here.
Item | Details |
|---|---|
Metafield type | This must be set as an integer |
Namespace | This must be set as sparklayer |
Key | This must be set as max_order_quantity |
Value | This must be set as an integer, e.g. 6, 12, 20 etc |
Maximum product quantities: parent-level
The metafield must always added at a variant level even if the product only has a single variant
- When setting up the metafield, the data should be set up as below. You can set up metafields natively via Shopify by following their help guide here.
Item | Details |
|---|---|
Metafield type | This must be set as an integer |
Namespace | This must be set as sparklayer |
Key | This must be set as max_order_parent_quantity |
Value | This must be set as an integer, e.g. 6, 12, 20 etc |
If you're installing SparkLayer on a single Shopify install and you are looking to run both B2C and B2B at the same time, it will be necessary to use the same stock pool behind the scenes. This means that both B2C and B2B customers will be ordering from the same stock source which can pose challenges. For example, your B2B customers could place large orders which inhibit B2C customers from being able to order.
SparkLayer has a way to solve this using a special setting called 'Reserve stock quantity'. It works as follows:
- A product is set up within Shopify with a Reserve Stock Quantity, e.g. 50
- Both B2C and B2B customers can order this product via your store
- When the total stock level reaches 50, B2B customers will be prevented from adding the item to their order
- B2C customers can continue to order the item, thus reserving stock for them
Just as with Pack Sizing (see above guide), this works by adding a metafield against a SKU. Please note:
- The metafield must always added at a variant level even if the product only has a single variant
- When setting up the metafield, the data should be set up as below. You can set up metafields natively via Shopify by following their help guide here.
Item | Details |
|---|---|
Metafield type | This must be set as an JSON string |
Namespace | This must be set as sparklayer |
Key | This must be set as reserve_stock_quantity |
Value | This must be set as an integer, e.g. 50 |
If you're running both B2B and B2C within the same Shopify store, there may be a range of products that you want to only show and be purchasable to logged in B2B customers.
Perhaps they can only be purchased in high-volumes or they are exclusive to your B2B customers. It's possible to achieve this by using Shopify's tagging system making it easy to hide and show products based on who the customer is. Read our full guide here (note, this does require coding on Shopify)
Prefer to use an app:? it's also possible to achieve B2B-only products and collections by using a Shopify app such as Locksmith
If you're on the SparkLayer Professional or Enterprise plan, you can enable Sales Agent ordering, allowing your team to place orders on behalf of your B2B customers. Learn more here.
If your customers are placing orders and paying by manual payment methods (such as Pay by Invoice or Request for Quote), these orders will automatically come through to Shopify as Draft orders (you can learn more here). Currently, Shopify doesn't have a way to notify you of Draft orders but there are some great ways to solve this.
Mechanic is a development and automation platform available to all Shopify merchants. Similar to Shopify Flow (which is only available for Plus customers), it gives the flexibility to automate actions to suit your own business workflows. We've provided a sample below that you can simply set up within Mechanic.
How it works: If customers have opted to pay via manual payment methods, you can automatically send an email to a specified email address to notify them to review the order.
{"docs":"For newly-created draft orders which are quotes from Sparklayer, it sends an email.","halt_action_run_sequence_on_error":false,"name":"SparkLayer - Send email for new quote","online_store_javascript":null,"order_status_javascript":null,"perform_action_runs_in_sequence":false,"script":"{% if options.email_recipient__email %}\n {% assign email = options.email_recipient__email %}\n{% else %}\n {% assign email = shop.email %}\n{% endif %}\n\n{% assign sparkPaymentType = draft_order.note_attributes[\"sparkPaymentType\"] %}\n{% if sparkPaymentType == 'quote' %}\n {% action \"email\" %}\n {\n \"to\": {{ email | json }},\n \"subject\": \"New quote {{ draft_order.name }}\",\n \"body\": \"View the quote here: https://{{ shop.domain }}/admin/draft_orders/{{ draft_order.id }}\",\n \"reply_to\": {{ shop.customer_email | json }},\n \"from_display_name\": {{ shop.name | json }}\n }\n {% endaction %}\n{% endif %}","shopify_api_version":"2022-10","subscriptions_template":"shopify/draft_orders/create","subscriptions":["shopify/draft_orders/create"],"preview_event_definitions":[],"options":{"email_recipient__email":null}}
If you're using Shopify Plus, it's possible to automate routine tasks using a powerful app called Shopify Flow (learn more here). For non-Shopify Plus users, there are a number of alternatives available that can achieve a similar outcome.
Whlist you can do this in SparkLayer, you may want to do actions before you convert the draft to an order, use this as a base. For orders that have been placed via a manual payment method (such as Payment on account), you can automatically convert these into 'Paid' orders that can then be processed. We've provided a sample below that you can simply set up within Mechanic.
How it works: If customers have opted to pay via manual payment methods, this will automatically convert a Draft order into a Completed order.
{
"name":"SparkLayer - Turn draft orders into orders",
"options":{
"mark_new_orders_as_fully_paid__boolean":true
},
"subscriptions":[
"shopify/draft_orders/create"
],
"subscriptions_template":"shopify/draft_orders/create",
"script":"{% assign payment_pending = true %}\n{% if options.mark_new_orders_as_fully_paid__boolean %}\n {% assign payment_pending = false %}\n{% endif %}\n{% assign sparkPaymentType = draft_order.note_attributes[\"sparkPaymentType\"] %}\n{% if sparkPaymentType == 'paymentByInvoice' or sparkPaymentType == 'paymentOnAccount' or event.preview %}\n{% action \"shopify\" %}\n mutation {\n draftOrderComplete(\n id: {{ draft_order.admin_graphql_api_id | json }}\n paymentPending: {{ payment_pending | json }}\n ) {\n draftOrder {\n order {\n id\n name\n fullyPaid\n }\n }\n userErrors {\n field\n message\n }\n }\n }\n{% endaction %}\n{% endif %}",
"docs":"This task monitors for newly-created draft orders, and converts each one into a completed order if the SparkLayer payment method was Payment on Account.",
"halt_action_run_sequence_on_error":false,
"liquid_profiling":false,
"online_store_javascript":null,
"order_status_javascript":null,
"perform_action_runs_in_sequence":false,
"shopify_api_version":"2021-10"
}
As well as assigning price lists to customer groups, you can go a step further and add additional percentage discount on top of this at a customer-specific level.
For example, let's say you've set up your B2B customers and assigned them to a price list but you want to give a range of these customers an additional 25% discount on top of these prices. SparkLayer lets you do this simply by adding special settings against a customer record in Shopify.
To enable this feature, SparkLayer uses customer metafields in Shopify to map the data across systems. To get started, you'll need to ensure your Shopify store is set up to capture metafields and our recommendation is to use a highly popular free Shopify app called Metafields Guru. You can also set up metafields natively via Shopify by following their help guide here.
Here's how it works:
- First, find the B2B customer record in Shopify that you want to apply the additional discount to
- Within the metafields view, add the following information in the below table, where Value is the discount % you want to give the customer
- Click Save. When the customer next logs in, they'll then see the additional discount applied.
Item | Details |
|---|---|
Metafield type | This must be set as an integer |
Namespace | This must be set as sparklayer |
Key | This must be set as discount_percentage |
Value | This must be set as an integer, e.g. 10, 20, 50 etc |
As well as assigning price lists to customer groups, you can go a step further and set specific price lists per customer (this overrides the customer group price-lists).
For example, let's say you've set up your standard B2B price list but you want specific customers to get additional pricing discounts on some (or all) products. To achieve this, you can create an additional price list, upload your prices via SparkLayer, and then simply set this to apply to a customer.
To enable this feature, SparkLayer uses customer metafields in Shopify to map the data across systems. To get started, you'll need to ensure your Shopify store is set up to capture metafields and our recommendation is to use a highly popular free Shopify app called Metafields Guru. You can also set up metafields natively via Shopify by following their help guide here.
Item | Details |
|---|---|
Metafield type | This must be set as an json |
Namespace | This must be set as sparklayer |
Key | This must be set as price_lists |
Value | An example of just one price list: ["price-list-handle-one"]
For two, use commas: ["price-list-handle-one", "base-list"] |
Example Shopify Flow workflow
Shopify Flow is powerful feature for Shopify Advanced & 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 | |
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 | |
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 | |
Archive B2B orders | Automatically archive B2B orders from your Shopify Orders view; useful if you want to hide them from your standard B2C orders |
It's possible to create special buttons on your store that allow customers to add collections of products to an order, rather than having to add them all individually. We call these Spark Buttons.
If some of your B2B customers have a credit limit in place, it's possible to display this when they login to your Shopify store.
Credit limits work by specifying an amount against a customer record and, when the customer signs in, and places an order using 'Pay on Account' ,they'll be notified if they are about to place an order that exceeds this. In our example below, the customer has exceeded their credit limit and they are only able to Pay Online by Card.
This feature works by enabling a customer metafield within Shopify that can then be manually adjusted according to the agreed terms. It's also possible to specify an account balance, which will automatically update each time a successful order is placed (this can also be adjusted manually if required).
To get started, you'll need to ensure your Shopify store is set up to capture customer metafields and our recommendation is to use a highly popular free Shopify app called Metafields Guru. You can also set up metafields natively via Shopify by following their help guide here.
When setting up the customer metafield within Shopify, please note the following:
Item | Details |
|---|---|
Metafield type | This must be set as an JSON |
Namespace | This must be set as sparklayer |
Key | This must be set as payment_on_account |
Value | This must be specified in the following format:
{"credit_limit":1000,"balance":250} |
If you're using the SparkLayer API, it's also possible to automatically synchronise credit limits and credit balances.
If you sell products that comprise 'multiple units', it's possible to display an automatically calculated Unit Price on your product pages. For example, you may sell a product that comes in packs of 10, but you want you customers to purchase in single units. Or you may sell products that come in specific weights (e.g. kg) and you want to show a 'price per kg'.
To enable this feature, first you'll need to add a metafield for the product this applies to. When setting up the product metafield within Shopify, please note the following:
Item | Details |
|---|---|
Metafield type | This must be set as an integer |
Namespace | This must be set as sparklayer |
Key | This must be set as case_size |
Value | This must be specified in the following format:
1, 2, 3, etc |
Once the metafield has been set up, you can then use the below code anywhere on your product page liquid file.
Sample code
{%- if customer.metafields.sparklayer.authentication -%}
{% if product.metafields.sparklayer.case_size %}
<span data-custom-spark-case-size="{{ product.metafields.sparklayer.case_size }}" data-product-id="{{ product.id }}"></span>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
setTimeout(() => {
document.querySelectorAll('[data-custom-spark-case-size]').forEach(async (el) => {
var caseSize = Number(el.dataset.customSparkCaseSize);
if (!caseSize) {
return;
}
var productId = el.dataset.productId;
try {
priceData = await window.spark.getPriceForProduct (productId);
} catch (e) {
console.error(e);
return;
}
const formatter = new Intl.NumberFormat([], {
style: 'currency',
currency: priceData.currencyCode ?? 'usd',
});
el.textContent = `This product comes in packs of ${caseSize}. Unit price ${formatter.format(priceData.fromPrice / Number(caseSize))}`;
});
}, 500);
});
</script>
{% endif %}
{% endif %}
If you're using Shopify's built-in unit price feature, you can also dynamically display the 'reference unit' e.g. kg, lb, ml.
Within the code sample above, simple change
el.textContent to the belowel.textContent = `Unit price per {{ item.unit_price_measurement.reference_unit }}: ${formatter.format(priceData.fromPrice / Number(caseSize))}`;
It's possible to adapt the SparkLayer interface to display in 'Quick buy mode' that allows customers to more rapidly build orders.
If you're using the Shopify B2B Dawn Theme, this is enabled by default, and it's also possible to manually enable this on your Shopify theme.
To enable 'quick buy mode', you'll need to follow the below steps within your Shopify theme codebase.
- Within
/templates/create a duplicate of your default collections layout - Within
/sections/create a duplicate of your default collections section layout - Adjust the theme code in the new
/sections/collection section layout to render the new/snippet/file that has the special 'quick buy mode' enabled
To enable 'quick buy mode', within Shopify, go to Products and click Collections and then edit the collection page you wish to apply this to. From the Theme template section, simply choose quick buy from the list of options and click save.
If you'd prefer to display all the variants of a product within the Quick Buy mode, you can include the following code in the /snippets/ sample file
Sample code
<spark-pdp parent-id="{{ product.id }}" mode-table-only></spark-pdp>
Display the quick buy in a special table view
Important to note: if you apply the new 'quick buy mode' to your collection pages, this will also take effect for logged-out customers also. If you are looking to customise the behaviour of how this works, we recommend engaging a Shopify expert to assist.
Your SparkLayer Core Script must also be set to at least version 8.4 to benefit from this feature
Last modified 15d ago