Work with widgets in Spire CMS

  • Updated

Widgets are pre-configured content holders that allow you to rapidly add content to your pages without having to develop these elements. In Spire, users have different widgets and configuration options available to them as compared to the Classic CMS.

Best practices

You can add widgets to existing rows or add more rows to contain widgets. Click the Plus icon to view the Row widget menu and select a row layout.

Rows in the Spire CMS must always have 12 columns. You can choose from some of the pre-configured layouts in the Row menu, or create your own by entering whole numbers separated by a plus sign, as illustrated in the examples below.

Row Layout Row Configuration
Two equal columns 6+6
Three equal columns 4+4+4
Four equal columns 3+3+3+3
Six equal columns 2+2+2+2+2+2
Three columns - one twice the size of the other two 6+3+3
Four columns - one twice the size of the other three 6+2+2+2
Three uneven columns 5+4+3

After you have added a row widget, you can click the Plus icon within the cells of the row to add widgets. Each cell can contain multiple widgets that stack within the cell.

Widget features and functionality

Widget fields are labeled G, C or T, which have the following meanings:

  • G – global value that applies to the website in every context
  • C – contextual value that may have different variants
  • T – translatable value

You can use a telephone number in any widget that allows you to add links by typing tel: Phone Number into the link space. When a user clicks on the telephone number, it initiates dialing, making it easier for them to contact you.

Add a widget

  1. Access the Spire CMS by adding /contentadmin to the end of your site URL or by selecting the Content Editor links from within the admin console.
  2. Select a page from the Pages tree.
  3. Click Edit.
  4. Scroll down and click Add Widget.
  5. If you need to add a row, select the desired configuration for the row you are adding to the page. If not, proceed to the next step.
  6. Click Add Widget within one of the row's cells. The Add a Widget window appears and shows widgets available for the page.
  7. Search for or select a widget from the displayed widget groups and options.

Edit a widget

  1. Access the Spire CMS.
  2. Select a page from the Pages tree.
  3. Click Edit to enter edit mode for the page.
  4. Click Edit on the widget you would like to edit.
  5. Update the content or settings of the widget as desired
  6. Click Save.
  7. Click Publish to publish changes.

Delete a widget

  1. Access the Spire CMS.
  2. Select a page from the Pages tree.
  3. Click Edit.
  4. Hover over the widget you would like to delete and click Delete.
  5. Click Publish.

Available widgets

The widgets available depend on the page you are editing. Some widgets are only available on certain pages, while others are available on most pages.

These widgets are available on every page:

The table below shows the elements that are specific to each page type.

Compact Header

Compact Header Elements

A condensed version of your site’s header that appears as users scroll down the page, giving them continued access to search, cart and navigation.
Home

Categories Elements

Brands Elements

The landing page for your website.

Locations

Location Finder Elements The listing of your locations for customers to see and search.
  • Dealer Details
Dealer Details Elements The details of your dealer locations.

Brands

Brands Elements The listing of brands that your website sells. Choose to display as a gallery or as a list.
  • Brand Details
Brand Details Elements The details for a specific brand, such as logos or images, product lines, and categories. 
Cart Cart Elements The page that displays what is in a customer's cart. Use widgets to add actions such as Save Order or allow the customer to choose a fulfillment method.
Category Details Categories Details Elements The details of a specific category, such as logos, product links, or subcategories.
Categories Categories Elements The listing of your website categories. You can configure the widget to show images or only top-level categories.
Checkout - Review & Submit Checkout Review & Submit Elements The final page of the checkout process where the customer can review order details before submitting the order.
Checkout - Shipping Checkout Shipping Elements The fulfillment methods available for an order. You can also use widgets to add a place for order notes or to allow costumers to send email confirmation to additional emails.
Checkout - Order Confirmation Order Confirmation Elements The confirmation after a customer completes an order. Use widgets to display order details and provide an account sign-up option.
My Account My Account Elements The customer's main account page. Use widgets to display recent orders, lists, or quotes.
  • Account Settings

