Skip to main content

Hide Header and Footer using Appmaker Web SDK

This guide will help you hide the header and footer of your website when the user is inside the Appmaker WebView. You can also use the Appmaker Web SDK to do custom actions. For example, you can use the Appmaker Web SDK to open the cart page, open the product page, and get the platform.

Let's get started by adding the Appmaker Web SDK to your shopify website.

Use Appmaker Web SDK inside the theme.liquid file of your Shopify theme​

Import the Appmaker Web SDK using the script tag. You can import the Appmaker Web SDK using the following script tag.

<script src="https://unpkg.com/@appmaker-xyz/web-sdk@latest/dist/index.umd.js"></script>

You can use the following code to check if the code is running inside the Appmaker WebView.

<script>
    document.addEventListener("DOMContentLoaded", function() {
    setTimeout(function() {
    if (AppmakerWebSdk.isAppmakerWebview()) {
      alert("This code is running inside the Appmaker WebView");    // to test if the code is running inside the Appmaker WebView      
    }
    },1000);
});
</script>

  1. Find your theme.liquid file in your theme folder.

  2. Add the following code to your theme.liquid file.

<script src="https://unpkg.com/@appmaker-xyz/web-sdk@latest/dist/index.umd.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
    setTimeout(function() {
    if (AppmakerWebSdk.isAppmakerWebview()) {
      alert("This code is running inside the Appmaker WebView");
      // Hide header and footer by class name if it is inside appmaker webview
      var header = document.getElementsByClassName('header')[0];
      if (header) header.style.display = 'none';
      var footer = document.getElementsByClassName('footer')[0];
      if (footer) footer.style.display = 'none'; 
    }
    },1000);
});
</script>
  1. Save the file.

You can refer to the Appmaker Web SDK documentation to learn more about Appmaker Web SDK methods.