Widget CSS Editor (Legacy)

Yotpo's widgets showcase user-generated content at highly visible conversion points across your site, so it's important that they look absolutely stunning. Our newly redesigned Widget CSS Editor allows you to apply your own custom CSS overrides to achieve a widget design that's truly native to your site and brand.

In this article, you'll learn how to customize and preview widget CSS, and manage your widget versioning.

Look & feel settings vs. CSS overrides

Using the built-in Look & Feel design settings, Yotpo allows you to make basic customizations to the overall look and feel of on-site widgets without requiring any CSS know-how at all, however, there may be cases where advanced visual customization may be necessary.

The Widget CSS Editor enables you to make advanced CSS customizations to your widget appearance and easily manage widget versioning to ensure that your CSS overrides are compatible with new widget versions released by Yotpo.

Advanced CSS

The CSS Editor allows you to customize and preview widget CSS right in your browser using your browser's DevTools. 

Widget versioning sandbox

From time to time, Yotpo releases widget updates which may include new features, improve widget performance, or resolve bugs. Most of these updates don't require any action on your part, however, some larger updates may require you to update your widget version. 

The CSS editor allows you to preview your current CSS overrides with the new version prior to updating. Please make sure all widgets look as intended before updating.

Enabling the CSS editor

If you're ready to go beyond the built-in Look & Feel design settings, you can enable the CSS editor to make advanced CSS customizations.To enable the CSS Editor, follow the steps listed below: 

1. From your Yotpo Reviews main menu, go to On-Site Widgets.
2. Click Widget CSS Editor.
3. Enable the Widgets CSS Editor toggle.

Customizing widget CSS

Take the appearance of your on-site widgets to the next level with advanced CSS customizations.The CSS Editor allows you to edit, preview, and publish custom CSS to any Yotpo widget on your site!

Supported widgets

The Widget CSS Editor supports the on-site features listed below. Note that some features require a minimum threshold of reviews or user-generated photos in order to display a widget preview and some widgets will display a placeholder image until you have enough original content to populate the widget. 

Step 1: Choose a widget

To get started, preview a widget from the drop-down list of widgets.

The widget will open in a new browser tab.

Step 2: Inspect and customize

Google Chrome:

1. Right-click the desired element.
   
   
   
2. Click Inspect on the element you wish to customize.
   
   
   
3. Make your changes in the Styles panel.
   
   
4. Copy custom overrides from your browser and Paste them into Yotpo's Widget CSS Editor.
   
   
   
5. Click Save Changes when you're ready to push your overrides to your live site.
   
   

Step 3: Copy CSS overrides

Once you're happy with the widget appearance in your browser, copy only your CSS overrides from the browser and paste them in Yotpo's CSS Editor. Only CSS overrides are shown in the Widget CSS Editor. The full widget stylesheet can only be accessed from your browser's DevTools.

Step 4: Save your changes

When you're done, don't forget to click Save Changes so they appear on-site.

Managing widget versioning

Widget code is comprised of two key elements:

1. The core widget code, which is managed by Yotpo
2. The CSS code, which affects the on-site design and appearance of the widget

When the Widget CSS Editor is enabled, you get complete control over the CSS while Yotpo continues to maintain the core widget code. From time to time, Yotpo updates this code as a New Widget Version to include new features, improve widget performance, resolve bugs, etc. Most of these updates don't require any action on your part, however, some larger updates may require you to manually update your widget version.

New widget version

When there's a new version available, we'll notify you and prompt you to update to the latest widget version.

When prompted, click Preview New Version to preview the updated widget(s) within the widget versioning sandbox. 

Widget versioning sandbox

When you update widgets, you're effectively replacing the existing core widget code with a new and improved widget code but your CSS overrides remain intact - Yotpo does not touch your custom CSS code when new widget versions are released.

Nevertheless, there may be cases where updates to the core widget code made by Yotpo could indirectly affect your custom CSS overrides- that's where the Widget Versioning Sandbox comes into play.

The sandbox allows you to preview your widgets with the new core updates and your CSS overrides to make sure that they're compatible and no design elements were broken as a result of the newly released widget version. That way there are no surprises and you can stay in total control of the appearance of Yotpo widgets on your site. 

Previewing updated widgets

Widgets that are pending updates will be listed on the left-hand side of the versioning sandbox. Click on each one to preview the updated widget in your browser.

If the updated widget looks okay:

If the widget looks fine, go ahead and click Save & Update in order to push the new widget version to your site.

If the updated widget doesn't look right:

If the widget doesn’t look right, inspect the widget using your browser's DevTools and make your CSS corrections to the updated widget. For detailed instructions click here.

Once you're happy with the updated widget appearance, click Save & Update to push the new widget version with your CSS corrections to your site.

What can you do with CSS overrides?

There's a lot you can do with custom CSS overrides. Below are just a few examples of some of the visually stunning effects you can create using your own custom CSS overrides. 

Customize widget buttons

Customize the size, color, and hover effects of widget call-to-action buttons.

Change the button background color

.yotpo .yotpo-default-button, .yotpo input[type="button"].yotpo-default-button  {
      background-color: #169391; 
}

