Hiding the Widget Header

Sociable Reviews allows you to customize your widgets by hiding the header section if you prefer a more streamlined look. This guide shows you how to hide the widget header using custom CSS.

Why Hide the Header?

There are several reasons you might want to hide the widget header:

• You want a cleaner, more minimal appearance
• You're integrating the widget into a section that already has a heading
• The header takes up too much vertical space on your page
• You want to use your theme's typography and styling instead
• You're embedding the widget in a custom section with your own branding

Adding Custom CSS to Hide the Header

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:

```css .sociable-widget-header { display: none !important; }

/* Optional: adjust top padding if needed */ .sociable-reviews-widget { padding-top: 20px !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 Widget Header */ .sociable-widget-header { display: none !important; }

/* Optional: adjust top padding if needed */ .sociable-reviews-widget { padding-top: 20px !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:

1. .sociable-widget-header { display: none !important; } - Completely hides the widget header section
2. .sociable-reviews-widget { padding-top: 20px !important; } - Adds some padding to the top of the widget for better spacing (adjust the value as needed)

Alternative Approaches

Hide Only Specific Header Elements

If you want to keep some elements of the header but hide others:

/* Hide only the title */ .sociable-widget-title { display: none !important; }

/* Hide only the star rating in header */ .sociable-stars-display { display: none !important; }

/* Hide only the statistics */ .sociable-widget-stats { display: none !important; }

/* Hide only the source indicators */ .sociable-sources { display: none !important; }

Replace Header with Custom Text

To replace the header with your own custom header:

/* Hide the original header */ .sociable-widget-header { display: none !important; }

/* Add custom header with CSS / .sociable-reviews-widget::before { content: "What Our Customers Are Saying"; display: block; font-size: 24px; font-weight: bold; text-align: center; margin-bottom: 20px; padding: 15px; / Add any other styling you want */ }

Modify Header Style Instead of Hiding

If you prefer to keep the header but modify its appearance:

.sociable-widget-header { background: transparent !important; padding: 10px !important; border-bottom: 1px solid #eee !important; }

.sociable-widget-title { font-size: 18px !important; color: #333 !important; font-weight: normal !important; }

Combining with Other Customizations

Hide Both Header and Ratings

If you want to hide both the header and ratings (from our Hiding Ratings guide):

/* Hide header */ .sociable-widget-header { display: none !important; }

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

/* Adjust spacing */ .sociable-reviews-widget { padding-top: 20px !important; }

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 you need to adjust the selectors based on your specific widget configuration

Widget Looks Off After Hiding Header

If the widget looks unbalanced after hiding the header:

/* Hide header */ .sociable-widget-header { display: none !important; }

/* Add spacing and border to first review */ .sociable-review:first-child .sociable-review-card { margin-top: 20px !important; border-top: 1px solid #eee !important; padding-top: 25px !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.