skip to Main Content

I’m building a Shopify App using this template: https://github.com/Shopify/shopify-app-template-node/tree/cli_three and I was wondering how I’m able to get the URL of the shop that is using my app (means the URL of the document outside the iFrame). I had a working approach using location.ancestorOrigins (https://developer.mozilla.org/en-US/docs/Web/API/Location/ancestorOrigins), but since this is not compatible with Firefox, I was wondering if there is another approach. Thanks in advance for your help!

2

Answers


  1. Chosen as BEST ANSWER

    Okay, so I came up with a solution by myself, but thanks for your help @TwistedOwl and @David Lazar. I post my code here in case anyone has the same problem in the future:

    import {useAppBridge} from "@shopify/app-bridge-react";
    
    function DemoPage() {
        const bridge = useAppBridge();
        const shopUrl = bridge.hostOrigin.replace('https://', '').replace('www.', '');
        console.log(shopUrl);
    }
    

  2. All calls to your App provide a shop parameter (and now a host parameter too) ensuring you always know the shopify store using your App. There are zero situations where your App is called without the shop parameter being part of the equation from Shopify.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search