Hiding Ratings

You can customize your Sociable Reviews widget by hiding star ratings using custom CSS. This guide shows you how.

Why Hide Ratings?

• You want to focus on the text content of reviews rather than numerical scores.
• Your brand aesthetic favors a cleaner, more minimal look.
• You want to emphasize the review message over the rating.

CSS to Hide Ratings

Add the following CSS to hide all star ratings and Facebook recommendation indicators:

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

How to Add Custom CSS

Method 1: Shopify Theme Customizer

1. Go to Online Store → Themes → Customize.
2. Navigate to the page containing your Sociable Reviews block.
3. Click on the Sociable Reviews block in the sidebar.
4. If your theme supports a Custom CSS field for the block, paste the CSS there.
5. Click Save.

Method 2: Theme Code Editor

1. Go to Online Store → Themes.
2. Click Actions → Edit code.
3. Open your theme’s CSS file (commonly assets/base.css or assets/theme.css).
4. Add the CSS at the end of the file.
5. Click Save.

Selective Hiding

Hide Only Star Ratings (Keep Facebook Recommendations)

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

Hide Only Facebook Recommendations (Keep Stars)

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

Hide Ratings for a Specific Source

/* Hide only Google star ratings */
.sociable-review-google .sociable-review-stars {
  display: none !important;
}

/* Hide only Trustpilot star ratings */
.sociable-review-trustpilot .sociable-review-stars {
  display: none !important;
}

Troubleshooting

• Clear your browser cache and reload the page after adding CSS.
• Make sure you are editing the active theme.
• If styles are not applying, ensure you have included !important in your CSS rules.

If you need help with CSS changes, contact us at support@soviapps.com.