Upgrade Your Review Stars: Replacing JudgeMe with Custom Icons
Table of Contents
- Introduction
- Customization for Rhino Power Store
- Displaying Rhino Icons in Judge Me Stars
- Creating PNG Files for Custom Icons
- Implementing CSS Changes
- Using Liquid Code in CSS
- Alternative Option for Adding CSS
- Layout Considerations
- Aspect Ratio for Custom Icon Images
- Hiding Default Stars with CSS
Customizing Judge Me Stars for Rhino Power Store
Hey, Scott Austin here from Jade Puma. In this video, I want to show you a customization that I've done for the store I'm working on, Rhino Power. With the help of the Judge Me app, I've customized the review stars to align with the brand of Rhino Power.
Displaying Rhino Icons in Judge Me Stars
On the product page, I've made changes to display the stars as little rhino icons within the preview widget. This adds a unique touch and reinforces the brand identity. The rhino silhouette head is used as the icon, which is consistent with other elements on the store, such as the footer. However, I've only added these custom icons in one placement within the Judge Me widgets to avoid overdoing it.
To achieve this customization, I utilized a few lines of CSS code. Let's dive into the process step by step.
Creating PNG Files for Custom Icons
To begin with, I created PNG files for the custom icons. Three different images were required for Judge Me stars: on, off, and half. The solid-icon image represents a full star, the off-icon image represents an empty star, and the half-icon image represents a half star. By using these different icons, we can accurately reflect the rating of each review.
Implementing CSS Changes
To implement these custom icons, I added some CSS code to my Jade Puma store. I created a liquid file for my CSS within the assets folder of my theme. This allows me to use liquid code within the CSS that gets processed on the server side by the Shopify servers. Alternatively, I could have added the CSS in the custom CSS section of the Flex theme, but that would restrict the use of liquid code.
Within the CSS code, I used the image URL function to specify the path to the PNG files. This way, I can refer to the images by their names and let the liquid code retrieve the full file path. I also applied the appropriate Judge Me classes to the icons (on, off, and half) to ensure they are displayed correctly.
Additionally, I added a bit of padding to the last star to improve the layout. The use of rectangles for the icons, instead of squares, was intentional to better align with the overall design of the store.
Using Liquid Code in CSS
Utilizing liquid code in the CSS file allows for dynamic handling of image URLs and facilitates easy customization. By using liquid, I avoid hard-coding the full URL path for the image files. Instead, I can simply refer to the image by name and let the liquid code resolve the correct URL.
Alternative Option for Adding CSS
Another option for adding CSS changes would be to include the code in the custom CSS section of the Flex theme, specifically in the product information section. However, this method would not allow the use of liquid code. Therefore, I chose to create a separate CSS file within the theme to maintain flexibility and utilize liquid code.
Layout Considerations
It's important to note that the layout of the custom icons may differ from the shape of the stars. In the CSS code, the backgrounds of the icons are specified as rectangles rather than squares. This adjustment was made to ensure a better visual layout within the Judge Me widget.
Aspect Ratio for Custom Icon Images
To maintain consistency and proper alignment, I used an aspect ratio of 128 pixels by 100 pixels for the custom icon images. This ratio worked well with the layout and ensured the icons fit seamlessly within the Judge Me widget.
Hiding Default Stars with CSS
To achieve the custom star display, I set the default stars to have zero opacity using CSS. This effectively hides the default stars while allowing the custom icons to be visible. By starting each CSS class with the product app class, I ensured that the background changes only apply to the specific elements in the preview badge, as intended.
By following these steps, you can easily incorporate custom icons within your Judge Me reviews, adding a unique touch and aligning with your brand identity.
Pros:
- Enhances brand identity
- Differentiates the store from others
- Provides a creative and visually appealing touch to the review stars
Cons:
- Requires CSS customization
- Need to create and upload custom icon images in PNG format
Highlights
- Customizing Judge Me stars for Rhino Power store
- Replacing default stars with rhino icons
- Creating PNG files for custom icons
- Implementing CSS changes for the custom icons
- Utilizing liquid code in CSS to dynamically handle image URLs
- Alternative option for adding CSS in the Flex theme
- Considering layout and aspect ratio for custom icon images
- Hiding default stars using CSS
FAQ
Q: Can I use this customization for any Shopify store?
A: Yes, you can apply these customization techniques to any Shopify store that uses the Judge Me app for product reviews.
Q: Can I change the color of the custom icons?
A: Unfortunately, the Judge Me settings do not provide an option to change the color of the icons. You would need to create new PNG files with the desired color and replace the existing ones.
Q: Will the custom icons show up on all pages of the store?
A: No, the custom icons are specifically added within the Judge Me widgets and only appear in the preview badge. They will not be displayed on the review page or the homepage.
Q: What is the advantage of using liquid code in the CSS file?
A: Liquid code allows for dynamic handling of image URLs, making it easier to customize and maintain the CSS file. It also enables the use of variables and other advanced features within the CSS code.
Q: Can I customize the shape of the icons?
A: Yes, you can customize the shape of the icons by modifying the PNG files accordingly. However, it's important to consider the layout and alignment within the Judge Me widget.
