Manage Spire CMS widgets
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. After you have added a row, 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.
Basic Row
Click the Plus icon to view the Row widget menu and select Basic Row.
Basic 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 |
|---|---|
One column | 12 |
Two equal columns | 6+6 |
Three equal columns | 4+4+4 |
Four equal columns | 3+3+3+3 |
Two columns - one large and one small | 10+2 |
Three columns - one twice the size of the other two | 3+3+6 |
Three columns - one twice the size of the other two | 3+6+3 |
Six equal columns | 2+2+2+2+2+2 |
By default, the row widget handles vertically stacking your columns for different screen widths. However, this default logic may not provide the expected results for all use cases. If you want to control the size of each column for each screen size, you can specify the target size of a given column for a given screen size, using a bracket syntax in the Layout text field.
The bracket syntax follows the format [a,b,c,d,e], where letters a, b, c, d, and e are all integers between 1 and 12. Each integer defines the column's width for a given screen size, starting with extra small in the first position and going to extra large in the last position.
For example, a value of [12,12,3,3,3] would result in a single column that uses the following values for the following screen sizes:
- Extra small – 12
- Small – 12
- Medium – 3
- Large – 3
- Extra large – 3
You can create multiple columns this way by separating each bracket with a + (plus) sign. For example, [12,12,3,3,3]+[12,12,3,3,3] would create two columns with the same configuration in the example above.
Flex Row
You can also select Flex Row, which gives you more flexible options for row customization.
You can set the following configurations in the Flex Row:
- Gap Between Zones – Set the gap between zones. Zones are the same thing as columns for Basic Row widgets. Value must have a valid CSS length format, such as 10px or 30%.
- Direction – Choose if the zones should be in a Row, Row Reverse, Column, or Column Reverse.
- Wrap – Choose if the content should have No Wrap, Wrap, or Wrap Reverse.
- Justify Content – Set the justification for content: Start, End, or Center.
- Align Items – Choose how the items should align. Options are Stretch, Start, End, Center, and Baseline.
- Align Content – Choose how to align content for the wrap. This option only appears after you select Wrap or Wrap Reverse.
- Flex Zones – Set the number of flex zones (columns) for content. Click Add to add a flex zone.
- Flex Grow
- Flex Shrink
- Flex Basis – Value must have a valid CSS length format, such as 10px or 30%.
Click Save once you are done configuring your Flex Row. You can also go back and edit these settings later.
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
- 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.
- Select a page from the Pages tree.
- Click Edit.
- Scroll down and click Add Widget.
- 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.
- Click Add Widget within one of the row's cells. The Add a Widget window appears and shows widgets available for the page.
- Search for or select a widget from the displayed widget groups and options.
Edit a widget
- Access the Spire CMS.
- Select a page from the Pages tree.
- Click Edit to enter edit mode for the page.
- Click Edit on the widget you would like to edit.
- Update the content or settings of the widget as desired
- Click Save.
- Click Publish to publish changes.
Note
If you do not see the ability to edit a widget, you may need to remove an active future publish date and time. See Edit a page for information.
Copy a widget
- Access the Spire CMS.
- Select a page from the Pages tree.
- Click Edit to enter edit mode for the page.
- Click Copy on the widget you want to copy. A message displays that the widget is copied to your clipboard. This includes any nested widgets.
- Click Add Widget on the same page or a different page, and select the widget from the Clipboard elements. You can only use the copied widget one time.
Note
The copied widgets are only available during the active session.
Delete a widget
- Access the Spire CMS.
- Select a page from the Pages tree.
- Click Edit.
- Hover over the widget you would like to delete and click Delete.
- 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.
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 | The landing page for your website. | |
Locations | The listing of your locations for customers to see and search. | |
| The details of your dealer locations. | |
Brands | The listing of brands that your website sells. Choose to display as a gallery or as a list. | |
- Brand Details | The details for a specific brand, such as logos or images, product lines, and categories. | |
Cart | 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 | The details of a specific category, such as logos, product links, or subcategories. | |
Categories | The listing of your website categories. You can configure the widget to show images or only top-level categories. | |
Checkout - Review & Submit | The final page of the checkout process where the customer can review order details before submitting the order. | |
Checkout - Shipping | 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 | The confirmation after a customer completes an order. Use widgets to display order details and provide an account sign-up option. | |
My Account | The customer's main account page. Use widgets to display recent orders, lists, or quotes. | |
| The page where customers can manage their subscriptions or change their default billing and shipping addresses. | |
- Addresses | The page where customers can view and add addresses in their account. | |
| The page where customers can assign, configure, and review budgets. | |
- Cart Reminder Unsubscribe | The page where customers can unsubscribe from cart reminders. | |
| The page where customers can change their billing address or shipping method. | |
- Change Password | The page where customers can change their password. | |
| The page where customers can create an account. | |
- Expired Account Activation Link | 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. | |
| 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 | The listing of a customer's previous invoices. | |
| The details from a specific invoice. | |
- My Lists | The page where customers can create a new list or view ones they have already created. | |
| The details about a specific list. | |
- Order Approval | The listing of a customer's approved orders. | |
| The details of a specific approved order. | |
- Order History | The listing of a customer's previous orders. | |
| The details of a specific order, such as Billing Address, Notes, and Shipping Method. | |
- Requisitions | The listing of a customer's requested items. | |
| 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 | The details of a specific job quote request. | |
| The listing of a customer's pricing requests for products or groups of products. | |
- Quote Details | The details of a quote request. | |
| The listing of a customer's saved orders. | |
- Saved Order Details | The details of a saved order, such as the Product List and Total. | |
| The listing of a customer's saved payment methods. Use widgets to allow them to add additional cards. | |
- User Administration | The listing of users for a customer that can only be viewed by an Administrator. | |
| A page to create or edit a user with information such as Username, Activation Email, and Role. | |
- VMI Dashboard | The dashboard users see when they switch to viewing Vendor Managed Inventory | |
| A page to display or add locations to VMI | |
- VMI Locations Details | A page to display information for a specific location | |
| The metrics of products moving throughout VMI | |
- VMI Products | The listing of products at a location | |
| The page that displays previous orders placed in VMI | |
- VMI Order Details | The details for a specific order | |
| A page to display or add users to VMI | |
Order Status | A page to search for the status of an order. Display elements such as Address Details and Product List. | |
Order Upload | A page for customers to add items to their cart from a CSV or Excel file. | |
Product Compare | A page to display the product comparison carousel. | |
Product List | 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 | A page for customers to quickly search for, view, and add items to their cart. | |
Requisition Confirmation | The confirmation after a customer submits a requisition, such as the Product List and Total. | |
Request a Quote | A page for customers to request pricing for a product or group of products. | |
- Quote Confirmation | The confirmation of a requested quote. | |
Sign In | A page for customers to sign in or create a new account. | |
Static List | The page for a shared list. | |
News | The listing of your news pages. | |
| The content of a particular news page. | |
Footer | Elements for your footer, such as logos and links. |