Hiding Ratings

Sociable Reviews allows you to customize your widgets by hiding rating stars if they don't align with your store's design or if you prefer to focus on review content only. This guide shows you how to hide ratings using custom CSS.

Why Hide Ratings?

There are several reasons you might want to hide star ratings:

• You want to focus on the qualitative aspects of reviews (the actual text)
• Your brand aesthetic doesn't match with the star rating design
• You prefer a cleaner, more minimalist look
• You want to emphasize review content rather than numerical scores
• You receive mixed ratings and want to focus on the positive testimonials

Adding Custom CSS to Hide Ratings

Method 1: Using Shopify Theme Customizer

1. Log in to your Shopify admin
2. Go to Online Store → Themes
3. Click the Customize button on your active theme
4. In the theme editor, navigate to the page where you've added the Sociable Reviews widget
5. In the left sidebar, click on the Sociable Reviews section/block
6. Scroll down to the Custom CSS field (if available)
7. Add the following CSS code:

.sociable-review-rating.stars { display: none !important; }

.sociable-stars-display { display: none !important; }

.sociable-stat-block:has(.sociable-star) { display: none !important; } ```

1. Click Save

Method 2: Adding CSS to Your Theme

If your theme doesn't have a custom CSS field in the widget settings:

1. In your Shopify admin, go to Online Store → Themes
2. Click on Actions → Edit code
3. Look for your theme's CSS file, often found in:

• assets/theme.css
• assets/theme.scss.liquid
• assets/custom.css

1. Add the following CSS at the end of the file:

/* Hide Sociable Reviews Ratings */ .sociable-review-rating.stars { display: none !important; }

.sociable-stars-display { display: none !important; }

.sociable-stat-block:has(.sociable-star) { display: none !important; } ```

1. Click Save

Method 3: Using Theme App Extensions (Advanced)

For the most seamless integration, you can add custom CSS through our app's theme extension:

1. In your Shopify admin, go to Apps → Sociable Reviews
2. Navigate to Settings → Theme Integration
3. Enable Advanced Customization
4. In the Custom CSS field, add the code from Method 1
5. Click Save

CSS Explanation

The CSS code above targets three key elements:

1. .sociable-review-rating.stars - Hides the star ratings on individual reviews
2. .sociable-stars-display - Hides the star ratings in the widget header
3. .sociable-stat-block:has(.sociable-star) - Hides the average rating statistics

Alternate CSS Options

Hide Only Individual Review Ratings

If you want to keep the overall average rating but hide individual review ratings:

.sociable-review-rating.stars { display: none !important; }

Hide Only Header Star Ratings

If you want to keep individual review ratings but hide the header stars:

.sociable-stars-display { display: none !important; }

.sociable-stat-block:has(.sociable-star) { display: none !important; } ```

Replace Stars with Text

If you want to replace stars with a text-only rating:

.sociable-review-rating.stars { visibility: hidden; position: relative; }

.sociable-review-rating.stars::after { content: "Verified Review"; visibility: visible; position: absolute; left: 0; font-size: 14px; } ```

Troubleshooting

CSS Not Working

If your CSS isn't working:

1. Make sure you've added the code exactly as shown
2. Clear your browser cache and reload the page
3. Check if your theme has CSS that might be overriding our styles (try adding !important to your rules)
4. Verify you're editing the correct theme (your active theme)
5. Check if your theme has a theme extension that might be interfering

Stars Still Showing on Mobile

If ratings are hidden on desktop but still showing on mobile:

css @media (max-width: 768px) { .sociable-review-rating.stars, .sociable-stars-display, .sociable-stat-block:has(.sociable-star) { display: none !important; } }

Need Help?

If you're having trouble implementing these CSS changes, please contact our support team by clicking the help icon in the bottom right corner of the app interface.