To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

Admin Navigation Links buttons?

Solved
chenster
Shopify Partner
134 5 28

On Shopify dev documentation on app extension, the screenshot showing buttons on the right beside the links.

I could not find anything in the admin app extension to create those buttons.

I'd like to add an external link this way. Was this feature dropped?  

 

Thank you for any input or documentation links I may have missed.

Cartoo
Accepted Solution (1)

Accepted Solutions
chenster
Shopify Partner
134 5 28

This is an accepted solution.

The previous post of a solution is still using the old SDK that is deprecated. 

Here's the new recommended AppBridge documentation doing the same thing.  

https://shopify.dev/tools/app-bridge/actions/titlebar

Cartoo

View solution in original post

Replies 9 (9)
Kevin_A
Shopify Staff
Shopify Staff
318 42 61

Hey @chenster 

I think this is what you are looking for.

Kevin_A | Solutions Engineer @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

chenster
Shopify Partner
134 5 28

I've tried that, but it didn't show up. I'd like to have the button always visible like a 'Help' button that opens a link to app help page. Could it be specific to Shopify theme?

Cartoo
Kevin_A
Shopify Staff
Shopify Staff
318 42 61

Hey @chenster 

Can you link me the partners dash URL for the app you are working on?

Kevin_A | Solutions Engineer @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

chenster
Shopify Partner
134 5 28
chenster
Shopify Partner
134 5 28

Hi @Kevin_A 

I submitted the app an hour ago. 

First, it's rejected (Review reference 23212) with explanation (possible by automated testing)

  1. App must install successfully.
    Your app does not request installation on the shop immediately after clicking "add app". Apps must ask a shop for access when being installed on a shop for the first time, as well as when they are being reinstalled after having been removed. During install or reinstall we expected Oauth to be initiated at https://appstoretest5.myshopify.com/admin/oauth/request_grant but was redirected to https://appstoretest5.myshopify.com/admin/charges/4573298744/request_recurring_application_charge

However, 10 min later, I got another Shopify email says that it is now under review. Then I checked the app status, it is still "Under Review".  

Can I safely ignore the first app reject email?

 

 

Cartoo
Kevin_A
Shopify Staff
Shopify Staff
318 42 61

Hey @chenster 

Maybe I am misunderstanding but it appears you already have 2 links setup in your app:
20-08-nz3bj-vfbdc

Kevin_A | Solutions Engineer @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

chenster
Shopify Partner
134 5 28

Actually, I just want o to have a button like this to the right side of the navigation bar that visible all time. Personal Discount app has this button. 

chenster_1-1597868918856.png

I've tried Admin links but it doesn't show up anywhere. 

Richard

Cartoo
chenster
Shopify Partner
134 5 28

I figure it out. It's AppBridge options

https://www.shopify.com/partners/blog/75776707-how-to-make-the-most-of-the-shopify-embedded-app-sdk

Go to the "Buttons" section.

 

<script type="text/javascript">
  ShopifyApp.ready(function() {
    ShopifyApp.Bar.initialize({
      title: '<%= title %>',
      icon: '/images/logo.png',
      buttons: {
        primary: {
          label: "Save",
          message: 'bar_save'
        },
        secondary: [
          // Dropdown example
          {
            label: "More",
            type: "dropdown",
            links: [
              // Link Button that opens in the app
              {
                label: "Update",
                href: "/update",
                target: "app"
              },
              // Button with a callback function
              {
                label: "Delete",
                callback: function() {
                  alert("destroy")
                }
              }
            ]
          },
          {
            // Link Button that opens in a new window
            label: "Preview",
            href: 'http://<%= shop %>.myshopify.com',
            target: "new"
          },
          {
            label: "Open Modal",
            callback: function() {
              ShopifyApp.Modal.open({
                src: 'http://localhost:3000/modal_content',
                title: 'A new modal',
                width: 'small',
                height: 300,
                buttons: {
                  primary: {
                    label: "OK"
                  },
                  secondary: [{
                    label: "Cancel",
                    callback: function(label) {
                      ShopifyApp.Modal.close();
                    }
                  }]
                }
              });
            }
          }
        ]
      }
    });
    ShopifyApp.Bar.loadingOff();
  });
</script>

 

THIS IS AN EXCELLENT RESOURCE.

For example, the Authentication section talked about using javascript window.top.location.href to ensure doing the redirect in the parent window, not in the iframe to get around X-Frame-Options=DENY. X-Frame-Options=DENY that Many developers had the same issue. 

Cartoo
chenster
Shopify Partner
134 5 28

This is an accepted solution.

The previous post of a solution is still using the old SDK that is deprecated. 

Here's the new recommended AppBridge documentation doing the same thing.  

https://shopify.dev/tools/app-bridge/actions/titlebar

Cartoo