The Google Reviews widget comes with clean, modern styling out of the box. But every brand is unique, and sometimes you need to make the widget truly yours.

Fortunately, our widget is built with CSS variables, making it incredibly easy to customize without touching any template files. You can override colors, spacing, shadows, border radius, and more — all from the Custom CSS field in your Shopify theme editor.

This guide covers every CSS variable you can customize, complete with examples.

Where to Add Custom CSS

Before diving into the variables, here’s where to add your customizations:

  1. Go to Online Store → Themes
  2. Click Customize on your active theme
  3. In the theme editor, find the Google Reviews widget section
  4. Scroll down to the Custom CSS field
  5. Paste your CSS overrides there

All custom CSS should be wrapped in a :root selector:

:root {
  /* Your custom CSS variables go here */
}

Primary Foundation Variables

These are the most powerful variables because they cascade to multiple elements throughout the widget. Changing these will affect several components at once.

:root {
  --dragonio-primary-bg-color: #f8f8f8;
  --dragonio-primary-color: #333333;
  --dragonio-primary-border-radius: 16px;
  --dragonio-primary-padding: 1em;
  --dragonio-primary-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
  • --dragonio-primary-bg-color — Background color for cards and containers
  • --dragonio-primary-color — Text color throughout the widget
  • --dragonio-primary-border-radius — Border radius for cards and containers
  • --dragonio-primary-padding — Inner spacing for cards and containers
  • --dragonio-primary-box-shadow — Shadow effect for cards and containers

Widget Container Variables

Control the main widget container that holds everything together.

:root {
  --dragonio-google-review-widget-background: #ffffff;
  --dragonio-google-review-widget-padding: 20px;
  --dragonio-google-review-widget-border-radius: 16px;
  --dragonio-google-review-widget-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Header Variables

Customize the widget header that displays your aggregate rating and business name.

:root {
  --dragonio-google-review-widget-header-background: #5e17a9;
  --dragonio-google-review-widget-header-color: #ffffff;
  --dragonio-google-review-widget-header-padding: 16px 20px;
  --dragonio-google-review-widget-header-border-radius: 12px;
  --dragonio-google-review-widget-header-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  --dragonio-google-review-widget-header-image-size: 48px;
}

The header-image-size variable controls the size of your Google Business profile image in the header.

Review Card Variables

Each individual review card can be styled independently.

:root {
  --dragonio-google-review-widget-card-background: #ffffff;
  --dragonio-google-review-widget-card-color: #333333;
  --dragonio-google-review-widget-card-padding: 16px;
  --dragonio-google-review-widget-card-border-radius: 12px;
  --dragonio-google-review-widget-card-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

Button Variables

Style the “Write a Review” and “Read More” buttons.

:root {
  --dragonio-google-review-widget-button-background: #5e17a9;
  --dragonio-google-review-widget-button-color: #ffffff;
}

Add hover effects with standard CSS:

:root {
  --dragonio-google-review-widget-button-background: #5e17a9;
  --dragonio-google-review-widget-button-color: #ffffff;
}

.google-review-button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

Control the footer text color.

:root {
  --dragonio-google-review-widget-footer-color: #666666;
}

Star Rating Variables

Customize the appearance of star icons throughout the widget.

:root {
  --dragonio-google-review-star-color: #ffc107;
}

Use gold (#FFC107), yellow (#FFD700), or any color that matches your brand.

Image Variables

Control reviewer avatars and other images in the widget.

:root {
  --dragonio-google-review-widget-image-size: 48px;
  --dragonio-google-review-image-width: 48px;
  --dragonio-google-review-image-border-radius: 50%;
}

Set image-border-radius to 50% for circular avatars, or 0 for square images.

Badge Widget Variables

The badge widget (compact floating badge) has its own set of variables.

:root {
  --dragonio-badge-bg-color: #5e17a9;
  --dragonio-badge-color: #ffffff;
  --dragonio-badge-border-radius: 12px;
  --dragonio-badge-padding: 12px 16px;
  --dragonio-badge-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --dragonio-google-review-badge-accent: #ffc107;
}

The badge-accent color is typically used for star ratings within the badge.

Drawer Widget Variables

The drawer widget (slide-out panel) uses these specific variables.

:root {
  --dragonio-drawer-bg-color: #ffffff;
  --dragonio-drawer-color: #333333;
  --dragonio-drawer-border-radius: 16px;
  --dragonio-drawer-padding: 20px;
  --dragonio-drawer-width: 400px;
  --dragonio-drawer-leave-review-bg-color: #5e17a9;
}

The drawer-width variable controls how wide the slide-out panel opens.

Grid Layout Variables

Control the number of columns in grid layouts at different screen sizes.

:root {
  --grid-cols-lg: 3;
  --grid-cols-md: 2;
  --grid-cols-sm: 1;
}
  • lg — Large screens (desktop)
  • md — Medium screens (tablet)
  • sm — Small screens (mobile)

Masonry Layout Variables

For masonry layouts (staggered grid), control columns independently.

:root {
  --masonry-cols-lg: 3;
  --masonry-cols-md: 2;
  --masonry-cols-sm: 1;
}

Complete Customization Example

Here’s a complete dark theme example that overrides multiple variables:

:root {
  /* Primary foundation */
  --dragonio-primary-bg-color: #1a1a1a;
  --dragonio-primary-color: #ffffff;
  --dragonio-primary-border-radius: 12px;
  --dragonio-primary-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

  /* Widget container */
  --dragonio-google-review-widget-background: #0f0f0f;
  --dragonio-google-review-widget-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

  /* Header */
  --dragonio-google-review-widget-header-background: #2a2a2a;
  --dragonio-google-review-widget-header-color: #ffffff;

  /* Cards */
  --dragonio-google-review-widget-card-background: #1a1a1a;
  --dragonio-google-review-widget-card-color: #e0e0e0;
  --dragonio-google-review-widget-card-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

  /* Buttons */
  --dragonio-google-review-widget-button-background: #9027e2;
  --dragonio-google-review-widget-button-color: #ffffff;

  /* Stars */
  --dragonio-google-review-star-color: #ffd633;

  /* Footer */
  --dragonio-google-review-widget-footer-color: #888888;
}

Brand Matching Example

Match your existing brand colors with this template:

:root {
  /* Replace these hex codes with your brand colors */
  --dragonio-primary-bg-color: #YOUR_BG_COLOR;
  --dragonio-primary-color: #YOUR_TEXT_COLOR;
  --dragonio-google-review-widget-header-background: #YOUR_PRIMARY_COLOR;
  --dragonio-google-review-widget-button-background: #YOUR_CTA_COLOR;
  --dragonio-google-review-star-color: #YOUR_ACCENT_COLOR;
}

Minimalist Example

For a clean, minimal look:

:root {
  --dragonio-primary-bg-color: #ffffff;
  --dragonio-primary-color: #222222;
  --dragonio-primary-border-radius: 8px;
  --dragonio-primary-box-shadow: none;
  --dragonio-google-review-widget-card-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --dragonio-google-review-star-color: #222222;
}

Testing Your Customizations

After adding custom CSS:

  1. Save your theme changes
  2. Preview your store in a new tab
  3. Hard refresh (Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows) to clear the cache
  4. Check the widget on mobile, tablet, and desktop

Common Customization Questions

Can I change the font?

Yes, use standard CSS:

:root {
  /* Your other variables */
}

.google-review-widget {
  font-family: "Your Font", sans-serif;
}

How do I hide specific elements?

Use display: none:

:root {
  /* Your other variables */
}

.google-review-widget-header {
  display: none;
}

Can I add animations?

Yes, CSS animations work:

.google-review-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.google-review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

Need Help?

If you’re unsure about any customization or run into issues, contact us — we’re happy to help you get your widget looking exactly how you want it.

Ready to customize your Google Reviews widget? Open your theme editor and start experimenting with these CSS variables. The changes are instant and reversible, so don’t be afraid to try different combinations until you find the perfect look for your brand.