When a customer opts in to receive a Google Customer Reviews survey, they're taken to an app proxy page hosted on your store, 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.
You can do this directly within the app using the Landing page setup screen.
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 layout and appearance of the page using the Custom HTML and Custom CSS fields in the app.
Landing page setup
To customise the review page, go to Landing page setup in the app:
Within the Landing page setup screen, you will find two fields:
Custom HTML
This controls the HTML layout that wraps the review content. The placeholder {{ content_for_page }} is replaced with the review heading, intro text, and opt-in link when the page renders. Place it wherever you want the review content to appear within your custom layout.
The default HTML is:
<div style="width: 400px; margin: 20px auto;" id="egcr-review-container">
{{ content_for_page }}
</div>
You can replace this with your own layout. For example, to add a custom wrapper with additional structure:
<div class="my-review-wrapper">
<div class="my-review-inner">
{{ content_for_page }}
</div>
</div>
Leave this field empty to use the standard layout.
Custom CSS
Add CSS to style your custom layout. This is included as an inline style block on the page, so you don't need to edit your Shopify theme files.
For example, to style the custom wrapper above:
.my-review-wrapper {
max-width: 500px;
margin: 40px auto;
padding: 30px;
background: #f9f9f9;
border-radius: 8px;
font-family: Arial, sans-serif;
}
.my-review-inner {
text-align: center;
}
.my-review-inner h2 {
color: #333;
margin-bottom: 10px;
}
.my-review-inner a {
display: inline-block;
padding: 10px 20px;
background: #1a73e8;
color: #fff;
text-decoration: none;
border-radius: 4px;
}Leave the Custom CSS field empty if you don't need custom styles.
Click Save settings when you're done.
Styling the default layout
If you're using the default HTML layout (or have kept the #egcr-review-container ID in your custom HTML), you can target these selectors in the Custom CSS field:
#egcr-review-container— the outer wrapper for all the review page content#egcr-review-container h2— the main heading#egcr-review-container p— the paragraph text#egcr-review-container a— the "View your order details" link
Common 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:
#egcr-review-container {
padding-top: 3em;
}
Adjust the container width:
#egcr-review-container {
width: 600px;
max-width: 90%;
}Adding max-width: 90% ensures the content doesn't overflow on smaller screens.
Add vertical spacing:
#egcr-review-container {
padding-top: 3em;
padding-bottom: 3em;
}
Change the heading style:
#egcr-review-container h2 {
font-size: 1.5em;
color: #333;
}
Style the paragraph text:
#egcr-review-container p {
font-size: 1em;
line-height: 1.6;
color: #555;
}
Style the "View your order details" link:
#egcr-review-container a {
color: #1a73e8;
text-decoration: underline;
}Centre the content on the page:
The container is already centred horizontally by default, but if your theme overrides this, you can enforce it:
#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 out.