Can I add a Google Reviews widget icon to the corner of each page?

[mifudecor]

We currently have a testimonials page where our latest google reviews are - but we're looking to add a little widget that lives on each page, kinda like the live chat button. 

Is this possible in Shopify? I've looked everywhere and I can't seem to figure it out. ** See picture of an example from a different company's website. 

Thanks!! 

[DaisyVo]

Hi @mifudecor 

Yes, it can be done.
Please provide the store's URL and the link of the store with the review icon image (the image you sent).

Best,

Daisy

[mifudecor]

our store is www.mifudecor.ca and the website that I got the image from is https://e3officefurniture.ca/ 

[DaisyVo]

Hi @mifudecor 

In the store you shared, the star icons and the Google icons have their own images. Unfortunately, we can’t display them as they are. I can only show the text for now 

https://img001.prntscr.com/file/img001/S2gO22AcTKa_zqrBNTokHg.png 

If you want it like that, let me know so I can provide you the guide

Best,

Daisy

[DaisyVo]

Hi @mifudecor 

In order to fulfill your request, please follow these stepsStep 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </body>

<!-- NEW GG RV -->
<div id="new-gg-rv" >
  <div></div>
  <div id="new-gg-rv-content">
    <div><i class="fa fa-google" aria-hidden="true" style="font-size: 50px; color: linear-gradient(crimson, lightsalmon, gold, seagreen,   midnightblue, indigo, violet)"></i></div>
    <div>
      <span>Google Rating</span>
      <div id="">
        5.0
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star"></span>
        <span class="fa fa-star"></span>
      </div>
      <span>Based on 102 reviews</span>
    </div>
  </div>
</div>
<!-- END NEW GG RV -->
{% style %}
  .fa-star{
    color: #E7711B;
  }
  div#new-gg-rv {
    position: fixed;
    bottom: 30px;
    right: 30px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
    z-index: 999;
    background: white;
  }
  div#new-gg-rv > div:nth-child(1) {
      background: green;
      width: 100%;
      height: 5px !important;
      display: block;
  }
  div#new-gg-rv-content {
      display: flex;
    align-items: center;
      gap: 20px;
      padding-inline: 20px;
  }
{% endstyle %}

and then Search file theme.liquid > Insert this code above </head> 

https://img001.prntscr.com/file/img001/g16o5u2tTEC7NMKyaRAO0g.png 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Here is the result: 

https://img001.prntscr.com/file/img001/TBN9qc04RXmp8_peGMGdHg.png 

I hope this helps,

Best,

Daisy

[mifudecor]

Thank you!!! I'll give that a try! 

[DaisyVo]

Hi @mifudecor 

Is it working dear?