Checkout HQ - Global Module

Checkout HQ - Product Listing Page

Checkout HQ - Cart

Checkout HQ - Single Product

Checkout HQ - Cart/Checkout




NOTE:  Prior to launching, you will want to modify the page associations in the Checkout HQ Global module.


"Checkout HQ Global" Module

Checkout HQ Global is a global module that will need to be added to each page of your e-commerce experience. 


You can access this module on your example pages in Contents:




If you are creating a new page, you can find the module in the "Add" section of the content editor and search for "Checkout HQ Global". Then drag and drop the global module to the top of your page:




Once you have located your Checkout HQ global module, to edit it, you will want to click on the module in the editor:




Once you click the module, there will be a pop-up confirming you want to edit global content. Click the orange "Open in global content editor" button. 





The options available within your Checkout HQ Global module are:

  • Custom product properties
    • Add any custom product properties you with to use for the product listing filters or to display on single product pages.
  • Pages
    • Choose the pages you’ve created for each step. Cart, Product Listing, Single Product Base, and Payment Thank You,
  • Default Product Image
    • You can choose a default image, if a product does not have a Checkout HQ image assigned this is the image that will display. An image 575x575 or smaller is recommended. A square image that is a consistent size with your other products can also be used.
  • Thumbnail Width
    • This setting controls the width of the image displayed for products in the product listing and related products modules.



Checkout HQ - Product Listing Page

The Product Listing Module allows you to customize your Product Listing page to display your products in a grid. It allows for search and customizable filter options.




You can access this module on your example pages in Contents.


If you are creating a new page, you can find the module in the "Add" section of the content editor and search for 

"Checkout HQ - Product Listing". Then drag and drop the module to your page editor.


To edit the Checkout HQ Product Listing module, select it from the Contents section in the editor. Once you have click the module to edit it, you will have a few options to edit


  • Products Per Row
    • Changes the number of products per row in a standard size screen desktop display.
  • Rows Per Page
    • Changes the number of rows per single page load in a standard size screen desktop display.
  • Sort By
    • Options include Name (alphabetical A-Z), Price (Ascending), Price (Descending) and Custom Order Property. To use the custom order, the “Checkout HQ - Order” needs to be completed for all products using numerical values (with item 1 displaying first).
  • Filters
    • You can choose from any product properties to create a filterable experience. It pulls in all values for those properties. If you cannot find your product properties, you need to first add them to the “Checkout HQ Global” module.
  • No Products message
    • You can customize the message that displays to users if no products are returned in a search or filtered view.





Checkout HQ - Cart

The Cart Module allows you to customize your Checkout Cart. You will need to have this module on every page you want the website visitor to be able to access the shopping cart from.


There are two options with the Cart Module that allow you to choose if you want the cart to be displayed as a pop-out modal/drawer on the right hand side of the page, or link to a separate Cart Page.


Modal/Drawer:


Checkout Page:



You can access this module on your example pages in Contents.


If you are creating a new page, you can find the module in the "Add" section of the content editor and search for 

"Checkout HQ - Cart". Then drag and drop the module to your page editor.


To edit the Checkout HQ Cart module, select it from the Contents section in the editor. Once you have click the module to edit it, you will have a few options to edit.


Options available to edit in the Checkout HQ - Cart module:

  • Open in Modal?
    • If unchecked, the cart displays on the page as a static element.
  • Trigger Type
    • This allows you to customize the functionality, either replacing the links on the page or adding a button to the page. Replacing links allows you to have a simple text item in the header and trigger the cart display from this text link.
  • Trigger Text
    • You can modify the text that is replaced by this action by modifying the text here. By default, anywhere “Cart” displays on the page will be replaced by this action.
  • Header
    • Changes the text that sits above the cart.
  • Empty Cart Message
    • Displays when no items are found in the cart.



Checkout HQ - Single Product

The Cart Module allows you to customize details about a product. By default, the name and description are added to the display.




You can access this module on your example pages in Contents.

If you are creating a new page, you can find the module in the "Add" section of the content editor and search for 

"Checkout HQ - Single Product". Then drag and drop the module to your page editor.


To edit the Checkout HQ Single Product module, select it from the Contents section in the editor. Once you have click the module to edit it, you will have a few options to edit.


Options available to edit in the Checkout HQ - Single Product module:

  • Product Properties
    • You can choose from any product properties to create a unique experience. It pulls in all values for those properties, for this product, automatically. If you cannot find your product properties, you need to first add them to the “Checkout HQ Global” module.
  • Show Gallery
    • Uncheck to hide the image gallery
  • Show back link?
    • Uncheck to hide the “continue shopping” link
  • Redirect to cart page after add?
    • Uncheck to prompt a user to view their cart instead of automatically redirecting them into the cart page.



Checkout HQ - Cart/Checkout

The Checkout HQ - Cart/Checkout Module allows you to customize your checkout page, checkout form, and credit card collection using stripe (Included  with Checkout HQ Quotes + Payments Only)







You can access this module on your example pages in Contents.


If you are creating a new page, you can find the module in the "Add" section of the content editor and search for 

"Checkout HQ - Cart/Checkout". Then drag and drop the module to your page editor.


To edit the Checkout HQ Cart/Checkout module, select it from the Contents section in the editor. Once you have click the module to edit it, you will have a few options to edit.


Options available to edit in the Checkout HQ - Cart/Checkout module:

  • Total Header
    • Appears at the top of the cart
  • User information form
    • Choose a HubSpot form. We recommend using the Checkout HQ - Checkout as your base form. The billing address fields are required if you are using the Stripe integration.
    • You can also customize this form using the form content options in this module.
  • Thank you
    • You can customize the inline thank you message or redirect to a unique thank you page from these settings.
  • Stripe Publishable Key
    • If you are using the stripe integration as part of your project, you’ll need to find the Publishing Key in your account to populate here. If left blank, no credit card collection will appear. If you are using your Checkout HQ for quoting, you can leave this blank.
  • Stripe font
    • You can customize the display of your stripe credit card collection embed here.
  • Payment Button Text
    • You can customize the button text for your final purchase step here. If using for a quoting engine, you can change this to read “Get Quote” instead.
  • Empty Cart Message
    • You can customize the text that will appear if a user clears their cart from this module.



Please note: Shipping products will display in the cart, for any products with the “Checkout HQ - Shipping Product” marked yes.