How to defer third-party scripts Shopify themes load before your product photo

A shopper opens your speckled stoneware mug

Someone taps the link to your speckled stoneware mug on their phone, the one with the oatmeal glaze and the little brown flecks. They want to see the mug itself: the speckles, the curve of the handle, how big it looks in a hand. Instead they get the name, the price, and an empty grey box where the photo should be, and the mug turns up a beat later.

One common reason is a single line in a file you may never have opened. When you added a reviews app, you or its setup guide may have pasted a line into your theme that fetches a small program from the reviews company’s own website, so the stars can appear under the mug. That line sits in layout/theme.liquid, the file that wraps every page of your store, and people who build websites call a program like that a third-party script.

How that line is written decides whether the browser waits for it before it gets to the photo. Most store owners go looking for a way to delay it, and the word the browser understands is defer. That one word is how you defer third-party scripts on Shopify when the line is in your theme, and the reviews app stays exactly where it is.

What defer tells the browser about the reviews line

So what is the browser doing when it reaches that line? It reads your page from top to bottom, a bit like a recipe, and the reviews line sits above the mug photo. Shopify’s guide to deferring scripts says that when the browser meets a line like this with neither defer nor async on it, it stops reading, downloads the program, runs it, and only then carries on. async is the other word you might see on a line, and it means that file can run the moment it arrives, out of order.

The same guide puts the cost plainly: nothing below that line is found or drawn until the program finishes, and the mug photo is below it. So the shopper is waiting on the reviews company’s website to answer, the program to arrive, and the program to run, all before the browser even learns there is a photo to fetch.

Adding defer changes one thing about that line. Shopify’s guide says a program marked defer downloads in the background while the browser keeps reading, then runs in page order once the whole page has been read. The browser finds the mug photo on the way down and draws it, and the stars arrive after.

Here is the reviews line before and after. The address is the made-up one Shopify uses in its own example, so yours will name your reviews company instead.

<script src="https://reviews.example.com/widget.js"></script>

<script src="https://reviews.example.com/widget.js" defer></script>

That async word lets the browser keep reading too, but it runs the program the moment it lands, in no fixed order. Shopify’s guide keeps async for a file that stands entirely alone, like a tracking pixel, and says to use defer when the program needs the page or needs another file to run first. The reviews program needs the page, because its whole job is putting stars under the mug, so it gets defer.

Why one word on the reviews line is worth the edit

The photo sells the mug. The stars talk a hesitant shopper into buying it, and nobody reads reviews of a mug they cannot see yet. With defer, both still arrive, just in the order the shopper wants them.

It also costs you nothing you were using. The reviews app stays installed, the stars still show under the mug, and the edit is one word you can take back from the editor’s own history. That is a small change for a line every shopper passes through.

Every shopper on every page, in fact, because the line is in layout/theme.liquid. Shopify’s guide to auditing third-party scripts says a review widget only needs to load on product pages, and it shows the reviews line wrapped in a check so it only runs when the page is a product:

{% if template.name == 'product' %}
  <script src="https://reviews.example.com/widget.js" defer></script>
{% endif %}

With that wrapper, your homepage and your collection pages stop fetching stars they never show. And if the line belongs to a reviews app you have already uninstalled, Shopify’s guide to deferring scripts is clear that removing a script beats delaying it, so delete the line instead.

I know what you’re thinking. If one word works this well, why not add it to every line in the file? Because some lines must not wait. Dawn’s own lines already say defer="defer", and {{ content_for_header }} is Shopify’s own line, which Shopify says you cannot defer.

The other one to leave alone is an A/B test snippet that hides the page until the test picks a version. Shopify’s guide says deferring it flashes the original page first, and if you are not running a test, it says to remove that snippet entirely.

Add defer to the reviews line, then open the mug

Here are the clicks, in the order you will make them. A laptop is easier than a phone for this one, because you will be reading a long file.

1. From your Shopify admin, go to Online Store, then Themes. On the theme you want to change, click the three dots, then Edit code, which is the way in that Shopify’s code editor page describes.

2. In the Layout folder, open theme.liquid. Shopify’s audit guide names this as the file to check for script lines that apps paste in.

3. Look for a line that starts with <script and has an address beginning https:// that names another website, such as your reviews company. Skip the theme’s own lines: in Dawn’s theme.liquid, files like global.js already end in defer="defer", so they are done.

4. On the reviews line, type defer just before the closing >, so it reads like the second line in the example above. If the line already says defer or async, leave it as it is.

5. Click Save in the upper-right corner of the editor. If anything looks wrong afterwards, open the Timeline panel at the bottom right, pick the earlier version, and click Revert contents, all of which the code editor page covers.

Now open the live mug page from a normal link, the way a shopper would, rather than from the editor. The speckled mug should be on screen first, with the stars filling in under it a moment later. Scroll down to the reviews and open one, so you know the program still runs.

Then right-click anywhere on the page and choose View page source, which shows the page exactly as your store sent it. Search that page for your reviews company’s address, the same check Shopify’s audit guide uses, and the reviews line should now contain defer.

But here’s the catch. If the reviews company’s address is not a line in layout/theme.liquid, stop editing. Apps that add their program through Shopify’s ScriptTag API are not a line in your theme at all, and Shopify’s guidance says to ask the app developer to use defer instead.

If the stars come from a switch in the theme editor instead, that is the App embeds list in the post on why a Shopify store is slow. If the thing landing ahead of the mug is an email popup, the Klaviyo post covers that program.

The program you cannot reach from the code editor is where Whoosh comes in. Smart App Loading sequences third-party scripts so they do not race the product image. Whoosh’s pricing page lists Smart App Loading at US$99 a month, with a 7-day free trial and no code required. The same plan is on the Shopify App Store. It works alongside your reviews app, so nothing gets uninstalled, and it does not copy your theme.

Whichever way the stars get there, the test is the one you just ran. Open the mug, and the speckles should be on screen before the stars.