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.

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:

1. From your Yotpo Reviews main menu, go to Emails > Email Template Editor. 
2. 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:

1. Click Reviews.
   
2. Choose the product_review_requestX.liquid template.
3. 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:

1. Log in to your Yotpo Account 
2. Click On-site Widgets
3. Click Widget CSS Editor
4. 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:

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;
}