Site-wide widgets on Shopify
Every Shopify storefront page — home, collection, product, cart, blog, the 404 — is rendered through a single layout file called `layout/theme.liquid`. Paste the snippet just before its closing body tag and the widget is on all of them at once, with no app installed, no extra permissions granted and nothing added to your app bill. What that file does NOT cover is checkout, and that is not a limitation of this widget: Shopify has closed custom code on checkout to everyone. `checkout.liquid` was Plus-only to begin with and has since been retired in favour of Checkout Extensibility, so no theme edit of any kind reaches those pages any more. Plan for the widget to stop at the cart, which is usually where you want a chat button or a promotional bar to stop anyway.
Build and style the widget in the Zyff widget builder, then follow the Shopify steps below to put it on every page.
How to add a site-wide widget to Shopify
Build the widget and copy the code
Set the widget up in any Zyff builder and copy the embed code — one <div> and one <script> tag. A floating widget positions itself, so the div does not need to be anywhere in particular.
Duplicate your live theme first
In Shopify admin go to Online Store > Themes, open the ... menu on your live theme and choose Duplicate. Editing the copy means a mistake is one click away from being undone, and you keep a known-good version of the file you are about to change.
Open layout/theme.liquid
On the duplicate, choose ... > Edit code. In the Layout folder open theme.liquid. This one file wraps every storefront template, which is why a single paste here reaches all of them.
Paste just before </body>
Scroll to the bottom of the file, put the snippet on its own line immediately before the closing </body> tag, and click Save. Placing it last means the widget's script never delays your product images or your theme's own JavaScript.
Preview, then publish
Use Preview on the duplicated theme and click through a product page, a collection and the cart. When it looks right, publish the duplicate. Shopify's storefront cache means a change can take a minute to appear — a hard refresh settles it.
Shopify-specific things worth knowing
Checkout is out of reach for everyone now
theme.liquid does not render checkout, and the old checkout.liquid route has been retired in favour of Checkout Extensibility — so no theme edit puts a widget on the checkout pages, on any plan including Plus. Anything you need there has to be a checkout UI extension.
The password page uses a different layout
A pre-launch store's password screen renders through layout/password.liquid, not theme.liquid. If you are testing before launch and the widget is missing, that is why — it will appear the moment the storefront is public.
A theme update overwrites the file
Updating a theme replaces layout/theme.liquid with the vendor's copy, and your snippet goes with it. Keep a note of the change, or re-apply it after every update — this is the single most common way a working widget quietly disappears months later.
Product and collection description fields strip scripts
Shopify sanitises the rich-text description editors, so a script tag pasted there is removed on save. That route works for an inline widget only via a Custom Liquid block on an Online Store 2.0 theme; for a site-wide one, theme.liquid is the answer.
No app, no permissions, no app bill
This is a script tag in your own theme, so nothing appears in your app list, nothing requests access to your orders or customers, and there is no recurring app charge. It also cannot be broken by an app you uninstall later.
Vintage and Online Store 2.0 themes work the same
theme.liquid exists in both. The 2.0 features — sections everywhere, app blocks, Custom Liquid — matter for placing a widget inside a specific template, not for a site-wide one.
Widgets that belong on every page
Frequently asked questions
How do I add code to every page of my Shopify store?
Online Store > Themes > ... > Edit code, open Layout > theme.liquid, and paste the snippet just before the closing </body> tag. That file wraps every storefront template, so one paste covers home, collection, product, cart, blog and error pages.
Will the widget show on checkout?
No, and nothing you can paste into a theme will. Shopify removed custom code from checkout for everyone when it retired checkout.liquid in favour of Checkout Extensibility. The widget appears everywhere up to and including the cart, then stops.
Do I need a Shopify app for this?
No. Any plan can edit theme code, and this is a script tag in your own theme. Nothing appears in your app list, nothing asks for access to orders or customer data, and there is no recurring app charge.
Will a theme update remove it?
Yes, if you update the theme itself — the update replaces layout/theme.liquid with the vendor's version. Re-apply the snippet after updating, and duplicate the theme before you edit so you always have the previous file to copy from.
Where exactly in theme.liquid should it go?
On its own line immediately before </body>, at the very bottom. Putting it in the <head> makes the script compete with your product images for bandwidth on first paint for no benefit — the widget has nothing to render until the page exists.
Can I show it on some pages but not others?
Yes, with a Liquid condition around the snippet. For example wrapping it in {% unless template contains 'cart' %} ... {% endunless %} keeps a promotional popup off the cart page, where it costs you sales rather than earning them.