Widget CSS Editor (Legacy)
Widget CSS Editor (Legacy)
Article Summary
Share feedback
Thanks for sharing your feedback!
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.
Is this article for me?
If you are using the new Yotpo Reviews widgets, see Updating Your Widget Version
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.
Wanna see a few examples?
Click here to check out just a few examples of some cool CSS overrides you can easily implement using the Widget CSS Editor!
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:
- From your Yotpo Reviews main menu, go to On-Site Widgets.
- Click Widget CSS Editor.
- Enable the Widgets CSS Editor toggle.
Accessing the CSS Editor for the first time:
The CSS Editor is automatically enabled upon accessing it for the first time. Don't worry, your on-site widgets aren't affected in any way until your first CSS overrides are saved.
Please note:
The CSS Editor is automatically enabled upon accessing it for the first time. With the CSS Editor enabled, your widget Look & Feel design settings are disabled. If you'd rather stick to the built-in Look & Feel design settings, simply disable the CSS Editor using the toggle switch in the upper left-hand corner.
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!
Some notes before you get started:
- We recommend saving the CSS for last. Custom widget CSS should only be applied after you've completed your initial Yotpo setup. Enabling additional Yotpo features after CSS overrides have been applied may impact the baseline layout of your widgets and result in unintended issues with your CSS overrides.
- For example, activating Custom Forms will change the baseline widget code and affect the overall appearance of the Reviews Widget and may, therefore, affect any preexisting CSS overrides to the widget.
- Yotpo recommends having at least a basic level of CSS proficiency prior to making CSS customizations. Custom CSS code is not supported by Yotpo’s technical support, however, you can always revert widgets to their original default appearance if you encounter an issue.
Interested in a tailor-made widget design?
Reach out to your Yotpo representative to learn more about how our in-house Professional Services team can help you design beautiful on-site widgets that reflect your brand.
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.
| Widget | Widget Preview |
|---|---|
| Reviews Widget | Shows placeholder reviews |
| Reviews Tab | Shows a preview of the Reviews Tab |
| Embedded Widget | At least one review is required to see a preview |
| Promoted Products | Shows a placeholder image |
| Reviews Carousel | Requires five reviews with a star-rating of at least four stars |
| Product Gallery | Shows placeholder images |
| Custom Gallery | At least three images are required to see a preview |
| Star Rating | At least one review is required to see a preview |
| Badges | At least 20 reviews are required to see a badge preview |
| Shoppable Instagram | Shows placeholder images |
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:
- Right-click the desired element.
- Click Inspect on the element you wish to customize.
- Make your changes in the Styles panel.
- Copy custom overrides from your browser and Paste them into Yotpo's Widget CSS Editor.
- Click Save Changes when you're ready to push your overrides to your live site.
CSS Stylesheet (Google Chrome)
If necessary, you can find the full CSS stylesheet here:
- Click the Sources tab
- Expand the staticw2.yotpo.com folder
- Expand the sub-folder represented by your Yotpo Account ID
- Click on the file beginning with widget.css
- Make your customizations in the widget.css stylesheet
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.
Previewing Responsive CSS
Note that CSS changes may impact the responsiveness of the on-site widgets. As such, we recommend testing your CSS customizations on different screen resolutions, tablets, and mobile devices to ensure widget responsiveness.
Syntax error validation:
Syntax errors in CSS overrides are automatically highlighted to help reduce syntax errors in your code.
Step 4: Save your changes
When you're done, don't forget to click Save Changes so they appear on-site.
Made a mistake and want to revert?
To revert back to the original widget Look & Feel design settings, simply delete the CSS overrides of the desired widget and save your changes.
Managing widget versioning
Tip:
If you're using the 3.0 widget version, please go to Updating Your Widget Version
Widget code is comprised of two key elements:
- The core widget code, which is managed by Yotpo
- 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.
Tip:
You can always save your changes so you don't lose your work. Save Changes won't affect the appearance of your on-site widgets just yet.
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.
I've made changes to the code, but I can't see them online. What's happening?
The Reviews Widget includes two performance settings which control content delivery versus widget loading time for all Yotpo on-site widgets. The two settings are Better Performance and Immediate Update.
By default, Yotpo accounts are set to Better Performance, which means that it might take a couple of minutes for changes you've made in the backend to appear on your live site.
For more information about the two settings, please click here
Help! I accidentally screwed up the appearance of my widgets. What do I do?
Custom CSS overrides may sometimes result in unintended consequences. If your CSS overrides resulted in an unintended issue with the appearance or performance of one of your widgets, you can always toggle off the Widget CSS Editor to revert back to your last-saved Look & Feel display settings.
Note: Disabling the Widget CSS Editor will revert all of your on-site widgets to their last-saved Look & Feel display settings.
How can I revert back to the default widget Look & Feel settings?
To revert back to the original widget Look & Feel design settings, simply delete the CSS overrides of the desired widget and save your changes
Please note:
If you disable the Widget CSS editor, the following will happen:
- All of your on-site widgets will be reverted to their last-saved Look & Feel display settings
- The overrides file will be prevented from loading
If you disable the editor, no CSS will be lost, it will simply not be applied as only the Yotpo base file will load.
Was this article helpful?
