If our Shopify Reviews widget style editor is not enough for you and you need something more custom, we have a handy CSS editor inside the dashboard to let you include your own styles.
There are a few steps you will have to take to ensure your CSS works correctly on Opinew.
All Opinew’s shopify reviews widget CSS styles are appended with !important keyword. Opinew does this so your theme CSS styles don’t mix with the widget. This makes it a bit tricky to add any custom styles but fortunately, there is still a way:
Steps to add custom CSS on Opinew:
- Prepend all your style changes with the id of the main Opinew DIV. In the case of the review widget it will be #opinew-reviews-product-page-code and then add your own css selector. For All Reviews Code the id is #opinew-reviews-all-reviews-code and so on.
- To find the correct id you can inspect the HTML of the page.
- Append !important to all your styles to override the default Opinew ones
- Most HTML elements inside the widgets have their own distinct ids or classes so it’s easy to target them.
- For ex. the verified badge container has .opw-verified-badge class, the review date container has .opw-date-created class
Example:
Let’s pick the verified badge. Normally inside the dashboard, you can only change the background colour. But if you want to make the background transparent and change the text colour, you can do this:
#opinew-reviews-product-page-code .opw-verified-badge {
background-color:transparent !important;
color:#e67600!important;
}
Original 
Modified