How to Navigate From an Admin Block Extension to an Admin Action Extension

Introduction

In Shopify, the complexity of navigation can significantly enhance the user experience. One example of this is the ability to add a button in the Admin Block Extension, which allows users to perform actions without navigating to the “More Actions” menu. This blog explores how you can navigate from an Admin Block Extension to an Admin Action Extension, streamlining workflows and improving usability.

What is an Admin Block Extension and Admin Action Extension?

Before diving into navigation, let’s understand what these two extension types do:Before diving into navigation, let’s understand what these two extension types do:

Admin Block Extension

An Admin Block Extension enables you to add UI elements to specific parts of the Shopify Admin interface. For example, you can embed buttons, text input fields, or information cards directly within the admin interface.

Admin Action Extension

Admin Action Extensions allow developers to introduce new actions within the Shopify Admin, such as performing bulk actions or updating a specific product. These extensions function as a type of operation or button, which may link to external pages or direct users to a custom app page.

Use Case: Navigating Between Admin Extensions

Let’s consider a use case where an Admin Block Extension displays important information to merchants and has a button labeled “Take Action.” When clicked, this button should trigger an Admin Action Extension that performs a specific task, such as updating a product or directing the user to a custom app page.

Setting Up Your Admin Block Extension and Admin Action Extension

To implement this functionality, follow these steps:

1. Create the Extensions
First, use the Shopify CLI to create the Admin Block Extension and Admin Action Extension. You can use the command line to initialize your project and select the type of extension you want to build.

2. Define Extension Types

Choose “Admin Block” for the information display and “Admin Action” for the action button that triggers specific functions when clicked.

Ready to launch your Shopify store? We will create a standout site with our development and app development to build a store that sells.

Contact us now and get your store up and running fast!

Navigating Admin Block Extensions to Our App’s Routes :

While attempting to navigate from the “Advanced Settings” in the Admin Block Extension to specific routes within our app, we encountered a limitation: direct navigation is not possible since the extension components operate within a different library, @shopify/ui-extensions-react/admin.

The new approach is According to shopify documentation we can connect the admin block extension and admin action extension.

Here’s how you can implement this:

• Step 1: In the Admin Block Extension, add a button or link that will serve as the trigger.
• Step 2: When the button is clicked, the corresponding Admin Action Extension will be activated, performing the designated task.
• Step 3: Ensure both extensions are linked through the app’s API, which will handle communication between the two extension types.

Code For Reference 

Below is a simple code example that illustrates how to set up the trigger from an Admin Block Extension to an Admin Action Extension.

Screenshots for Reference

1. Admin Block Extension UI
(Include a screenshot of the Admin Block Extension with the “Take Action” button)

2. Admin Action Extension Triggered
(Include a screenshot showing the result of the action performed once the button is clicked)

Conclusion 

By streamlining navigation within Shopify Admin, you can significantly enhance the merchant’s experience. With a single button click, merchants can quickly access the necessary actions without having to navigate through multiple menus. This approach of linking Admin Block Extensions with Admin Action Extensions simplifies workflows, reduces the need for additional navigation, and improves overall functionality within the app. Customizing and optimizing the Shopify Admin interface in this way helps create a more efficient, user-friendly environment for merchants.