Integrating ServiceNow CPQ with Shopify
Summarize
Summary of Integrating ServiceNow CPQ with Shopify
The ServiceNow CPQ app for Shopify enables seamless integration of Shopify stores with ServiceNow’s advanced Configure, Price, Quote (CPQ) capabilities. This integration allows stores to manage and sell configurable products easily by syncing Shopify’s product catalog with ServiceNow CPQ. The app supports both B2C and B2B sales with complex product configurations and includes a configurable product configurator that can be embedded on any Shopify storefront page without custom coding.
Show less
Key Features
- Catalog Sync: Automatic one-way synchronization of Shopify’s entire product catalog to ServiceNow CPQ every 15 minutes, ensuring product data is up to date for configuration and quoting.
- Configurable Products: Products marked as configurable in Shopify appear in ServiceNow CPQ for detailed configuration. The app adds a custom attribute to manage this within Shopify Admin.
- Product Configurator App Block: Easily add a fully functional configurator to any Shopify page using the app block, enabling customers to configure and add products to their cart without additional UI development.
- Shopify B2B Pricing Support: Enables use of Shopify catalog pricing for B2B users by associating company locations and users, overriding CPQ pricing rules when applicable.
- Draft Order Creation: Admins can create draft orders with configurable products using the configurator, allowing internal sales or customer service teams to configure and place orders on behalf of customers.
- Headless Commerce Compatibility: The app supports headless Shopify implementations by providing product sync, configurable attributes, and order functionalities, while allowing custom UIs instead of the default app block.
Practical Setup and Usage
- After installing the app from the Shopify App Store, configure ServiceNow CPQ environment details and generate a token with proper origins including storefront URLs and the static URL
https://shpfy-connect.ecommerce. - Manage configurable products via the app landing page in Shopify Admin, where products can be flagged as configurable for use in CPQ.
- Add the configurator app block to product pages or other storefront pages using the Shopify page editor; configure appearance settings like font size and spacing within the app block settings.
- Control whether configurations add items directly to the cart or create draft orders requiring customer login, allowing flexible sales workflows.
- Admins can create and edit draft orders with configurable products, mimicking customer configuration flows for internal order management.
Key Outcomes for ServiceNow Customers
- Enables Shopify stores to leverage advanced CPQ capabilities without complex custom development, accelerating time to market for configurable product sales.
- Ensures product data consistency through automated catalog synchronization, reducing manual data management efforts.
- Improves sales flexibility by supporting both direct-to-cart configurations and draft order workflows, catering to diverse business models.
- Facilitates B2B pricing integration by deferring to Shopify pricing for authenticated business customers, maintaining pricing accuracy.
- Supports headless commerce architectures while simplifying integration, reducing middleware complexity and enhancing customization options.
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 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:
Setup
After downloading the ServiceNow CPQ app it will automatically appear in the Apps section of the store.
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.
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ʼ.