Skip to main content

Hiding the Google Store Widget on specific pages

Written by Steve Jones

The Google Store Widget (seller rating badge) is delivered as a theme app embed, which means it appears on every page of your store by default. There's no built-in setting to exclude it from individual pages, however, you can hide it on specific pages by adding a small piece of CSS to your theme.

Why you might want to do this

There are a few common reasons merchants choose to hide the widget on certain pages:

  • Home page - if you feel that the widget competes with hero banners, promotional content, or carefully designed landing sections, and prefer a cleaner first impression.

  • Cart page - the widget can be a visual distraction when the customer is in the process of completing a purchase.

  • Landing pages - pages built for a specific campaign or promotion may have a focused design where an extra floating element feels out of place.

  • Blog posts or editorial content - the floating widget can overlap with text-heavy layouts, particularly on mobile.

How it works

Shopify themes apply a CSS class to the <body> element that reflects the current page template. You can use this class to target the widget's iframe (#merchantwidgetiframe) and hide it with CSS on specific pages only.

The widget itself is rendered by Google inside an iframe with the ID merchantwidgetiframe. Combining this with Shopify's template-based body classes gives you precise control over where it appears.

Adding the CSS to your theme

  1. In your Shopify admin, go to Online Store → Themes.

  2. Click Customize on your active theme.

  3. In the Theme Customizer, open Theme settings (the paintbrush/gear icon in the left sidebar).

  4. Scroll down to the Custom CSS section.

  5. Paste the relevant CSS snippet from the examples below.

  6. Click Save.

Examples

Hide on the home page

body[class*="template-index"] #merchantwidgetiframe {   
display: none !important;
}

Hide on all blog pages (index and individual articles)

body[class*="template-blog"] #merchantwidgetiframe,
body[class*="template-article"] #merchantwidgetiframe {
display: none !important;
}

Hide on the cart page

body[class*="template-cart"] #merchantwidgetiframe {
display: none !important;
}

Hide on a specific page template (e.g. a "Contact us" page)

body[class*="template-page"] #merchantwidgetiframe {
display: none !important;
}

Please note:

template-page applies to all pages created under Online Store → Pages. If you only want to target a single page, you'll need to check whether your theme includes a more specific class (such as one based on the page handle). Inspect the <body> element in your browser's developer tools to see exactly which classes are available.

Hide on collection and product pages

body[class*="template-collection"] #merchantwidgetiframe, body[class*="template-product"] #merchantwidgetiframe {
display: none !important;
}

Combine multiple templates

You can combine any of the above into a single rule:

body[class*="template-index"] #merchantwidgetiframe, body[class*="template-cart"] #merchantwidgetiframe,
body[class*="template-blog"] #merchantwidgetiframe {
display: none !important;
}

Good to know

  • These CSS rules hide the widget visually, but the Google script still loads on those pages. This has no meaningful impact on page performance, the script is small and loads asynchronously.

  • The body class names used here (template-index, template-product, etc.) are standard across Shopify themes, but some heavily customised themes may use different conventions. If the CSS doesn't work, inspect the <body> element in your browser's developer tools to check the exact class names your theme uses.

  • If you're using a Shopify 2.0 theme with alternate templates (e.g. a custom "Landing page" template), the body class will reflect that template name, and you can target it the same way.

Need any help?

If you need help identifying the right template class for your use case, get in touch with our support team and we'll help you get it set up.

Did this answer your question?