How to style widget settings to match your website's color theme

See what each color picker changes in the widgets checkout flow.

Larry Brager avatar
Written by Larry Brager
Updated over a week ago

To edit the main design elements of your customer portal and checkout, click the menu item, Widgets & Forms > Customer Portal. Then, click "Style My Customer Portal," and you will be taken to a page where you can easily change the main color elements match your website.

Each of the color selectors corresponds to a part of your widget so you can have it match the color scheme on your site. 

  • The Primary Button Background changes the background color on the buttons that move you through the widget.

When you change it the widget looks like:

  • The Primary Button Text Color will change the text displayed in the buttons that move you through the widget.

When you change it the widget looks like:

  • The Success Button Background color changes the background color on the button that finishes the checkout process.

When you change it the widget looks like:

  • The Success Button Text color changes the color of the text on the button that finishes the checkout process.

When you change it the widget looks like:

  • The Embedded Navbar Background color changes the background color of the navigation menu in the customer portal when customers are logged in.

When you change it the widget looks like:

  • The Embedded Navbar Menu Text changes the color of the text in the navigation menu in the customer portal when customers are logged in.

When you change it the widget looks like:

  • The Embedded Active Navbar Background changes the color that is highlighted when the customer is browsing the portal and is on a page.

When you change it the widget looks like:

  • The Portal Accent Color changes the color of the text of the headings of each section throughout the widget.

When you change it the widget looks like:

  • The Portal Second Accent Color changes the color of the shopping cart icon in the widget.

When you change it the widget looks like:

  • The Table Accent Color changes the background on alternating rows of the pricing totals.

When you change it the widget looks like:

Related Articles:

Please let us know if you have any questions. 

Sincerely,
The PayWhirl Team

Did this answer your question?