# Push Notification

## Overview

This documentation will guide you through setting up and using the Push Notification feature in your Shopify store. This feature allows you to send notifications to customers for various order events including creation, updates, cancellation, deletion, fulfillment, and payment, as well as abandoned cart reminders.

## Table of Contents

1. Accessing Push Notification Settings
2. Configuring OneSignal Integration
3. Setting Up Notification Messages
4. Adding Dynamic Variables to Notifications
5. Enabling Push Notifications on Your Theme
6. Understanding the Dashboard Features

## 1. Accessing Push Notification Settings

#### Step 1: Navigate to Push Notification Settings

<div align="center"><figure><img src="/files/55QXnQnsPKUS5dd7G6UC" alt="" width="232"><figcaption></figcaption></figure></div>

1. Log in to your Shopify admin panel
2. Go to the "Apps" section
3. Open the installed WebToNative app
4. Click on "Push notification" in the app menu

#### Step 2: Understand the Available Menu Options

After clicking on "Push notification," you'll see the following sub-menu options:

* Dashboard
* Notification configuration
* Abandoned cart
* History
* OneSignal configuration

<figure><img src="/files/IwWZrhfbu6aMh8R9PJtO" alt=""><figcaption></figcaption></figure>

## 2. Configuring OneSignal Integration

<figure><img src="/files/gWUFoXZc5cwbeH08zyn4" alt=""><figcaption></figcaption></figure>

#### Step 1: Access OneSignal Configuration

1. From the Push notification menu, click on "OneSignal configuration"
2. You'll see a screen with three main fields:
   * Enable App Notification (toggle switch)
   * OneSignal Id (text input)
   * OneSignal Key (text input)

#### Step 2: Enter OneSignal Credentials

1. Toggle "Enable App Notification" to ON
2. Enter your OneSignal Id in the designated field
3. Enter your OneSignal Key in the designated field
4. Click "Save" to store your configuration

#### Step 3: Get OneSignal Credentials (If Needed)

If you don't have your credentials, click the "Don't Know? Steps to follow" link for guidance on obtaining them from OneSignal.

## 3. Setting Up Notification Messages

<figure><img src="/files/M7B1Br8lvi6GDisn6Bff" alt=""><figcaption></figcaption></figure>

#### Step 1: Access Notification Configuration

1. From the Push notification menu, click on "Notification Configuration"
2. You'll see existing notification messages for different order events:

   * ORDERS CREATE
   * ORDERS FULFILLED
   * ORDERS PAID
   * And potentially others

<figure><img src="/files/mU69dkO6t0sbxypiUiXW" alt="" width="375"><figcaption><p>Add/Edit Notiffication Messages Dialog</p></figcaption></figure>

#### Step 2: Edit Existing Notification Messages

1. Click the pencil (edit) icon next to any notification you want to modify
2. Edit the message text in the provided field
3. Click "Save" to update the notification

#### Step 3: Add New Notification Messages

1. Click the "+ Add Notification Message" button at the bottom of the page
2. Select the order status from the dropdown menu (e.g., "Order Cancelled")
3. Enter the notification message in the text field
4. Click "Save" to add the new notification message

## 4. Adding Dynamic Variables to Notifications

<figure><img src="/files/oqK9K7e4qsym8LfyajV3" alt=""><figcaption></figcaption></figure>

#### Step 1: Understand Available Dynamic Variables

When creating or editing notification messages, you can insert dynamic variables to personalize the content:

1. To insert a variable, type "%" in the text field
2. A dropdown will appear showing available variables:
   * id
   * admin\_graphql\_api\_id
   * app\_id
   * browser\_ip
   * (and potentially others depending on the context)

#### Step 2: Use Dynamic Variables in Messages

1. Start typing your message (e.g., "The order %")
2. Type "%" where you want to insert a variable
3. Select the desired variable from the dropdown (e.g., "id")
4. The variable will be inserted as %id% in your message
5. Complete your message (e.g., "The order %id% has been canceled")

#### Step 3: Save Your Configuration

Click the "Save" button to store your notification message with dynamic variables.

## 5. Enabling Push Notifications on Your Theme

#### Step 1: Access Theme Customization

<div><figure><img src="/files/oe8OwWHtXdP9obCUlQE5" alt="" width="228"><figcaption></figcaption></figure> <figure><img src="/files/5wsI9LzKr5r5YvUdbtOT" alt="" width="375"><figcaption></figcaption></figure></div>

1. Go to Online Store > Themes in your Shopify admin
2. Click "Customize" next to your current theme

#### Step 2: Enable Push Notification Block

<figure><img src="/files/DWiPWEyqZYyJcUS31qzD" alt="" width="179"><figcaption></figcaption></figure>

1. Navigate to the App Embeds section in the theme editor
2. Find the Push Notification block
3. Enable the block by toggling it ON
4. Save your changes

## 6. Understanding the Dashboard Features

#### Dashboard

<figure><img src="/files/sPOrN11p6q0TCU4b15J8" alt=""><figcaption></figcaption></figure>

Displays usage statistics showing how many notifications you've sent and your monthly limit.

* Example: "80% You have sent 86 Unlimited notifications. This balance will reset every month."

#### Notification Configuration

<figure><img src="/files/M7B1Br8lvi6GDisn6Bff" alt=""><figcaption></figcaption></figure>

Allows you to set up and manage notification messages for different order events.

#### Abandoned Cart

<figure><img src="/files/Fq9Hbppa8cuKiuEj3y0I" alt="" width="375"><figcaption></figcaption></figure>

Configure settings for abandoned cart notification features.

#### History

<figure><img src="/files/F7YMbvzOL1RqVvD0nrdT" alt=""><figcaption></figcaption></figure>

View a complete history of all sent notifications in a tabular format with pagination.

#### OneSignal Configuration

<figure><img src="/files/gWUFoXZc5cwbeH08zyn4" alt=""><figcaption></figcaption></figure>

Manage your OneSignal integration settings for push notifications.

## Important Notes

* Notifications will only be sent to users if you have configured the corresponding order status with a message.
* The monthly notification limit resets at the beginning of each month.
* Make sure to save your changes after modifying any settings.
* Test your notifications before deploying them to ensure they work as expected.

By following this documentation, you'll be able to fully configure and utilize the WebToNative push notification feature in your Shopify store, enhancing customer engagement and improving the shopping experience.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webtonative.com/shopify/push-notification.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.