Hiding Specific Reviews

Sometimes you may want to hide a particular review from displaying in your Sociable Reviews widget without removing it from the data source. This guide shows you how to use CSS to hide specific review cards in your live widget.

Why Hide Specific Reviews?

There are several reasons you might want to hide individual reviews:

• A review contains outdated information about a previous product version
• You've received a review that's unnecessarily long or poorly formatted
• A review mentions a competitor or other content you'd rather not highlight
• You want to manually curate which reviews appear, without recreating the widget
• A specific review doesn't align with your current marketing strategy

Identifying Specific Reviews

Before you can hide a review, you need to identify it with a CSS selector. Sociable Reviews provides several ways to target specific reviews:

Method 1: Targeting by Position

The simplest approach is to hide a review based on its position:

/* Hide the first review */ .sociable-review:nth-child(1) { display: none !important; }

/* Hide the third review */ .sociable-review:nth-child(3) { display: none !important; }

Note: Position-based targeting may change if reviews are reordered or new reviews are added.

Method 2: Targeting by Reviewer Name

You can target a review based on the reviewer's name using a more specific selector:

css /* Hide John Smith's review */ .sociable-review .sociable-reviewer-name:contains("John Smith") { display: none !important; }

Implementation Options

Adding Custom CSS to Your Theme

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 your targeting CSS at the end of the file
2. Click Save

Alternative Approaches

Visually De-emphasize Instead of Hiding

Instead of completely hiding a review, you might want to de-emphasize it:

/* Make the review semi-transparent */ .sociable-review:nth-child(3) { opacity: 0.5 !important; }

/* Reduce the size */ .sociable-review:nth-child(3) { transform: scale(0.9) !important; transform-origin: top center !important; }

Conditionally Hide on Mobile Only

To hide a review only on mobile devices:

@media (max-width: 768px) { .sociable-review:nth-child(3) { display: none !important; } }

Hide Based on Rating

To hide all reviews with a specific rating:

/* Hide all 1-star reviews */ .sociable-review .sociable-review-rating[data-rating="1"] { display: none !important; }

Troubleshooting

Changes Not Appearing

If your CSS isn't working:

1. Clear your browser cache and reload the page
2. Check your CSS selector accuracy using browser developer tools
3. Add !important to your display property
4. Verify the review structure hasn't changed due to an app update

Notes on Review Caching

Sociable Reviews uses caching to improve performance. Your CSS changes will persist until:

1. The cache is cleared (typically every 24 hours)
2. New reviews are fetched from the source platforms
3. The widget is manually refreshed

For more permanent solutions, consider creating a new widget with different filtering settings instead of using CSS to hide specific reviews.

Need Help?

If you need assistance targeting specific reviews or implementing custom review filtering, please contact our support team by clicking the help icon in the bottom right corner of the app interface.