Widgets

Welcome

In this module, you will learn that widgets are pre-configured content holders that allow you to rapidly add content to your pages without having to develop these elements.

After completing this module, you should be able to:

• Identify the purpose and function of widgets within Spire CMS pages.

• Add, copy, and delete widgets to customize content layout and enhance user experience.

What is it/Why use it?

Spire CMS widgets make it easy to build and update website pages quickly without needing to code. They help maintain consistent design, allow non-technical teams to manage content independently, and support scalable, personalized experiences. This saves time, reduces reliance on developers, and ensures a smooth, professional user experience across the site.

Widgets in Spire are either added to existing rows, or a you add a row to contain the widgets. If you click the plus icon at the bottom of a content page, you can view the Row widget menu, where you can select a layout for the row.

Basic row

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.

Flex Row

You can also select Flex Row, which gives you more flexible options for row customization.

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

Check out the link below to see how you can easily add a widget manually, step by step.

Note:  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. To see the list of widgets available on a specific page, click Edit on a page. Add a row, or choose from a row already available to you. In a row's cell, click Add Widget. In the Add Widget window, you will see a list of any widgets available to add to this specific page. If a widget is not listed, it cannot be added to this page, unless you work with your partner to see if a customization is available.

Copy a widget

To copy a widget in Spire CMS, first access the CMS and select a page from the Pages tree. Enter Edit mode, then click Copy on the widget you want to duplicate. This will copy the widget-along with any nested widgets-to your clipboard. A confirmation message will appear. To reuse the widget, click Add Widget on the same or a different page, and select it from the Clipboard elements.

Note:  The copied widgets are only available during the active session.

Delete a widget

Simply hover over the desired widget, click 'Delete,' and publish the page to confirm the removal.

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.

Set up compact header

The Compact Header is essential for improving user experience and site usability, especially on content-heavy pages. As users scroll, this condensed header ensures that critical navigation elements like the cart, search bar, and main menu remain accessible without needing to scroll back up. This is particularly important for B2B customers who often browse through large product catalogs and need quick access to key functions at all times. By enabling the Compact Header, you create a more seamless and efficient browsing experience that supports faster decision-making and reduces friction in the customer journey.

Want to see how it works?

Explore the below link to learn how to enable and customize the Compact Header in just a few steps.

Try it

It’s time to play in the Configured Commerce sandbox!

The following practice exercises take place in the Knowledge & Learning training site. Before jumping in, please log in to the Training site using the following credentials:

• Username: TrainingUser
• Password: Opticon1!#

After logging in, do the following:

1. Add a widget.
2. Copy a widget.
3. Delete a widget.

Wrap up

Congratulations! You have completed Widgets module. You should now be able to:

• Identify the purpose and function of widgets within Spire CMS pages.

• Add, copy, and delete widgets to customize content layout and enhance user experience.

Learn more

While we covered a lot, there's always more to learn about quick order and order upload and how to work with them!

Check out the below link for an up-to-date collection of helpful guides and technical documentation.