Account Settings Elements The page where customers can manage their subscriptions or change their default billing and shipping addresses.
  • Addresses

Addresses Elements The page where customers can view and add addresses in their account.
  • Budget Management
Budget Management Elements The page where customers can assign, configure, and review budgets.
  • Cart Reminder Unsubscribe

Cart Reminder Unsubscribe Elements The page where customers can unsubscribe from cart reminders.
  • Change Customer

Change Customer Elements The page where customers can change their billing address or shipping method.
  • Change Password

Change Password Elements The page where customers can change their password.
  • Create Account

Create Account Elements

The page where customers can create an account. 
  • Expired Account Activation Link
Rich Content widget The page to alert customers of an expired account activation link. Use the Rich Text Widget to display a message such as The link you used for activating your account is invalid. Please get a new link by trying Forgot Password.
  • Expired Reset Password Link
Rich Content widget The page to alert customers of an expired reset password link. Use the Rich Text Widget to display a message such as The link you used for resetting your password is invalid. Please get a new link by trying Forgot Password again.
  • Invoice History
Invoice History Elements The listing of a customer's previous invoices.
    • Invoice Details
Invoice Details Elements The details from a specific invoice.
  • My Lists
My Lists Elements The page where customers can create a new list or view ones they have already created.
    • My Lists Details
My Lists Details Elements The details about a specific list.
  • Order Approval
Order Approval List Elements The listing of a customer's approved orders.
    • Order Approval Details
Order Approval Details Elements The details of a specific approved order.
  • Order History
Order History Elements The listing of a customer's previous orders.
    • Order Details
Order Details Elements The details of a specific order, such as Billing Address, Notes, and Shipping Method.
  • Requisitions
Requisitions Elements The listing of a customer's requested items.
  • Job Quotes

RFQ Job Quotes Elements

RFQ My Quotes Elements

The listing of a customer's quote requests for specific quantities of products that do not need to be fulfilled at one time.
    • Job Quote Details
RFQ Job Quote Details Elements The details of a specific job quote request.
  • My Quotes
RFQ My Quotes Elements The listing of a customer's pricing requests for products or groups of products.
    • Quote Details

RFQ Job Quotes Details Elements

RFQ Quote Details Elements

The details of a quote request.
  • Saved Orders
Saved Order List Elements The listing of a customer's saved orders.
    • Saved Order Details
Saved Order Details Elements The details of a saved order, such as the Product List and Total.
  • Saved Payments
Saved Payments Elements The listing of a customer's saved payment methods. Use widgets to allow them to add additional cards.
  • User Administration
User List Elements The listing of users for a customer that can only be viewed by an Administrator.
    • User Setup
User Setup Elements A page to create or edit a user with information such as Username, Activation Email, and Role.
Order Status Order Status Elements A page to search for the status of an order. Display elements such as Address Details and Product List.
Order Upload Order Upload Elements A page for customers to add items to their cart from a CSV or Excel file.
Product Compare Product Compare Elements A page to display the product comparison carousel.
Product List

Product List Elements

Rich Content widget

The listing of products. Use widgets to allow customers to customize the page, such as various filters and list controls.

Use the Rich Text Widget to display a custom message when user enters a search term that results in no products being returned.

Quick Order Quick Order Elements A page for customers to quickly search for, view, and add items to their cart. 
Requisition Confirmation Requisition Confirmation Elements The confirmation after a customer submits a requisition, such as the Product List and Total.
Request a Quote RFQ Request Quote Elements A page for customers to request pricing for a product or group of products.
  • Quote Confirmation

RFQ Quote Confirmation Elements The confirmation of a requested quote.
Sign In Sign In Elements A page for customers to sign in or create a new account.
Static List Static List Elements The page for a shared list.
News News List Elements The listing of your news pages.
  • News
News Page Elements The content of a particular news page.
Footer Footer Elements Elements for your footer, such as logos and links.