Getting Started
UK merchants can enhance customer trust by displaying their Google store quality directly on their website. This implementation guide walks you through the complete setup process to showcase your store credentials to potential buyers.
Setup Requirements
Implementation Time: 5-10 minutes Prerequisites: Basic HTML editing access or developer assistance
Installation Process
Step 1: Prepare Your Website
Access your website’s HTML editing interface through your content management system. You can either:
- Edit the global template that affects your entire site
- Add the widget to specific pages only
Step 2: Verify HTML Structure
Check that your webpage starts with the HTML5 declaration:
<!DOCTYPE html>
Add this line at the very beginning if it’s missing – this won’t affect your site’s appearance.
Step 3: Add the Widget Code
Insert this script within your page’s <head> section:
<!-- 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 -->
Widget Positioning Options
Basic Positioning
The widget automatically appears in the bottom-right corner. To move it to the bottom-left, update your code:
merchantwidget.start({
region: 'GB',
position: 'LEFT_BOTTOM'
});
Custom Spacing Controls
Fine-tune the widget’s placement using these spacing options:
- sideMargin: Distance from screen edge (36px default)
- bottomMargin: Distance from bottom (36px default)
- mobileSideMargin: Mobile side spacing (16px default)
- mobileBottomMargin: Mobile bottom spacing (46px default)
Advanced Positioning Example
<script type="text/javascript">
merchantWidgetScript.addEventListener('load', function () {
merchantwidget.start({
region: 'GB',
position: 'RIGHT_BOTTOM',
sideMargin: 25,
bottomMargin: 40,
mobileSideMargin: 15,
mobileBottomMargin: 30
});
});
</script>
Complete Implementation Example
Your finished HTML structure should look like this:
<!DOCTYPE html>
<html>
<head>
<title>Your UK Store</title>
<meta charset="UTF-8">
<meta name="description" content="Your store description">
<!-- 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 -->
</head>
<body>
<!-- Your website content here -->
</body>
</html>
Preview Before Publishing
Test your widget implementation using Chrome’s developer tools:
- Load your website in Google Chrome
- Right-click anywhere and select “Inspect”
- Navigate to the Console tab
- Run this command:
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://www.gstatic.com/shopping/merchant/merchantwidget.js';
document.head.appendChild(script);
- Follow with:
merchantwidget.start({});
Best Placement Strategy
Priority Pages
Focus your widget deployment on these high-impact areas:
- Individual product pages (most effective for conversion)
- Main homepage
- Category landing pages
Cross-Device Performance
The widget automatically adjusts for different screen sizes and works seamlessly across desktop computers, tablets, and mobile phones.
User Experience
The widget initially displays for about 2 seconds with full text, then minimizes to just the icon while remaining clickable for detailed information access.
E-commerce Platform Integration
Shopify Stores
Shopify merchants can add the widget through their theme customization area by incorporating the JavaScript code into their template files.
Critical Shopify Warning: Shopify’s system may strip spacing from custom scripts. Verify that all spaces remain intact in your code as they’re required for proper operation.
How the Widget Functions
Display Patterns
- Desktop View: Appears in your selected corner position
- Mobile View: Centers on the screen for optimal visibility
- User Interaction: Clicking reveals expanded store information
- Persistence: Always visible but information panel can be collapsed
Information Source
Widget content pulls from your Merchant Center’s Store Quality program data. Monitor your performance metrics through your Merchant Center dashboard.
Analytics Tracking
Google automatically tracks interaction metrics including widget views and click-through rates for performance analysis.
Technical Considerations
Geographic Restrictions
The widget only displays to visitors in regions where your store operates. If location detection fails or the visitor is outside your service area, nothing appears on the page.
Widget Behavior
Customers cannot permanently remove the widget – they can only minimize the expanded information panel while the badge remains visible.
Region Specification
The ‘GB’ region parameter is mandatory for UK merchants to ensure proper functionality and appropriate content display.
This guide incorporates official Google Merchants documentation to help UK retailers successfully implement store quality widgets on their websites.
