Dawn Theme : Product review star colour problem - Judge.me app

[RaghavGoel1]

Hi 

The start colour at my home page is coming in black colour. I am using judge.me app for reviews and the primary colour is set as yellow. The start colours are coming correctly on product page, but on the home page at the featured collection the star colours are in black. Not sure why this is happening, pls helpp!!

This is my website : https://f40566-d3.myshopify.com/ 

[Omar-Judgeme · Accepted solution]

Hi there,

Thank you for starting the thread!

Upon checking the current star ratings shown on your home and collection pages are not related to our app Judge.me. I believe they are part of your current theme, but I can surely help guide you on how to add them, as you would need to place our star rating code to your collection page file. Kindly follow the steps below:

• Go to your Online Store > Themes.
• On your live theme, click the three dots for more action.
• And click on Edit code to open Shopify's theme code editor.
• Look for your card-product.liquid file.
• And place the following code under the </h2> found in line 162 - I believe.
  <!-- Start of Judge.me code -->
  <div style='{{ jm_style }}' class='jdgm-widget jdgm-preview-badge' data-id='{{ card_product.id }}' data-auto-install='false'> {{ card_product.metafields.judgeme.badge }}
  <!-- End of Judge.me code -->
• This would help add our star rating to your home and collection pages.
• Next step, you can comment out the code related to the default star ratings.
• Within the same file, card-product.liquid
• Please add {% comment %} to line 171 then add {% endcomment %} to line 207
• Save the changes and review your pages.

Note: This is a bit of general steps for the Dawn theme, but it can differ depending on the versions. Since we don't have direct access to your theme, we can't give more accurate steps. However, please feel free to shoot us an email at support@judge.me and our support team would be happy to assist you further.

[AK_Design_Dev]

u need this type i think

[Omar-Judgeme · Accepted solution]

Hi there,

Thank you for starting the thread!

Upon checking the current star ratings shown on your home and collection pages are not related to our app Judge.me. I believe they are part of your current theme, but I can surely help guide you on how to add them, as you would need to place our star rating code to your collection page file. Kindly follow the steps below:

• Go to your Online Store > Themes.
• On your live theme, click the three dots for more action.
• And click on Edit code to open Shopify's theme code editor.
• Look for your card-product.liquid file.
• And place the following code under the </h2> found in line 162 - I believe.
  <!-- Start of Judge.me code -->
  <div style='{{ jm_style }}' class='jdgm-widget jdgm-preview-badge' data-id='{{ card_product.id }}' data-auto-install='false'> {{ card_product.metafields.judgeme.badge }}
  <!-- End of Judge.me code -->
• This would help add our star rating to your home and collection pages.
• Next step, you can comment out the code related to the default star ratings.
• Within the same file, card-product.liquid
• Please add {% comment %} to line 171 then add {% endcomment %} to line 207
• Save the changes and review your pages.

Note: This is a bit of general steps for the Dawn theme, but it can differ depending on the versions. Since we don't have direct access to your theme, we can't give more accurate steps. However, please feel free to shoot us an email at support@judge.me and our support team would be happy to assist you further.

[RaghavGoel1]

Hi @Omar-Judgeme 

Thanks for the solution. I have added the code as you said and it is working. 

 

But I dont want the "No.  of reviews" besides the stars to be bolded. I want it something like this:-

Also the reviews are looking very smooshed with the title and product description. Can you help in spacing out the reviews evenly between the title and description. 

Thanks again for the help!

 

[Omar-Judgeme]

Hello @RaghavGoel1,

I am glad that helped! To remove the boldness from the star rating text and add some spacing between the title and stars, please add the following CSS code to the bottom of your base.css file:

.card__information .jdgm-prev-badge {
  font-weight: normal !important;
  margin-top: 5px !important;
}

You can adjust the the value of margin-top from 5px to a different value depending on your preferences.

Feel free to let me know if you need help with anything else!

[Made4uo-Ribe · Accepted solution]

Hi @RaghavGoel1 

check this one if it work,

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
.rating-star:before {
    content: "\2605\2605\2605\2605\2605";
    background: #FDB800;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
</style>

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[RaghavGoel1]

Hi @Made4uo-Ribe 

Thank you so much for this! The code works perfectly. Can you help me make the star ratings look like this :-

Would be amazing if you could help with this. Regardless, thank you once again!

[Made4uo-Ribe]

Welcome, but you already have like this. 

Also the smaller stars is not and app, its from the theme.