Made in Builder

Made in Builder

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Using Partytown with Shopify

Shopify helps you create your e-commerce site, however, as you add more features, you're adding more JavaScript, and more JavaScript impacts your site speed. Since even milliseconds influence customer engagement, the faster you can make your site, the better.

If you're using Shopify with Builder, you can use Partytown to reap the benefits of apps, libraries, and plugins without sacrificing site speed.

With the Partytown + Shopify plugin, all the coding is done for you and configuration is minimal within the Builder UI.

This document covers:

Prerequisites

How the Partytown plugin works

The Partytown plugin uses a friendly user interface to automate code tasks that include:

  • Setting up Partytown code to be served from the domain of your Shopify hosted site through the Builder Shopify app.
  • Injecting the necessary JavaScript code into your Shopify theme to identify, intercept, and load necessary third-party scripts through Partytown.
  • Setting up and using Builder’s proxy service for any third-party libraries that need to make proxy URL calls.
  • Providing a UI to configure, change and update your Partytown configuration and install it on various themes.

By using the Partytown plugin, you bypass doing this process manually and complete setup in moments.

Installing the Partytown plugin

  1. Go to Integrations.
  2. In the Partytown tile, click the Settings button. Note that you must be on a hosted Shopify space to access the Partytown integration tile.
  3. Select the theme, version of Partytown, and any apps in the dropdown that you'd like to use.
  4. Click the Install button.

The following video shows how to install the Partytown plugin on a hosted Shopify space:

To make changes to the configuration, follow this same process with the addition of your changes and click the Reinstall button. For detailed instructions see Adding more apps, plugins, or libraries.

Testing Partytown with your setup

When you install the Partytown plugin, you might want to test to assess site improvements in a controlled way. For this reason, Enable Partytown for regular users is by default toggled to the off position when you install Partytown.

With this setting off, regular users get your website without Partytown, but you can load Partytown by sending the query param of ?partytown=default.

When you're ready to roll out Partytown for all of your users, toggle this switch to the on position and click the Reinstall button.

Adding more apps, plugins, or libraries

To move any other app, plugin, or library to Shopify:

  1. Go to Integrations.
  2. Click the Settings button on the Partytown tile.
  3. Expand Developer Settings.
  4. Click the Add App Config For Partytown button.
  5. Add additional app configurations by filling out the fields, which are:
  • Name: Name the configuration whatever you like. The name can differ from the actual name that you might use in code. We recommend something you find easy to remember.
  • App Script URL: Provide the URL from which the plugin or library loads. Builder uses this URL to intercept and move the library's code to Partytown.
  • Hostnames to proxy: URLs that the library might make requests to once loaded, and need to be proxied through Builder’s service. For more information, see Proxying Requests in the Partytown documentation.
  • Events and triggers: Add events and triggers, which are data that the library stores on the window object that Partytown needs to reference.

6. Click the Install button.

The following video shows where to find the Add App Config settings.

Moving other scripts to Partytown

For any script, plugin, or library that you manually add to your Shopify theme, you can move it to Partytown by changing the script tag from <script type=”text/javascript”> to:

Editing your <script> tag in this way ensures that Partytown loads your scripts in the web worker.

Tip: Moving other scripts to Partytown might require additional configuration. For more info, see Forwarding Events and Triggers and Proxying Requests.

Next steps

For more information on Partytown, see the Partytown documentation.


Need Expert help?

Submit a project to our partners, BuildQuick, and be matched with a Builder expert.

Submit a project

Was this article helpful?