Change the button background color on hover

.yotpo .yotpo-default-button:hover, .yotpo input[type="button"].yotpo-default-button:hover {
   background-color: #737373;
   }

Change the button size

.yotpo.yotpo-main-widget .yotpo-icon-btn, .yotpo .yotpo-modal-dialog .yotpo-icon-btn {
      padding: 6px 11px;
}

Hide the review date on the widget

You can either add the following code directly to the product page:

<style>
.yotpo .yotpo-review .yotpo-header .yotpo-header-element .y-label.yotpo-review-date {display:none !important}
</style>

Or you can add the following code to the style.css file at the bottom:

.yotpo .yotpo-review .yotpo-header .yotpo-header-element .y-label.yotpo-review-date {display:none !important}

Center the widget alignment

.yotpo.yotpo-main-widget .yotpo-bottomline.yotpo-bottomline-3-boxes .yotpo-bottomline-box-1, .yotpo .yotpo-modal-dialog .yotpo-bottomline.yotpo-bottomline-3-boxes .yotpo-bottomline-box-1 {
    margin-right: 15px;
    display: block;
    width: 100%;
    text-align: center;
}

.yotpo.yotpo-main-widget .yotpo-bottomline.yotpo-bottomline-3-boxes .yotpo-bottomline-box-2, .yotpo .yotpo-modal-dialog .yotpo-bottomline.yotpo-bottomline-3-boxes .yotpo-bottomline-box-2 {
    padding-top: 5px;
    width: 480px;
    margin: 0 auto;
}

.yotpo.yotpo-main-widget .yotpo-bottomline.yotpo-bottomline-3-boxes .yotpo-bottomline-box-2 .yotpo-star-distribution, .yotpo .yotpo-modal-dialog .yotpo-bottomline.yotpo-bottomline-3-boxes .yotpo-bottomline-box-2 .yotpo-star-distribution {
    border-left: none;
}

.yotpo.yotpo-main-widget .yotpo-bottomline.yotpo-bottomline-3-boxes .yotpo-bottomline-box-2 .yotpo-star-distribution .yotpo-star-distribution-content, .yotpo.yotpo-main-widget .yotpo-bottomline.yotpo-bottomline-3-boxes .yotpo-bottomline-box-2 .yotpo-star-distribution .yotpo-star-distribution-footer, .yotpo .yotpo-modal-dialog .yotpo-bottomline.yotpo-bottomline-3-boxes .yotpo-bottomline-box-2 .yotpo-star-distribution .yotpo-star-distribution-content, .yotpo .yotpo-modal-dialog .yotpo-bottomline.yotpo-bottomline-3-boxes .yotpo-bottomline-box-2 .yotpo-star-distribution .yotpo-star-distribution-footer {
    width: 215px;
    margin-left: auto;
    margin-right: auto;
}

.yotpo.yotpo-main-widget .yotpo-bottomline .yotpo-product-related-fields, .yotpo .yotpo-modal-dialog .yotpo-bottomline .yotpo-product-related-fields {
    display: inline-block;
    margin-left: 25px;
}

Hide the header icon

.yotpo .yotpo-review .yotpo-header .yotpo-icon-profile, .yotpo .yotpo-comment .yotpo-header .yotpo-icon-profile, .yotpo .yotpo-question .yotpo-header .yotpo-icon-profile, .yotpo .yotpo-onsite-upload .yotpo-header .yotpo-icon-profile {
    display: none;
}

.yotpo .yotpo-review .yotpo-header .yotpo-icon-profile-social, .yotpo .yotpo-comment .yotpo-header .yotpo-icon-profile-social, .yotpo .yotpo-question .yotpo-header .yotpo-icon-profile-social {
    display: none;
}
.yotpo .yotpo-review .yotpo-main, .yotpo .yotpo-comment .yotpo-main, .yotpo .yotpo-question .yotpo-main, .yotpo .yotpo-onsite-upload .yotpo-main {
    margin-left: 0;
}

span.yotpo-icon-profile-social.yotpo-header-element.pull-left {
    display: none;
}

.yotpo .yotpo-review .yotpo-header .yotpo-icon-profile,
.yotpo .yotpo-comment .yotpo-header .yotpo-icon-profile,
.yotpo .yotpo-question .yotpo-header .yotpo-icon-profile,
.yotpo .yotpo-onsite-upload .yotpo-header .yotpo-icon-profile {
    display: none
}

.yotpo .yotpo-review .yotpo-header .yotpo-icon-profile-social img,
.yotpo .yotpo-comment .yotpo-header .yotpo-icon-profile-social img,
.yotpo .yotpo-question .yotpo-header .yotpo-icon-profile-social img {
    display: none
}

.yotpo .yotpo-review .yotpo-footer, .yotpo .yotpo-comment .yotpo-footer, .yotpo .yotpo-question .yotpo-footer, .yotpo .yotpo-onsite-upload .yotpo-footer {
    margin-left: 0;
}

Troubleshooting

Did you run into an issue with your widget CSS? Check out some of the frequently asked questions listed here below.