For subtitles in your language, turn on YouTube captions. Select the Settings icon at the bottom of the video player, then select Subtitles/CC and choose your language.
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
- How to remove old code widget
- View your widget before going live
- Performance per region
- Where to add a store widget
- How to remove store widget code
- 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 About the Store Quality program.
Types of store widgets
There are 3 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://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://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://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://google.com">Google homepage</a>.</p>
<script>
function greetGoogle() {
alert('Hello, Google! Have a great day!');
}
greetGoogle();
</script>
</body>
</html>
- The store widget is available globally, and you can also customize the region of the store insights the widget displays (optional). If a region is not set, the widget will use globalization logic to determine the shopper's region and show insights relevant to their location.
If the shopper is in an unavailable region (which means that the merchant doesn’t 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 don’t set a regional parameter and globalization logic is used.
Performance per region
The performance data displayed in the widget is determined by either the region you specify or the shopper's location, if no region is set. The widget will only be displayed if there is enough performance data available for the determined country. For example, if a shopper is in a country where you don’t have sufficient performance metrics, the widget will not be rendered on your website.
There are three versions of the store widget:
- Top Quality Store (TQS): This version is available only to eligible merchants in countries US, IN, CA, AU, GB, and JP.
- Store Ratings (SR): This version is available globally to eligible merchants with store ratings and good rating for shipping and returns quality.
- Generic: This version is available globally for merchants who do not meet the criteria for the TQS and SR versions yet but still have good ratings for shipping and return quality.
The following table describes how to use the region parameter for different regions by adding the region variable with your site-specific, dynamic values:
| Variable | Required? | Description |
| REGION | Optional | The 2 character region code of the store insights the Widget displays. Example values: “US”, “CA”, “AU” |
Below is an example of how to use region parameters for US merchants:
<!-- BEGIN MerchantWidget Code -->
<script id='merchantWidgetScript'
src="https://gstatic.com/shopping/merchant/merchantwidget.js"
defer>
</script>
<script type="text/javascript">
merchantWidgetScript.addEventListener('load', function () {
merchantwidget.start({
region: 'US'
});
});
</script>
<!-- END MerchantWidget Code -->
How to remove old code widget
- 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.
- Delete the following HTML to remove the widget.
Note: A comment alone will remove the widget for both Shopify and non-Shopify merchants. However for Shopify merchants, this may prevent you from being able to go to the next step to activate your store widget extension.
<!-- BEGIN MerchantWidget Code --><script id='merchantWidgetScript'src="https://gstatic.com/shopping/merchant/merchantwidget.js"defer></script><script type="text/javascript">merchantWidgetScript.addEventListener('load', function () {merchantwidget.start({merchant_id: MERCHANT_ID,position: ‘POSITION’});});</script>
Note: If you are a Shopify merchant using the 'Google & YouTube’ app, learn more about how to Enable Store Widgets in the Google & YouTube app.
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://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 icon 
How to remove store widget code
- Go to your website's HTML code.
- Locate the Google Customer Review (GCR) badge code.
- Delete the following HTML to remove the widget.
Commenting out this code will also remove it from your website.
<script src="https://apis.google.com/js/platform.js?onload=renderBadge" async defer></script><script>
window.renderBadge = function() {
var ratingBadgeContainer = document.createElement("div");
document.body.appendChild(ratingBadgeContainer);
window.gapi.load('ratingbadge', function() {
window.gapi.ratingbadge.render(ratingBadgeContainer, {"merchant_id": 0});
});
}
</script>
- 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?
If you are a Shopify merchant using the 'Google & YouTube’ app, learn more about how to Enable Store Widgets in the Google & YouTube app . - 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.