The store widget allows merchants to highlight their store quality to shoppers. This helps shoppers easily identify and appreciate reputable stores.
The widgets are designed to provide visual indicators of excellence and quality to businesses who consistently go above and beyond, and demonstrate superior performance and commitment to provide exceptional customer experiences.
On this page
- What are the benefits of using the store widget
- Store widget eligibility
- Types of store widgets
- How to add a store widget
- View your widget before going live
- Where to add a store widget
- Frequently asked questions
What are the benefits of using the store widget
The store widget offers several advantages.
- Enhanced Information:Besides your store rating, the widget can also display other important details like shipping and return policies, customer reviews, and more.
- Improved Design:The store widget features a modern design that seamlessly integrates with most websites.
- Active Development:Google continues to improve the store widget with new features and functionality.
Store widget eligibility
Google will show one of the three versions of store widget depending on your eligibility below:
- Top Quality Store widget: This widget will show if you are a Top Quality Store merchant
- Store Rating widget: This widget will show if you:
- Are not a Top Quality Store merchant
- Have a Google store rating
- Store Quality widget: This widget will show if you:
- Are not a Top Quality store merchant
- Have no store ratings
Note:For shipping and returns, a rating above "Good" is required to be eligible for any store widget. Learn more about shipping and returns in the Store Quality program .
Types of store widgets
There are three widget types:
-
Top Quality Store on Google
Earning a Top Quality Store unlocks this section, showcasing your dedication to outstanding customer service and a high-quality shopping experience. Here, you'll also find a summary of your store's performance through reviews, alongside critical details about your store's service and policies. Learn more About Top Quality Stores .
-
Store rating widget
This version will show if you have store ratings, but are not a Top Quality Store on Google. It displays a summary of your store reviews, and key information about your service and policies.
-
Store quality by Google
This shows if you don’t have store ratings, and are not a Top Quality Store on Google. It shows key information about your service and policies.
How to add the store widget
The instructions to add your store widget 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 widget.
- 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 -->
- 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 '
- Merchants also have the ability to customize the positioning of the widget. 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 isRIGHT_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.
- sideMargin: number of pixels of the widget to the side edge. When the position is set to
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>
- You also have the ability to customize region (optional). If it is not set, the widget falls back to using globalization logic to determine region.
If the shopper is in an unavailable region (which means that the merchant does not have services in the specific region) or shopper location can’t be determined, nothing will be rendered on your website. This is the case when merchants didn’t set regional parameter and globalization logic is being used.
Here are the examples of how to use the region parameter for different regions:
For US merchants
<!-- 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({
region: 'US'
});
});
</script>
<!-- END MerchantWidget Code -->
For IN merchants
<!-- 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({
region: 'IN'
});
});
</script>
<!-- END MerchantWidget Code -->
For CA merchants
<!-- 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({
region: 'CA'
});
});
</script>
<!-- END MerchantWidget Code -->
For AU merchants
<!-- 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({
region: 'AU'
});
});
</script>
<!-- END MerchantWidget Code -->
For GB merchants
<!-- 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({
region: 'GB'
});
});
</script>
<!-- END MerchantWidget Code -->
For JP merchants
<!-- 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({
region: 'JP'
});
});
</script>
<!-- END MerchantWidget Code -->
View your widget before going live
To view what your store widget 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/shopping/merchant/merchantwidget.js'; document.head.appendChild(script);
- After running the previous command, run the following command in the console:
merchantwidget.start({});
Where to add the store widget
You can integrate your store widget into the bottom right or bottom left corner of your website. You have the flexibility to choose the specific pages where the widget will be displayed. We recommend prioritizing your product pages, as this placement can effectively build trust with potential customers and encourage them to proceed with their purchases. To enhance visibility across your site, you can also display the widget on your homepage or other key landing pages. The store widget is designed to be responsive and will function seamlessly on both mobile and tablet devices.
The store widget will typically appear briefly, often for about 2 seconds. Following this initial display, the accompanying text may disappear, while the visual icon of the widget usually remains visible.
Desktop view of a store widget and view when it's clicked or tapped.
Mobile view of a store widget and view when it's clicked or tapped.
If your shoppers are curious about the widget, they can click or tap on it to access more information. A panel will then appear, providing details about what the store widget signifies. If you have inquiries regarding the store widget program and the ratings your store receives.Learn more About the Store Quality program .
Once your shoppers have reviewed the information, they can tap the close iconto close the panel.
- 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.
