Google Review Trust Box

Add a professional Google review trust box to your product pages. Boost credibility with social proof in minutes.

Important: Before making any changes to your theme, create a backup first.

Why Add a Google Review Trust Box?

Increases customer confidence during checkout with social proof
Showcases your Google rating prominently on product pages
Improves conversion rates by addressing trust concerns
Links directly to your Google reviews for transparency

Preview

What You'll Build

4.8/5

★ ★ ★ ★ ★

Excellent service and quality products

Live preview - hover to see the interaction

Instructions

Step-by-Step Implementation

1
Access Your Theme Editor
1. Log into your Shopify admin
2. Navigate to Online Store > Themes
3. Click "Customize" on your active theme
2
Add the Custom Liquid Section
1. Find the section where you want to add the review box (typically under the Add to Cart button)
2. Click "Add Block"
3. Scroll down and select "Custom liquid"
3

Add the Code

Copy the complete code from below, paste it into the Custom liquid content box, and click Save.
4
Customize Your Review Box
- • Update your Google Review URL – Replace YOUR_GOOGLE_REVIEW_URL with your actual Google Business Profile review URL
- • Update your rating – Change 4.8/5 to your current Google rating
- • Update review text – Replace with a real customer review or general rating description

Code

Copy This Code

html

<div class="google-trust-box">
  <a href="YOUR_GOOGLE_REVIEW_URL" class="trust-box-link" target="_blank" rel="noopener">
    <div class="trust-box-content">
      <div class="google-icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20">
          <path d="M22.6 12.3c0-.8-.1-1.6-.2-2.4H12v4.5h5.9c-.3 1.4-1 2.6-2.1 3.4v2.8h3.4c2-1.8 3.1-4.5 3.1-7.7z" fill="#4285F4"/>
          <path d="M12 23c2.8 0 5.2-.9 7-2.4l-3.4-2.8c-1 .6-2.2 1-3.6 1-2.8 0-5.1-1.9-6-4.4H2.5v2.9C4.2 20.8 7.9 23 12 23z" fill="#34A853"/>
          <path d="M6 14.4c-.2-.6-.3-1.3-.3-2s.1-1.4.3-2V7.5H2.5C1.9 9.1 1.5 10.5 1.5 12s.4 2.9 1 4.4l3.5-2z" fill="#FBBC05"/>
          <path d="M12 5.6c1.6 0 3 .5 4.1 1.6l3-3c-1.8-1.7-4.2-2.7-7.1-2.7-4.1 0-7.8 2.2-9.5 5.9l3.5 2.9c.9-2.5 3.2-4.4 6-4.4z" fill="#EA4335"/>
        </svg>
      </div>
      <div class="rating-content">
        <div class="rating-stars">
          <span class="rating-number">4.8/5</span>
          <div class="stars">
            <span class="star full">★</span>
            <span class="star full">★</span>
            <span class="star full">★</span>
            <span class="star full">★</span>
            <span class="star partial">★</span>
          </div>
        </div>
        <p class="review-text">Excellent service and quality products</p>
      </div>
    </div>
  </a>
</div>

<style>
.google-trust-box {
  margin: 16px 0;
  width: 100%;
}

.trust-box-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.trust-box-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #ffffff;
  transition: all 0.2s ease;
}

.trust-box-link:hover .trust-box-content {
  border-color: #d1d5db;
  background-color: #f9fafb;
}

.google-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.rating-content {
  flex-grow: 1;
}

.rating-stars {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.rating-number {
  font-weight: 600;
  font-size: 15px;
  color: #111827;
}

.stars {
  display: flex;
  gap: 2px;
}

.star {
  color: #fbbf24;
  font-size: 14px;
  line-height: 1;
}

.star.empty {
  color: #d1d5db;
}

.star.partial {
  position: relative;
  color: #fbbf24;
  opacity: 0.5;
}

.review-text {
  margin: 0;
  font-size: 14px;
  color: #4b5563;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .trust-box-content {
    padding: 10px 14px;
  }
  
  .rating-number {
    font-size: 14px;
  }
  
  .review-text {
    font-size: 13px;
  }
}
</style>

Customization

Make It Your Own

Google Review URL

Link to your Google Business Profile reviews page

Rating Number

Update to match your current Google rating

Star Display

Adjust stars to reflect your rating (full, partial, empty)

Review Text

Use a real customer quote or general description

Best Practice: Update your rating regularly to maintain accuracy and build trust with customers. The link opens in a new tab so customers can verify your reviews.

Result

How It Looks

Google review trust box on Shopify product page

Explore More Free Sections

Discover more code snippets to enhance your Shopify store.

View All Sections