---
updatedAt: 2025-08-01T13:42:44.000Z
agentTools:
  projectIndex: https://docs.wonderpush.com/llms.txt
---

# Magento Web Push Notifications

How to set up Web Push notifications on Magento websites in minutes

## Easy install web push on Magento

Setting up push notifications for your Magento website is very easy. Web push notifications are the ideal solution to re-engage users and bring them back to your website.

Estimated setup time: 10 minutes

If you haven't already, [sign up for a free account on wonderpush.com](https://dashboard.wonderpush.com/account/signup?prefill_platforms=Web\&prefill_webIntegrationType=Magento\&prefill_appName=\&prefill_siteName=\&utm_source=Documentation).

> 📘 This guide is for Magento websites. For typical websites, follow this <a href="https://docs.wonderpush.com/docs/web-push-notifications-quickstart" title="Install Browser push notifications"> How to set up Web push</a>

## Before we start: create your project

If you haven't already, [sign up for a free account on wonderpush.com](https://www.wonderpush.com/).

Click on *New Project*:

<img class="screenshot" width="239" src="https://files.readme.io/6fc4e01-Screen_Shot_2019-01-17_at_15.11.55.png" />

Choose a name for your project and select *Website* as a platform then click *Create*:

<img class="screenshot" src="https://files.readme.io/4445663-Screen_Shot_2019-01-17_at_14.58.11.png" width="720" />

> 📘 Already have a project?
>
> Just add the *Website* platform to any existing project by going to *Settings*, selecting the first tab named after your project and clicking *Edit*. You'll be presented a form that lets you add a platform.

## Step 1. Fill-in website information

Choose **Magento** as your setup type:

<Image align="center" width="80%" src="https://files.readme.io/0523c99-Screenshot_2020-06-22_at_17.47.24.png" />

Then fill in your website information:

<Image align="center" width="80%" src="https://files.readme.io/95e829d-Screen_Shot_2019-06-28_at_15.05.15.png" />

**Site name**\
Enter the name of your website. This name might be displayed when users subscribe to push notifications.

**Site URL**\
Enter the base URL of your site (e.g. `https://example.com`). This will be the default URL users will be redirected to when they click on a notification.
If your site is accessible from both `www.` and non-`www.` URLs (e.g. `example.com` and `www.example.com`) we recommend you redirect traffic to one of the URLs and use that to fill-in the URL field.

**HTTPS notification domain**\
Your push notification domain will be displayed in every notification you send:\ <img src="https://files.readme.io/d3843e5-notif.png" width="350" />
In this example, the notification domain is `mywebsite.by.wonderpush.com`.
When users subscribe to push notifications, they grant your domain the permission to send them push notifications. When you change the push notification domain, users have to subscribe again!

For these reasons, it is especially important to choose the right push notification domain from the start.

**Enter Icon**\
Enter the URL to your website icon or choose a file from your computer. Your website icon will be displayed in notifications. It should be a square image file. Prefer HTTPS.

## Step 2. Configure subscription prompts

In this section, you can configure subscription prompts for your website. Subscription prompts are ready-made user-interfaces you can use to let users subscribe to push notifications.

To activate a subscription prompt, simply click the switch in front of its name so that it shows as **ON**. To customize it, click on **Customize**.

<Image align="center" width="80%" src="https://files.readme.io/06074c4-Screen-Shot-2019-06-04-at-14.26.43.png" />

You can find out more about subscription prompts [in our dedicated guide](https://docs.wonderpush.com/docs/subscription-prompts).

Hit *Save*.

## Step 3. Copy code

In this step we'll add the WonderPush SDK to your Magento site.

Copy the Javascript code to your clipboard:

<Image align="center" width="80%" src="https://files.readme.io/0a84598-Screen_Shot_2019-06-04_at_14.46.42.png" />

You just have to **paste** your WonderPush snippet code into the Header section, between <head> and </head>.

1. Log into your **Magento store**.
2. Go to **CONTENT > Configuration**.

<Image align="center" width="80%" src="https://files.readme.io/a87f90b-screenshot_2020-06-29_at_09.30.14.png" />

3. **Choose Default Store view** and **Click Edit**

<Image align="center" width="80%" src="https://files.readme.io/d341796-screenshot_2020-06-29_at_09.30.27.png" />

4. Paste the JavaScript snippet in the **Scripts and Stylesheets** input field

<Image align="center" width="80%" src="https://files.readme.io/251069b-screenshot_2020-06-29_at_09.33.06.png" />

5. Click **Save Configuration**

## Step 4. Upload SDK files

1. **Download** the [WonderPush SDK files](https://www.wonderpush.com/downloads/wonderpush-sdk-files.zip).

2. **Unzip** the WonderPush SDK files. There should be two files:\
   <https://yoursite.com/wonderpush.min.html>
   <https://yoursite.com/wonderpush-worker-loader.min.js>

3. Download the WonderPush SDK files **to the top-level root of your site directory**, making sure they are publicly available.

## Receive your first push!

Head over to your Magento site and refresh the page until you see the [subscription dialog](https://docs.wonderpush.com/docs/subscription-prompts#html-dialog) and click the *Subscribe* button:

<img src="https://files.readme.io/c8dffc2-dialog.jpg" width="450" />

Wait a couple of minutes and receive the [default welcome notification](https://docs.wonderpush.com/docs/default-welcome-notification):

<img src="https://files.readme.io/d3843e5-notif.png" width="350" />

> 👍 Congratulations, you're done!