The Top Quality Store program recognizes merchants who consistently go above and beyond to give their customers an exceptional shopping experience. Having the Top Quality Store badge conveys quality and trust with shoppers who find it across Google and on a limited set of merchant websites.
If you’re a merchant who has earned a Top Quality Store badge, you can now display it on your website. Learn more about the Top Quality Store badge.
On this page
- How to add your Top Quality Store badge
- Where to add your Top Quality Store badge
- Frequently asked questions
How to add your Top Quality Store badge
The instructions to add your Top Quality Store badge require small updates to your website’s HTML which should take about 5–10 minutes. This may require support from someone familiar with your website content.
- Go to the interface where you can edit the HTML of your website. To do this, choose the step that best applies to you:
- Find the source HTML that applies to all pages on your site.
- Go to the particular page where you would like to display the badge.
- Check if the first line of the page begins with
<!DOCTYPE html>- If not, add
<!DOCTYPE html>at the top of the page. Adding this code won’t impact your website rendering.
- If not, add
- Copy and paste the code below inside the
<head>section of the HTML code-
Optional: By default, the widget will be fixed at the bottom right of your page. If you want to put the widget at the bottom left of your page, replace the yellow section of the code below with
'LEFT_BOTTOM'.
-
<!-- BEGIN MerchantWidget Code -->
<script id='merchantWidgetScript'
src="https://www.gstatic.com/shopping/merchant/merchantwidget.js"
defer>
</script>
<script type="text/javascript">
merchantWidgetScript.addEventListener('load', function () {
merchantwidget.start({
position: 'RIGHT_BOTTOM'
});
});
</script>
<!-- END MerchantWidget Code --- Merchants also have the ability to customize the positioning of the badge. While customizing the positioning, 4 parameters are introduced:
- sideMargin: number of pixels of the widget to the side edge. When the position is set to LEFT_BOTTOM, it's the margin to the left edge, when it is RIGHT_BOTTOM, it's the margin to the right edge. Default to 36
- bottomMargin: number of pixels of the widget to the side edge. Default to 36
- mobileSideMargin: sideMargin when on mobile screen. Default to 16
- mobileBottomMargin: bottomMargin when on mobile screen. Default to 46
Here’s an example of how to customize positioning:
<script id='merchantWidgetScript' src="https://www.gstatic.com/shopping/merchant/merchantwidget.js" defer></script>
<script type="text/javascript">
merchantWidgetScript.addEventListener('load', function () {
merchantwidget.start({
position: 'LEFT_BOTTOM',
sideMargin: 21,
bottomMargin: 33,
mobileSideMargin: 11,
mobileBottomMargin: 19
});
});
</script>After the setup, your HTML should look like the code below. Make sure that your HTML file has <!DOCTYPE html> as its first line:
<!DOCTYPE html>
<html>
<head>
<title>Google Example</title>
<meta charset="UTF-8">
<meta name="description" content="An example HTML page with a head section">
<meta name="keywords" content="HTML, sample, head section">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js" defer></script>
<!-- BEGIN MerchantWidget Code -->
<script id='merchantWidgetScript'
src="https://www.gstatic.com/shopping/merchant/merchantwidget.js"
defer>
</script>
<script type="text/javascript">
merchantWidgetScript.addEventListener('load', function () {
merchantwidget.start({});
});
</script>
<!-- END MerchantWidget Code --> // <- put this code in head section
</head>
<body>
<h1>Welcome to Google </h1>
<p>This is a basic HTML document</p>
<p>Visit the <a href="https://www.google.com">Google homepage</a>.</p>
<script>
function greetGoogle() {
alert('Hello, Google! Have a great day!');
}
greetGoogle();
</script>
</body>
</html>View your badge before going live
To view what your Top Quality Store badge looks like on your website before going live, follow these steps:
- Open your website using Google Chrome.
- Open the Chrome Developer Tool by right-clicking on the page, then click Inspect.
- Run the following command in the console. Copy and paste the code below, then press Enter:
var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://www.gstatic.com/merchant/merchantwidget.js'; document.head.appendChild(script);- After running the previous command, run the following command in the console:
merchantwidget.start({})Where to add your Top Quality Store badge
Your badge can be added to the bottom right or bottom left of your website. You can choose which pages to add this badge to. We recommend placing this on your product page to convey trust to encourage shoppers to move forward with their purchase. If you want to show this badge on more than one page, you can also display it on your root page. The Top Quality Store badge also works on mobile and tablet devices.
The “Top Quality Store on Google” badge appears for about 2 seconds. The text then disappears, while the icon remains.
If your shoppers have questions about this badge, they can click or tap on it to learn more. A panel will open to explain what it means to be a Top Quality Store on Google. If you have questions about the Top Quality Store program and the ratings your store receives, learn more About the Store Quality program.
When your shoppers are done viewing the page, they can tap on the close icon 
- How will the widget and panel render on mobile view as compared to desktop view?
The widget and panel will display on both mobile and desktop. On desktop, you’ll select the location of the widget which is either bottom right or bottom left. On mobile, the widget will display in the center. - My website is managed using Shopify. Am I still able to implement this feature?
Yes. You may refer to ways to integrate a customized CSS or JavaScript file on your website.Note: There’s feedback from Shopify merchants that Shopify will automatically truncate all the spaces in the script. The spaces in the script are intended, so make sure that they’re not truncated. - Where does the data that’s shown in the panel come from? How can I view my program performance?
The data and associated ratings that show in the panel are sourced through the Store Quality program in your Merchant Center account. You can view your Store Quality scorecard in Merchant Center. Learn more About the Store Quality program. - Can customers completely close the widget?
The widget will always be visible. The customer can click on the widget to maximize the panel and when the panel is open, they can click on the close iconto minimize the panel, while the widget remains displayed.
- Does Google track widget engagement data?
Yes, Google collects aggregated data about how people interact with the widget, such as the number of views and clicks on the widget.