Integrating ServiceNow CPQ with Shopify

The ServiceNow CPQ app for Shopify enables stores to seamlessly manage and sell configurable products using ServiceNow CPQ advanced CPQ (Configure, Price, Quote) features. Installation and setup are streamlined, and robust Admin options are provided for both technical and non-technical users.

The ServiceNow CPQ app for Shopify is a fully featured connector for a Shopify store. The app ensures the entire product catalog is available in ServiceNow CPQ for use with a ServiceNow CPQ blueprint. The app also includes an app block to add a configurator to any page on a storefront without the need to create a dedicated UI. The configurator app block is fully functional out of the box which means customers can start adding configurable products to their cart as soon as the storefront changes are published.

• The ServiceNow CPQ app brings your entire Shopify product catalog into ServiceNow CPQ, allowing complex configurations for B2C and B2B sales.
• Features an app block to easily add a product configurator to any storefront page—no custom code required.
• Provides live catalog sync from Shopify to ServiceNow CPQ every fifteen minutes (one-way sync).
• Enables Shopify B2B Pricing by deferring to Shopify catalog prices for B2B users.

The ServiceNow CPQ app for Shopify is free to download on the Shopify app store:

Product Configuration

Setup

After downloading the ServiceNow CPQ app it will automatically appear in the Apps section of the store.

To start using the app, the ServiceNow CPQ environment details and a token must be entered in the ServiceNow CPQ settings section of the app landing screen. For more information about creating a ServiceNow CPQ token, see Set up a runtime client.

Note: Ensure the storefront and the Admin URLs are added as an origin for the token. All stores should also include the following static URL to their list of origins: https://shpfy-connect.ecommerce..

ServiceNow CPQ app Admin screen overview

• ServiceNow CPQ Settings: ServiceNow CPQ environment settings which is required in order for the configurator to display
• Instructions: This block summarizes at a high level what is needed for a configurable product. The ‘Add to Current Themeʼ button will also automatically place the app block on the product page template.
• Configurable Products: Redirects to a page for ServiceNow CPQ enabled products in the store catalog
• Order Configuration: Redirects to a ServiceNow CPQ specific create order page so that an Admin can add a ServiceNow CPQ configurable product to an order

Managing products

When the app is installed and the ServiceNow CPQ settings have been successfully saved, an automated catalog sync will begin and the custom ServiceNow CPQ attribute is added to the product details Admin page.

Product catalog synchronization

Products are synced down from Shopify to ServiceNow CPQ every fifteen minutes. All products in the store catalog will be synced to ServiceNow CPQ. Changes will be synced the next time the job runs.

Products from Shopify will appear on the Products and Configurable Products table. The Shopify GID is automatically mapped to the Product ID field on the table.

Note: The product syncs are one way. Changes to the product table will not be reflected in the Shopify catalog.

Configurable products

In order for a product to appear on the Configurable Products table as well the configurator to display, a product must have ServiceNow CPQ is Configurable attribute set to True.

Using Shopify B2B pricing

In order to use Shopify B2B Pricing, all products associated to a ServiceNow CPQ Blueprint must be present in a catalog. The catalog must also have at lease one company location associated to it alongside a user who belongs to that company.

When a user is logged in from an included company location, ServiceNow CPQ pricing will default to the Shopify catalog price. This will overwrite any ServiceNow CPQ price rules for these products. It is recommended that B2B specific blueprints are created to avoid any confusion around pricing in this scenario.

Adding a configurator to a page

The ServiceNow CPQ Configurator can be added to any page via an included app block through the page editor. The app block is automatically added to your store when the app is installed. You can find the block under apps when adding a new page section.

The look and feel of the ServiceNow CPQ configurator is managed in ServiceNow CPQ Admin through use of the layout editor. However, there are additional options in the ServiceNow CPQ app block. If you encounter issues where the Font is too small or large, that can be modified in the app block settings along with spacing.

Product Pages

For product pages, the ServiceNow CPQ app landing page has a shortcut to directly add the app block to the product page template.

The default behavior on a product page is to use the current product as the configurable product. If the product is ServiceNow CPQ configurable, the configurator will display. If not, the app block will remain hidden.

However, it is better to create a specific template for a ServiceNow CPQ enabled product page, since modifications to the page content besides the app block could be needed.

Content pages

When adding a ServiceNow CPQ configurator to a non-product page, a specific product must be selected for use.

By default, a select option will be displayed. When clicked, a list of all products will be shown. Either click a product or enter a search term. Once selected, the product will be displayed in the app block settings.

To change the product used, click the current product then click ‘Replaceʼ to reopen the product list.

Add to Cart vs Add to Order

The ServiceNow CPQ configurator app block provides two options for how it will function. Either the app will add the configuration to the customerʼs cart directly, or a draft order of the configuration can be created for the customer. To control the behavior of the configurator on the page, the option ‘Checkout As Draft Orderʼ can be enabled or disabled.

When enabled, a customer will need to be logged in. If the customer is currently logged out, the configurator will not be shown and instead a message to inform the customer to login is displayed. Once logged in, the customer can complete the configuration as usual. After completing the configuration, the configurator will close and display a success message. This configuration will then show as a draft order in the Shopify orders screen in the Admin. The customerʼs email used to login will be included in the order.

If the setting is disabled, once the configuration is completed. All items included in the configuration are added directly to the customerʼs cart and the customer is redirected to the cart page.

Managing configurable products in Shopify Admin

Configurable Products List:

On the ServiceNow CPQ app landing page, once the ServiceNow CPQ credentials have been saved, a configurable product section is shown.

Clicking into the page will display a list of all products that are ServiceNow CPQ configurable and any variants.

On the Configurable Products page, each product has two buttons. The details button redirects the Shopify user to that productʼs details page in the Shopify Admin so they can edit any product details.

The order button will redirect the Shopify user to the Create Draft Order page and open the configurator for the selected product.

Creating a draft order

On the Create Draft Order page, a Shopify user can select a ServiceNow CPQ configurable product to launch itʼs configurator. Once a product is selected and the submit button is clicked, the associated blueprint is displayed.

Once the configurator has been loaded, the Shopify user can complete a configuration just like a customer. Once complete, all items in the configuration are added to a new draft order and the user is redirect to that orderʼs page.

From the order page, the user can complete the order like any other Shopify order.

Editing a Configurable Product in a draft order

On the draft order page, a Shopify user can edit a ServiceNow CPQ configurable product that is included in the order. The user will select the product from the dropdown then click the ‘Reconfigureʼ button, which will redirect to the create draft order page.

The existing configuration will automatically load on the page and the user will then have the ability to make any changes before saving. Once saved, the user will be redirected to the order.

Using the app with headless implementations

The ServiceNow CPQ Shopify app is not required for users who wish to integrate ServiceNow CPQ with their Shopify storefront. However, the app is designed with headless implementations in mind.

Here are some considerations when using the app for your headless implementation:

The app will streamline the setup with ServiceNow CPQ and reduce the overall need for custom middleware by providing a product sync between platforms, a custom ServiceNow CPQ Configurable product attribute and Draft Order functionality.

A Custom UI can be used in place of the ServiceNow CPQ app block which is completely optional.

Saving a configuration, even heedlessly, will trigger the ServiceNow CPQ add to cart function which facilitates dynamic pricing and attributes Automated add to cart on save can be disabled through a DevOps request.

Clearing app settings

In any case where you need to clear the app settings, they can be manually deleted in your Shopify store settings: Go to the Metafields and metaobjects page and select ServiceNow CPQconfig.

Click the ‘More Actionsʼ drop down menu and click ‘Delete metaobjectʼ.