Make Your Brand Pop With Yotpo
We've gathered some neat tips and tricks you can implement on-site and in your Yotpo emails to make the best of Yotpo. These small tweaks can go a long way when it comes to visual aesthetics.
Email Customization
Use our Email Template Editor feature to implement visual elements into your Yotpo emails to match the look and feel of your brand.
- Email customization may not look ideal on Outlook accounts due to Outlook’s limited CSS support
- When the Template Editor is turned on, it resets the text in the "body" and "signature" sections of an email to the default English text:
Access the Email Template Editor
All of the following code implementations need to be added to the Email Template Editor, which can be found in your Yotpo account.
To access the editor:
- From your Yotpo Reviews main menu, go to Emails > Email Template Editor.
- Enable the editor.
Add a Banner
Adding a banner to your emails makes your brand appear more prominently to customers, and gives a little somethin'-somethin' to the overall design. It can also be a great and easy way to add some holiday cheer to your emails during the holidays.
To add a banner:
- Click Reviews.
- Choose the product_review_requestX.liquid template.
- Add the following code to the top of the editor window, below the {%- endcomment -%} section:
<img style="display: block; width:100%; max-width: 600px;" src="###BANNER IMAGE URL###" />
Form Styling
Choose the implementation codes that are relevant to you and add them to the
General > custom_overrides.css section of the editor to spice up the review request form:
Change Star Rating Color
Paste the code below to change the stars to any color you desire
.stars-container {
color: ###COLOR_CODE###;
}
Center Stars
The stars are aligned to the left by default setting. The following code allows you to center them:
.stars-container {
text-align: center;
}
Before Centering:
After Centering:
Change Button
The code box below contains several adjustments you can add to change the "Submit Your Review" button element. Each change is outlined with a headline in red:
.submit {
/* Change button color */
background-color: ###COLOR_CODE###;
/* Give button sharp edges */
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
/*Changes button text to uppercase*/
text-transform: uppercase;
/*Adjusts letter spacing*/
letter-spacing: 1px;
/*Unset bold text*/
font-weight: normal;
}
Before:
After:
Change Text Fields
The text fields are the free-text boxes where users can fill in their review title and review content.
The code box below contains several adjustments you can add to change the text field elements. Each change is outlined with a headline in red:
.textarea, .text-field {
/*Bolder border colors*/
border: solid 1px ###COLOR_CODE###;
/*Sharper Edges*/
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
}
Before:
After:
The Clean Look
Give your emails a clean look by using one or all of the following adjustments:
Center Text
The opening message of email is aligned to the left by default setting. The following code allows you to center it:
.content-header {
text-align: center;
}
Before centering:
After centering:
Removes Border around Email
.main-table {
border: none;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
}
Email Border before:
Email Borders After:
Email Footer Adjustments
The code box below contains several adjustments you can add to change the footer of the emails. Each change is outlined with a headline in red:
.content-bottom.gray-text-centered {
/* Change text color */
color: ###COLOR_CODE###;
/*Change background*/
background-color: ###COLOR_CODE###;
/*Remove top border*/
border-top: none;
}
Add Image Gallery
Add the following code to the Reviews > product_review_request_X.liquid template under the <div class="yotpo-readonly-end"></div> section:
<table style="border-collapse: collapse;">
<tr>
<td>
<img style="width:100%; max-width: 200px; display: block;" src="###IMAGE_URL_TOP_LEFT###">
</td>
<td>
<img style="width:100%; max-width: 200px; display: block;" src="###IMAGE_URL_TOP_CENTER###">
</td>
<td>
<img style="width:100%; max-width: 200px; display: block;" src="###IMAGE_URL_TOP_RIGHT###">
</td>
</tr>
<tr>
<td>
<img style="width:100%; max-width: 200px; display: block;" src="###IMAGE_URL_BOTTOM_LEFT###">
</td>
<td>
<img style="width:100%; max-width: 200px; display: block;" src="###IMAGE_URL_BOTTOM_CENTER###">
</td>
<td>
<img style="width:100%; max-width: 200px; display: block;" src="###IMAGE_URL_BOTTOM_RIGHT###">
</td>
</tr>
</table>
Widget Customization
Use our Widget CSS Editor feature to implement a variety of changes to your on-site Yotpo widgets:
Change Widget Colors
Save yourself some coding work by changing the widget colors in the Look and Feel section of your Yotpo account before enabling the Widget CSS Editor.
You can then enable the CSS editor and see that it kept those same settings.
Default Widgets colors:
Widget Colors after adjusting "Look & Feel" settings:
Access the Widget CSS Editor
All of the following code implementations need to be added to the Widget CSS Editor, which can be found in your Yotpo account.
To access the editor:
- Log in to your Yotpo Account
- Click On-site Widgets
- Click Widget CSS Editor
- Enable the editor
Remove Reviewer Avatars
This code allows you to get rid of the bubbles next to the reviewer names. Add this code under the last line of the editor window:
span.yotpo-icon-profile.yotpo-header-element.pull-left {
display: none!important;
}
.yotpo .yotpo-review .yotpo-main, .yotpo .yotpo-comment .yotpo-main, .yotpo .yotpo-question .yotpo-main, .yotpo .yotpo-onsite-upload .yotpo-main {
margin-left: 0;
}
.yotpo .yotpo-review .yotpo-footer, .yotpo .yotpo-comment .yotpo-footer, .yotpo .yotpo-question .yotpo-footer, .yotpo .yotpo-onsite-upload .yotpo-footer {
margin-left: 0;
}
Adjust Colors and Emphasize the Review Title
Add relevant codes under the last line of the editor window:
/* User name color */
.yotpo .yotpo-review .yotpo-header .yotpo-header-element .y-label.yotpo-user-name, .yotpo .yotpo-comment .yotpo-header .yotpo-header-element .y-label.yotpo-user-name, .yotpo .yotpo-question .yotpo-header .yotpo-header-element .y-label.yotpo-user-name, .yotpo .yotpo-onsite-upload .yotpo-header .yotpo-header-element .y-label.yotpo-user-name {
color: ###COLOR_CODE###;
}
/* Changes to review title */
.content-title.yotpo-font-bold {
font-family: ###WEBSITE_FONT###;
font-size: 20px;
line-height: 30px;
padding-top: 2px;
padding-bottom: 7px!important;
}
Review Title Before:Review Title After:
- Make sure to change the ###COLOR CODE### section of the code to the color of your choosing. The code should look like this: #848484
- Make sure to change the ###WEBSITE FONT### section of the code to the font of your choosing.
Adjustments for a “Cleaner” Look
The code box below contains several adjustments you can add to "clean up" your Reviews Widget. Each change is outlined with a headline in red, just add relevant codes under the last line of the editor window:
.yotpo-review.yotpo-regular-box {
/*Remove border between reviews*/
border: none;
/*Add spacing between reviews*/
padding: 30px 0 27px;
}
/* spacing within the review */
.yotpo .yotpo-review .yotpo-main, .yotpo .yotpo-comment .yotpo-main, .yotpo .yotpo-question .yotpo-main, .yotpo .yotpo-onsite-upload .yotpo-main {
margin-top: 0!important;
margin-bottom: 22px;
}
/* removes separator next to the “share” at the bottom of the review */
span.yotpo-icon.yotpo-icon-seperator {
display: none;
}
/* removes the text next to the “thumbs up” and “thumbs down” */
span.y-label.label-helpful {
display: none;
}
/* makes review stars smaller */
span.yotpo-review-stars span.yotpo-icon.yotpo-icon-star.rating-star.pull-left, span.yotpo-review-stars span.yotpo-icon.yotpo-icon-empty-star.rating-star.pull-left, s
pan.yotpo-review-stars span.yotpo-icon.yotpo-icon-half-star.rating-star.pull-left {
font-size: 16px;
/*Add spacing above and below stars*/
line-height: 24px;
}