The Shopify Dawn theme uses a Publish/Subscribe (Pub/Sub) event system that lets components communicate through events
Parts of the theme can listen for updates (like cart changes or variant switches) and react automatically without being directly connected or being in the same file.
Understanding Events with a Simple JavaScript Example
When reading this, you’re probably already familiar with standard JavaScript events — like click events.
Every HTML element can publish events, and you can subscribe to them using addEventListener().
First, you define the event type (e.g. "click"). Second, you pass a callback that runs when the event fires.
ELEMENT.addEventListener("click", (event) => {
console.log("I was clicked");
});
So in the example above we'll see a console log message whenever the element is clicked.
JavaScript also passes an event object with useful data like:
- clicked element
- mouse position (x/y)
- event type
- timestamp
And other data relevant to the event.
If you want to log the event data you can use the codesnippet down below.
ELEMENT.addEventListener("click", (event) => {
console.log(event);
});
This is basically the same idea as Pub/Sub.
The element publishes an event, and any number of listeners can react to it and retrieve the event data.
What Are Pub/Sub Events?
Whenever you work with events, the structure is always the same:
Subscribe → event name + callback
- You define which event you want to listen to
- You provide a callback function that runs when the event occurs
Publish → event name + data
- You trigger an event by its name
- You optionally send data along with the event
-
When working with the Dawn theme, you’ll see code that either publishes or subscribes to events.
If we take a look at the code snippet that publishes variant-change event for example, we can see the same pattern:
- Parameter 1: Event name (for example, "option value selection change")
- Parameter 2: Event data (such as the target element and the newly selected option value)
publish(PUB_SUB_EVENTS.variantChange, {
data: {
sectionId: this.sectionId,
Html,
Variant,
},
});
On the other side, files like cart.js subscribe to events such as cart updates and run logic whenever those events occur.
- Parameter 1: Event name (for example, cart update)
- Parameter 2: Callback function (runs when the event occurs, also using the eventdata)
subscribe(PUB_SUB_EVENTS.cartUpdate, (event) => {
if (event.source === 'cart-items') {
Return;
}
this.onCartUpdate();
});
What Is the keyword PUB_SUB_EVENTS
Many developers get confused by the PUB_SUB_EVENTS keyword because it looks special.
In reality, it is simply a constant object in JavaScript.
Writing variable names in ALL CAPITAL LETTERS is a common naming convention used to indicate that the value should not be changed.
In Shopify’s constants.js file, PUB_SUB_EVENTS is used to store all Pub/Sub event names in one place.
These constants are then reused across the theme to keep event names consistent and avoid hard-coded strings.
Ex:
const PUB_SUB_EVENTS = {
cartUpdate: 'cart-update',
quantityUpdate: 'quantity-update',
optionValueSelectionChange: 'option-value-selection-change',
variantChange: 'variant-change',
cartError: 'cart-error',
};
Using constants instead of hard-coding event names in multiple places is a best practice because you define the value only once.
If the event name ever needs to change, you can update it in a single file instead of searching through the entire codebase.
This approach makes the code easier to maintain and reduces the risk of bugs.
How Developers Can Use Pub/Sub Events
As a developer, you can subscribe to existing Dawn events and add your own logic.
Subscribing already allows you to build dynamic features such as:
- Updating product information when a variant changes
- Creating a free shipping progress bar based on cart updates
- Reacting to cart changes without modifying cart logic directly
This makes the theme more flexible and easier to extend.
If you've built custom sections or custom element that need to communicate with other places in a theme you can also publish your own types of events of course.
If you want to see all of this in action, or gain a deeper understanding for how the PUB/SUB Methods work behind the scenes (actually interesting to know), then check out the full video right here: