When a customer opts in to receive a Google Customer Reviews survey, they're taken to a review page hosted on your store. This page is delivered through Shopify's app proxy, which means it renders inside your store's theme, complete with your header, footer, and navigation.
Because the page sits within your theme, it generally inherits your store's look and feel automatically. However, depending on your theme's layout, you may want to adjust the styling of the review page content to better fit your store.
Why the text can't be changed
The text on the review opt-in page is not customisable. This is by design — the page content is automatically translated into multiple languages so that your international customers see the page in their own language. Allowing custom text would break this automatic translation.
You can, however, customise the appearance of the page using CSS in your theme.
Page structure
The review page content is wrapped in a container with the following structure:
html:
<div id="egcr-review-container">
<h2 id="egcr-review-heading">Thanks for considering leaving a review</h2>
<p>By opting in, Google Customer Reviews may send you a brief questionnaire via email, allowing you to rate your purchase experience with us.</p>
<p><a href="...">View your order details</a></p>
</div>
The key CSS selectors you can use are:
#egcr-review-container- the outer wrapper for all the review page content#egcr-review-heading- the main heading#egcr-review-container p- the paragraph text#egcr-review-container a- the "View your order details" link
Adding custom CSS to your theme
To style the review page, add CSS to your Shopify theme:
In your Shopify admin, go to Online Store → Themes
Click Customize on your active theme
Open the Theme settings (the paintbrush icon at the bottom of the left sidebar)
Scroll down to Custom CSS (most modern themes include this field)
Add your CSS rules targeting the selectors above
Click Save
If your theme doesn't have a Custom CSS field in the theme editor, you can add the CSS directly to your theme code by editing the base.css or custom.css file (or equivalent for your theme) under Online Store → Themes → Edit code.
Common styling examples
Fix content hidden behind a deep navigation menu
If your store has a tall or sticky header that overlaps the review page content, add top padding to push the content down:
css
#egcr-review-container{
padding-top: 3em;
}
Adjust the container width
The container defaults to 400px wide and centred. To make it wider or narrower:
css
#egcr-review-container{
width: 600px;
max-width: 90%;
}Adding max-width: 90% ensures the content doesn't overflow on smaller screens.
Change the heading style
css
#egcr-review-heading{
font-size: 1.5em;
color: #333;
}
Style the paragraph text
css
#egcr-review-container p{
font-size: 1em;
line-height: 1.6;
color: #555;
}
Style the "View your order details" link
css
#egcr-review-container a {
color: #1a73e8;
text-decoration: underline;
}
Add vertical spacing around the container
css
#egcr-review-container{
padding-top: 3em;
padding-bottom: 3em;
}
Centre the content on the page
The container is already centred horizontally by default, but if your theme overrides this, you can enforce it:
css
#egcr-review-container {
margin-left: auto;
margin-right: auto;
}
The Google survey popup
After the review page loads, Google displays its own survey opt-in popup. This popup is rendered by Google's own scripts and cannot be styled with CSS. Its appearance is controlled entirely by Google.
You can, however, control where the popup appears on the page. The Opt-in style setting in the app determines the popup position:
Centre - displays as a centered dialog (default, and recommended by Google for the best opt-in rates)
Bottom right - displays in the bottom-right corner
Bottom left - displays in the bottom-left corner
Top right - displays in the top-right corner
Top left - displays in the top-left corner
Bottom tray - displays in a tray along the bottom of the page
You can change this in the app under Settings → Opt-in style. For more details on all available settings, see Configuring Your App Settings.
Need any help?
If you're not sure how to get the page looking right for your store, get in touch via the support chat inside the app and we'll help you with the CSS.