Skip to main content
Skip table of contents

Updating Existing Themes

You're able to update the look and feel of your existing theme with the SpeedFlex Design Editor. You'll be able to control the look and typeface of various aspect of the widgets. If you need to add custom CSS to your theme, please reach out to your customer success manager.

The sidebar menu area is where you'll select which area you want to update. The right side menu offers a live preview with test data. You're also able to select between all the widgets in the top dropdown to see how the new changes effects them.

image-20240422-120330.png

Sidebar Menu Items

On the left sidebar menu you'll be able to select different areas of the widget you want to customize. Items like SVG icons, colors, styling and fonts can be customized.

image-20240422-120432.png

Sidebar Item: Colors

Here you'll be able to set the main color theme of your SpeedFlex Widget. If you're unsure of the values, please read over Branding and Colors before making changes.

image-20240422-120527.png

Sidebar Item: Typography

Here you'll be able to set the type of font you want to use and the styling configuration for those fonts. We breakdown our typography into different sections, to understand more please read through the Typography guide first.

image-20240422-120614.png

Sidebar Item: Buttons

Here you can control the different types of buttons in within the SpeedFlex Widget. You can control the padding, colors, radius, and font styling of each type of button.

image-20240422-120800.png

Sidebar Item: Icons

All the icons in the SpeedFlex Widget is an SVG. You're able to update all the icons with your own SVG icons. If you wish to do this, please refer to Iconography on how to create icons.

image-20240422-120834.png

If you'd like to use your own icons in certain areas then click on the icon you wish to update. A modal will popup. Deselect the use default checkbox and replace the SVG code with your new SVG code. We will show a preview of the icon so you can make sure it's correct.

image-20240422-120906.png

Sidebar Item: Layouts

Certain widgets come with different layout options. To learn more, see Widget Layout.

Here are the widgets with multiple layout options:

  • Review Summary Widget

  • Review List Widget

image-20240422-121015.png

If you are using Layout Custom please reach out to your Customer Success Manager to make changes.

Sidebar Item: Widget Configuration

Here you can make changes to all the widget configuration items for the SpeedFlex Widgets. You can reference the full list of our widgets and their configurations options in SpeedFlex Widgets.

image-20240422-121306.png

Building and Saving your changes

Once you’re finished with your design. You can save the widget theme and build the configuration. Building the configuration will deploy the widget theme on your live site instance.

If you would like to copy an existing theme to another site, you’ll use the copy to site button.

image-20240422-121352.png

This is intended for copying a test site's theme to your production site. Emplifi recommends configuring your theme on your Test site instance first then once satisfied copy that theme to your production site instance.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.