Here's how to change the Judge.me review stars to your custom icons to better match to your brand.
Theme changes needed:
- Add your icons to the store through Settings > Files
- Add CSS to css file
CSS Code to Add
Transcript
Hey, Scott Austin here from Jade Puma.
In this video, I wanna show you a customization that I've done for the store. I'm working on rhino power with judge me and customizing the judge me stars to map to the brand of rhino power. So I have judge me as the review app in this store. Like I do for most stores that I work on and here you can see the stars are displayed normally, but on the product page. And I display them normally on the product page in, in the big widget. But in the preview widget, the one up at top, I actually change the stars to be little rhino icons. You can see here there, you know, the rhino silhouette head there. And we use that icon in a couple places. For example, I have it here in the footer right here by their hashtag.
So I also added that to the judge, me review stars. I didn't wanna put it everywhere, cuz I didn't want rhino, rhino, rhino, you know, heads everywhere and overdo it. So I just added it in this one placement inside of the judge, me widgets. So it doesn't show on the review page and the homepage and lower down just here. And this is actually pretty easy to do with just a few lines of CSS. So let me show that to you. First thing I did is I created P and G files. You need three of them for judge me reviews and judge me calls them on off in half. Right? So the solid one here is, you know, one of the full star is, is in effect and we've got the off one when it's not in effect. And then the half one, obviously. So lemme show you what one of those looks like here on the front end, which I remember one, I think let's go here to the all reviews page and find one, a product that has four stars. And I think that this one does. Yeah.
So here you can see it's got four rhinos and then one silhouette rhino, because that, that judge me star is set to off. Now, if it was a four and a half star review, then there'd be the half rhinos showing up there. So you want to create three different images. I made them P and G images now because they're images there, you know, you can't change the color using the judge me settings. So you're gonna have to set your colors that you want in the P and G files when you create them. And if you want to change the color, you'll create new P and G files and replace them. And then if we go into our edits, so here I have a Jade Puma, I add to every store, my own CSS file, where I put all my CSS changes and I make that a liquid file. And that way I can add liquid code to this CSS that gets processed on the server side, right by the Shopify Servers. So right. You know, here I have some CSS code for file image URL. And that way I don't have to spell out the full path that those images are on. I can just say, Hey, the image name is this, go find it, you know, the full file image URL, get the 50 pixel version of that image and put that whole URL in here for the CSS code. So that's why I create a liquid file for my CSS under my assets folder in my theme, so that I can use some liquid in that. Now another option could have been, I could have added the CSS in, in the flex theme, at least in the online store, 2.0 version in the custom CSS section for, for the product information. But if I did that, I can't use liquid, right? So that's why I like to put it in its own CSS file in the theme and do the settings there.
So it's just these five lines of CSS. What we have here is we're taking those images we made and we're making them the background image behind the, the span that the stars are are held in. So that's why we've got three of them, you know, one for on one for off and one for half. And you can see the judge me classes are on, off in half. And then I add a little bit of padding to the last star because the layout works better that way. And you know, talking about the layout here, you'll see my, my images are actually rectangles. Not squares, even though the stars look squares. When I put the backgrounds in, it worked better with rectangles and those let's go here and find them for you, show you the aspect ratio that I used for my images.
So here you can see, I did 128 by a 100 size on the images. And then this line here, what it does is it takes the stars and makes them opacity of zero. So they're transparent. So it just hides the stars, right? And you can see in, in this CSS, I start each one off with the dot product app class. And that's because this element here, this judge me element here starts with that CSS class. If I had not started with that class, it would've changed the backgrounds in other places also. But I, like I said, I wanted it just up here in the preview badge. So that's how you can get custom icons to show up in your judgment reviews. Hopefully that was hopeful. Thanks for watching.